update status

karsonkalt · Sep 26, 2024 · 36d09e2 · 36d09e2
1 parent 335b0d3
commit 36d09e2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 44 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -455,14 +455,19 @@ <h1>
                   />
                 </figure>
               </div>
+            </section>
+            <section style="margin-top: -20px;">
               <div class="gravatar">
                 <div class="gravatar-status">
-                  <div class="gravatar-status-meta">
-                    {{ site.status_updated | date: "%B %-d" }}
-                  </div>
-                  <div class="gravatar-status-status">{{ site.status }}</div>
+                  <div class="gravatar-status_meta">
+                   {{ site.status_updated | date: "%B %-d" }}
+                </div>
+                  <div class="gravatar-status_status">{{ site.status }}</div>
+                  <div class="gravatar-status_all-statuses">View past statuses</div>
                 </div>
               </div>
+            </section>
+            <section>
               <h2>About Me</h2>
               <p>
                 Growing up, I was always interested in design and technology. My

diff --git a/_sass/custom-styles.scss b/_sass/custom-styles.scss
@@ -99,6 +99,37 @@ main {
   width: 100%;
   margin-bottom: 16px;
   color: var(--black-80);
+
+  .gravatar-status {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .gravatar-status_meta {
+    font-weight: 300;
+    font-size: 15px;
+    color: var(--text--secondary);
+    margin-bottom: 8px;
+  }
+
+  .gravatar-status_status {
+    font-family: "Inter";
+    // font-size: 13px;
+    text-overflow: ellipsis;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+  }
+
+  .gravatar-status_all-statuses {
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--accent-color);
+    width: fit-content;
+
+    &:hover {
+      color: var(--accent-color-link-hover);
+    }
+  }
 }
 
 .flip-card {
@@ -154,7 +185,7 @@ main {
 .hero {
   display: flex;
   background-color: var(--black-20);
-  border-radius: 10px;
+  border-radius: 15px;
   margin-bottom: 20px;
   overflow: hidden;
 
@@ -213,7 +244,7 @@ main {
       all: unset;
       cursor: pointer;
       padding: 6px 12px;
-      background-color: var(--accent-color-50);
+      background-color: var(--accent-color-20);
       border-radius: 200px; // pill
       width: fit-content;
       color: var(--text-primary);
@@ -246,43 +277,6 @@ main {
   }
 }
 
-.gravatar-status {
-  display: flex;
-  flex-direction: column;
-}
-
-.gravatar-status-meta {
-  font-size: 11px;
-  padding-left: 10px;
-  color: var(--text--secondary);
-}
-
-.gravatar-status-status {
-  position: relative;
-  flex-shrink: 1;
-  font-family: "Inter";
-  background-color: var(--white-10);
-  border-radius: 15px;
-  padding: 8px 12px;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  color: var(--text-primary);
-  &:after {
-    --tip-height: 24px;
-    --tip-width: 8px;
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%) translateX(-100%);
-    width: 0;
-    height: 0;
-    // border-top: calc(var(--tip-height) / 2) solid transparent;
-    border-bottom: calc(var(--tip-height) / 2) solid transparent;
-    border-right: var(--tip-width) solid var(--white-10);
-  }
-}
-
 .about {
   margin-bottom: 45px;
   animation: fadeInUp 1000ms forwards;
@@ -648,8 +642,9 @@ a .domain {
   border-radius: 50%;
   display: inline-block;
   margin-right: 4px;
-  background-color: var(--white-20);
+  background-color: #03c7176f;
   animation: pulse 6s 2;
+  border: 1px solid var(--white-20);
 }
 
 #github-status {