style: adjustments for responsiveness, mobile fixes

inovex · Jul 30, 2024 · 80c40c6 · 80c40c6
1 parent 54029ce
commit 80c40c6
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 124 deletions.
diff --git a/assets/landingpage_hero.png b/assets/landingpage_hero.png
diff --git a/condensing/index.html b/condensing/index.html
@@ -2,9 +2,10 @@
 <html lang="de">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport"
+    content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
   <title>Design Patterns - Overlapping Sidebar</title>
   <link rel="stylesheet" href="style.css">
 </head>

diff --git a/condensing/style.css b/condensing/style.css
@@ -65,43 +65,46 @@ a {
 
 .layout {
   display: grid;
-  grid-template-rows: 100vh;
-  grid-template-columns: minmax(100px, 0.2fr) 1fr;
+  grid-template-rows: 100dvh;
+  grid-template-columns: 100px 1fr;
 
-  >nav {
+  > nav {
     container-type: inline-size;
     container-name: sidebar;
 
-    background: #1A191F;
+    background: #1a191f;
     color: white;
-    padding: 30px;
+    padding: 12px;
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
     align-items: flex-start;
 
-    >img:first-child {
+    > img:first-child {
       margin: 24px 0 42px 0;
       transform: translateX(-12px);
+      width: 100px;
+      height: auto;
     }
 
-    >ul {
+    > ul {
       list-style: none;
       display: flex;
       flex-flow: column nowrap;
       flex: 10;
       gap: 12px;
       padding: 0;
       margin: 0;
+      align-self: center;
 
-      >li {
+      > li {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
         gap: 16px;
-        padding: 13px 16px 13px 0;
+        padding: 13px 16px;
 
-        >a {
+        > a {
           display: flex;
           align-items: center;
           gap: 16px;
@@ -110,13 +113,13 @@ a {
     }
   }
 
-  >main {
+  > main {
     display: grid;
     grid-template-rows: min-content 1fr;
     grid-template-columns: 1fr auto;
-    overflow: hidden;
+    overflow: auto;
     gap: 16px;
-    padding: 0 42px;
+    padding: 0 24px;
 
     &:has(aside[style*="display: none;"]),
     &:not(:has(aside)) {
@@ -127,33 +130,33 @@ a {
       grid-column: 1 / 2;
       margin-top: 42px;
 
-      >h1 {
+      > h1 {
         white-space: nowrap;
         margin-bottom: 4px;
       }
 
-      >sub {
+      > sub {
         color: #888;
       }
     }
 
-    >ul {
+    > ul {
       container-name: list;
       container-type: inline-size;
       grid-row: 2 / 3;
       list-style: none;
       padding: 0;
       margin: 0;
       display: grid;
-      border: 1px solid #EAECF0;
+      border: 1px solid #eaecf0;
       border-radius: 12px;
       grid-template-rows: repeat(auto-fill, minmax(30px, 1fr));
       grid-template-columns: min-content auto auto auto;
       height: fit-content;
       gap: 0 12px;
       overflow: hidden;
 
-      >li {
+      > li {
         --border-width: 2px;
         --border-radius: 8px;
 
@@ -166,7 +169,8 @@ a {
         border-top-color: transparent;
         padding: 6px;
         cursor: pointer;
-        transition: background-color 0.25s ease-in-out, transform 0.1s ease-in-out;
+        transition: background-color 0.25s ease-in-out,
+          transform 0.1s ease-in-out;
 
         &.list-header {
           &:hover {
@@ -191,24 +195,24 @@ a {
           background-color: #e8e8e8;
         }
 
-        >img {
+        > img {
           border-radius: 50%;
         }
       }
     }
 
-    >aside {
+    > aside {
       view-transition-name: details;
       grid-row: 1 / 3;
       display: none;
       width: 250px;
       border-top: none;
       border-bottom: none;
       border-right: none;
-      border-left: 1px solid #EAECF0;
+      border-left: 1px solid #eaecf0;
       margin-right: -42px;
 
-      >.details__layout {
+      > .details__layout {
         --padding: 12px;
 
         display: flex;
@@ -225,11 +229,11 @@ a {
             font-size: 1.25rem;
           }
 
-          >.close {
+          > .close {
             border-radius: 50%;
             border: none;
             padding: 0.5rem;
-            background: url('../assets/close.svg');
+            background: url("../assets/close.svg");
             background-repeat: no-repeat;
             background-position: center;
             width: 2rem;
@@ -243,13 +247,13 @@ a {
           }
         }
 
-        >.presentation {
+        > .presentation {
           --product-size: 96px;
 
           position: relative;
           margin-bottom: calc(var(--product-size) / 2);
 
-          >img.hero {
+          > img.hero {
             width: auto;
             height: 120px;
             margin-left: calc(-1 * var(--padding));
@@ -264,7 +268,7 @@ a {
             left: 0;
             transform: translate(10%, 50%);
 
-            >img.product {
+            > img.product {
               position: absolute;
               width: var(--product-size);
               height: auto;
@@ -279,59 +283,58 @@ a {
               }
             }
 
-            >img.verified-badge {
+            > img.verified-badge {
               position: absolute;
               bottom: 0;
               right: 0;
             }
           }
         }
 
-        >.header {
+        > .header {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 4px;
           margin: 16px 0;
 
-          >.headline {
+          > .headline {
             display: flex;
             flex-flow: row wrap;
             align-items: center;
             gap: 8px;
 
-            >.name {
+            > .name {
               margin: 0;
               font-size: 1.5rem;
             }
 
             .payment-badge {
               font-size: 0.75rem;
               border-radius: 9999px;
-              border: 1px solid #EAECF0;
-              background: #F9FAFB;
+              border: 1px solid #eaecf0;
+              background: #f9fafb;
               padding: 2px 8px;
               color: #475467;
 
               &::before {
-                content: '• ';
+                content: "• ";
               }
             }
           }
 
-          >sub.email,
-          >sub.order-id,
-          >sub.quantity {
+          > sub.email,
+          > sub.order-id,
+          > sub.quantity {
             font-size: 1rem;
             color: #475467;
           }
         }
 
-
-        >.info {
+        > .info {
           color: gray;
 
-          >h4.about {
+          > h4.about {
             margin: 0;
             font-size: 0.875rem;
             font-weight: 500;
@@ -387,28 +390,31 @@ a {
   }
 }
 
-
-@media screen and (max-width: 1200px) {
+@media screen and (min-width: 1200px) {
   .layout {
-    >nav {
-      >img:first-child {
+    grid-template-columns: 200px 1fr;
+
+    > nav {
+      padding: 30px;
+
+      > img:first-child {
         width: 135px;
         height: auto;
       }
     }
+
+    > main {
+      padding: 42px;
+    }
   }
 }
 
-
 @media screen and (max-width: 768px) {
   .layout {
-    grid-template-columns: 200px 1fr;
-
-    >nav {
-      >img:first-child {
+    > nav {
+      > img:first-child {
         width: 100px;
         height: auto;
-        transform: translateX(0);
       }
     }
   }

diff --git a/index.html b/index.html
@@ -3,6 +3,11 @@
 
 <head>
   <meta charset="UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport"
+    content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
+  <meta name="description" content="A little landingpage showcasing demos of data driven apps with dynamic sidebars." />
+  <meta name="author" content="Daniel Eckelt" />
   <title>Design Patterns Landingpage</title>
 </head>
 
@@ -19,7 +24,7 @@ <h1>Welcome to the Design Patterns Repository 👋</h1>
       <a href="condensing/index.html">Condensing Sidebar Example</a>
     </div>
 
-    <img src="assets/landingpage_hero.png" alt="Design Patterns Hero Image" />
+    <img src="assets/landingpage_hero.png" alt="Design Patterns Hero Image" width="528px" height="300px" />
   </section>
 
 
@@ -47,7 +52,7 @@ <h1>Welcome to the Design Patterns Repository 👋</h1>
 
     .main {
       display: flex;
-      flex-flow: row nowrap;
+      flex-flow: row wrap;
       align-items: center;
       justify-content: center;
       gap: 3rem;
@@ -57,11 +62,18 @@ <h1>Welcome to the Design Patterns Repository 👋</h1>
 
     img {
       display: inline-block;
-      height: 300px;
-      width: auto;
+      height: auto;
+      width: 100%;
       border-radius: 1rem;
     }
 
+    @media (min-width: 768px) {
+      img {
+        height: auto;
+        width: 45%;
+      }
+    }
+
     .links {
       display: flex;
       flex-flow: column nowrap;
@@ -103,4 +115,4 @@ <h1>Welcome to the Design Patterns Repository 👋</h1>
   </style>
 </body>
 
-</html>
+</html>
diff --git a/overlapping/index.html b/overlapping/index.html
@@ -2,9 +2,10 @@
 <html lang="de">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport"
+    content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
   <title>Design Patterns - Overlapping Sidebar</title>
   <link rel="stylesheet" href="style.css">
 </head>