raymon
/
Personal-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Provide CSS template from the website itself

Browse Source
master
Raymon Zutekouw 3 months ago
parent 0c2ffb4311
commit 6f4e386e72
Signed by: raymon
GPG Key ID: 0E62222846283925
4 changed files with 493 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 422
      client/public/assets/styling/template.css
  2. 54
      client/public/index.lisp
  3. 46
      client/templates/post_index_page.lisp
  4. 48
      client/templates/post_single_page.lisp

422
client/public/assets/styling/template.css
Unescape View File

@ -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;}
}

54
client/public/index.lisp
Unescape View File

@ -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"))))))

46
client/templates/post_index_page.lisp
Unescape View File

@ -1,27 +1,25 @@
(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 "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 "Post listing"))
"{{index}}"))))
"{{index}}"))))

48
client/templates/post_single_page.lisp
Unescape View File

@ -1,30 +1,28 @@
(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 "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 "{{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}}"))))

Write Preview
Loading…
Cancel
Save