use webp

diff --git a/banner.png b/banner.png
deleted file mode 100644 (file)
index 850e4dd..0000000
Binary files a/banner.png and /dev/null differ

diff --git a/banner.webp b/banner.webp
new file mode 100644 (file)
index 0000000..42af369
Binary files /dev/null and b/banner.webp differ

diff --git a/index.html b/index.html
index 41b255de5599c9644a784c88a7743fe2ef40dec2..008db7151482e2432616bb3b35543f88ddcad963 100644 (file)
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
         <div class = "wrapper">
         <header class="main-head">
             <a href="/">
-                <h1>Skullheadx</h1>
+                <img src="banner.webp" class="banner">
             </a>
         </header>
         <nav class="main-nav">
@@ -49,7 +49,7 @@
             <section>
                 <h2>Bio</h2>
                 <ol>
-                    <li><img src="pfp.jpg"></li>
+                    <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>

diff --git a/pfp.jpg b/pfp.jpg
deleted file mode 100644 (file)
index e5b3a36..0000000
Binary files a/pfp.jpg and /dev/null differ

diff --git a/pfp.webp b/pfp.webp
new file mode 100644 (file)
index 0000000..fa5f410
Binary files /dev/null and b/pfp.webp differ

diff --git a/style.css b/style.css
index 3d71bf4c88cf3512b3770876d85de4cfdd0b3e49..064d76014a7bee1d852c94ee837970e2634e914a 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
+:root {
+    --space-indigo: #22223bff;
+    --dusty-grape: #4a4e69ff;
+    --lilac-ash: #9a8c98ff;
+    --almond-silk: #c9ada7ff;
+    --parchment: #f2e9e4ff;
+}
+
 .main-head {
   grid-area: header;
 }
@@ -53,3 +61,46 @@
     flex-direction: column;
   }
 }
+
+
+body {
+    margin: 0 auto;
+    max-width: 1000px;
+    background-color: var(--space-indigo);
+}
+
+h1, h2, h3 {
+    margin: 0;
+    text-align: center;
+}
+
+h1 {
+    font-weight: bold;
+    padding: 0.75em;
+}
+
+h2 {
+    border-radius: 7px;
+    display:inline-block;
+    margin: 2px 0;
+    padding: 0.75em;
+}
+
+header, main, section, nav section, aside section {
+    background: #fff;
+    border-radius: 7px;
+    padding: 0.5em;
+}
+
+main, nav, aside {
+    align-self:start;
+}
+
+
+
+.banner {
+    object-fit: contain;
+    max-width: 100%;
+    height:auto;
+    display: block;
+}