mirror of https://github.com/osmarks/website
302 lines
6.3 KiB
Sass
302 lines
6.3 KiB
Sass
$sidenotes-width: 20rem
|
|
$content-margin: 1rem
|
|
$content-width: 40rem
|
|
$navbar-width: 20rem
|
|
|
|
:root
|
|
--autocol-lightness: 80%
|
|
--autocol-saturation: 100%
|
|
|
|
@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
|
|
|
|
.blog-post a, .sidenotes a
|
|
text-decoration: underline
|
|
|
|
|
|
nav
|
|
display: flex
|
|
align-items: center
|
|
|
|
padding: 1em
|
|
margin-bottom: 0.5em
|
|
background: black
|
|
overflow-x: auto
|
|
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, picture
|
|
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
|
|
color: inherit
|
|
text-decoration: none !important
|
|
|
|
summary h1, summary h2
|
|
display: inline
|
|
|
|
// for easier viewing on big screen devices, narrow the width of text
|
|
// also make links a bit more distinct
|
|
main
|
|
max-width: 100%
|
|
width: $content-width
|
|
text-align: justify
|
|
margin-left: $content-margin
|
|
margin-right: $content-margin
|
|
&.fullwidth
|
|
width: calc($content-width + $sidenotes-width + -0.5 * $content-margin)
|
|
margin-left: auto
|
|
margin-right: auto
|
|
padding-left: $content-margin
|
|
padding-right: $content-margin
|
|
|
|
.blog, .experiments, .atl, .microblog
|
|
margin-left: -1rem
|
|
margin-right: -1rem
|
|
margin-bottom: 0
|
|
display: flex
|
|
flex-wrap: wrap
|
|
> div
|
|
min-width: 20em
|
|
background: #eee
|
|
padding: 1em
|
|
flex: 1 1 20%
|
|
|
|
.microblog > div
|
|
flex: 1 1 30%
|
|
|
|
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, picture
|
|
padding-right: 1em
|
|
height: 8em
|
|
width: 8em
|
|
|
|
.title
|
|
font-size: 1.1em
|
|
font-weight: 600
|
|
|
|
.caption
|
|
width: calc(100% - 3em)
|
|
background: lightgray
|
|
border: 1px solid black
|
|
padding: 1em
|
|
margin: 0.5em
|
|
img, picture
|
|
width: 100%
|
|
|
|
blockquote
|
|
padding-left: 0.4rem
|
|
border-left: 0.4rem solid black
|
|
margin-left: 0.2rem
|
|
|
|
.wider
|
|
width: calc(100vw - 2 * $content-margin)
|
|
max-width: 80em
|
|
min-width: 40em
|
|
> *
|
|
min-width: 40em
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.microblog p
|
|
margin: 0
|
|
|
|
.sidenotes-container
|
|
display: flex
|
|
flex-wrap: wrap
|
|
.sidenotes
|
|
width: $sidenotes-width
|
|
min-width: $sidenotes-width
|
|
padding-left: 1.5rem
|
|
position: relative
|
|
p
|
|
margin: 0
|
|
|
|
.footnotes-sep
|
|
display: none
|
|
.footnotes-list
|
|
text-align: justify
|
|
@media (max-width: calc(2 * $content-margin + $content-width + $sidenotes-width))
|
|
.sidenotes
|
|
min-width: auto
|
|
width: auto
|
|
max-width: $content-width
|
|
padding: 0
|
|
margin-left: $content-margin
|
|
margin-right: $content-margin
|
|
.footnotes-sep
|
|
display: block
|
|
|
|
@media (min-width: calc(2 * $content-margin + $content-width + $sidenotes-width + $navbar-width))
|
|
body
|
|
display: flex
|
|
.nav-container
|
|
flex-grow: 1
|
|
nav
|
|
display: block
|
|
> a, .logocont
|
|
display: block
|
|
margin-right: 0
|
|
width: $navbar-width
|
|
font-size: 1.5em
|
|
text-align: right
|
|
margin-bottom: 0
|
|
box-sizing: border-box
|
|
top: 0
|
|
position: sticky
|
|
margin-left: auto
|
|
overflow-x: auto
|
|
.sidenotes-container
|
|
flex-grow: 1
|
|
main.fullwidth
|
|
margin-left: $content-margin
|
|
margin-right: $content-margin
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
body
|
|
background: black
|
|
color: white
|
|
|
|
nav
|
|
background: #333
|
|
|
|
.ring .art
|
|
background: #444
|
|
|
|
.achievement
|
|
color: black
|
|
|
|
a
|
|
color: lightblue
|
|
&:visited
|
|
color: #e17701
|
|
|
|
.caption
|
|
background: #333
|
|
|
|
:root
|
|
--autocol-lightness: 10%
|
|
--autocol-saturation: 50%
|
|
|
|
nav .logocont
|
|
color: white
|
|
|
|
.sidenotes img
|
|
width: 100%
|
|
max-width: 15em
|
|
display: block
|
|
|
|
.hoverdefn
|
|
text-decoration-style: dotted
|
|
text-decoration-line: underline
|
|
|
|
.section-header
|
|
margin-top: 0.5em
|
|
|
|
table
|
|
border-collapse: collapse
|
|
td, th
|
|
border: 1px solid gray
|
|
padding: 0.4em
|
|
th
|
|
white-space: nowrap |