]> Skullheadx's Git Forge - skullheadx.com.git/commitdiff
projects / skullheadx.com.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cb9ab45)
improve perf, organize css
authorSkullheadx <admonty1@protonmail.com>
Wed, 6 May 2026 06:42:31 +0000 (02:42 -0400)
committerSkullheadx <admonty1@protonmail.com>
Wed, 6 May 2026 06:42:31 +0000 (02:42 -0400)
index.html patch | blob | history
style.css patch | blob | history

diff --git a/index.html b/index.html
index 1cf524b74ce40d45990d2709c17270ba22f6f700..65c75b4c152dc0b5cce4dbe7fc8c38c8d8acd033 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,12 +7,14 @@
         <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">
+        <link rel="preload" as="image" href="banner.webp">
+        <link rel="preload" as="image" href="pfp.webp">
     </head>
     <body>
         <div class = "wrapper">
         <header class="main-head">
             <a href="/">
-                <img src="banner.webp" class="banner">
+                <img src="banner.webp" class="banner" alt="Skullheadx">
             </a>
         </header>
         <nav class="main-nav">
@@ -50,7 +52,7 @@
             <section>
                 <h2>Bio</h2>
                 <ul>
-                    <li><img src="pfp.webp"></li>
+                    <li><img src="pfp.webp" alt="pfp"></li>
                     <li><p>Skullheadx</p></li>
                     <li><a href="about.html">About Me</a></li>
                     <li><a href="now.html">Now</a></li>
diff --git a/style.css b/style.css
index 867996c9975d00d142bcf9906325eeff10b92302..d37adc773a3e9dac75a55863dc6be7929d046060 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,3 +1,4 @@
+/* colours */
 :root {
     --space-indigo: #22223bff;
     --dusty-grape: #4a4e69ff;
@@ -6,6 +7,36 @@
     --parchment: #f2e9e4ff;
 }
 
+/* headings */
+h1, h2, h3 {
+    margin: 0;
+    text-align: center;
+}
+
+h1 {
+    font-weight: bold;
+    padding: 0.75em;
+}
+
+h2 {
+    background: var(--parchment);
+    border-radius: 7px;
+    display:inline-block;
+    margin: 2px 0;
+    padding: 0.75em;
+    text-align: center;
+}
+
+
+/* links */
+a {
+    color: var(--dusty-grape);
+    font-weight: bold;
+    text-decoration: 2px dotted underline var(--space-indigo);
+}
+
+
+/* grid stuff */
 .main-head {
   grid-area: header;
 }
@@ -62,49 +93,22 @@
   }
 }
 
+/* header */ 
+.banner {
+    object-fit: contain;
+    max-width: 100%;
+    height:auto;
+    display: block;
+    border-radius: 7px;
+}
 
+/* body */
 body {
     margin: 0 auto;
     max-width: 1200px;
     background-color: var(--space-indigo);
 }
 
-h1, h2, h3 {
-    margin: 0;
-    text-align: center;
-}
-
-h1 {
-    font-weight: bold;
-    padding: 0.75em;
-}
-
-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);
-}
-
-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;
@@ -116,18 +120,22 @@ main, nav, aside {
     align-self:start;
 }
 
-
-
-.banner {
-    object-fit: contain;
-    max-width: 100%;
-    height:auto;
-    display: block;
-    border-radius: 7px;
-}
-
 nav section, aside section, main article {
     margin-bottom: 5px; 
+    h2 {
+        display: block;
+    }
+}
+
+/* nav */
+nav ul, aside ul{
+    padding: 0;
+    gap: 0.5rem;
+    margin: 0 0;
+    li{
+      list-style: none;
+      margin: 2px 0;
+    }
 }
 
 nav section {
@@ -136,28 +144,26 @@ nav section {
     flex-wrap: nowrap;
 }
 
-
+/* aside */
 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;
+    ul {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        li img {
+            border-radius: 7px;
+        }
+        li p {
+            margin: 0 0 0.5rem 0;
+        }
     }
-
 }
 
-
-main article h2 {display:block;}
-
-
+/* footer */
 footer {
     text-align: center;
+    a {
+        color: var(--almond-silk);
+    }
 }
Personal website using raw HTML+CSS