website/css/style.sass

164 lines
2.8 KiB
Sass

---
---
@font-face
font-family: ComicSans
src: url('/css/comic.woff2')
*
margin: 0
padding: 0
html,
body
font-family: Verdana, Arial, sans-serif
color: #FFFFFF
background: #111111
line-height: 1.5em
max-width: 1000px
margin: 0 auto
h1,
h2,
h3
font-family: ComicSans
line-height: 1em
height: 1em
vertical-align: middle
h1
text-align: center
background: linear-gradient(90deg, #FF0000, #00FF00 50%, #0000FF)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
-webkit-text-stroke: 2px #FFFFFF
paint-order: stroke fill
font-size: 6em
font-size: clamp(2em, 10vw, 8em)
margin-bottom: 30px
@media (max-width: 800px)
-webkit-text-stroke: 1px #FFFFFF
h2
font-size: 3em
h3
font-size: 2em
margin-top: 1em
#content
margin: 0 0 0 11em
@media (max-width: 800px)
margin: 5px
a
text-decoration: underline
&:link
color: #FFFFFF
&:visited
color: #CCCCCC
&:hover,
&:active,
&:focus
color: #FF4400
.button-list
list-style: none
margin: 0 auto
padding: 0
max-width: 30em
a
display: block
padding: 0.5em
margin: 1em 0
border-radius: 10px
text-decoration: none
font-size: 1.5em
//border: 1px solid #CCCCCC
&:link,
&:visited
color: inherit
&:hover,
&:active,
&:focus
color: inherit
filter: brightness(90%)
img
max-height: 1em
padding-right: 0.2em
nav
float: left
width: 10em
@media (max-width: 800px)
float: none
width: auto
text-align: center
a
color: #FFFFFF
padding: 2px 5px
&.current-page
font-weight: bolder
text-decoration: none
@media (min-width: 801px)
display: block
border: 5px outset #AAAAAA;
background-color: #CCCCCC;
margin-bottom: 10px
text-decoration: none
color: #000000
text-align: right
&.current-page,
&:hover,
&:active,
&:focus
border-style: inset
p
margin-bottom: 1em
footer
clear: both
margin: 30px 0 0 0
border-top: 1px solid #FFFFFF
text-align: center
padding: 2px
a
color: #FFFFFF
&:hover,
&:active,
&:focus
color: #FF4400
#skip-to-content
visibility: hidden
ul
margin: 1em 0 0 0
padding: 0 0 0 1em
.post-metadata
margin: 0.5em 0
color: #999999
font-size: 0.9em
img
vertical-align: text-bottom