2021-10-15 22:30:12 +01:00
/* Colors */
: root {
2022-09-04 18:46:13 +01:00
--header : # 333 ;
--border : # C0C0C0 ;
--text : # fff ;
--visited : # 660066 ;
--link : # fff ;
--bg : # fff ;
--code-bg : # f6f6f6 ;
--header-text : # 333 ;
}
2021-10-20 17:47:33 +01:00
2021-10-15 22:30:12 +01:00
/* Global stylesheet */
* {
2022-09-04 18:46:13 +01:00
box-sizing : border-box ;
/*border: 3px solid #73AD21; toggle to debug borders */
2022-09-04 20:49:13 +01:00
2021-10-15 22:30:12 +01:00
}
2022-09-04 20:49:13 +01:00
2021-10-15 22:30:12 +01:00
body {
2022-09-04 20:49:13 +01:00
display : grid ;
text-align : justify ;
grid-template-rows : auto auto auto ;
grid-template-columns : 25 % 50 % 25 % ;
grid-template-areas :
"left-header header right-header"
"left-content content right-content"
"left-footer footer right-footer" ;
2022-09-04 18:46:13 +01:00
padding : 0 ;
margin : 0 ;
font-family : -apple-system , system-ui , sans-serif ;
color : var ( --text ) ;
background-color : var ( --bg ) ;
min-height : 100vh ;
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-15 22:30:12 +01:00
}
p : last-child {
2022-09-04 18:46:13 +01:00
margin-bottom : 0 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2022-09-04 20:49:13 +01:00
p , li ,
2021-10-15 22:30:12 +01:00
img {
2022-09-04 20:49:13 +01:00
max-width : 100 % ;
2022-09-04 18:46:13 +01:00
/* 600px /16 */
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
p ,
. tmpl-post li {
2022-09-04 18:46:13 +01:00
line-height : 1 . 45 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] {
2022-09-04 18:46:13 +01:00
color : var ( --link ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] : visited {
2022-09-04 18:46:13 +01:00
color : var ( --link ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
main {
2022-09-04 18:46:13 +01:00
padding : 1rem ;
2022-09-04 20:49:13 +01:00
grid-area : content
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
main : first-child {
2022-09-04 18:46:13 +01:00
margin-top : 0 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
header {
2022-09-04 18:46:13 +01:00
border-bottom : 1px dashed var ( --header ) ;
color : var ( --text )
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
header : after {
2022-09-04 18:46:13 +01:00
content : "" ;
display : table ;
clear : both ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
table {
2022-09-04 18:46:13 +01:00
margin : 1em 0 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
table td ,
table th {
2022-09-04 18:46:13 +01:00
padding-right : 1em ;
2021-10-15 22:30:12 +01:00
}
pre ,
code {
2022-09-04 18:46:13 +01:00
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
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
pre {
2022-09-04 18:46:13 +01:00
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 ;
overflow-y : auto ;
2022-09-04 20:49:13 +01:00
2022-09-04 18:46:13 +01:00
}
/*background-color: var(--code-bg)*/
2021-10-15 22:30:12 +01:00
code {
2022-09-04 18:46:13 +01:00
word-break : break-all ! important ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. highlight-line {
2022-09-04 18:46:13 +01:00
display : block ;
padding : 0 . 125em 1em ;
text-decoration : none ;
/* override del, ins, mark defaults */
color : inherit ;
/* override del, ins, mark defaults */
2021-10-15 22:30:12 +01:00
}
/* allow highlighting empty lines */
. highlight-line : empty : before {
2022-09-04 18:46:13 +01:00
content : " " ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
/* avoid double line breaks when using display: block; */
2022-09-04 18:46:13 +01:00
. highlight-line + br {
display : none ;
2021-10-15 22:30:12 +01:00
}
. highlight-line-isdir {
2022-09-04 18:46:13 +01:00
color : # b0b0b0 ;
background-color : # 222 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. highlight-line-active {
2022-09-04 18:46:13 +01:00
background-color : # 444 ;
background-color : hsla ( 0 , 0 % , 27 % , . 8 ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. highlight-line-add {
2022-09-04 18:46:13 +01:00
background-color : # 45844b ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. highlight-line-remove {
2022-09-04 18:46:13 +01:00
background-color : # 902f2f ;
2021-10-15 22:30:12 +01:00
}
/* Header */
. home {
2022-09-04 18:46:13 +01:00
padding : 0 1rem ;
float : left ;
margin : 1rem 0 ;
/* 16px /16 */
font-size : 1em ;
/* 16px /16 */
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. home : link : not ( : hover ) {
2022-09-04 18:46:13 +01:00
text-decoration : none ;
2021-10-15 22:30:12 +01:00
}
/* Nav */
. nav {
2022-09-04 18:46:13 +01:00
padding : 0 ;
list-style : none ;
float : left ;
margin-left : 1em ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. nav-item {
2022-09-04 18:46:13 +01:00
display : inline-block ;
margin-right : 1em ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. nav-item a [ href ] : not ( : hover ) {
2022-09-04 18:46:13 +01:00
text-decoration : none ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. nav-item-active {
2022-09-04 18:46:13 +01:00
font-weight : 700 ;
text-decoration : underline ;
2021-10-15 22:30:12 +01:00
}
/* Posts list */
. postlist {
2022-09-04 18:46:13 +01:00
list-style : none ;
padding : 0 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-item {
2022-09-04 18:46:13 +01:00
display : flex ;
flex-wrap : wrap ;
align-items : baseline ;
counter-increment : start-from -1 ;
line-height : 1 . 8 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-item : before {
2022-09-04 18:46:13 +01:00
display : inline-block ;
pointer-events : none ;
content : "" counter ( start-from , decimal-leading-zero ) ". " ;
line-height : 100 % ;
text-align : right ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-date ,
. postlist-item : before {
2022-09-04 18:46:13 +01:00
font-size : 0 . 8125em ;
/* 13px /16 */
color : var ( --text ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-date {
2022-09-04 18:46:13 +01:00
word-spacing : -0 . 5px ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-link {
2022-09-04 18:46:13 +01:00
padding-left : . 25em ;
padding-right : . 25em ;
text-underline-position : from-font ;
text-underline-offset : 0 ;
text-decoration-thickness : 1px ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. postlist-item-active . postlist-link {
2022-09-04 18:46:13 +01:00
font-weight : bold ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. tmpl-home . postlist-link {
2022-09-04 18:46:13 +01:00
font-size : 1 . 1875em ;
/* 19px /16 */
font-weight : 700 ;
2021-10-15 22:30:12 +01:00
}
/* Tags */
. post-tag {
2022-09-04 18:46:13 +01:00
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 */
color : var ( --text ) ;
border : 1px solid var ( --border ) ;
border-radius : 0 . 25em ;
/* 3px /12 */
text-decoration : none ;
line-height : 1 . 8 ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] . post-tag ,
a [ href ] . post-tag : visited {
2022-09-04 18:46:13 +01:00
color : inherit ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] . post-tag : hover ,
a [ href ] . post-tag : focus {
2022-09-04 18:46:13 +01:00
background-color : var ( --header ) ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
. postlist-item > . post-tag {
align-self : center ;
2021-10-15 22:30:12 +01:00
}
/* Warning */
. warning {
2022-09-04 18:46:13 +01:00
background-color : # ffc ;
padding : 1em 0 . 625em ;
/* 16px 10px /16 */
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
. warning ol : only-child {
2022-09-04 18:46:13 +01:00
margin : 0 ;
2021-10-15 22:30:12 +01:00
}
/* Direct Links / Markdown Headers */
. direct-link {
2022-09-04 18:46:13 +01:00
font-family : sans-serif ;
text-decoration : none ;
font-style : normal ;
margin-left : . 1em ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] . direct-link ,
a [ href ] . direct-link : visited {
2022-09-04 18:46:13 +01:00
color : transparent ;
2021-10-15 22:30:12 +01:00
}
2022-09-04 18:46:13 +01:00
2021-10-15 22:30:12 +01:00
a [ href ] . direct-link : focus ,
a [ href ] . direct-link : focus : visited ,
2022-09-04 18:46:13 +01:00
: hover > a [ href ] . direct-link ,
: hover > a [ href ] . direct-link : visited {
color : # aaa ;
2021-10-21 05:06:05 +01:00
}
2022-09-04 20:49:13 +01:00
h1 {
text-align : center ;
}