desktop header design improvements

content/header/_index.md

@@ -12,11 +12,11 @@ extra:
 
 {% menu() %}
 
-##### PURPOSE
+#### PURPOSE
 
 {% button() %}
 
-###### [The Internot](/apage)
+##### [The Internot](/apage)
 
 Whats wrong with the [internet](/apage)
 
@@ -26,7 +26,7 @@ Whats wrong with the [internet](/apage)
 
 {% button() %}
 
-###### Our Internet
+##### Our Internet
 
 Vision for the new internet
 
@@ -34,11 +34,11 @@ Vision for the new internet
 
 |||
 
-##### ECOSYSTEM
+#### ECOSYSTEM
 
 {% button() %}
 
-#### OurWorld DAO
+##### OurWorld DAO
 
 Be a part of governance
 
@@ -46,7 +46,7 @@ Be a part of governance
 
 {% button() %}
 
-#### Communities
+##### Communities
 
 Explore communities in OurWorld
 
@@ -54,7 +54,7 @@ Explore communities in OurWorld
 
 {% button() %}
 
-#### DAOs
+##### DAOs
 
 Decentralized autonomous organizations
 
@@ -62,32 +62,36 @@ Decentralized autonomous organizations
 
 |||
 
-### APPLICATIONS
+#### APPLICATIONS
 
-<br>
+{% button() %}
-<br>
 
-#### DAPPs
+##### DAPPs
 
 Decentralized applications
 
-<br>
+{%% end %%}
 
-#### Projects
+{% button() %}
+
+##### Projects
 
 Projects in OurWorld
 
+{%% end %%}
+
 |||
 
-### FEATURED
+#### FEATURED
 
-<br>
+{% button() %}
-<br>
 
-#### OurWorld is Live
+##### OurWorld is Live
 
 Be a part of the new internet
 
+{%% end %%}
+
 {% end %}
 
 - [Join us]("/join-us")

css/index.css

@@ -51,13 +51,13 @@ img[src*="#large"] {
     @apply text-2xl lg:text-4xl font-light;
   }
   h4 {
-    @apply text-lg lg:text-xl font-light;
+    @apply text-md tracking-widest text-zinc-500 font-semibold;
   }
   h5 {
-    @apply text-base not-italic font-light leading-8;
+    @apply text-md not-italic font-normal leading-8;
   }
   h6 {
-    @apply text-sm lg:text-sm font-normal;
+    @apply text-sm lg:text-base font-normal;
   }
   nav p {
     @apply hidden sm:block md:block lg:block xl:block 2xl:block;
@@ -73,6 +73,19 @@ img[src*="#large"] {
   }
 }
 
+button:hover :is(:where(a)) {
+  color: #3b82f6;
+}
+
+button :is(:where(p)) {
+  color: #3d3b39;
+  font-weight: 400;
+}
+
+button a {
+  color: black;
+}
+
 h3 {
   font-size: 1em;
   font-style: normal;

css/layout.css

@@ -82,7 +82,7 @@ a:active {
 }
 
 h5 a {
-  @apply text-gray-600 font-light;
+  @apply text-gray-900 font-normal;
 }
 
 /*

tailwind.config.js

@@ -9,6 +9,21 @@ module.exports = {
   },
   darkMode: false,
   theme: {
+    fontSize: {
+        'xs': '.75rem',
+        'sm': '.875rem',
+        'tiny': '.875rem',
+        'base': '1rem',
+        'md': '1.05rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '4rem',
+        '7xl': '5rem',
+    },
     colors: {
       transparent: 'transparent',
       white: '#ffffff',
@@ -16,8 +31,10 @@ module.exports = {
       gray: colors.gray,
       slate: colors.slate,
       stone: colors.stone,
+      zinc: colors.zinc,
       yellow: colors.yellow,
       orange: colors.orange,
+      sky: colors.sky,
       blue: {
         '100': '#bbeeff',
         '200': '#00aaff',

templates/shortcodes/button.html

@@ -1,3 +1,3 @@
 <button class="border-transparent flex flex-col border-2 w-80 items-start rounded h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2">
-    {{ body | trim_start_matches(pat="<p></p>") | safe}}
+    {{ body | trim_start_matches(pat="<p>") | safe}}
 </button>

templates/shortcodes/menu.html

@@ -14,18 +14,13 @@ Parameters:
 <!-- aligns columns depending on col number-->
 
 
-{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
+{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-8" %}
-{% set column_classes = "flex-1 m-4 lg:m-4" %}
+{% set column_classes = "flex-1 m-8 lg:m-4" %}
     
 
 <!-- makes row full screen width and adds background img -->
-{% set styles = ""  %}
-{% if bgPath %}
-    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
-    {% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
-{% endif %}
 
-<div class="{{classes}}" style="{{styles}}">
+<div class="{{classes}}">
     {% for column in columns%} 
         <!-- Hides empty columns if displayed vertically in small screen -->
         {% if column | as_str | length < 10 %} 
@@ -40,7 +35,7 @@ Parameters:
         {% else %}
             <div class="{{column_classes}}">
                 {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
-                <hr>
+                <hr class="border-t-2 mt-2">
                 <br/>
 
                 <!-- handles mermaid markdown content display -->