mirror of
https://github.com/osmarks/website
synced 2025-05-17 14:54:07 +00:00
496 lines
9.8 KiB
Sass
496 lines
9.8 KiB
Sass
$sidenotes-width: 20rem
|
|
$content-margin: 1rem
|
|
$content-width: 40rem
|
|
$navbar-width: 20rem
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
:root
|
|
--box-bg: #d0faab
|
|
--box-border: black
|
|
// xkcd bluegreen
|
|
--link: #017a79
|
|
// xkcd dark blue green
|
|
--visited-link: #005249
|
|
--block-lightness: 85%
|
|
--overlay-opacity: 0.8
|
|
|
|
@font-face
|
|
font-family: 'osmarks-primary'
|
|
font-style: normal
|
|
font-weight: 400
|
|
font-display: swap
|
|
src: url(/assets/osmarks-primary.woff2) format('woff2')
|
|
unicode-range: U+0000-00FF,U+FFFD
|
|
|
|
@font-face
|
|
font-family: 'osmarks-primary'
|
|
font-style: normal
|
|
font-weight: 600
|
|
font-display: swap
|
|
src: url(/assets/osmarks-primary-semibold.woff2) format('woff2')
|
|
unicode-range: U+0000-00FF,U+FFFD
|
|
|
|
@font-face
|
|
font-family: 'osmarks-primary'
|
|
font-style: italic
|
|
font-weight: 400
|
|
font-display: swap
|
|
src: url(/assets/osmarks-primary-italic.woff2) format('woff2')
|
|
unicode-range: U+0000-00FF,U+FFFD
|
|
|
|
@font-face
|
|
font-family: 'osmarks-mono'
|
|
font-style: normal
|
|
font-weight: 400
|
|
font-display: swap
|
|
src: url(/assets/osmarks-mono.woff2) format('woff2')
|
|
unicode-range: U+0000-00C0, U+A2-A9, U+AC-AE, U+00D7, U+00F7, U+FEFF, U+FFFD
|
|
|
|
$headers: "osmarks-mono", "osmarks-primary", "Fira Sans", sans-serif
|
|
$monospace: "osmarks-mono", "Fira Code", monospace
|
|
$body: "osmarks-primary", "Fira Sans", sans-serif
|
|
|
|
body
|
|
margin: 0
|
|
font-family: $body
|
|
line-height: 1.5
|
|
|
|
.footnote-ref
|
|
line-height: 1
|
|
|
|
pre, code, .deemph
|
|
font-family: $monospace
|
|
line-height: 1.3
|
|
font-size: 0.95em
|
|
|
|
a
|
|
text-decoration: none
|
|
color: var(--link)
|
|
&:visited
|
|
color: var(--visited-link)
|
|
|
|
.blog-post a, .sidenotes a
|
|
text-decoration: underline
|
|
|
|
.blog-post, .sidenotes
|
|
text-wrap: pretty
|
|
|
|
nav
|
|
display: flex
|
|
align-items: center
|
|
|
|
padding: 1rem
|
|
margin-bottom: 0.5em
|
|
background: black
|
|
overflow-x: auto
|
|
font-size: 1.25em
|
|
|
|
font-family: $headers
|
|
|
|
.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
|
|
|
|
a, img, picture
|
|
margin-right: 0.5em
|
|
|
|
a
|
|
margin-left: 0.5em
|
|
|
|
.nav-a
|
|
color: #6dedfd
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
margin: 0
|
|
font-weight: 600
|
|
font-family: $headers
|
|
text-align: left
|
|
a
|
|
color: inherit !important
|
|
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: calc(100% - 2 * $content-margin)
|
|
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, .ring, .microblog
|
|
margin-left: -1rem
|
|
margin-right: -1rem
|
|
margin-bottom: 0
|
|
display: flex
|
|
flex-wrap: wrap
|
|
text-align: left
|
|
|
|
> div
|
|
min-width: 20em
|
|
flex: 1 1 20%
|
|
|
|
.microblog > div
|
|
flex: 1 1 30%
|
|
|
|
ul
|
|
list-style-type: square
|
|
padding-left: 1em
|
|
|
|
.isso
|
|
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
|
|
font-family: $headers
|
|
.conditions
|
|
font-style: italic
|
|
|
|
.smallinfo
|
|
font-size: 0.8em
|
|
margin-top: 0.5em
|
|
margin-bottom: 0.5em
|
|
|
|
.imbox
|
|
display: flex
|
|
img, picture
|
|
margin-right: 1em
|
|
height: 8em
|
|
width: 8em
|
|
margin-bottom: auto
|
|
background: black
|
|
aspect-ratio: 1/1
|
|
image-rendering: crisp-edges
|
|
image-rendering: pixelated
|
|
|
|
.caption
|
|
background: lightgray
|
|
border: 1px solid black
|
|
padding: 1em
|
|
margin-bottom: 0.5em
|
|
margin-top: 0.5em
|
|
box-sizing: border-box
|
|
> a
|
|
display: block
|
|
img, picture
|
|
width: 100%
|
|
p
|
|
margin: 0
|
|
|
|
blockquote
|
|
padding-left: 0.8rem
|
|
border-left: 0.4rem solid black
|
|
margin-left: 0.2rem
|
|
|
|
.wider, pre
|
|
> *
|
|
width: calc(100vw - 2 * $content-margin)
|
|
max-width: 80em
|
|
min-width: calc(40rem - 2 * $content-margin)
|
|
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
|
|
box-sizing: border-box
|
|
p
|
|
margin: 0
|
|
|
|
.footnotes-list
|
|
margin: 0
|
|
.footnotes-sep
|
|
display: none
|
|
.footnotes-list
|
|
text-align: justify
|
|
@media (max-width: calc(4 * $content-margin + $content-width + $sidenotes-width))
|
|
// minwidth 1-pane layout
|
|
.sidenotes
|
|
min-width: auto
|
|
width: auto
|
|
max-width: $content-width
|
|
padding: 0
|
|
position: static
|
|
margin-left: $content-margin
|
|
margin-right: $content-margin
|
|
.sidenotes-container
|
|
display: block
|
|
table
|
|
display: block
|
|
overflow-x: scroll
|
|
|
|
.footnote-item.hl1, .footnote-item.hl2, .footnote-item.hl3
|
|
background: var(--box-bg)
|
|
padding: 0.5em
|
|
box-sizing: border-box
|
|
list-style-type: none
|
|
display: block !important
|
|
|
|
@media (min-width: calc(4 * $content-margin + $content-width + $sidenotes-width + $navbar-width))
|
|
// fullwidth 3-pane layout
|
|
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
|
|
.wider
|
|
> *
|
|
width: calc(100vw - 2 * $content-margin - $navbar-width)
|
|
max-width: 80em
|
|
min-width: calc(40rem - 2 * $content-margin - $navbar-width)
|
|
|
|
$hl-border: 3px
|
|
.footnote-item.hl1, .footnote-item.hl2, .footnote-item.hl3
|
|
border-top: solid $hl-border var(--box-border)
|
|
border-bottom: solid $hl-border var(--box-border)
|
|
margin-top: -$hl-border
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
body
|
|
background: black
|
|
color: white
|
|
|
|
nav
|
|
background: #333
|
|
|
|
.ring .art
|
|
background: #444
|
|
|
|
.achievement
|
|
color: black
|
|
|
|
.caption
|
|
background: #333
|
|
|
|
:root
|
|
--box-bg: #001009
|
|
--box-border: #004020
|
|
// bright teal
|
|
--link: #01f9c6
|
|
// aqua green
|
|
--visited-link: #12e193
|
|
--block-lightness: 20%
|
|
--overlay-opacity: 0.5
|
|
|
|
nav .logocont
|
|
color: white
|
|
|
|
blockquote
|
|
border-left: 0.4rem solid white
|
|
|
|
button, select, input, textarea, .textarea
|
|
background: #333
|
|
color: white
|
|
|
|
.imbox
|
|
img, picture
|
|
background: transparent
|
|
|
|
.sidenotes img, .footnotes img
|
|
width: 100%
|
|
max-width: 15em
|
|
display: block
|
|
|
|
.sidenotes img.big
|
|
max-width: 30em
|
|
|
|
.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
|
|
|
|
.epigraph
|
|
position: relative
|
|
padding-left: 3rem
|
|
padding-right: 3rem
|
|
padding-top: 1rem
|
|
padding-bottom: 1rem
|
|
|
|
> div
|
|
font-style: italic
|
|
|
|
.attribution
|
|
text-indent: 2rem
|
|
text-align: right
|
|
font-style: normal
|
|
|
|
> div::after
|
|
content: "\201D"
|
|
right: 0rem
|
|
bottom: 0rem
|
|
|
|
> div::before
|
|
content: "\201C"
|
|
left: 0rem
|
|
top: 0rem
|
|
|
|
> div::before, > div::after
|
|
display: block
|
|
position: absolute
|
|
font-size: 2.5em
|
|
|
|
// TODO
|
|
#comments-wrapper textarea
|
|
width: calc(100% - 0.5em) !important
|
|
|
|
.next
|
|
text-align: right
|
|
|
|
.buttons .button
|
|
margin: 0.2em
|
|
|
|
.search-overlay
|
|
overscroll-behavior: contain
|
|
position: fixed
|
|
overflow: scroll
|
|
top: 0
|
|
left: 0
|
|
bottom: 0
|
|
right: 0
|
|
background: rgba(0, 0, 0, var(--overlay-opacity))
|
|
backdrop-filter: blur(10px)
|
|
padding: 2em
|
|
color: white
|
|
z-index: 1000
|
|
input
|
|
margin: 0.5rem
|
|
font-size: 1.5em
|
|
border: 1px solid green
|
|
a
|
|
color: white
|
|
.search-results
|
|
width: 100%
|
|
max-width: $content-width
|
|
.search-result
|
|
padding: 0.5em
|
|
margin: 0.5em
|
|
.description
|
|
font-style: italic
|
|
|
|
.box
|
|
margin: -1px
|
|
border: 1px solid black
|
|
border-color: var(--box-border)
|
|
background: #b1d1fc
|
|
background: var(--box-bg)
|
|
padding: 12px
|
|
.title
|
|
font-size: 1.1em
|
|
font-family: $headers
|
|
font-weight: 600
|
|
|
|
#citebox
|
|
width: 100%
|
|
|
|
textarea.squiggle
|
|
width: 100%
|
|
|
|
.emphasis
|
|
margin-top: 16px
|
|
margin-bottom: 16px
|
|
padding: 16px
|
|
p
|
|
margin: 0
|
|
|
|
@media print
|
|
.isso
|
|
display: none
|
|
|
|
.sidenotes
|
|
display: block
|
|
li
|
|
position: static !important
|
|
|
|
.cite-this-post
|
|
display: none
|
|
|
|
img
|
|
max-width: 60% !important
|
|
|
|
nav
|
|
display: none
|
|
|
|
.large-button
|
|
padding: 0.5em
|
|
|
|
.squiggle-control
|
|
text-wrap: wrap
|
|
|
|
.ref
|
|
.excerpt
|
|
font-size: 0.9em
|
|
font-style: italic
|