docs: website improvements (#845)

siemens · Nov 20, 2023 · 8d6aea5 · 8d6aea5
1 parent 42e2e6f
commit 8d6aea5
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 36 deletions.
diff --git a/packages/documentation/docusaurus.config.js b/packages/documentation/docusaurus.config.js
@@ -34,10 +34,10 @@ try {
 
 const customCss = [
   ...libCss,
-  require.resolve('./src/css/custom.css'),
-  require.resolve('./src/css/search.css'),
-  require.resolve('./src/css/api-table.css'),
-  require.resolve('./src/css/cards.css'),
+  require.resolve('./src/css/custom.scss'),
+  require.resolve('./src/css/search.scss'),
+  require.resolve('./src/css/api-table.scss'),
+  require.resolve('./src/css/cards.scss'),
 ];
 
 const baseUrl = process.env.BASE_URL || '/';

diff --git a/packages/documentation/src/components/Card.module.css b/packages/documentation/src/components/Card.module.css
@@ -23,21 +23,50 @@
   background-color: var(--theme-color-2);
   margin: 0 1.25rem 1.25rem 0;
   cursor: pointer;
+  text-decoration: none;
+  transition: transform 0.15s ease-in-out;
+
+  @media (max-width: 684px) {
+    width: 100%;
+    margin-right: 0;
+  }
+
+  @media (min-width: 664px) and (max-width: 684px) {
+    max-width: 640px;
+  }
+
+  @media (min-width: 997px) and (max-width: 1087px) {
+    width: 100%;
+  }
+
+  &:hover {
+    transform: scale(1.07);
+    text-decoration: none !important;
+  }
+
 }
 
+
+
 .Card.Auto__Width {
   width: auto;
 }
 
 .Card_big {
   display: flex;
   flex-direction: column;
-  width: 640px;
+  max-width: 640px;
+  width: 100%;
   min-width: 19.375rem;
   height: 60px;
   background-color: var(--theme-color-2);
-  margin: 0 1.25rem 1.25rem 0;
+  margin: 0 0 1.25rem 0;
   cursor: pointer;
+
+  @media (min-width: 994px)  {
+    margin-right: 1.25rem;
+  }
+
 }
 
 .Card.With__Icon {

diff --git a/packages/documentation/src/components/Card.tsx b/packages/documentation/src/components/Card.tsx
@@ -45,39 +45,35 @@ export function Card(
   return (
     <Link
       to={link()}
-      style={{
-        textDecoration: 'none',
-      }}
+      className={clsx(
+        styles.Card,
+        {
+          [styles.Card__Primary]: props.isPrimary,
+          [styles.With__Icon]: props.icon,
+          [styles.Auto__Width]: props.autoWidth,
+        },
+        props.size === 'big' ? styles.Card_big : styles.Card
+      )}
+      style={props.style}
     >
+
       <div
-        className={clsx(
-          styles.Card,
-          {
-            [styles.Card__Primary]: props.isPrimary,
-            [styles.With__Icon]: props.icon,
-            [styles.Auto__Width]: props.autoWidth,
-          },
-          props.size === 'big' ? styles.Card_big : styles.Card
-        )}
-        style={props.style}
+        className={clsx(styles.Label, 'text-h2', {
+          [styles.Full__Height]: !props.icon,
+        })}
       >
-        <div
-          className={clsx(styles.Label, 'text-h2', {
-            [styles.Full__Height]: !props.icon,
-          })}
-        >
-          {props.label}
-          {props.children}
-        </div>
-        {props.icon ? (
-          <>
-            <div className={styles.Splitter}></div>
-            <div className={styles.Icon}>
-              <IxIcon name={props.icon} size="32"></IxIcon>
-            </div>
-          </>
-        ) : null}
+        {props.label}
+        {props.children}
       </div>
+      {props.icon ? (
+        <>
+          <div className={styles.Splitter}></div>
+          <div className={styles.Icon}>
+            <IxIcon name={props.icon} size="32"></IxIcon>
+          </div>
+        </>
+      ) : null}
+
     </Link>
   );
 }

diff --git a/packages/documentation/src/css/api-table.css → ...ages/documentation/src/css/api-table.scss b/packages/documentation/src/css/api-table.css → ...ages/documentation/src/css/api-table.scss
diff --git a/packages/documentation/src/css/cards.css → packages/documentation/src/css/cards.scss b/packages/documentation/src/css/cards.css → packages/documentation/src/css/cards.scss
diff --git a/packages/documentation/src/css/custom.css → packages/documentation/src/css/custom.scss b/packages/documentation/src/css/custom.css → packages/documentation/src/css/custom.scss
diff --git a/packages/documentation/src/css/search.css → packages/documentation/src/css/search.scss b/packages/documentation/src/css/search.css → packages/documentation/src/css/search.scss
@@ -52,3 +52,15 @@
 .aa-Label {
   margin-bottom: 0px !important;
 }
+
+@media (max-width: 500px) {
+  #search_input_react {
+    width: 4em;
+  }
+}
+
+@media (max-width: 400px) {
+  .navbar__search {
+    display: none;
+  }
+}
diff --git a/packages/documentation/src/theme/Navbar/Logo/index.js b/packages/documentation/src/theme/Navbar/Logo/index.js
@@ -42,7 +42,7 @@ export default function NavbarLogo() {
   return (
     <div className="navbar__brand">
       <a href={base} target="_self">
-        <img className="navbar__logo" src={logo}></img>
+        <img className="navbar__logo" src={logo} alt={"Siemens Industrial Experience"} aria-label={"Siemens Industrial Experience"}></img>
       </a>
     </div>
   );