zola-sam/upstream/sass/_elements.sass

136 lines
2.8 KiB
Sass

#splash
margin: auto 0
height: 100vh
width: 45%
overflow: hidden
@media screen and (max-width: 736px)
width: 90%
.big-link
font-family: $font
font-size: 3rem
font-weight: 300
margin-bottom: 2rem
line-height: 1.5em
#title
margin-top: 3rem
font-family: $font
font-size: 2rem
line-height: 3rem
margin-bottom: 2rem
#content
margin: 2rem 0
line-height: 2em
letter-spacing: 2px
div
width: 100%
height: 100%
margin-bottom: 1em
& h1,h2,h3
margin: 1em 0em
text-align: left
& p
margin-bottom: 1em
line-height: 1.8
letter-spacing: 1.5px
opacity: 0.8
& .highlight
width: 100%
& pre
line-height: 2rem
border-radius: 3px
padding: 1rem
overflow-x: auto
background-color: $code-block
width: 100%
margin-bottom: 1em
& pre > code
border: none
& code
font-size: 0.9rem
font-family: 'Source Code Pro', monospace
padding: 0.1rem
border-radius: 3px
border: 1px solid $links
& img
width: 100%
max-width: 100%
display: block
margin: 2rem auto
opacity: 1
& blockquote
background-color: $links
color: $dark-grey
padding: 2rem
margin: 2rem 1rem 2rem 1rem
border-radius: 3px
a
color: $black
& ul
margin-top: 1rem
& li
list-style: disc
& table
width: 100%
border-collapse: collapse
margin: 1rem 0
overflow-x: auto
th
font-size: 0.9rem
td, th
padding: 2px 5px
text-align: center
border: 1px solid $links
& li
line-height: 2
padding-left: 0.4rem
&:last-child
margin-bottom: 1rem
& ul
list-style: disc outside
padding-left: 2rem
& ol
list-style: decimal outside
padding-left: 2rem
& .gist
width: 100%
td, th
text-align: left
border: 0
& .gist-meta
background-color: transparent
color: $body-text
& a
color: $body-text
.tag
padding: 0.25em 0em
margin-right: 0.5em
opacity: 0.6
.grid
display: grid
grid-gap: 20px
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
grid-auto-rows: 400px
@media screen and (max-width: 736px)
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))
.grid > div
background-color: transparent
overflow: hidden
.grid > div > img
height: 100%
width: 100%
object-fit: cover
opacity: 1
.grid > div > a > img
height: 100%
width: 100%
object-fit: cover
opacity: 1