refactor: use justify-content

Closed #38
reuixiy · Dec 17, 2019 · a9ccb77 · a9ccb77
1 parent 288a00d
commit a9ccb77
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 23 deletions.
diff --git a/assets/scss/_common/list.scss b/assets/scss/_common/list.scss
@@ -21,6 +21,7 @@
     margin-top: 1em;
     padding-bottom: 0.5em;
     display: flex;
+    justify-content: space-between;
     align-items: baseline;
     &:hover {
         border-bottom-color: var(--color-primary);

diff --git a/assets/scss/_common/minimal-footer-about.scss b/assets/scss/_common/minimal-footer-about.scss
@@ -2,6 +2,8 @@
     font-size: 80%;
     margin-top: ($fontSize * 5);
     display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     line-height: 2;
     a {
         display: inline-block;
@@ -12,8 +14,6 @@
     }
 }
 
-.about-socials {
-    flex: 1;
-    margin-right: 2em;
-    width: 42%;
+.about-socials, .about-links {
+    max-width: 42%;
 }
diff --git a/assets/scss/_common/minimal-footer.scss b/assets/scss/_common/minimal-footer.scss
@@ -2,23 +2,22 @@
     font-size: 80%;
     margin-top: ($fontSize * 5);
     display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     line-height: 2;
 }
 
-.post-tag {
-    flex: 1;
-    margin-right: 2em;
-    width: 50%;
+.post-tag, .post-category {
+    max-width: 42%;
 }
 
 .post-category {
-    max-width: 50%;
     .active {
         color: var(--color-contrast-high);
     }
 }
 
-.post-tag-link {
+.post-tag-link, .post-category-link {
     display: inline-block;
 }
 

diff --git a/assets/scss/_common/responsive.scss b/assets/scss/_common/responsive.scss
@@ -27,12 +27,10 @@ $maxWidth: $fontSize * (strip-unit($smallerWidth) + 5);
     }
     .menu {
         display: flex;
+        justify-content: space-around;
+        word-break: break-all;
     }
     .menu-item {
-        flex: 1;
         margin: 0;
     }
-    .menu-item-name {
-        display: block !important;
-    }
 }
diff --git a/assets/scss/_common/sw-notification.scss b/assets/scss/_common/sw-notification.scss
@@ -13,11 +13,10 @@
 }
 .app-refresh-wrap {
     display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     color: #fff;
 }
-.app-refresh-wrap label {
-    flex: 1;
-}
 .app-refresh-show {
     height: 3em;
 }
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -230,9 +230,6 @@
 
 @import "_common/list.scss";
 {{ if eq .Site.Params.listDatePosition "right" }}
-    .list-item-title {
-        flex: 1;
-    }
     .list-item-time {
         margin-left: 1em;
     }
@@ -241,9 +238,6 @@
     .list-item {
         flex-direction: row-reverse;
     }
-    .list-item-time {
-        flex: 1;
-    }
     .list-item-title {
         text-align: right;
         margin-left: 1em;