Merge pull request #16 from huijing/bugfix/refactor-footer

Better footer
react-knowledgeable · Jul 17, 2019 · ea143d7 · ea143d7
2 parents d3dbfa9 + d2b6501
commit ea143d7
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/src/components/Footer/s.module.scss b/src/components/Footer/s.module.scss
@@ -3,21 +3,43 @@
     min-width: 16em;
     padding: 1em;
     grid-column: 1 / span 2;
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    margin-top: 3.8326rem;
+    @media (min-width: 518px) {
+      align-items: center;
+      margin-top: initial;
+    }
+    @media (min-width: 1280px) and (max-width: 1599px) {
+      grid-column: 2;
+      grid-row: 3;
+      align-self: end;
+    }
+    @media (min-width: 1600px) {
+      grid-column: 3;
+      grid-row: 2;
+      align-self: end;
+    }
   }
 
   .footer p {
     margin: 0;
-
-    @media screen and (max-width: 518px) {
-      margin-top: 4rem;
+    @media (max-width: 517px) {
+      writing-mode: vertical-lr;
+    }
+    @media (min-width: 1280px) {
       writing-mode: vertical-lr;
     }
   }
 
   .footer div {
-    margin-left: auto;
+    justify-self: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    @media (min-width: 900px) and (max-width: 1279px) {
+      display: block;
+    }
   }
 
   .friendLabel {
@@ -29,8 +51,7 @@
     display: block;
     cursor: pointer;
     border-bottom: none;
-
-    @media screen and (min-width: 900px) {
+    @media (min-width: 900px) {
       display: inline-block;
       margin-right: 1em;
     }

diff --git a/src/components/Layout/s.module.scss b/src/components/Layout/s.module.scss
@@ -10,12 +10,17 @@ header, main {
   @media (min-width: 640px) and (max-width: 1599px) {
     grid-column: 1 / span 2;
   }
-
   @media (min-width: 1600px) {
     grid-column: 1;
   }
 }
 
+main {
+  @media (min-width: 1280px) and (max-width: 1599px) {
+    grid-row: 3;
+  }
+}
+
 aside {
   min-width: 16rem;
   @media (min-width: 640px) and (max-width: 1599px) {
@@ -31,6 +36,7 @@ aside:first-of-type {
     grid-column: 2;
   }
 }
+
 aside:last-of-type {
   @media (min-width: 1600px) {
     grid-column: 3;
@@ -41,21 +47,22 @@ aside:last-of-type {
   padding: 0 10px;
   background: white;
   min-height: 100vh;
-  @media (min-width: 640px) and (max-width: 1599px) {
+  @media (min-width: 640px) {
     margin: 0 20px;
     display: grid;
-    grid-template-columns: 60% 40%;
     grid-column-gap: 5px;
-    grid-template-rows: min-content min-content 1fr;
+  }
+  @media (min-width: 640px) and (max-width: 1279px) {
+    grid-template-columns: 60% 40%;
+  }
+  @media (min-width: 1280px) and (max-width: 1599px) {
+    grid-template-columns: minmax(var(--main-width), 3fr) 1fr max-content;
   }
   @media (min-width: 1600px) {
-    margin: 0 20px;
     grid-template-columns: minmax(var(--main-width), 3fr) minmax(var(--aside-width), 1fr) minmax(var(--aside-width), 1fr);
-    display: grid;
-    grid-column-gap: 5px;
-    grid-template-rows: min-content 1fr;
   }
 }
+
 .logo {
   vertical-align: middle;
   width: 4rem;

diff --git a/src/pages/styles.module.scss b/src/pages/styles.module.scss
@@ -18,6 +18,7 @@
   margin-right: 4px;
   grid-column: 1;
 }
+
 .reachingOutList {
   display: flex;
   justify-content: space-between;
@@ -31,12 +32,15 @@
     grid-row-gap: .5em;
   }
 }
+
 .reachingOutLink {
   border-bottom: none;
 }
+
 .reachingOutLink:hover {
   border-bottom: none;
 }
+
 .reachingOutItem {
   display: none;
   @media (min-width: 380px) {
@@ -46,6 +50,7 @@
     margin-left: .25em;
   }
 }
+
 .reachingOutLogo {
   height: 4rem;
   padding: .5em;