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
|
|
|
|
2022-01-14 18:13:46 +01:00
|
|
|
.center
|
|
|
|
|
text-align: center
|
|
|
|
|
|
2021-10-21 22:34:05 +02:00
|
|
|
ul.no-style
|
|
|
|
|
margin: 0
|
|
|
|
|
padding: 0
|
|
|
|
|
list-style-type: none
|
|
|
|
|
|
2022-01-14 18:14:06 +01:00
|
|
|
li
|
|
|
|
|
padding: .3rem 0
|
|
|
|
|
|
2021-10-21 22:34:05 +02:00
|
|
|
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
|
|
|
|
|
|
|
|
|
|
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"
|
