style: tweaks

picosh · Jan 9, 2024 · e7d7295 · e7d7295
1 parent ce4cea4
commit e7d7295
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/static/marketing.css b/static/marketing.css
@@ -19,18 +19,6 @@
   text-decoration: underline;
 }
 
-.mk-header {
-  line-height: 1;
-  display: inline-block;
-  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
-  color: transparent;
-  background-clip: text;
-  border: 3px solid #FF79C6;
-  padding: 8px 10px 10px 10px;
-  border-radius: 10px;
-  box-shadow: 0px 2px 4px 0px black;
-}
-
 .mk-subheader {
   font-size: 2rem;
   line-height: 1;
@@ -49,12 +37,6 @@
   gap: 1rem;
 }
 
-.features > div {
-  border-radius: 10px;
-  border: 1px solid var(--white);
-  padding: 1rem;
-}
-
 .features h2 {
   border: none;
   padding: 0;

diff --git a/static/smol.css b/static/smol.css
@@ -31,6 +31,7 @@
     --hover: #d73a49;
     --grey: #ccc;
     --grey-light: #6a708e;
+    --shadow: #252525;
   }
 }
 
@@ -50,6 +51,7 @@
     --hover: #ff80bf;
     --grey: #414558;
     --grey-light: #6a708e;
+    --shadow: #252525;
   }
 }
 
@@ -428,20 +430,38 @@ figure {
 
 /* ==== HELPERS ==== */
 
+.logo-header {
+  line-height: 1;
+  display: inline-block;
+  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
+  color: transparent;
+  background-clip: text;
+  border: 3px solid #FF79C6;
+  padding: 8px 10px 10px 10px;
+  border-radius: 10px;
+  box-shadow: 0px 5px 0px 0px var(--shadow);
+}
+
 .btn-link {
   border: 3px solid hsl(var(--main-hue), 92%, 66%);
   background-color: hsl(var(--main-hue), 92%, 66%);
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
-  box-shadow: 0px 1px 2px 0px black;
+  box-shadow: 0px 5px 0px 0px var(--shadow);
   color: var(--white);
   text-decoration: none;
   font-weight: bold;
 }
 
-.btn-link:visited,
 .btn-link:visited:hover,
 .btn-link:hover {
+  border: 3px solid hsl(260, 92%, 66%);
+  background-color: hsl(260, 92%, 66%);
+  color: var(--white);
+  transform: scale(.98, .98);
+}
+
+.btn-link:visited {
   color: var(--white);
 }
 
@@ -450,11 +470,9 @@ figure {
   border-radius: .5rem;
   padding: 1rem;
   text-decoration: none;
-  box-shadow: 0px 1px 2px 0px black;
+  box-shadow: 0px 5px 0px 0px var(--shadow);
   color: var(--white);
   width: 100%;
-  max-width: 200px;
-  height: 100px;
 }
 
 .box:hover {

diff --git a/tmpl/marketing.page.tmpl b/tmpl/marketing.page.tmpl
@@ -42,56 +42,56 @@
   <div class="flex flex-col gap">
     <div class="flex items-center justify-center hero">
       <div class="flex flex-col items-center">
-        <h1 class="mk-header text-3xl">pico</h1>
+        <h1 class="logo-header text-3xl">pico</h1>
         <h2 class="mk-subheader text-center">Providing tools and services to improve communication and collaboration on the web</h2>
         <a href="/getting-started" class="mt-4 btn-link">GET STARTED</a>
       </div>
     </div>
 
     <article class="features">
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/pgs">pgs.sh</a>
         </h2>
         <p>A zero-dependency static site hosting service for hackers</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/prose">prose.sh</a>
         </h2>
         <p>A blog platform for hackers</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/pastes">pastes.sh</a>
         </h2>
         <p>A pastebin for hackers</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/imgs">imgs.sh</a>
         </h2>
         <p>Image hosting for hackers</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/feeds">feeds.sh</a>
         </h2>
         <p>An rss email notification service</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/lists">lists.sh</a>
         </h2>
         <p>A microblog for lists</p>
       </div>
 
-      <div>
+      <div class="box">
         <h2 class="m-0 text-2xl">
           <a href="/tuns">tuns.sh</a>
         </h2>

diff --git a/tmpl/toc.partial.tmpl b/tmpl/toc.partial.tmpl
@@ -1,7 +1,7 @@
 {{define "toc"}}
 <button type="button" class="toc-btn">nav</button>
 
-<h1 class="mk-header text-2xl">pico</h1>
+<h1 class="logo-header text-2xl">pico</h1>
 
 <ol class="nav-list">
   {{range .Sitemap}}