Improve layout (#84)

* Update box-shadow values in social card and article card styles * Refactor user info styles and link truncation
afnizarnur · May 7, 2024 · dd60ace · dd60ace
1 parent 8669b85
commit dd60ace
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/src/assets/styles/components/_social-card.scss b/src/assets/styles/components/_social-card.scss
@@ -34,7 +34,7 @@ body.social-card {
 				width: 350px;
 				height: 350px;
 				position: absolute;
-				filter: drop-shadow(32px 32px 45px rgba(0, 0, 0, 0.1));
+				box-shadow: 15px 15px 45px var(--shadow);
 				border-radius: 24px;
 				top: 20%;
 				right: -44px;

diff --git a/src/assets/styles/components/_userinfo.scss b/src/assets/styles/components/_userinfo.scss
@@ -41,17 +41,23 @@
 				margin: 0;
 			}
 
-			a {
-				margin-left: 4px;
-				text-decoration: none;
-				color: var(--text-disabled);
-
-				&:hover {
-					color: var(--background-default);
-				}
+			small {
+				display: flex;
+				align-items: center;
+				margin: 0;
 
-				small {
+				a {
 					margin: 0;
+					color: var(--text-disabled);
+					text-decoration: none;
+					max-width: 50ch;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					overflow: hidden;
+
+					&:hover {
+						color: var(--background-default);
+					}
 				}
 			}
 		}

diff --git a/src/assets/styles/components/writing/_article-card.scss b/src/assets/styles/components/writing/_article-card.scss
@@ -89,7 +89,7 @@
 			width: 155px;
 			height: 155px;
 			position: relative;
-			filter: drop-shadow(15px 15px 45px var(--shadow));
+			box-shadow: 15px 15px 45px var(--shadow);
 			border-radius: $border-radius-12;
 			top: 20%;
 			transform: rotate(8deg);

diff --git a/src/data/themes.json b/src/data/themes.json
@@ -10,7 +10,7 @@
 			"borderDefault": "#E2E4E5",
 			"surfaceDefault": "#F6F6F7",
 			"textInverseSubdued": "#A1A5A7",
-			"shadow": "rgba(25, 26, 27, 0.1)",
+			"shadow": "rgba(25, 26, 27, 0.2)",
 			"overlay": "rgba(25, 26, 27, 0.4)"
 		}
 	},
@@ -25,7 +25,7 @@
 			"borderDefault": "#4D5154",
 			"surfaceDefault": "#2F3032",
 			"textInverseSubdued": "#A1A5A7",
-			"shadow": "rgba(255, 255, 255, 0.1)",
+			"shadow": "rgba(255, 255, 255, 0.2)",
 			"overlay": "rgba(255, 255, 255, 0.4)"
 		}
 	},
@@ -40,7 +40,7 @@
 			"borderDefault": "#C5C8CA",
 			"surfaceDefault": "#F6F6F7",
 			"textInverseSubdued": "#A1A5A7",
-			"shadow": "rgba(25, 26, 27, 0.1)",
+			"shadow": "rgba(25, 26, 27, 0.2)",
 			"overlay": "rgba(25, 26, 27, 0.4)"
 		}
 	},
@@ -55,7 +55,7 @@
 			"borderDefault": "#404345",
 			"surfaceDefault": "#3C0023",
 			"textInverseSubdued": "#FFC6E7",
-			"shadow": "rgba(255, 198, 231, 0.1)",
+			"shadow": "rgba(255, 198, 231, 0.2)",
 			"overlay": "rgba(255, 198, 231, 0.4)"
 		}
 	},
@@ -70,7 +70,7 @@
 			"borderDefault": "#404345",
 			"surfaceDefault": "#042A36",
 			"textInverseSubdued": "#A1A5A7",
-			"shadow": "rgba(148, 222, 247, 0.1)",
+			"shadow": "rgba(148, 222, 247, 0.2)",
 			"overlay": "rgba(148, 222, 247, 0.4)"
 		}
 	}

diff --git a/src/includes/userinfo.njk b/src/includes/userinfo.njk
@@ -14,14 +14,14 @@
                 </div>
                 <div class="commit-code">
                     {% icon "commit" %}
-                    <a
+                    <small>
+                        <a
 					href="https://github.com/afnizarnur/afnizarnur.com"
 					data-umami-event="userinfo-commit-code"
 				>
-                        <small>
                             {{ build.hash }}
-                        </small>
-                    </a>
+                        </a>
+                    </small>
                 </div>
                 <div class="now-playing">
                     <small id="current-song"></small>