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 */
2021-10-15 22:30:12 +01:00
}
2022-09-04 23:17:31 +01:00
header {
2022-09-06 18:17:56 +01:00
height : fit-content ;
2022-09-04 23:17:31 +01:00
}
2022-09-04 20:49:13 +01:00
2021-10-15 22:30:12 +01:00
body {
2022-09-06 18:17:56 +01:00
display : grid ;
text-align : justify ;
grid-template-rows : auto ;
2022-09-06 18:49:56 +01:00
grid-template-columns : 25 % 1fr 25 % ;
2022-09-06 18:17:56 +01:00
grid-template-areas :
"left content right" ;
2022-09-04 18:46:13 +01:00
padding : 0 ;
margin : 0 ;
2022-09-06 18:17:56 +01:00
font-family : -apple-system , system-ui , sans-serif ;
2022-09-04 18:46:13 +01:00
color : var ( --text ) ;
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 ) ) ;
2022-09-06 18:17:56 +01:00
background-size : 100 % 100 % ;
}
@ media ( max-width : 1024px ) {
body {
2022-09-06 18:49:56 +01:00
grid-template-rows : auto auto 1fr ;
2022-09-06 18:17:56 +01:00
grid-template-columns : 1fr ;
grid-template-areas : "left" "right" "content" ;
}
2022-09-06 18:49:56 +01:00
. postlist . postlist-item {
display : grid ;
grid-template-rows : auto 1fr ;
grid-template-columns : auto auto 1fr ;
grid-template-areas : "number title title" "time time tags" ;
}
. postlist-item : before { grid-area : number ; }
. postlist-link { grid-area : title ; }
. postlist-date { grid-area : time ; }
. post-tags { grid-area : tags ; text-align : left ; }
2021-10-15 22:30:12 +01:00
}
2022-09-04 21:41:19 +01:00
2022-09-06 18:49:56 +01:00
nav {
grid-area : right ;
justify-self : center ;
}
2022-09-04 23:17:31 +01:00
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
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-06 18:49:56 +01:00
grid-area : content ;
justify-self : center ;
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-06 18:49:56 +01:00
grid-area : left ;
color : var ( --text ) ;
justify-self : center ;
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-06 18:17:56 +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
2022-09-06 18:17:56 +01:00
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
text-align : center ;
2022-09-04 21:41:19 +01:00
}
2022-09-06 18:17:56 +01:00
div . time-and-tags {
align-content : center ;
grid-template-rows : auto ;
grid-template-columns : auto ;
grid-template-areas :
"content" ;
2022-09-04 21:41:19 +01:00
}
2022-09-17 02:31:07 +01:00
2022-09-04 21:41:19 +01:00
. container {
2022-09-06 18:17:56 +01:00
width : 100 % ;
height : fit-content ;
display : flex ;
justify-content : center ;
2022-09-04 21:41:19 +01:00
}
. tandt {
2022-09-06 18:17:56 +01:00
width : fit-content ;
height : fit-content ;
2022-09-04 21:52:12 +01:00
}
2022-09-06 18:17:56 +01:00
2022-09-04 21:52:12 +01:00
img {
2022-09-06 18:17:56 +01:00
width : 100 % ;
margin : auto ;
display : block ;
2022-09-17 02:31:07 +01:00
}
footer {
text-align : center ;
2022-09-17 02:44:23 +01:00
padding : 2em ;
2022-09-04 20:49:13 +01:00
}