2021-10-15 22:30:12 +01:00
/* Colors */
: root {
2021-10-20 18:27:40 +01:00
--header : # 333 ;
2021-10-20 16:05:46 +01:00
--border : # C0C0C0 ;
2022-09-04 13:55:16 +01:00
--text : # fff ;
2021-10-20 19:36:59 +01:00
--visited : # 660066 ;
2022-09-04 14:19:52 +01:00
--link : # fff ;
2021-10-20 15:54:55 +01:00
--bg : # fff ;
2021-10-20 19:16:27 +01:00
--code-bg : # f6f6f6 ;
2021-10-20 19:25:07 +01:00
--header-text : # 333 ;
2021-10-15 22:30:12 +01:00
}
2021-10-20 17:47:33 +01:00
/ * @ media ( prefers-color-scheme : dark ) {
2021-10-20 15:54:55 +01:00
: root {
2021-10-20 17:01:45 +01:00
body {
--bg : # 333 ;
--text : # fff
2022-03-27 17:01:06 +01:00
2021-10-20 17:01:45 +01:00
}
2021-10-20 15:54:55 +01:00
}
2021-10-20 17:47:33 +01:00
* /
2022-03-27 17:01:06 +01:00
/ * @ media ( prefers-color-scheme : dark ) {
2021-10-20 18:16:28 +01:00
: root {
2021-10-20 18:27:40 +01:00
--header : # 333 ;
2021-10-20 18:16:28 +01:00
--border : # C0C0C0 ;
--text : # fff ;
2021-10-20 19:36:59 +01:00
--visited : # 660066 ;
2022-02-10 23:02:14 +00:00
--link : # 0000FF ;
2021-10-20 19:19:06 +01:00
--bg : # 36393f ;
--code-bg : # 2f3136 ;
2021-10-20 19:25:07 +01:00
--header-text : # 666e5c ;
2021-10-20 17:47:33 +01:00
}
}
2022-03-27 17:01:06 +01:00
* /
2021-10-20 17:47:33 +01:00
2021-10-15 22:30:12 +01:00
/* Global stylesheet */
* {
box-sizing : border-box ;
2022-09-04 14:19:52 +01:00
/*border: 3px solid #73AD21; toggle to debug borders */
2021-10-15 22:30:12 +01:00
}
html ,
body {
padding : 0 ;
margin : 0 ;
font-family : -apple-system , system-ui , sans-serif ;
2021-10-20 18:21:00 +01:00
color : var ( --text ) ;
background-color : var ( --bg ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 17:41:59 +01:00
2021-10-15 22:30:12 +01:00
p : last-child {
margin-bottom : 0 ;
}
p ,
. tmpl-post li ,
img {
max-width : 37 . 5em ; /* 600px /16 */
}
p ,
. tmpl-post li {
line-height : 1 . 45 ;
}
a [ href ] {
2021-10-20 18:21:00 +01:00
color : var ( --link ) ;
2021-10-15 22:30:12 +01:00
}
a [ href ] : visited {
2021-10-20 19:33:24 +01:00
color : var ( --link ) ;
2021-10-15 22:30:12 +01:00
}
main {
padding : 1rem ;
}
main : first-child {
margin-top : 0 ;
}
header {
2021-10-20 18:21:00 +01:00
border-bottom : 1px dashed var ( --header ) ;
2021-10-20 19:28:42 +01:00
color : var ( --text )
2021-10-15 22:30:12 +01:00
}
header : after {
content : "" ;
display : table ;
clear : both ;
}
table {
margin : 1em 0 ;
}
table td ,
table th {
padding-right : 1em ;
}
pre ,
code {
font-family : Consolas , Menlo , Monaco , "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , "Courier New" , Courier , monospace ;
line-height : 1 . 5 ;
2022-03-27 17:01:06 +01:00
2021-10-15 22:30:12 +01:00
}
pre {
font-size : 14px ;
line-height : 1 . 375 ;
direction : ltr ;
text-align : left ;
white-space : pre ;
word-spacing : normal ;
word-break : normal ;
-moz-tab-size : 2 ;
-o-tab-size : 2 ;
tab-size : 2 ;
-webkit-hyphens : none ;
-moz-hyphens : none ;
-ms-hyphens : none ;
hyphens : none ;
padding : 1em ;
margin : . 5em 0 ;
2021-10-29 02:27:47 +01:00
overflow-y : auto ;
2021-10-29 02:37:16 +01:00
max-width : 90vw ;
2021-10-29 02:27:47 +01:00
}
2021-10-21 05:06:05 +01:00
/*background-color: var(--code-bg)*/
2021-10-15 22:30:12 +01:00
code {
2021-10-29 01:26:04 +01:00
word-break : break-all ! important ;
2021-10-15 22:30:12 +01:00
}
. highlight-line {
display : block ;
padding : 0 . 125em 1em ;
text-decoration : none ; /* override del, ins, mark defaults */
color : inherit ; /* override del, ins, mark defaults */
}
/* allow highlighting empty lines */
. highlight-line : empty : before {
content : " " ;
}
/* avoid double line breaks when using display: block; */
. highlight-line + br {
display : none ;
}
. highlight-line-isdir {
color : # b0b0b0 ;
background-color : # 222 ;
}
. highlight-line-active {
background-color : # 444 ;
background-color : hsla ( 0 , 0 % , 27 % , . 8 ) ;
}
. highlight-line-add {
background-color : # 45844b ;
}
. highlight-line-remove {
background-color : # 902f2f ;
}
/* Header */
. home {
padding : 0 1rem ;
float : left ;
margin : 1rem 0 ; /* 16px /16 */
font-size : 1em ; /* 16px /16 */
}
. home : link : not ( : hover ) {
text-decoration : none ;
}
/* Nav */
. nav {
padding : 0 ;
list-style : none ;
float : left ;
margin-left : 1em ;
}
. nav-item {
display : inline-block ;
margin-right : 1em ;
}
. nav-item a [ href ] : not ( : hover ) {
text-decoration : none ;
}
. nav-item-active {
font-weight : 700 ;
text-decoration : underline ;
}
/* Posts list */
. postlist {
list-style : none ;
padding : 0 ;
}
. postlist-item {
display : flex ;
flex-wrap : wrap ;
align-items : baseline ;
counter-increment : start-from -1 ;
line-height : 1 . 8 ;
}
. postlist-item : before {
display : inline-block ;
pointer-events : none ;
content : "" counter ( start-from , decimal-leading-zero ) ". " ;
line-height : 100 % ;
text-align : right ;
}
. postlist-date ,
. postlist-item : before {
font-size : 0 . 8125em ; /* 13px /16 */
2021-10-20 18:21:00 +01:00
color : var ( --text ) ;
2021-10-15 22:30:12 +01:00
}
. postlist-date {
word-spacing : -0 . 5px ;
}
. postlist-link {
padding-left : . 25em ;
padding-right : . 25em ;
text-underline-position : from-font ;
text-underline-offset : 0 ;
text-decoration-thickness : 1px ;
}
. postlist-item-active . postlist-link {
font-weight : bold ;
}
. tmpl-home . postlist-link {
font-size : 1 . 1875em ; /* 19px /16 */
font-weight : 700 ;
}
/* Tags */
. post-tag {
display : inline-flex ;
align-items : center ;
justify-content : center ;
text-transform : uppercase ;
font-size : 0 . 75em ; /* 12px /16 */
padding : 0 . 08333333333333em 0 . 3333333333333em ; /* 1px 4px /12 */
margin-left : 0 . 6666666666667em ; /* 8px /12 */
margin-top : 0 . 5em ; /* 6px /12 */
margin-bottom : 0 . 5em ; /* 6px /12 */
2021-10-20 18:21:00 +01:00
color : var ( --text ) ;
border : 1px solid var ( --border ) ;
2021-10-15 22:30:12 +01:00
border-radius : 0 . 25em ; /* 3px /12 */
text-decoration : none ;
line-height : 1 . 8 ;
}
a [ href ] . post-tag ,
a [ href ] . post-tag : visited {
color : inherit ;
}
a [ href ] . post-tag : hover ,
a [ href ] . post-tag : focus {
2021-10-20 18:21:00 +01:00
background-color : var ( --header ) ;
2021-10-15 22:30:12 +01:00
}
. postlist-item > . post-tag {
align-self : center ;
}
/* Warning */
. warning {
background-color : # ffc ;
padding : 1em 0 . 625em ; /* 16px 10px /16 */
}
. warning ol : only-child {
margin : 0 ;
}
/* Direct Links / Markdown Headers */
. direct-link {
2022-03-27 17:01:06 +01:00
font-family : sans-serif ;
2021-10-15 22:30:12 +01:00
text-decoration : none ;
font-style : normal ;
margin-left : . 1em ;
}
a [ href ] . direct-link ,
a [ href ] . direct-link : visited {
color : transparent ;
}
a [ href ] . direct-link : focus ,
a [ href ] . direct-link : focus : visited ,
: hover > a [ href ] . direct-link ,
: hover > a [ href ] . direct-link : visited {
color : # aaa ;
}
2021-10-21 05:06:05 +01:00
2021-10-29 02:17:05 +01:00
html , body {
2021-10-21 05:06:05 +01:00
min-height : 100vh ;
width : 100 % ;
margin : 0 ;
padding : 0px ;
}
2022-09-04 17:41:59 +01:00
body {
2022-02-10 22:26:21 +00:00
/*#ed3f3e); */
2022-05-12 04:33:06 +01:00
background-image : linear-gradient ( 116deg , rgba ( 232 , 232 , 232 , 0 . 03 ) 0 % , rgba ( 232 , 232 , 232 , 0 . 03 ) 10 % , rgba ( 14 , 14 , 14 , 0 . 03 ) 10 % , rgba ( 14 , 14 , 14 , 0 . 03 ) 66 % , rgba ( 232 , 232 , 232 , 0 . 03 ) 66 % , rgba ( 232 , 232 , 232 , 0 . 03 ) 72 % , rgba ( 44 , 44 , 44 , 0 . 03 ) 72 % , rgba ( 44 , 44 , 44 , 0 . 03 ) 81 % , rgba ( 51 , 51 , 51 , 0 . 03 ) 81 % , rgba ( 51 , 51 , 51 , 0 . 03 ) 100 % ) , linear-gradient ( 109deg , rgba ( 155 , 155 , 155 , 0 . 03 ) 0 % , rgba ( 155 , 155 , 155 , 0 . 03 ) 23 % , rgba ( 30 , 30 , 30 , 0 . 03 ) 23 % , rgba ( 30 , 30 , 30 , 0 . 03 ) 63 % , rgba ( 124 , 124 , 124 , 0 . 03 ) 63 % , rgba ( 124 , 124 , 124 , 0 . 03 ) 73 % , rgba ( 195 , 195 , 195 , 0 . 03 ) 73 % , rgba ( 195 , 195 , 195 , 0 . 03 ) 84 % , rgba ( 187 , 187 , 187 , 0 . 03 ) 84 % , rgba ( 187 , 187 , 187 , 0 . 03 ) 100 % ) , linear-gradient ( 79deg , rgba ( 254 , 254 , 254 , 0 . 03 ) 0 % , rgba ( 254 , 254 , 254 , 0 . 03 ) 27 % , rgba ( 180 , 180 , 180 , 0 . 03 ) 27 % , rgba ( 180 , 180 , 180 , 0 . 03 ) 33 % , rgba ( 167 , 167 , 167 , 0 . 03 ) 33 % , rgba ( 167 , 167 , 167 , 0 . 03 ) 34 % , rgba ( 68 , 68 , 68 , 0 . 03 ) 34 % , rgba ( 68 , 68 , 68 , 0 . 03 ) 63 % , rgba ( 171 , 171 , 171 , 0 . 03 ) 63 % , rgba ( 171 , 171 , 171 , 0 . 03 ) 100 % ) , linear-gradient ( 109deg , rgba ( 71 , 71 , 71 , 0 . 03 ) 0 % , rgba ( 71 , 71 , 71 , 0 . 03 ) 3 % , rgba ( 97 , 97 , 97 , 0 . 03 ) 3 % , rgba ( 97 , 97 , 97 , 0 . 03 ) 40 % , rgba ( 40 , 40 , 40 , 0 . 03 ) 40 % , rgba ( 40 , 40 , 40 , 0 . 03 ) 55 % , rgba ( 5 , 5 , 5 , 0 . 03 ) 55 % , rgba ( 5 , 5 , 5 , 0 . 03 ) 73 % , rgba ( 242 , 242 , 242 , 0 . 03 ) 73 % , rgba ( 242 , 242 , 242 , 0 . 03 ) 100 % ) , linear-gradient ( 271deg , rgba ( 70 , 70 , 70 , 0 . 03 ) 0 % , rgba ( 70 , 70 , 70 , 0 . 03 ) 11 % , rgba ( 178 , 178 , 178 , 0 . 03 ) 11 % , rgba ( 178 , 178 , 178 , 0 . 03 ) 23 % , rgba ( 28 , 28 , 28 , 0 . 03 ) 23 % , rgba ( 28 , 28 , 28 , 0 . 03 ) 72 % , rgba ( 152 , 152 , 152 , 0 . 03 ) 72 % , rgba ( 152 , 152 , 152 , 0 . 03 ) 86 % , rgba ( 43 , 43 , 43 , 0 . 03 ) 86 % , rgba ( 43 , 43 , 43 , 0 . 03 ) 100 % ) , linear-gradient ( 90deg , rgb ( 27 , 27 , 27 ) , rgb ( 1 , 1 , 1 ) ) ;
background-size : 100 % 100 % ;
2021-10-21 05:06:05 +01:00
}