@@ -33,7 +33,7 @@ export const Home: FunctionalComponent = () => ( | |||
</p> | |||
</Card> | |||
</Grid> | |||
<Grid size="6" desktopSize="7" mobileSize="12"> | |||
<Grid size="6" desktopSize="5" mobileSize="12"> | |||
<Card> | |||
<p> | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue | |||
@@ -60,10 +60,12 @@ export const Home: FunctionalComponent = () => ( | |||
</p> | |||
</Card> | |||
</Grid> | |||
<Grid size="6" desktopSize="5" mobileSize="12"> | |||
<Grid size="6" desktopSize="7" mobileSize="12"> | |||
<Container direction="column"> | |||
<Grid size="12" mobileSize="12"> | |||
<Card primary> | |||
<h1>Primary</h1> | |||
<h2>With different colors!</h2> | |||
<p> | |||
Quisque quis convallis ex. Nulla blandit sollicitudin urna, non | |||
elementum sem egestas nec. Nam tristique, justo volutpat auctor | |||
@@ -81,6 +83,7 @@ export const Home: FunctionalComponent = () => ( | |||
</Grid> | |||
<Grid size="12" mobileSize="12"> | |||
<Card secondary> | |||
<h1>Secondary</h1> | |||
<p> | |||
Cras non mauris facilisis dui ornare efficitur et sodales augue. | |||
Vivamus eu pulvinar leo. Nullam laoreet imperdiet nisl ut sodales. | |||
@@ -1,14 +1,19 @@ | |||
import { h, FunctionalComponent } from "preact"; | |||
import { card } from "teenyui"; | |||
import { card, layout } from "teenyui"; | |||
const { Card } = card; | |||
const { Container, Grid } = layout; | |||
export const Overview: FunctionalComponent = () => ( | |||
<Card> | |||
<h1>Overview</h1> | |||
<p> | |||
There should be a general overview of all components here, but this has | |||
not been done yet. | |||
</p> | |||
</Card> | |||
<Container direction="column"> | |||
<Grid size="12"> | |||
<Card> | |||
<h1>Overview</h1> | |||
<p> | |||
There should be a general overview of all components here, but this | |||
has not been done yet. | |||
</p> | |||
</Card> | |||
</Grid> | |||
</Container> | |||
); |
@@ -5,66 +5,71 @@ import { | |||
faInfinity, | |||
faBars, | |||
} from "@fortawesome/free-solid-svg-icons"; | |||
import { Button as ButtonComp, card, Icon } from "teenyui"; | |||
import { Button as ButtonComp, card, Icon, layout } from "teenyui"; | |||
import { timeout } from "~utils"; | |||
const { Card } = card; | |||
const { Container, Grid } = layout; | |||
export const Button: FunctionalComponent = () => ( | |||
<Card> | |||
<h1>Button</h1> | |||
<h4>Clicky buttons are fun!</h4> | |||
<ButtonComp | |||
onClick={async () => { | |||
await timeout(5000); | |||
alert("You clicked me!"); | |||
}} | |||
> | |||
Delayed Hello! | |||
</ButtonComp> | |||
<ButtonComp secondary>Secondary Button</ButtonComp> | |||
<ButtonComp | |||
ghost | |||
onClick={async () => { | |||
await timeout(3000); | |||
alert("Hello world!"); | |||
}} | |||
> | |||
Ghost Button | |||
</ButtonComp> | |||
<ButtonComp> | |||
<Icon icon={faBalanceScale} /> | |||
With Icon! | |||
</ButtonComp> | |||
<ButtonComp> | |||
<Icon icon={faBolt} /> | |||
</ButtonComp> | |||
<ButtonComp secondary> | |||
<Icon icon={faInfinity} /> | |||
</ButtonComp> | |||
<ButtonComp ghost> | |||
<Icon icon={faBars} /> | |||
</ButtonComp> | |||
<ButtonComp round> | |||
<Icon icon={faBalanceScale} /> | |||
</ButtonComp> | |||
<ButtonComp round secondary> | |||
<Icon icon={faBolt} /> | |||
</ButtonComp> | |||
<ButtonComp round ghost> | |||
<Icon icon={faInfinity} /> | |||
</ButtonComp> | |||
<ButtonComp full> | |||
<Icon icon={faInfinity} /> | |||
Full width! | |||
</ButtonComp> | |||
<ButtonComp full secondary> | |||
<Icon icon={faInfinity} /> | |||
Full secondary! | |||
</ButtonComp> | |||
<ButtonComp full ghost> | |||
<Icon icon={faInfinity} /> | |||
Full ghost! | |||
</ButtonComp> | |||
</Card> | |||
<Container direction="column"> | |||
<Grid size="12"> | |||
<Card> | |||
<h1>Button</h1> | |||
<h4>Clicky buttons are fun!</h4> | |||
<ButtonComp | |||
onClick={async () => { | |||
await timeout(5000); | |||
alert("You clicked me!"); | |||
}} | |||
> | |||
Delayed Hello! | |||
</ButtonComp> | |||
<ButtonComp secondary>Secondary Button</ButtonComp> | |||
<ButtonComp | |||
ghost | |||
onClick={async () => { | |||
await timeout(3000); | |||
alert("Hello world!"); | |||
}} | |||
> | |||
Ghost Button | |||
</ButtonComp> | |||
<ButtonComp> | |||
<Icon icon={faBalanceScale} /> | |||
With Icon! | |||
</ButtonComp> | |||
<ButtonComp> | |||
<Icon icon={faBolt} /> | |||
</ButtonComp> | |||
<ButtonComp secondary> | |||
<Icon icon={faInfinity} /> | |||
</ButtonComp> | |||
<ButtonComp ghost> | |||
<Icon icon={faBars} /> | |||
</ButtonComp> | |||
<ButtonComp round> | |||
<Icon icon={faBalanceScale} /> | |||
</ButtonComp> | |||
<ButtonComp round secondary> | |||
<Icon icon={faBolt} /> | |||
</ButtonComp> | |||
<ButtonComp round ghost> | |||
<Icon icon={faInfinity} /> | |||
</ButtonComp> | |||
<ButtonComp full> | |||
<Icon icon={faInfinity} /> | |||
Full width! | |||
</ButtonComp> | |||
<ButtonComp full secondary> | |||
<Icon icon={faInfinity} /> | |||
Full secondary! | |||
</ButtonComp> | |||
<ButtonComp full ghost> | |||
<Icon icon={faInfinity} /> | |||
Full ghost! | |||
</ButtonComp> | |||
</Card> | |||
</Grid> | |||
</Container> | |||
); |
@@ -5,30 +5,30 @@ | |||
min-height: 100%; | |||
font-size: 16px; | |||
letter-spacing: 0.5px; | |||
background: var(--background); | |||
color: var(--text-color); | |||
color: rgb(var(--text)); | |||
background: rgb(var(--background-secondary)); | |||
font-family: var(--font); | |||
h1 { | |||
font-size: 2.8em; | |||
font-size: 2em; | |||
font-weight: 250; | |||
letter-spacing: -1.2px; | |||
} | |||
h2 { | |||
font-size: 2.4em; | |||
font-size: 1.6em; | |||
font-weight: 250; | |||
letter-spacing: -1.2px; | |||
} | |||
h3 { | |||
font-size: 1.8em; | |||
font-size: 1.3em; | |||
font-weight: normal; | |||
letter-spacing: 0; | |||
} | |||
h4 { | |||
font-size: 1.4em; | |||
font-size: 1.2em; | |||
font-weight: normal; | |||
letter-spacing: 0.25px; | |||
} | |||
@@ -46,25 +46,25 @@ | |||
} | |||
h1, | |||
h2, | |||
h3, | |||
h5 { | |||
margin: 0 0 2px; | |||
color: var(--text-color-header); | |||
margin: 4px 0; | |||
color: rgba(var(--text), 0.9); | |||
} | |||
h3, | |||
h2, | |||
h4, | |||
h6 { | |||
margin: 0 0 4px; | |||
color: var(--text-color-subheader); | |||
margin: 4px 0; | |||
color: rgba(var(--text), 0.75); | |||
} | |||
p { | |||
margin: 0 0 8px; | |||
} | |||
:not(nav) > a { | |||
color: var(--text-color-header); | |||
a { | |||
color: rgba(var(--text), 0.85); | |||
text-decoration: underline; | |||
} | |||
@@ -5,11 +5,11 @@ | |||
align-items: center; | |||
min-width: 20px; | |||
border: 2px solid var(--primary-color); | |||
border: 2px solid rgb(var(--primary)); | |||
border-radius: 0.3em; | |||
color: var(--primary-color-text); | |||
background: rgba(var(--primary-color-rgb), 0.8); | |||
color: rgb(var(--primary-text)); | |||
background: rgba(var(--primary), 0.8); | |||
backdrop-filter: blur(16px); | |||
cursor: pointer; | |||
@@ -29,15 +29,15 @@ | |||
} | |||
.secondary { | |||
color: var(--secondary-color-text); | |||
background: rgba(var(--secondary-color-rgb), 0.8); | |||
border: 2px solid var(--secondary-color); | |||
color: rgb(var(--secondary-text)); | |||
border: 2px solid rgb(var(--secondary)); | |||
background: rgba(var(--secondary), 0.8); | |||
} | |||
.ghost { | |||
color: var(--text-color-header); | |||
background: rgba(var(--background-rgb), 0.1); | |||
border: 2px solid var(--text-color-header); | |||
color: rgb(var(--text)); | |||
border: 2px solid rgb(var(--text)); | |||
background: rgba(var(--background), 0.125); | |||
font-weight: 500; | |||
&:disabled { | |||
@@ -3,16 +3,50 @@ | |||
margin: 8px 6px; | |||
padding: 12px; | |||
border-radius: 0.3em; | |||
box-shadow: 0 2px 4px 0 var(--background-border); | |||
background-color: var(--background-secondary); | |||
background: rgba(var(--background), 0.2); | |||
box-shadow: 0 1px 4px 0 rgba(var(--background), 0.75); | |||
} | |||
.primary { | |||
color: var(--primary-color-text); | |||
background-color: var(--primary-color); | |||
background: rgb(var(--primary)); | |||
box-shadow: 0 2px 4px 0 rgb(var(--primary)); | |||
color: rgb(var(--primary-text)); | |||
h1, | |||
h3, | |||
h5 { | |||
color: rgba(var(--primary-text), 0.7); | |||
} | |||
h2, | |||
h4, | |||
h6 { | |||
color: rgba(var(--primary-text), 0.5); | |||
} | |||
a { | |||
color: rgb(var(--primary-text)); | |||
} | |||
} | |||
.secondary { | |||
color: var(--secondary-color-text); | |||
background-color: var(--secondary-color); | |||
background: rgb(var(--secondary)); | |||
box-shadow: 0 2px 4px 0 rgb(var(--secondary)); | |||
color: rgb(var(--secondary-text)); | |||
h1, | |||
h3, | |||
h5 { | |||
color: rgba(var(--secondary-text), 0.7); | |||
} | |||
h2, | |||
h4, | |||
h6 { | |||
color: rgba(var(--secondary-text), 0.5); | |||
} | |||
a { | |||
color: rgb(var(--secondary-text)); | |||
} | |||
} |
@@ -1,11 +1,17 @@ | |||
@import "../../mixins"; | |||
.hero { | |||
width: 100%; | |||
position: relative; | |||
overflow: hidden; | |||
z-index: 100; | |||
min-height: 36vh; | |||
height: 36vh; | |||
border-radius: 6px; | |||
margin: 8px 6px; | |||
@include breakpoint(max, medium) { | |||
height: 28vh; | |||
} | |||
} | |||
.image { | |||
@@ -20,17 +26,11 @@ | |||
position: absolute; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
justify-content: flex-end; | |||
text-align: center; | |||
padding-top: 0.6em; | |||
top: 0; | |||
bottom: 0; | |||
bottom: 20%; | |||
left: 0; | |||
right: 0; | |||
img { | |||
max-height: 6em; | |||
max-width: 80%; | |||
padding-bottom: 1.2em; | |||
} | |||
} |
@@ -4,26 +4,26 @@ | |||
border-radius: 6px; | |||
display: flex; | |||
align-items: center; | |||
color: var(--text-color); | |||
text-decoration: none; | |||
text-decoration: none !important; | |||
color: rgb(var(--text)); | |||
svg { | |||
color: var(--text-color-header); | |||
color: rgba(var(--text), 0.85); | |||
width: 2em; | |||
margin-right: 4px; | |||
} | |||
&:hover:not(.active) { | |||
color: var(--text-color-header); | |||
background: var(--background-secondary); | |||
color: rgba(var(--text), 0.85); | |||
background: rgba(var(--background), 0.2); | |||
} | |||
} | |||
.active { | |||
background: rgba(var(--primary-color-rgb), 0.25); | |||
color: rgba(var(--primary-color-rgb), 0.95); | |||
background: rgba(var(--primary), 0.25); | |||
color: rgba(var(--primary), 0.95); | |||
svg { | |||
color: var(--primary-color); | |||
color: rgb(var(--primary)); | |||
} | |||
} |
@@ -9,10 +9,10 @@ | |||
flex: 0 0 100vw; | |||
z-index: 1001; | |||
backdrop-filter: blur(24px); | |||
background: rgba(var(--background-rgb), 0.6); | |||
background: rgba(var(--background-secondary), 0.85); | |||
@supports not (backdrop-filter: blur(12px)) { | |||
background: var(--background); | |||
background: rgb(var(--background)); | |||
} | |||
@include breakpoint(min, small) { | |||
@@ -43,8 +43,7 @@ | |||
font-weight: lighter; | |||
font-size: 0.7em; | |||
text-transform: uppercase; | |||
color: var(--text-color-header); | |||
font-family: var(--font); | |||
color: rgba(var(--text), 0.85); | |||
} | |||
} | |||
@@ -0,0 +1,11 @@ | |||
html { | |||
--text: 240, 243, 245; | |||
--primary: 85, 110, 230; | |||
--primary-text: 233, 236, 252; | |||
--secondary: 230, 104, 104; | |||
--secondary-text: 245, 247, 255; | |||
--background: 52, 65, 75; | |||
--background-secondary: 21, 26, 30; | |||
--font: "Open Sans", Arial, Helvetica, sans-serif; | |||
} |
@@ -1,17 +1,11 @@ | |||
html { | |||
--primary-color: #272ab0; | |||
--primary-color-rgb: 39, 42, 176; | |||
--primary-color-text: #f1f3ff; | |||
--secondary-color: #e04e15; | |||
--secondary-color-rgb: 224, 78, 21; | |||
--secondary-color-text: #ffffdb; | |||
--text-color: #585757; | |||
--text-color-header: #1c1c1c; | |||
--text-color-subheader: #969696; | |||
--background: #f7f7f7; | |||
--background-rgb: 247, 247, 247; | |||
--background-secondary: #fff; | |||
--background-border: #d6d6d6; | |||
--text: 10, 36, 38; | |||
--primary: 39, 42, 176; | |||
--primary-text: 241, 243, 255; | |||
--secondary: 224, 78, 21; | |||
--secondary-text: 255, 255, 219; | |||
--background: 195, 203, 203; | |||
--background-secondary: 255, 255, 255; | |||
--font: "Open Sans", Arial, Helvetica, sans-serif; | |||
} |