diff --git a/css/index.css b/css/index.css index 8474248..f53340d 100644 --- a/css/index.css +++ b/css/index.css @@ -1,117 +1,191 @@ /* Colors */ :root { --header: #333; - --border: #C0C0C0; + --border: #c0c0c0; --text: #fff; --visited: #660066; --link: #fff; --bg: #fff; --code-bg: #f6f6f6; --header-text: #333; -} - -/* Global stylesheet */ -* { + } + + /* Global stylesheet */ + * { box-sizing: border-box; /*border: 3px solid #73AD21; toggle to debug borders */ -} - -header { + } + + header { height: fit-content; -} - -body { + } + + body { display: grid; text-align: justify; grid-template-rows: auto; grid-template-columns: 25% 1fr 25%; - grid-template-areas: - "left content right"; + grid-template-areas: "left content right"; padding: 0; margin: 0; font-family: -apple-system, system-ui, sans-serif; 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)); + 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%; -} - -@media (max-width: 1024px) { + } + + @media (max-width: 1024px) { body { - grid-template-rows: auto auto 1fr; - grid-template-columns: 1fr; - grid-template-areas: "left""right""content"; + grid-template-rows: auto auto 1fr; + grid-template-columns: 1fr; + grid-template-areas: "left" "right" "content"; } - + .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"; + 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; } - -} - -nav { + + .postlist-item:before { + grid-area: number; + } + .postlist-link { + grid-area: title; + } + .postlist-date { + grid-area: time; + } + .post-tags { + grid-area: tags; + text-align: left; + } + } + + nav { grid-area: right; justify-self: center; -} - -p:last-child { + } + + p:last-child { margin-bottom: 0; -} - -p, -.tmpl-post li { + } + + p, + .tmpl-post li { line-height: 1.45; -} - -a[href] { + } + + a[href] { color: var(--link); -} - -a[href]:visited { + } + + a[href]:visited { color: var(--link); -} - -main { + } + + main { padding: 1rem; grid-area: content; justify-self: center; -} - -main :first-child { + } + + main :first-child { margin-top: 0; -} - -header { + } + + header { grid-area: left; color: var(--text); justify-self: center; -} - -table { + } + + table { margin: 1em 0; -} - -table td, -table th { + } + + 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; + } + + 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; - -} - -pre { + } + + pre { font-size: 14px; line-height: 1.375; direction: ltr; @@ -127,143 +201,141 @@ pre { -ms-hyphens: none; hyphens: none; padding: 1em; - margin: .5em 0; + margin: 0.5em 0; overflow-y: auto; - -} - -/*background-color: var(--code-bg)*/ -code { + } + + /*background-color: var(--code-bg)*/ + code { word-break: break-all !important; -} - -.highlight-line { + } + + .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 { + } + + /* allow highlighting empty lines */ + .highlight-line:empty:before { content: " "; -} - -/* avoid double line breaks when using display: block; */ -.highlight-line+br { + } + + /* avoid double line breaks when using display: block; */ + .highlight-line + br { display: none; -} - -.highlight-line-isdir { + } + + .highlight-line-isdir { color: #b0b0b0; background-color: #222; -} - -.highlight-line-active { + } + + .highlight-line-active { background-color: #444; - background-color: hsla(0, 0%, 27%, .8); -} - -.highlight-line-add { + background-color: hsla(0, 0%, 27%, 0.8); + } + + .highlight-line-add { background-color: #45844b; -} - -.highlight-line-remove { + } + + .highlight-line-remove { background-color: #902f2f; -} - -/* Header */ -.home { + } + + /* Header */ + .home { padding: 0 1rem; float: left; margin: 1rem 0; /* 16px /16 */ font-size: 1em; /* 16px /16 */ -} - -.home :link:not(:hover) { + } + + .home :link:not(:hover) { text-decoration: none; -} - -/* Nav */ -.nav { + } + + /* Nav */ + .nav { padding: 0; list-style: none; float: left; margin-left: 1em; -} - -.nav-item { + } + + .nav-item { display: inline-block; margin-right: 1em; -} - -.nav-item a[href]:not(:hover) { + } + + .nav-item a[href]:not(:hover) { text-decoration: none; -} - -.nav-item-active { + } + + .nav-item-active { font-weight: 700; text-decoration: underline; -} - -/* Posts list */ -.postlist { + } + + /* Posts list */ + .postlist { list-style: none; padding: 0; -} - -.postlist-item { + } + + .postlist-item { display: flex; flex-wrap: wrap; align-items: baseline; counter-increment: start-from -1; line-height: 1.8; -} - -.postlist-item:before { + } + + .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 { + } + + .postlist-date, + .postlist-item:before { font-size: 0.8125em; /* 13px /16 */ color: var(--text); -} - -.postlist-date { + } + + .postlist-date { word-spacing: -0.5px; -} - -.postlist-link { - padding-left: .25em; - padding-right: .25em; + } + + .postlist-link { + padding-left: 0.25em; + padding-right: 0.25em; text-underline-position: from-font; text-underline-offset: 0; text-decoration-thickness: 1px; -} - -.postlist-item-active .postlist-link { + } + + .postlist-item-active .postlist-link { font-weight: bold; -} - -.tmpl-home .postlist-link { + } + + .tmpl-home .postlist-link { font-size: 1.1875em; /* 19px /16 */ font-weight: 700; -} - - -/* Tags */ -.post-tag { + } + + /* Tags */ + .post-tag { display: inline-flex; align-items: center; justify-content: center; @@ -284,89 +356,88 @@ code { /* 3px /12 */ text-decoration: none; line-height: 1.8; -} - -a[href].post-tag, -a[href].post-tag:visited { + } + + a[href].post-tag, + a[href].post-tag:visited { color: inherit; -} - -a[href].post-tag:hover, -a[href].post-tag:focus { + } + + a[href].post-tag:hover, + a[href].post-tag:focus { background-color: var(--header); -} - -.postlist-item>.post-tag { + } + + .postlist-item > .post-tag { align-self: center; -} - -/* Warning */ -.warning { + } + + /* Warning */ + .warning { background-color: #ffc; padding: 1em 0.625em; /* 16px 10px /16 */ -} - -.warning ol:only-child { + } + + .warning ol:only-child { margin: 0; -} - -/* Direct Links / Markdown Headers */ -.direct-link { + } + + /* Direct Links / Markdown Headers */ + .direct-link { font-family: sans-serif; text-decoration: none; font-style: normal; - margin-left: .1em; -} - -a[href].direct-link, -a[href].direct-link:visited { + margin-left: 0.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 { + } + + a[href].direct-link:focus, + a[href].direct-link:focus:visited, + :hover > a[href].direct-link, + :hover > a[href].direct-link:visited { color: #aaa; -} - -h1, -h2, -h3, -h4, -h5, -h6 { + } + + h1, + h2, + h3, + h4, + h5, + h6 { text-align: center; -} - -div.time-and-tags { + } + + div.time-and-tags { align-content: center; grid-template-rows: auto; grid-template-columns: auto; - grid-template-areas: - "content"; -} - - -.container { + grid-template-areas: "content"; + } + + .container { width: 100%; height: fit-content; display: flex; justify-content: center; -} - -.tandt { + } + + .tandt { width: fit-content; height: fit-content; -} - -img { + } + + img { width: 100%; margin: auto; display: block; -} -footer { + } + footer { text-align: center; padding: 2em; -} \ No newline at end of file + } + \ No newline at end of file