update footer

teonite · Oct 3, 2023 · b7d1229 · b7d1229
1 parent d86c249
commit b7d1229
Show file tree

Hide file tree

Showing 13 changed files with 326 additions and 83 deletions.
diff --git a/scss/components/_footer.scss b/scss/components/_footer.scss
@@ -74,26 +74,40 @@ footer {
       list-style: none;
       padding: 0;
       margin: 0;
-      gap: 10px;
+      row-gap: 12px;
+
+      @include media-breakpoint-up(lg) {
+        gap: 10px;
+      }
 
       li {
         display: flex;
         flex-flow: row;
-        align-items: flex-end;
-        justify-content: flex-start;
         width: 100%;
-        height: 48px;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        @include media-breakpoint-up(lg) {
+          height: 48px;
+          align-items: flex-end;
+        }
 
         a {
-          height: 100%;
           text-decoration: none;
-          @include typography(paragraph);
           cursor: pointer;
           position: relative;
           height: auto;
-
           color: #000;
 
+          @include typography(paragraph);
+
+          font-size: 18px;
+
+          @include media-breakpoint-up(lg) {
+            height: 100%;
+            @include typography(paragraph);
+          }
+
           &:visited {
             color: #000;
           }
@@ -108,11 +122,13 @@ footer {
     }
 
     & > .internal {
+      padding-bottom: 12px;
       @include media-breakpoint-down(lg) {
         grid-row: 2;
         grid-column: 1 / 2;
       }
       @include media-breakpoint-up(lg) {
+        padding: 0;
         grid-row: 1;
         grid-column: 2 / 3;
       }
@@ -134,14 +150,22 @@ footer {
       a {
         position: relative;
 
+        @include media-breakpoint-down(lg) {
+          padding-right: 20px;
+        }
+
         &::after {
           position: absolute;
           display: block;
           content: "→";
-          top: -20px;
-          right: -25px;
+          top: -5px;
+          right: -5px;
           user-select: none;
-          transform: scale(0.6) rotate(-45deg);
+          transform: rotate(-45deg);
+
+          @include media-breakpoint-up(lg) {
+            right: -25px;
+          }
         }
       }
     }

diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
@@ -29,7 +29,11 @@ nav {
     align-self: center;
     justify-content: flex-start;
     box-sizing: border-box;
-    padding: 0 var(--spacing-xl);
+    padding: 0 16px;
+
+    @include media-breakpoint-up(lg) {
+      padding: 0 var(--spacing-xl);
+    }
 
     & > ul {
       display: none;

diff --git a/scss/pages/main.scss b/scss/pages/main.scss
@@ -13,7 +13,7 @@ main {
   }
 
   @include media-breakpoint-up(lg) {
-    padding: 480px 146px 370px 146px;
+    padding: 170px var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
   }
 }
 

diff --git a/src/assets/css/pages/article.css b/src/assets/css/pages/article.css
diff --git a/src/assets/css/pages/article.css.map b/src/assets/css/pages/article.css.map
diff --git a/src/assets/css/pages/contact.css b/src/assets/css/pages/contact.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ main { @@
       }
       @include media-breakpoint-up(lg) {
-        padding: 480px 146px 370px 146px;
+        padding: 170px var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
       }
     }
@@ Expand Down @@