From dee9606c4c90723a7e50aa384769fcfb3abe1cb5 Mon Sep 17 00:00:00 2001 From: Raymonzut Date: Tue, 1 Oct 2024 22:01:54 +0200 Subject: [PATCH] Provide CSS template from the website itself --- client/public/assets/styling/template.css | 422 ++++++++++++++++++++++ client/public/index.lisp | 54 ++- client/templates/post_index_page.lisp | 45 ++- client/templates/post_single_page.lisp | 47 ++- 4 files changed, 493 insertions(+), 75 deletions(-) create mode 100644 client/public/assets/styling/template.css diff --git a/client/public/assets/styling/template.css b/client/public/assets/styling/template.css new file mode 100644 index 0000000..493f964 --- /dev/null +++ b/client/public/assets/styling/template.css @@ -0,0 +1,422 @@ +/* Variables */ + +:root { + --body-color: rgb(250,250,250); + --body-background: rgb(30,40,60); + --body-font-family: 'Oxygen', sans-serif; + --body-scrollbar-color: dark; + --body-margin: 10vw; + --body-max-width: 1920px; + --body-div-margin: 0; + --body-div-padding: 0; + --body-div-max-width: none; + + --a-color: white; + --a-text-decoration-color: #09c5f4; + + --code-color: white; + --code-background: rgba(0,0,0,0.25); + --code-font-family: 'Oxygen Mono', monospace; + + --kbd-font-family: var(--code-font-family); + --kbd-border: 1px solid white; + + --var-font-family: var(--code-font-family); + --var--color: orange; + + --nav-color: black; + --nav-background: rgba(255,255,255,0.75); + --nav-padding: 1em 0.5em 1em 0.5em; + + --details-background: rgba(0,0,0,0.25); + --details-padding: .75em; + + --mark-color: black; + --mark-background: rgb(239,219,67); + + --img-margin-left: auto; + --img-margin-right: auto; + + --table-max-width: 500px; + --table-border: 1px solid white; + --table-tr-even-background: rgba(255,255,255,0.1); + + --select-border-color: white; + --select-glyph: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); + + --input-border: 1px solid white; + --input-max-width: 500px; + --input-font-size: 1em; + --input-disabled-background: rgba(255,255,255,.1); + + --button-background: #09c5f4; + --button-color: white; +} + +/* Body */ + +body { + margin: 0; + margin-left: var(--body-margin); + margin-right: var(--body-margin); + max-width: var(--body-max-width); + padding: 0; + font-family: var(--body-font-family); + color: var(--body-color); + background: var(--body-background); + scrollbar-color: var(--body-scrollbar-color); + line-height: 1.5; + text-rendering: optimizeLegibility; +} + +body > div { + margin-left: var(--body-div-margin); + margin-right: var(--body-div-margin); + padding-left: var(--body-div-padding); + padding-right: var(--body-div-padding); + max-width: var(--body-max-width); +} + +@media (max-width: 960px) { + body { + margin-left: calc(var(--body-margin) / 2); + margin-right: calc(var(--body-margin) / 2); + } + + body > div { + margin-left: calc(var(--body-div-margin) / 2); + margin-right: calc(var(--body-div-margin) / 2); + } +} + +/* Text */ + +h1, h2, h3, h4, h5, h6 {} + +pre > code { + padding: 10px; + display: block; + overflow-x: auto; +} + +code { + user-select: all; + background: var(--code-background); + color: var(--code-color); + font-size: 1em; + font-family: var(--code-font-family); + padding: 0.5em; + border-radius: 5px; + display: inline-block; +} + +kbd { + font-family: var(--kbd-font-family); + display: inline-block; + user-select: all; + padding: 0.5em; + border-radius: 5px; + border: var(--kbd-border); + font-family: var(--body-font-family); +} + +var { + color: var(--var-color); + font-style: normal; + font-family: var(--var-font-family); +} + +a { + color: var(--a-color); + scroll-behavior: smooth; + text-decoration: underline; + text-decoration-color: var(--a-text-decoration-color); + transition: color .15s ease; + text-decoration-skip: edges; + text-decoration-skip-ink: auto; +} + +a:hover { + color: var(--a-text-decoration-color); +} + +textarea { + resize: vertical; +} + +details { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: var(--details-background); + padding: var(--details-padding) var(--details-padding) 0; + margin-top: 1em; + margin-bottom: 1em; + border-radius: 5px; + overflow: hidden; +} + +details[open] { + padding: var(--details-padding) +} + +details > :last-child { + margin-bottom: 0; +} + +details[open] summary { + margin-bottom: 10px; +} + +summary { + display: list-item; + padding: var(--details-padding); + margin: calc(-1 * var(--details-padding)) calc(-1 * var(--details-padding)) 0; + user-select: none; +} + +details > :not(summary) { + margin-top: 0; +} + +mark { + background: var(--mark-background); + color: var(--mark-color); + padding: 0.15em; +} + +/* Navigation */ + +nav { + max-width: none; + margin-left: calc(var(--body-margin) * -1); + margin-right: calc(var(--body-margin) * -1); + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + align-items: center; + width: 100%; + color: var(--nav-color); + background: var(--nav-background); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + position: sticky; + top: 0; + left: 0; +} + +@media (max-width: 960px) { + nav { + margin-left: calc(var(--body-margin) * -1 / 2); + margin-right: calc(var(--body-margin) * -1 / 2); + } +} + +nav * { + display: block; + padding: var(--nav-padding); + color: var(--nav-color); +} + +nav a { + text-decoration: none; + font-weight: bold; +} + +/* Tables */ + +table { + border-collapse: collapse; + display: block; + width: 100%; + max-width: var(--table-max-width); + overflow-x: auto; +} + +table > tbody > tr > td, table > tbody > tr > th { + border: var(--table-border); + text-align: left; + padding: 0.5em; +} + +table > tbody > tr:nth-child(even) { + background: var(--table-tr-even-background); +} + +table > thead > tr > td, table > thead > tr > th, table > tfoot > tr > td, table > tfoot > tr > th { + padding: 0.5em; + border: none; + text-align: center; +} + +/* Images */ + +img { + display: block; + max-width: 100%; + height: auto; + margin-left: var(--img-margin-left); + margin-right: var(--img-margin-right); +} + +/* Forms */ + +fieldset { + border-radius: 5px; + border: 1px solid white; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-start: 0; + padding-block-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; + padding: 1em; +} + +select { + font-size: var(--input-font-size); + display: inline-block; + padding: .5em; + width: 100%; + max-width: 500px; + box-sizing: border-box; +} + +select option { + background: var(--body-background); + font-weight: normal; +} + +select[multiple] { + color: var(--body-color); + display: inline-block; + color: #444; + padding: 0.5em; + border-radius: 0; + width: 100%; + max-width: 250px; + box-sizing: border-box; + border: 1px solid var(--select-border-color); + background: rgba(0,0,0,.25); +} + +select[multiple] > option { + color: var(--body-color); + background: rgba(0,0,0,0); +} + +@supports(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) { + input[type='checkbox'], input[type='radio'] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + } + + select { + font-size: var(--input-font-size); + display: inline-block; + font-size: 1em; + color: var(--body-color); + padding: .5em; + width: 100%; + max-width: 500px; + box-sizing: border-box; + border: 1px solid var(--select-border-color); + box-shadow: none; + border-radius: .5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: rgba(0,0,0,.25); + background-image: var(--select-glyph); + background-repeat: no-repeat, repeat; + background-position: right .7em top 50%, 0 0; + background-size: .65em auto, 100%; + } + + select::-ms-expand { + display: none; + } + + select[multiple] { + color: var(--body-color); + display: inline-block; + color: #444; + padding: 0.5em; + border-radius: 0; + width: 100%; + max-width: 250px; + box-sizing: border-box; + border: 1px solid var(--select-border-color); + background: rgba(0,0,0,.25); + } + + select[multiple] > option { + color: var(--body-color); + } +} + +input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea { + font-size: var(--input-font-size); + color: var(--body-color); + font-family: var(--body-font-family); + background: rgba(0,0,0,.25); + padding: 0.5em; + width: 100%; + max-width: var(--input-max-width); + margin-bottom: 1em; + box-sizing: border-box; + resize: none; + border-radius: 0.5em; + border: var(--input-border); +} + +input:disabled:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { + background: var(--input-disabled-background); +} + +button, select, input[type='submit'], input[type='button'], input[type='checkbox'], input[type='range'], input[type='radio'] { + cursor: pointer; +} + +button, .button { + display: inline-block; + border: none; + padding: 1rem 2rem; + margin: 0; + text-decoration: none; + background: var(--button-background); + color: var(--button-color); + font-size: 1em; + text-align: center; + transition: background 250ms ease-in-out, + transform 150ms ease; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +button:hover, button:focus, .button:hover, .button:focus { + background: #0053ba; +} + +button:focus, .button:focus { + outline: 1px solid #fff; + outline-offset: -4px; +} + +button:active, .button:active { + transform: scale(0.99); +} + +/* Animations */ + +details[open] summary ~ * { + animation: sweep 0.1s ease-in-out; +} + +@keyframes sweep { + 0% {opacity: 0; margin-top: -10px; margin-bottom: 10px;} + 90% {opacity: 1; margin-top: -1px; margin-bottom: 1px;} + 100% {opacity: 1; margin-top: 0px; margin-bottom: 0;} +} diff --git a/client/public/index.lisp b/client/public/index.lisp index 09a581e..85281b2 100644 --- a/client/public/index.lisp +++ b/client/public/index.lisp @@ -1,35 +1,33 @@ (html :lang 'en - (head - (meta :charset 'utf-8) - (meta :name 'description - :content "Raymon's personal website about his life and projects with a blog.") - (meta :name 'viewport :content "width=device-width, initial-scale=1.0") - (title "Raymon Zutekouw") + (head + (meta :charset 'utf-8) + (meta :name 'description + :content "Raymon's personal website about his life and projects with a blog.") + (meta :name 'viewport :content "width=device-width, initial-scale=1.0") + (title "Raymon Zutekouw") - (link :rel 'dns-prefetch :href "https://cdn.statically.io") - - (link :defer ' - :rel 'stylesheet - :href "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css" - :media 'all) - (link :defer ' - :rel 'stylesheet - :href "/css/general.css" - :media 'all)) - (body - (main - (nav - (a :href "/" "Home") "|" - (a :href "/posts" "Posts") - (article - (header + (link :defer ' + :rel 'stylesheet + :href "/css/template.css" + :media 'all) + (link :defer ' + :rel 'stylesheet + :href "/css/general.css" + :media 'all)) + (body + (main + (nav + (a :href "/" "Home") "|" + (a :href "/posts" "Posts")) + (article + (header (h1 "Home")) - (p "Hi there, good to see you on my website. + (p "Hi there, good to see you on my website. My name is Raymon Zutekouw; Self-taught programmer by heart.") - (p "Building software and exploring the wide variety of tools (or making them) is my passion. + (p "Building software and exploring the wide variety of tools (or making them) is my passion. To see it in action, " - (a :href "https://git.raymon.dev/raymon" "checkout the stuff I make here.")) + (a :href "https://git.raymon.dev/raymon" "checkout the stuff I make here.")) - (p "The projects that may be useful to others are open source; for inspiring others and improving each others work. + (p "The projects that may be useful to others are open source; for inspiring others and improving each others work. That is why I am a huge fan of " - (a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software")))))) + (a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software")))))) diff --git a/client/templates/post_index_page.lisp b/client/templates/post_index_page.lisp index 5dd68dc..b7d3992 100644 --- a/client/templates/post_index_page.lisp +++ b/client/templates/post_index_page.lisp @@ -1,27 +1,26 @@ (html :lang 'en - (head - (meta :charset 'utf-8) - (meta :name 'description - :content "Raymon typing nonsense on his blog") - (meta :name 'viewport :content "width=device-width, initial-scale=1.0") - (title "Raymon Zutekouw") + (head + (meta :charset 'utf-8) + (meta :name 'description + :content "Raymon typing nonsense on his blog") + (meta :name 'viewport :content "width=device-width, initial-scale=1.0") + (title "Raymon Zutekouw") - (link :rel 'dns-prefetch :href "https://cdn.statically.io") + (link :defer ' + :rel 'stylesheet + :href "/css/template.css" + :media 'all) - (link :defer ' - :rel 'stylesheet - :href "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css" - :media 'all) - (link :defer ' - :rel 'stylesheet - :href "/css/general.css" - :media 'all)) - (body - (main - (nav - (a :href "/" "Home") "|" - (a :href "/posts" "Posts") - (article - (header + (link :defer ' + :rel 'stylesheet + :href "/css/general.css" + :media 'all)) + (body + (main + (nav + (a :href "/" "Home") "|" + (a :href "/posts" "Posts")) + (article + (header (h1 "Post listing")) - "{{index}}")))) + "{{index}}")))) diff --git a/client/templates/post_single_page.lisp b/client/templates/post_single_page.lisp index 6ae595d..820ea00 100644 --- a/client/templates/post_single_page.lisp +++ b/client/templates/post_single_page.lisp @@ -1,30 +1,29 @@ (html :lang 'en - (head - (meta :charset 'utf-8) - (meta :name 'description - :content "Raymon typing nonsense on his blog") - (meta :name 'viewport :content "width=device-width, initial-scale=1.0") - (title "{{title}} :: Raymon Zutekouw") + (head + (meta :charset 'utf-8) + (meta :name 'description + :content "Raymon typing nonsense on his blog") + (meta :name 'viewport :content "width=device-width, initial-scale=1.0") + (title "{{title}} :: Raymon Zutekouw") - (link :rel 'dns-prefetch :href "https://cdn.statically.io") + (link :defer ' + :rel 'stylesheet + :href "/css/template.css" + :media 'all) - (link :defer ' - :rel 'stylesheet - :href "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css" - :media 'all) - (link :defer ' - :rel 'stylesheet - :href "/css/general.css" - :media 'all)) - (body - (main - (nav - (a :href "/" "Home") "|" - (a :href "/posts" "Posts") - (article - (header + (link :defer ' + :rel 'stylesheet + :href "/css/general.css" + :media 'all)) + (body + (main + (nav + (a :href "/" "Home") "|" + (a :href "/posts" "Posts")) + (article + (header (h1 "{{title}}") (p (strong "For those using a RSS reader, subscribe here: ") (a :href "/posts/rss.xml" "rss.xml"))) - (time :datetime "{{date}}") - "{{content}}")))) + (time :datetime "{{date}}") + "{{content}}"))))