restructuring css

kithenry · Aug 12, 2024 · 4d86ec8 · 4d86ec8
1 parent 30a102a
commit 4d86ec8
Showing 1 changed file with 58 additions and 36 deletions.
diff --git a/writing/published/2024/August/22/test_article.html b/writing/published/2024/August/22/test_article.html
@@ -23,6 +23,22 @@
             font-family: "Book Antiqua", Palatino, "EB Garamond", serif;
         }
 
+        a {
+            text-decoration: none;
+            color: #3da4b2;
+        }
+
+
+
+        p {
+            line-height: 1.5625;
+            margin-bottom: 1em;
+        }
+
+        img {
+            height: 300px;
+        }
+
         header {
             font-family: 'Roboto', sans-serif;
             background-color: #b1624e;
@@ -31,18 +47,39 @@
             line-height: 1em;
         }
 
-        .header-container {
+        header .header-container {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
         }
 
-        .navlink {
+        header .site-title {
+            font-family: 'Alegreya Sans SC', sans-serif !important;
+            text-transform: capitalize;
+            font-size: 36px;
+        }
+
+        header .navlinks {
             display: flex;
             flex-direction: row;
             justify-content: center;
             align-items: center;
+
+        }
+
+        header a {
+            color: white;
+        }
+
+        header a:hover {
+
+        }
+
+        .green-line {
+            width: 100%;
+            height: 10px;
+            background-color: #3da4b2;
         }
 
         .hamburger-menu {
@@ -54,64 +91,49 @@
         }
 
         .collapse-btn:focus {
-            box-shadow: none!important;
+            box-shadow: none !important;
+            outline: none !important;
+            outline-style: none;
+            transition: none;
+            animation: none;
         }
 
-        a {
-            text-decoration: none;
-            color: #3da4b2;
-            ;
+        .collapse-btn:active {
+            border: none;
         }
 
-        .site-title {
-            font-family: 'Alegreya Sans SC', sans-serif !important;
-            text-transform: capitalize;
-            font-size: 36px;
-        }
 
-        img {
-            height: 300px;
-        }
 
-        p {
-            line-height: 1.5625;
-        }
+
+
+
+
+
 
         article {
             margin: 0 auto
         }
 
-        .heading {
+        article .heading > h1{
             width: 100%;
             font-weight: 300;
             line-height: 1.25;
             margin-bottom: 10px;
         }
 
-        .green-line {
-            width: 100%;
-            height: 10px;
-            background-color: #3da4b2;
-        }
 
-        p {
-            margin-bottom: 1em;
-        }
 
-        .date {
+
+
+        article .date {
             color: #3da4b2;
             font-size: 19px;
             border-top: 1px solid #b9cdeb;
             border-bottom: 1px solid #b9cdeb;
         }
 
-        .navlink a {
-            color: white !important;
-        }
+
 
-        .navlink a:hover {
-            color: #3da4b2 !important;
-        }
 
         .icon-toggle {
             display: none;
@@ -352,7 +374,7 @@ <h2 class="">
 
 
 
-                <ul id="navlinks" class=" p-3 pt-4 navlink list-unstyled list-inline">
+                <ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
                     <li class="pe-2">
                         <a href="" class="p-0">Articles</a>
                     </li>
@@ -384,7 +406,7 @@ <h2 class="">
                         <li class="list-group-item">A third item</li>
                         <li class="list-group-item">A fourth item</li>
                         <li class="list-group-item">And a fifth one</li>
-                      </ul>
+                    </ul>
                 </div>
             </div>
         </header>