weko/assets/styles/container.sass

91 lines
2.0 KiB
Sass

.center
text-align: center
.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
&.column
flex-direction: column
&.cards
padding: $size-space/2
@media screen and (max-width: $size-small)
padding: $size-space/2 0
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
margin: $size-space/2
background-color: var(--card-background)
z-index: 10
padding: 1rem
border-radius: var(--border-radius)
max-width: 29%
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)