resilien/assets/styles/main.sass

117 lines
2.4 KiB
Sass
Raw Normal View History

2021-10-22 17:05:23 +02:00
$size-small: 600px
2021-10-22 16:43:20 +02:00
@import "font"
2021-10-21 22:34:05 +02:00
body
2021-10-22 16:43:20 +02:00
--color-background: #fff8eb
--color-paragraph: #2d3824
--color-highlight: #c14508
--border-style: dashed
--border-size: 4px
--link-style: dotted
--tile: 2rem
color: var(--color-paragraph)
background: var(--color-background)
2021-10-21 22:34:05 +02:00
margin: 0 auto
2021-10-22 16:43:20 +02:00
padding: 0 var(--tile)
2021-10-21 22:34:05 +02:00
max-width: 800px
2021-10-22 16:43:20 +02:00
2021-10-21 22:34:05 +02:00
@media screen and (max-width: $size-small)
2021-10-22 16:43:20 +02:00
--border-size: 2px
--tile: 1rem
2021-10-21 22:34:05 +02:00
hr
border: 0
2021-10-22 16:43:20 +02:00
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
margin: var(--tile) auto
@media screen and (max-width: $size-small)
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
2021-10-21 22:34:05 +02:00
ul.no-style
margin: 0
padding: 0
list-style-type: none
a, h1, h2, h3
2021-10-22 16:43:20 +02:00
color: var(--color-highlight)
2021-10-21 22:34:05 +02:00
2021-10-22 16:43:20 +02:00
a
text-decoration: underline var(--link-style)
&:hover
text-decoration: underline
h1, h2, h3
2021-10-21 22:34:05 +02:00
text-align: center
2021-10-22 16:43:20 +02:00
h2
margin: calc(var(--tile)*1.5) auto
h3
border: var(--border-size) var(--border-style) var(--color-highlight)
// display: inline-block
margin: calc(var(--tile)*1.5) auto var(--tile)
padding: var(--tile)
2021-10-21 22:34:05 +02:00
.footer
font-size: 0.8rem
2021-10-22 17:05:23 +02:00
padding-bottom: calc(var(--tile)/2)
2021-10-21 22:34:05 +02:00
2021-10-22 16:43:20 +02:00
@media screen and (max-width: $size-small)
.cell, .cell.-right
text-align: center
flex: 0 0 100%
2021-10-22 17:05:23 +02:00
padding-bottom: calc(var(--tile)/2)
2021-10-22 16:43:20 +02:00
.flex
--margin-tile: calc(var(--tile)/2)
margin: calc(var(--margin-tile) * -1)
2021-10-21 22:34:05 +02:00
padding: 0
list-style-type: none
2021-10-22 16:43:20 +02:00
width: calc(100% + 2 * var(--margin-tile))
2021-10-21 22:34:05 +02:00
display: flex
flex-wrap: wrap
li
text-align: center
2021-10-22 16:43:20 +02:00
padding: var(--margin-tile)
flex: 0 0 50%
2021-10-21 22:34:05 +02:00
box-sizing: border-box
img
max-width: 100%
width: 40%
2021-10-22 16:43:20 +02:00
@media screen and (max-width: $size-small)
margin: 0
width: 100%
li
flex: 0 0 100%
.quote
border: var(--border-size) var(--border-style) var(--color-highlight)
padding: var(--tile)
margin: calc(1.5 * var(--tile)) 0
position: relative
text-align: center
h2
color: var(--color-paragraph)
margin: 0
strong
color: var(--color-highlight)
font-size: 130%
2021-10-21 22:34:05 +02:00
// Grid
.grid { display: flex; flex-wrap: wrap; }
.grid.\-middle { align-items: center; }
2021-10-22 16:43:20 +02:00
.grid.\-bottom { align-items: end; }
2021-10-21 22:34:05 +02:00
.cell { flex: 1; box-sizing: border-box; }
.cell.\-left { text-align: left ;}
.cell.\-right { text-align: right; }
@import "../../themes/hugo-theme-lowtech/assets/styles/obfuscates"