homepage

diff --git a/index.html b/index.html
index 008db7151482e2432616bb3b35543f88ddcad963..1cf524b74ce40d45990d2709c17270ba22f6f700 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <title>Skullheadx</title>
         <meta name="description" content="Skullheadx's webpage with thoughts on philosophy and tech.">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="/style.css">
         <link rel="icon" href="/favicon.ico">
     </head>
@@ -17,28 +18,28 @@
         <nav class="main-nav">
             <section>
                 <h2>General</h2>
-                <ol>
+                <ul>
                     <li><a href="index.html">Index</a></li>
                     <li><a href="about.html">About</a></li>
                     <li><a href="now.html">Now</a></li>
                     <li><a href="links.html">Links</a></li>
-                </ol>
+                </ul>
             </section>
             <section>
                 <h2>Blog</h2>
-                <ol>
+                <ul>
                     <li><a href="tech/index.html">/tech/</a></li>
                     <li><a href="phil/index.html">/phil/</a></li>
                     <li><a href="life/index.html">/life/</a></li>
                     <li><a href="music/index.html">/music/</a></li>
-                </ol>
+                </ul>
             </section>
             <section>
                 <h2>Projects</h2>
-                <ol>
+                <ul>
                     <li><a href="projects/dotfiles.html">Nixos Config</a></li>
                     <li><a href="projects/suckless.html">Suckless</a></li>
-                </ol>
+                </ul>
             </section>
             <section>
                 <h2>Contact</h2>
@@ -48,12 +49,12 @@
         <aside class="main-aside">
             <section>
                 <h2>Bio</h2>
-                <ol>
+                <ul>
                     <li><img src="pfp.webp"></li>
                     <li><p>Skullheadx</p></li>
                     <li><a href="about.html">About Me</a></li>
                     <li><a href="now.html">Now</a></li>
-                </ol>
+                </ul>
             </section>
             <section>
                 <h2>Status</h2>
@@ -69,6 +70,12 @@
                 <p>Send me an email if you'd like to talk about any topic I discuss on my site:
                 <a href="mailto:skull@skullheadx.com">skull@skullheadx.com</a></p>
             </article>
+            <article>
+                <h2>Highlighted Articles</h2>
+                <ul>
+                    <li><a href="tech/openbsd_html_css/post.html">OpenBSD + raw html,css setup</a></li>
+                </ul>
+            </article>
         </main>
         <footer class="main-footer">
             <a href="https://skullheadx.com">https://skullheadx.com</a>

diff --git a/style.css b/style.css
index 064d76014a7bee1d852c94ee837970e2634e914a..867996c9975d00d142bcf9906325eeff10b92302 100644 (file)
--- a/style.css
+++ b/style.css
@@ -65,7 +65,7 @@
 
 body {
     margin: 0 auto;
-    max-width: 1000px;
+    max-width: 1200px;
     background-color: var(--space-indigo);
 }
 
@@ -80,13 +80,33 @@ h1 {
 }
 
 h2 {
+    background: var(--parchment);
     border-radius: 7px;
     display:inline-block;
     margin: 2px 0;
     padding: 0.75em;
+    text-align: center;
+}
+
+a {
+    color: var(--dusty-grape);
+    font-weight: bold;
+    text-decoration: 2px dotted underline var(--space-indigo);
 }
 
-header, main, section, nav section, aside section {
+nav ul, aside ul{
+    padding: 0;
+    gap: 0.5rem;
+    margin: 0 0;
+}
+
+
+nav ul li, aside ul li{
+  list-style: none;
+  margin: 2px 0;
+}
+
+main, section, nav section, aside section {
     background: #fff;
     border-radius: 7px;
     padding: 0.5em;
@@ -103,4 +123,41 @@ main, nav, aside {
     max-width: 100%;
     height:auto;
     display: block;
+    border-radius: 7px;
+}
+
+nav section, aside section, main article {
+    margin-bottom: 5px; 
+}
+
+nav section {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+
+aside section {
+    text-align: center;
+    ul li p {
+        margin: 0 0 0.5rem 0;
+    }
+}
+aside section h2 {display: block;}
+aside section ul {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    li img {
+        border-radius: 7px;
+    }
+
+}
+
+
+main article h2 {display:block;}
+
+
+footer {
+    text-align: center;
 }