84 lines
1.8 KiB
Sass
84 lines
1.8 KiB
Sass
.container
|
|
max-width: $size-small
|
|
width: 100%
|
|
margin: 0 auto
|
|
padding: $size-space
|
|
display: flex
|
|
justify-content: space-between
|
|
flex-wrap: wrap
|
|
|
|
@media screen and (max-width: $size-small)
|
|
justify-content: center
|
|
padding: $size-space/2
|
|
|
|
&.md
|
|
max-width: 660px
|
|
|
|
&.nowrap
|
|
flex-wrap: nowrap
|
|
|
|
&.center
|
|
justify-content: center
|
|
align-items: center
|
|
text-align: center
|
|
|
|
&.column
|
|
flex-direction: column
|
|
|
|
main > section:first-child
|
|
padding: $size-space*2 $size-space $size-space*3
|
|
|
|
// Color
|
|
.section, .header, .footer
|
|
background-color: var(--background)
|
|
color: var(--paragraph)
|
|
|
|
h2, h3, h4
|
|
color: var(--headline)
|
|
|
|
a
|
|
color: var(--link)
|
|
|
|
&:hover
|
|
text-shadow: 0 0 1px currentColor
|
|
|
|
.card
|
|
background-color: var(--card-background)
|
|
z-index: 10
|
|
padding: 1rem
|
|
border-radius: var(--border-radius)
|
|
max-width: 31%
|
|
margin-bottom: 1rem
|
|
|
|
img
|
|
margin: 0 auto
|
|
|
|
p
|
|
margin-bottom: 0
|
|
|
|
@media screen and (max-width: $size-small)
|
|
max-width: 288px
|
|
margin-bottom: 1rem
|
|
text-align: center
|
|
|
|
.section, .header, .footer
|
|
--background: var(--color-background)
|
|
--paragraph: var(--color-paragraph)
|
|
--headline: var(--color-headline)
|
|
--link: var(--color-link)
|
|
--card-background: var(--color-card-background)
|
|
|
|
&.secondary
|
|
--background: var(--color-secondary-background)
|
|
--paragraph: var(--color-secondary-paragraph)
|
|
--headline: var(--color-secondary-headline)
|
|
--link: var(--color-secondary-link)
|
|
--card-background: var(--color-secondary-card-background)
|
|
|
|
&.tertiary
|
|
--background: var(--color-tertiary-background)
|
|
--paragraph: var(--color-tertiary-paragraph)
|
|
--headline: var(--color-tertiary-headline)
|
|
--link: var(--color-tertiary-link)
|
|
--card-background: var(--color-tertiary-card-background)
|