all repos — www @ 863b05adc820b2d14a6a456b41c70ccb4cd7767b

deserthorns.net content + generator 

redesign landing page
sageclove
Sat, 11 Jan 2025 23:28:48 -0700
commit

863b05adc820b2d14a6a456b41c70ccb4cd7767b

parent

1fef36a37229d412f0bdd51bc42b175d0df9f4fb

4 files changed, 66 insertions(+), 36 deletions(-)

jump to
M index.html → index.html 
@@ -9,23 +9,11 @@ <title>deserthorns</title>
     <link rel="stylesheet" href="/assets/css/colors.css">
     <style>
         html {
-            background: var(--b_high);
-            color: var(--f_high);            
+            background: var(--f_high);
         }
 
         body {
             -webkit-text-size-adjust: 100%;
-            margin: 0;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        h1 {
-            letter-spacing: 0.5rem;
-            font-family: monospace;
-            text-align: center;
-            color: var(--background);
             margin: 0;
         }
 

@@ -48,42 +36,84 @@ hr {
             border: 2px solid var(--f_low);
         }
 
+        .content {
+            margin: 3rem auto;
+            border: 3px solid var(--b_inv);
+            padding: 2rem;
+            box-shadow: 8px 8px var(--background);
+            max-width: 30rem;
+            background: var(--background);
+        }
+
+        .ident-imgs {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
         .logo {
             display: block;
-            margin: 0 auto;
-            max-width: 10rem;
-            padding-top: 5rem;
-            padding-bottom: 5rem;
+            width: 8rem;
+            height: 8rem;
+        }
+
+        .name {
+            display: block;
+            letter-spacing: 0.5rem;
+            font-family: monospace;
+            color: var(--b_high);
+            font-size: 2rem;
+            margin-left: 1rem;
+            text-align: center;
         }
 
-        .stripes {
+        .grid-img {
+            width: 5rem;
             height: 5rem;
-            background: linear-gradient(
-                to bottom,
-                var(--b_high) 25%,
-                var(--b_inv) 25%,
-                var(--b_inv) 50%,
-                var(--f_inv) 50%,
-                var(--f_inv) 75%,
-                var(--background) 75%
-            );
-            border-bottom: 4px solid var(--b_low);
+            border-radius: 50%;
+            margin: 2rem;
+        }
+
+        .header {
+            height: 30vh;
         }
 
-        .content {
-            flex-grow: 1;
-            background: var(--background);
+        .header-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        @media screen and (max-width: 600px) {
+            .content {
+                max-width: 17rem;
+            }
+
+            .name {
+                font-size: 1.5rem;
+            }
+
+            .logo {
+                width: 6rem;
+                height: 6rem;
+            }
         }
     </style>
 </head>
 
 <body>
-    <div style="background: var(--b_high)">
-        <img class="logo" src="/assets/svg/logo-dark.svg">
-        <h1>deserthorns</h1>
+    <div class="header">
+        <img class="header-img" src="/assets/img/sunset-d.png">
     </div>
-    <div class="stripes"></div>
     <div class="content">
+        <div class="ident-imgs">
+            <!-- <img class="grid-img" src="/assets/img/vista-d.png"> -->
+            <img class="logo" src="/assets/svg/logo-light.svg">
+            <!-- <img class="grid-img" src="/assets/img/goat-d.png"> -->
+        </div>
+        <h1 class="name">deserthorns</h1>
+        <hr>
         <ul>
             <li>
                 <a href="/wiki">wiki</a>

@@ -92,7 +122,7 @@ <li>
                 <a href="/etc/do">do</a>
             </li>
         </ul>
-    </div>    
+    </div>
 </body>
 
 </html>