desktop header design improvements
This commit is contained in:
timurgordon
parent
af07618f66
commit
6875d6aea6
@ -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>
|
||||
<br>
|
||||
{% button() %}
|
||||
|
||||
#### DAPPs
|
||||
##### DAPPs
|
||||
|
||||
Decentralized applications
|
||||
|
||||
<br>
|
||||
{%% end %%}
|
||||
|
||||
#### Projects
|
||||
{% button() %}
|
||||
|
||||
##### Projects
|
||||
|
||||
Projects in OurWorld
|
||||
|
||||
{%% end %%}
|
||||
|
||||
|||
|
||||
|
||||
### FEATURED
|
||||
#### FEATURED
|
||||
|
||||
<br>
|
||||
<br>
|
||||
{% button() %}
|
||||
|
||||
#### OurWorld is Live
|
||||
##### OurWorld is Live
|
||||
|
||||
Be a part of the new internet
|
||||
|
||||
{%% end %%}
|
||||
|
||||
{% end %}
|
||||
|
||||
- [Join us]("/join-us")
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -82,7 +82,7 @@ a:active {
|
||||
}
|
||||
|
||||
h5 a {
|
||||
@apply text-gray-600 font-light;
|
||||
@apply text-gray-900 font-normal;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
@ -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 column_classes = "flex-1 m-4 lg:m-4" %}
|
||||
{% 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-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 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user