Styling

Author: agarnung

_includes/elements/dropdown.html

@@ -1,5 +1,5 @@
 <span class="{{ include.menu_class }}">  
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="{{ include.id }}" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 0.125rem 0.3rem 0.125rem 0.3rem; background: linear-gradient(to right, rgba(131, 131, 131, 0.9), rgba(153, 153, 153, 0.9));">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="{{ include.id }}" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 0.125rem 0.3rem 0.125rem 0.3rem; background: linear-gradient(to right, rgba(131, 131, 131, 0.9), rgba(153, 153, 153, 0.9)); font-size: 1.125rem; line-height: 1.25;">
     {{ include.label }}
   </button>
   <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="{{ include.id }}">

_includes/landing.html

@@ -3,7 +3,6 @@
 
     <!-- Fine Circle Responsive Image -->
     <div id="container" class="my-2">
-      <div id="dummy"></div>
       <div id="element">
         <img src="{{ site.author.image }}" alt="{{ site.title }}" class="circle-image wow animated zoomIn"
           data-wow-delay=".1s" data-toggle="tooltip" title="me">
@@ -16,7 +15,6 @@ <h3 class="font-weight-bold">Hi! Welcome to my website</h3>
       </div>
     </div>
 
-
   </div>
 
 <section class="p-4 align-items-start" class="text-muted wow animated slideInUp" data-wow-delay=".1s">

_posts/UNPUBLISHED_2025-01-22-geometric-fitting-intuition.md

@@ -27,6 +27,7 @@
   display: block; 
   color: #f8f9fa;
   padding: 0.5rem 1rem; 
+  font-size: 1.125rem;
 
   &:hover {
     background-color: #495057;
@@ -61,5 +62,3 @@
 .d-flex > span {
   margin-right: 10px; 
 }
-
-

_sass/_dropdown.scss

@@ -2,13 +2,14 @@
 // Inspired by https://stackoverflow.com/a/6615994/10194811
 
 #container {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   width: 100%;
-}
-
-#dummy {
-  padding-top: 100%; /* 1:1 aspect ratio */
+  height: 0;
+  padding-bottom: 100%; /* Maintains a 1:1 aspect ratio */
+  font-size: 0; /* Removes extra whitespace caused by inline-block elements */
 }
 
 #element {
@@ -17,12 +18,19 @@
   bottom: 0;
   left: 0;
   right: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .circle-image {
-  width: 100%;
-  height: 100%;
+  width: 80%;
+  height: 80%;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
+  display: block; /* Removes any space below the image */
 }
+

_sass/_landing.scss

@@ -114,4 +114,12 @@
       background-color: rgba(0, 0, 0, 0.05);
     }
   }
+  
+  p {
+    font-size: 1.25rem; 
+    line-height: 1.5;
+  }
+  
+    font-size: 1.25rem; 
+    line-height: 1.5;
 }

_sass/_markdown.scss

@@ -7,7 +7,7 @@
 
 .nav-link,
 .navbar-brand {
-  font-size: 18px;
+  font-size: 22px;
 
   &::after {
     @extend .link-after;