Improve design (#64)

* Refactor user info component styles * Update padding-bottom in article-content class * Refactor padding-bottom in article-content
afnizarnur · Apr 27, 2024 · a2efee5 · a2efee5
1 parent 03768da
commit a2efee5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 62 deletions.
diff --git a/src/assets/styles/components/_userinfo.scss b/src/assets/styles/components/_userinfo.scss
@@ -3,46 +3,14 @@
 	z-index: 100;
 
 	&--inner {
-		padding: 12px 0px;
-	}
-
-	&--version {
-		display: inline-block;
-		width: 100%;
-		padding: 24px 44px;
-		margin-bottom: 144px;
-
-		@include mq-down(lg) {
-			padding: 24px 16px;
-			margin-bottom: 64px;
-		}
-
-		.list {
-			display: flex;
-
-			@include mq-down(md) {
-				flex-wrap: wrap;
-			}
-
-			li {
-				margin-right: 16px;
-			}
+		padding: 12px 0;
 
-			li:nth-child(1) {
-				@include mq-down(md) {
-					flex: 1 0 100%;
-					margin-bottom: 12px;
-				}
-			}
-		}
-	}
-	&--local-time-now-playing {
 		color: var(--text-disabled);
 		justify-content: space-between;
 		display: flex;
 
 		@include mq-down(lg) {
-			padding: 0px 24px;
+			padding: 12px 24px;
 		}
 
 		small {
@@ -67,15 +35,14 @@
 		}
 
 		.commit-code {
-			margin: 0px 24px;
+			margin: 0 24px;
 
 			@include mq-down(sm) {
 				margin: 0;
 			}
 
 			a {
 				margin-left: 4px;
-
 				text-decoration: none;
 				color: var(--text-disabled);
 
@@ -93,8 +60,8 @@
 			margin-left: auto;
 
 			@include mq-down(sm) {
-				margin-bottom: 0px;
-				margin-left: 0px;
+				margin-bottom: 0;
+				margin-left: 0;
 				display: none;
 			}
 

diff --git a/src/assets/styles/pages/_writing.scss b/src/assets/styles/pages/_writing.scss
@@ -1,10 +1,6 @@
 .writing {
 	&.article-content {
-		padding-bottom: 144px;
-
-		@include mq-down(lg) {
-			padding-bottom: 44px;
-		}
+		padding-bottom: 44px;
 
 		@include mq-down(sm) {
 			padding-bottom: 24px;

diff --git a/src/includes/userinfo.njk b/src/includes/userinfo.njk
@@ -5,29 +5,26 @@
                 span="2-11"
                 span-s="row"
                 span-lg="row"
+                class="userinfo--inner"
             >
-                <div class="userinfo--inner">
-                    <div class="userinfo--local-time-now-playing">
-                        <div class="local-time">
-                            {% icon "clock" %}
-                            <small>
-                                <span id="local-time"></span> Serang, Indonesia</small>
-                        </div>
-                        <div class="commit-code">
-                            {% icon "commit" %}
-                            <a
+                <div class="local-time">
+                    {% icon "clock" %}
+                    <small>
+                        <span id="local-time"></span> Serang, Indonesia</small>
+                </div>
+                <div class="commit-code">
+                    {% icon "commit" %}
+                    <a
 					href="https://github.com/afnizarnur/afnizarnur.com"
 					data-umami-event="userinfo-commit-code"
 				>
-                                <small>
-                                    {{ build.hash }}
-                                </small>
-                            </a>
-                        </div>
-                        <div class="now-playing">
-                            <small id="current-song"></small>
-                        </div>
-                    </div>
+                        <small>
+                            {{ build.hash }}
+                        </small>
+                    </a>
+                </div>
+                <div class="now-playing">
+                    <small id="current-song"></small>
                 </div>
             </r-cell>
         </r-grid>