use flex instead of inline to space blocks

vaga · Nov 12, 2022 · 2ae407d · 2ae407d
1 parent 871d3f2
commit 2ae407d
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 13 deletions.
diff --git a/assets/css/components/_app.scss b/assets/css/components/_app.scss
@@ -16,11 +16,14 @@
 }
 
 .app-header-social {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 2em;
   color: $lightest-color;
 
-  a {
-    margin: 0 0.1em;
+  a:not(:last-child) {
+    margin-right: 0.4em;
   }
 }
 

diff --git a/assets/css/components/_icon.scss b/assets/css/components/_icon.scss
@@ -2,5 +2,5 @@
   display: inline-block;
   width: 1em;
   height: 1em;
-  vertical-align: -0.125em;
+  margin-top: -0.125em;
 }
diff --git a/assets/css/components/_pagination.scss b/assets/css/components/_pagination.scss
@@ -10,8 +10,11 @@
 .page-item {
   display: inline-block;
   .page-link {
-    display: block;
-    padding: 0.285em 0.8em;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    width: 1.8rem;
+    height: 1.8rem;
   }
 
   &.active {

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
@@ -2,6 +2,16 @@
   color: $lightest-color;
 }
 
+.post-meta > div {
+  display: flex;
+  align-items: center;
+  font-size: 0.8em;
+
+  > .icon {
+    margin-right: 0.4em;
+  }
+}
+
 .post-content {
   & > pre,
   .highlight {
@@ -30,7 +40,3 @@
     max-width: 100%;
   }
 }
-
-.post-meta {
-  font-size: 0.8em;
-}
diff --git a/assets/css/components/_posts_list.scss b/assets/css/components/_posts_list.scss
@@ -12,6 +12,15 @@
 }
 
 .posts-list-item-description {
-  display: block;
+  display: flex;
+  align-items: center;
   font-size: 0.8em;
+
+  > .icon {
+    margin-right: 0.4em;
+  }
+}
+
+.posts-list-item-separator {
+  margin: 0 0.4em;
 }
diff --git a/assets/css/components/_tags_list.scss b/assets/css/components/_tags_list.scss
@@ -3,8 +3,14 @@
 }
 
 .tags-list-item {
+  display: flex;
+  align-items: center;
   list-style: none;
   padding: 0.4em 0;
+
+  > .icon {
+    margin-right: .4em;
+  }
   &:not(:last-child) {
     border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
   }

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -8,7 +8,7 @@ <h1>{{ .Title }}</h1>
           <span class="posts-list-item-description">
             {{ partial "icon.html" (dict "ctx" $ "name" "calendar") }}
             {{ .PublishDate.Format "Jan 2, 2006" }}
-            -
+            <span class="posts-list-item-separator">-</span>
             {{ partial "icon.html" (dict "ctx" $ "name" "clock") }}
             {{ .ReadingTime }} min read
           </span>

diff --git a/layouts/partials/icon.html b/layouts/partials/icon.html
@@ -1,10 +1,10 @@
 {{- if isset .ctx.Site.Data.m10c.icons .name -}}
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-{{ .name }}">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-{{ .name }}">
   <title>{{ .title | default .name }}</title>
   {{ safeHTML (index .ctx.Site.Data.m10c.icons .name) }}
 </svg>
 {{- else -}}
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-link">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-link">
   <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
   <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
 </svg>