redzuurdesem/themes/desem-swift-theme/assets/sass/_base.sass

182 lines
3.1 KiB
Sass

*
box-sizing: border-box
-webkit-appearance: none
margin: 0
padding: 0
body, html
scroll-behavior: smooth
html
font-size: 1.0rem
@media (min-width: 960px)
font-size: 1.1rem
body
font-family: var(--font)
background-color: var(--bg)
color: var(--text)
text-align: justify
line-height: 1.5
margin: 0 auto
position: relative
font-kerning: normal
display: flex
flex-direction: column
justify-content: space-between
min-height: 100vh
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
a
text-decoration: none
color: inherit
.post_content
blockquote
p
line-height: 1.2em
blockquote
@media (min-width: 960px)
width: calc(100% - -220px + 0px)
margin-left: -90px
@media (min-width: 1120px)
width: calc(100% - -260px + 0px)
margin-left: -130px
opacity: 0.8
position: relative
quotes: '\201C''\201D''\2018''\2019'
margin: 1.2rem 0
display: flex
flex-flow: row wrap
position: relative
&::before
content: url('/images/icons/quote-left-solid.svg')
display: block
position: absolute
width: 32px
margin-left: -40px
p
@media (min-width: 960px)
font-size: 1.8rem !important
@media (min-width: 1120px)
font-size: 2rem !important
padding-left: 0.5rem 0 !important
font-size: 1.5rem !important
letter-spacing: -0.1rem
width: 100%
font-weight: 300
font-style: italic
span
opacity: 0.6
font-size: 1.3rem
white-space: pre
&::before
content: '\A';
h1,h2,h3,h4,h5
font-family: inherit
font-weight: 500
padding: 5px 0
margin: 15px 0
color: inherit
line-height: 1.35
h1
font-size: 200%
h2
font-size: 175%
h3
font-size: 150%
h4
font-size: 125%
h5
font-size: 120%
h6
font-size: 100%
img, svg, video
max-width: 100%
vertical-align: middle
img
height: auto
margin: 1rem auto
padding: 0
figcaption
text-align: center
font-style: italic
margin-bottom: 1.3rem
.titlemeta
font-size: 1.2rem
text-align: center
width: 100%
color: #333333
main
padding-bottom: 45px
flex: 1
ul
list-style: circle
-webkit-padding-start: 0
-moz-padding-start: 0
b, strong
font-weight: 500
hr
border: none
padding: 0.5px
background: var(--theme)
opacity: 0.5
margin: 3rem 0
aside
h3
position: relative
margin: 0 !important
span
&.pager_link
opacity: 0.5
ol
counter-reset: my-awesome-counter
list-style: none !important
padding-left: 3rem
margin-left: 0.5rem
@media screen and (min-width: 667px)
// margin-left: 1rem
li
margin: 0 0 0.5rem 0
counter-increment: my-awesome-counter
position: relative
padding-left: 0.5rem !important
&::before
content: counter(my-awesome-counter)
font-size: 1.15rem
display: inline-grid
align-items: center
font-weight: 500
position: absolute
--size: 1.8rem
left: -2rem
line-height: var(--size)
width: var(--size)
height: var(--size)
color: var(--theme)
border-radius: 50%
text-align: center
top: 0.25rem
border-right: 2px solid var(--theme)
&.align::before
top: 1rem