website/style.sass

166 lines
3.6 KiB
Sass

@font-face
font-family: 'Titillium Web'
font-style: normal
font-weight: 400
font-display: swap
src: url(/assets/titillium-web.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
@font-face
font-family: 'Titillium Web'
font-style: normal
font-weight: 600
font-display: swap
src: url(/assets/titillium-web-semibold.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
@font-face
font-family: 'Share Tech Mono'
font-style: normal
font-weight: 400
font-display: swap
src: url(/assets/share-tech-mono.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
body
margin: 0
font-family: 'Titillium Web', 'Fira Sans', sans-serif
line-height: 1.3
pre, code, .deemph
font-family: 'Share Tech Mono', monospace
a
text-decoration: none
nav
display: flex
align-items: center
padding: 1em
margin-bottom: 0.5em
background: black
overflow-x: scroll
font-size: 1.1em
.logo
width: 1.5rem
height: 1.5rem
image-rendering: crisp-edges
image-rendering: pixelated
.logocont
display: flex
align-items: center
font-style: italic
color: white
font-size: 1.25em
a, img
margin-right: 0.5em
@for $i from 1 through 6
a:nth-child(#{$i + 1})
color: hsl(120 + ($i * 30), 100%, 80%)
h1, h2, h3, h4, h5, h6
margin: 0
font-weight: 600
a
text-decoration: none !important
color: inherit
main, .header
margin-left: 1em
margin-right: 1em
// for easier viewing on big screen devices, narrow the width of text
// also make links a bit more distinct
main.blog-post
max-width: 40em
text-align: justify
a
text-decoration: underline
.blog, .experiments, .atl
margin: -0.5em
margin-bottom: 0
display: flex
flex-wrap: wrap
> div
min-width: 20em
background: #eee
margin: 0.5em
padding: 1em
flex: 1 1 20%
main
margin-top: 1em
ul
list-style-type: square
padding-left: 1em
.isso
padding: 1em
overflow-x: clip
button, select, input, textarea, .textarea
border-radius: 0 !important
border: 1px solid gray
box-shadow: none !important
.achievements
position: fixed
bottom: 0
left: 0
.achievement
cursor: pointer
.achievement
border: 1px solid black
margin: 0.5em
padding: 0.5em
max-width: 40em
.title
font-weight: 500
.conditions
font-style: italic
.smallinfo
font-size: 0.8em
margin-top: 0.5em
margin-bottom: 0.5em
.ring
.art
flex-direction: column
flex: 1 1 25%
.sum
font-size: 0.8rem
flex: 1 1 0
.atr
text-align: right
font-size: 0.8rem
color: #555
.imbox
display: flex
img
padding-right: 1em
height: 8em
width: 8em
.title
font-size: 1.1em
font-weight: 600
.caption
width: calc(100% - 2em)
background: lightgray
border: 1px solid black
padding: 1em
margin: -1px
img
width: 100%