410 lines
6.5 KiB
Sass
410 lines
6.5 KiB
Sass
$color-head: #313131
|
|
$color-text: #515151
|
|
$color-link: #268bd2
|
|
$color-grey: #9a9a9a
|
|
$border-color: #e5e5e5
|
|
|
|
$smaller: .95em
|
|
|
|
/* Global */
|
|
@font-face
|
|
font-family: "Bitstream Vera Sans"
|
|
src: url(vera.ttf)
|
|
|
|
@font-face
|
|
font-family: "Bitstream Vera Sans Mono"
|
|
src: url(vera-mono.ttf)
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
html, body
|
|
margin: 0
|
|
padding: 0
|
|
|
|
html
|
|
font-family: "Bitstream Vera Sans", "Verdana", "Geneva", sans-serif
|
|
font-size: 16px
|
|
line-height: 1.5
|
|
|
|
body
|
|
color: $color-text
|
|
|
|
a
|
|
color: $color-link
|
|
text-decoration: none
|
|
&:hover, &:focus
|
|
text-decoration: underline
|
|
|
|
em
|
|
font-size: $smaller
|
|
|
|
/* Headings */
|
|
h1, h2, h3, h4, h5, h6
|
|
margin-bottom: .5rem
|
|
font-weight: bold
|
|
line-height: 1.25
|
|
color: $color-head
|
|
text-rendering: optimizeLegibility
|
|
|
|
h1
|
|
font-size: 2rem
|
|
|
|
h2
|
|
margin-top: 1rem
|
|
font-size: 1.5rem
|
|
|
|
h3
|
|
margin-top: 1.5rem
|
|
font-size: 1.25rem
|
|
|
|
h4, h5, h6
|
|
margin-top: 1rem
|
|
font-size: 1rem
|
|
|
|
/* Body text */
|
|
p
|
|
margin-top: 0
|
|
margin-bottom: 1rem
|
|
|
|
strong
|
|
color: $color-head
|
|
|
|
|
|
/* Lists */
|
|
ul, ol, dl
|
|
margin-top: 0
|
|
margin-bottom: 1rem
|
|
|
|
dt
|
|
font-weight: bold
|
|
|
|
dd
|
|
margin-bottom: .5rem
|
|
|
|
|
|
/* Misc */
|
|
hr
|
|
position: relative
|
|
margin: 1.5rem 0
|
|
border: 0
|
|
border-top: 1px solid #eee
|
|
border-bottom: 1px solid #fff
|
|
|
|
abbr
|
|
font-size: 85%
|
|
font-weight: bold
|
|
color: #555
|
|
text-transform: uppercase
|
|
&[title]
|
|
cursor: help
|
|
border-bottom: 1px dotted $border-color
|
|
|
|
/* Code */
|
|
code, pre
|
|
font-family: "Bitstream Vera Sans Mono", Menlo, Monaco, "Courier New", monospace
|
|
|
|
code
|
|
padding: .25em .5em
|
|
font-size: 85%
|
|
color: #bf616a
|
|
background-color: #f9f9f9
|
|
border-radius: 3px
|
|
|
|
pre
|
|
display: block
|
|
margin-top: 0
|
|
margin-bottom: 1rem
|
|
padding: 1rem
|
|
font-size: .8rem
|
|
line-height: 1.4
|
|
white-space: pre
|
|
white-space: pre-wrap
|
|
word-break: break-all
|
|
word-wrap: break-word
|
|
background-color: #f9f9f9
|
|
|
|
pre code
|
|
padding: 0
|
|
font-size: 100%
|
|
color: inherit
|
|
background-color: transparent
|
|
|
|
.highlight
|
|
margin-bottom: 1rem
|
|
border-radius: 4px
|
|
pre
|
|
margin-bottom: 0
|
|
|
|
|
|
blockquote
|
|
padding: .5rem 1rem
|
|
margin: .8rem 0
|
|
color: #7a7a7a
|
|
border-left: .25rem solid $border-color
|
|
p:last-child
|
|
margin-bottom: 0
|
|
@media (min-width: 30em)
|
|
padding-right: 5rem
|
|
padding-left: 1.25rem
|
|
|
|
img
|
|
display: block
|
|
margin: 0 0 1rem
|
|
border-radius: 5px
|
|
max-width: 100%
|
|
|
|
/* Tables */
|
|
table
|
|
margin-bottom: 1rem
|
|
width: 100%
|
|
border: 1px solid $border-color
|
|
border-collapse: collapse
|
|
|
|
td, th
|
|
padding: .25rem .5rem
|
|
border: 1px solid $border-color
|
|
|
|
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th
|
|
background-color: #f9f9f9
|
|
|
|
|
|
/* Custom type */
|
|
.lead
|
|
font-size: 1.25rem
|
|
font-weight: 300
|
|
|
|
/* Messages */
|
|
.message
|
|
margin-bottom: 1rem
|
|
padding: 1rem
|
|
color: #717171
|
|
background-color: #f9f9f9
|
|
|
|
|
|
/* Container */
|
|
.container
|
|
max-width: 45rem
|
|
padding-left: 1rem
|
|
padding-right: 1rem
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
/* Posts and pages */
|
|
.page, .post
|
|
margin-bottom: 4em
|
|
|
|
/* Blog post or page title */
|
|
.page-title, .post-title, .post-title a
|
|
color: #303030
|
|
|
|
.page-title, .post-title
|
|
margin-top: 0
|
|
|
|
.post-content
|
|
margin-top: .7rem
|
|
|
|
/* Meta data line below post title */
|
|
.post-infos
|
|
display: block
|
|
margin-bottom: -.4rem
|
|
|
|
.post-infos, .post-tags
|
|
color: $color-grey
|
|
|
|
.post-infos a, .post-tags a, .breadcrumbnav a
|
|
color: $color-text
|
|
|
|
.meta, .post-tags, .breadcrumbnav, .breadcrumbnav li
|
|
display: inline
|
|
padding: 0
|
|
|
|
.meta
|
|
font-size: 0.8em
|
|
|
|
.post-tags a::before
|
|
content: "#"
|
|
|
|
.breadcrumbnav li:not(:last-child):after
|
|
content: '➤'
|
|
color: $color-grey
|
|
margin: .2em
|
|
|
|
/* Table of contents */
|
|
.toc, .sections
|
|
font-size: $smaller
|
|
a
|
|
color: $color-grey
|
|
ul
|
|
padding-left: 1rem
|
|
margin-bottom: 0
|
|
list-style: none
|
|
nav>ul
|
|
padding: 0
|
|
|
|
/* Comtodon */
|
|
.comtodon
|
|
font-size: $smaller
|
|
.status
|
|
position: relative
|
|
.status-content, .reply-main
|
|
margin-bottom: .5em
|
|
.status-content
|
|
border-left: .25rem solid $border-color
|
|
padding-left: .5em
|
|
&.sensitive
|
|
content: 'Sensitive'
|
|
.replies
|
|
margin-left: 1em
|
|
p
|
|
margin: .1em
|
|
a
|
|
text-decoration: none
|
|
color: #777
|
|
.emoji
|
|
height: 1em
|
|
display: inline
|
|
margin: 0
|
|
border-radius: 5px
|
|
max-width: 100%
|
|
.author
|
|
display: grid
|
|
grid-template-columns: 3.3em auto
|
|
grid-template-rows: repeat(3, 1em)
|
|
grid-gap: .1em
|
|
.avatar
|
|
border-radius: 20%
|
|
grid-area: 1 / 1 / 4 / 1
|
|
height: 100%
|
|
.name
|
|
color: black
|
|
font-weight: bold
|
|
.acct:before
|
|
content: '@'
|
|
.date
|
|
float: right
|
|
.reply-main
|
|
display: inline-block
|
|
color: white
|
|
background-color: #777
|
|
border-radius: .5em
|
|
padding: .1em .3em
|
|
&:after
|
|
content: '✉'
|
|
margin-left: .5em
|
|
.reply
|
|
visibility: hidden
|
|
position: absolute
|
|
right: .1em
|
|
top: 2em
|
|
&:after
|
|
content: '✉'
|
|
visibility: visible
|
|
display: block
|
|
position: absolute
|
|
right: 0
|
|
bottom: 0
|
|
color: white
|
|
background-color: #777
|
|
border-radius: .5em
|
|
font-size: .8em
|
|
padding: .1em .3em
|
|
|
|
/* Pagination */
|
|
.pagination
|
|
a
|
|
color: $color-grey
|
|
.active a
|
|
color: $color-text
|
|
.page-item
|
|
margin: .2em
|
|
display: inline
|
|
|
|
/* Sidebar */
|
|
.sidebar
|
|
text-align: center
|
|
padding: 2rem 1rem
|
|
color: rgba(255,255,255,.6)
|
|
background-color: #202020
|
|
a
|
|
color: white
|
|
.sidebar-about
|
|
h1
|
|
color: white
|
|
margin-top: 0
|
|
font-size: 3rem
|
|
img
|
|
margin: auto
|
|
width: 25vw
|
|
|
|
.sidebar-nav
|
|
ul
|
|
padding-left: 0
|
|
list-style: none
|
|
li
|
|
display: block
|
|
a:hover, a:focus
|
|
text-decoration: underline
|
|
.active
|
|
font-weight: bold
|
|
|
|
/* Container */
|
|
.content
|
|
padding-top: 3rem
|
|
padding-bottom: 3rem
|
|
|
|
/* Note */
|
|
.note
|
|
display: none
|
|
|
|
/* Mobile first */
|
|
@media (min-width: 48em)
|
|
html
|
|
font-size: 16px
|
|
.sidebar
|
|
position: fixed // TODO: better height / scroll
|
|
top: 0
|
|
left: 0
|
|
bottom: 0
|
|
width: 18rem
|
|
text-align: left
|
|
.sidebar-about
|
|
img
|
|
width: auto
|
|
.sidebar-sticky
|
|
position: absolute
|
|
right: 1rem
|
|
bottom: 1rem
|
|
left: 1rem
|
|
.content
|
|
max-width: 45rem
|
|
margin-left: 20rem
|
|
margin-right: 2rem
|
|
.layout-reverse
|
|
.sidebar
|
|
left: auto
|
|
right: 0
|
|
.content
|
|
margin-left: 2rem
|
|
margin-right: 20rem
|
|
|
|
@media (min-width: 58em)
|
|
html
|
|
font-size: 20px
|
|
|
|
@media (min-width: 64em)
|
|
.content
|
|
margin-left: 22rem
|
|
margin-right: 4rem
|
|
.layout-reverse .content
|
|
margin-left: 4rem
|
|
margin-right: 22rem
|
|
|
|
@media (min-width: 86em)
|
|
.note
|
|
display: inline-block
|
|
float: right
|
|
padding-top: 4rem
|
|
padding-right: 4rem
|
|
.layout-reverse .note
|
|
padding-right: 24rem |