lots of templates
This commit is contained in:
parent
8289137d3d
commit
dcdec71f4c
14 changed files with 471 additions and 0 deletions
42
static/css/colors.css
Normal file
42
static/css/colors.css
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/* ---------------- Colors ---------------- */
|
||||||
|
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* root default is dark */
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
--bg-color: var(--nord0);
|
||||||
|
--text-color: var(--nord4);
|
||||||
|
|
||||||
|
--highlight-color: var(--nord8);
|
||||||
|
--highlight-color-rgb: 133, 64, 201;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Detect which mode the user prefers */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
|
/* root values for darkmode (best) users :3 */
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
--bg-color: var(--nord0);
|
||||||
|
--text-color: var(--nord4);
|
||||||
|
|
||||||
|
--highlight-color: var(--nord8);
|
||||||
|
--highlight-color-rgb: 133, 64, 201;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
|
||||||
|
/* root values for lightmode (eww) users... */
|
||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
|
--bg-color: var(--nord4);
|
||||||
|
--text-color: var(--nord0);
|
||||||
|
|
||||||
|
--highlight-color: var(--nord8);
|
||||||
|
--highlight_color-rgb: 181, 122, 240;
|
||||||
|
}
|
||||||
|
}
|
208
static/css/components.css
Normal file
208
static/css/components.css
Normal file
|
@ -0,0 +1,208 @@
|
||||||
|
/* ---------------- Components ---------------- */
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- General components -------- */
|
||||||
|
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- Tree components -------- */
|
||||||
|
|
||||||
|
|
||||||
|
.tree li, .tree ul li {
|
||||||
|
margin-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li::before, .tree ul li::before {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
background-color: var(--text-color);
|
||||||
|
top: 5px;
|
||||||
|
bottom: -12px;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree>li:first-child::before {
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li:not(:first-child):last-child::before, .tree ul li:not(:first-child):last-child::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li:only-child::before, .tree ul li:only-child::before {
|
||||||
|
display: list-item;
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
background-color: var(--text-color);
|
||||||
|
top: 5px;
|
||||||
|
bottom: 7px;
|
||||||
|
height: 7px;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li::after, .tree ul li::after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
left: -10px;
|
||||||
|
width: 10px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--text-color);
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- Form components -------- */
|
||||||
|
|
||||||
|
|
||||||
|
.input-form {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
outline: none;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form input:hover,
|
||||||
|
.input-form input:focus {
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form button:hover {
|
||||||
|
background-color: var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form ::placeholder {
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 1;
|
||||||
|
/* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-form ::-ms-input-placeholder {
|
||||||
|
/* Edge 12 -18 */
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- Button components --------*/
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--highlight-color);
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--highlight-color);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-button:hover {
|
||||||
|
margin: 0.5rem 1rem 1rem 0.5rem;
|
||||||
|
box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
transition-duration: 0s;
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- Box components -------- */
|
||||||
|
|
||||||
|
|
||||||
|
.box {
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------- Component modifiers -------- */
|
||||||
|
|
||||||
|
|
||||||
|
.float-end {
|
||||||
|
float: inline-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-start {
|
||||||
|
float: inline-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.box-hover {
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-hover:hover {
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
margin: 0.5rem 1rem 1rem 0.5rem;
|
||||||
|
box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-code {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-pop {
|
||||||
|
margin: 0.5rem 1rem 1rem 0.5rem;
|
||||||
|
box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-fit {
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-stealth {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
109
static/css/core.css
Normal file
109
static/css/core.css
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
:root {}
|
||||||
|
|
||||||
|
/* if we ever need it, its there :3 */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* get the body in shape nya~ */
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "SpaceMono", monospace, sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------- Text formatting ---------------- */
|
||||||
|
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
i,
|
||||||
|
em,
|
||||||
|
.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
i b,
|
||||||
|
i strong,
|
||||||
|
em b,
|
||||||
|
em strong,
|
||||||
|
b i,
|
||||||
|
strong i,
|
||||||
|
b em,
|
||||||
|
strong em,
|
||||||
|
.bolditalic {
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
noscript {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
/* h2 */
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: dotted underline;
|
||||||
|
color: var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: block;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------- Highlighting ---------------- */
|
||||||
|
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--highlight-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-bg::selection,
|
||||||
|
.highlight-bg ::selection {
|
||||||
|
background: var(--text-color);
|
||||||
|
color: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
color: var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-bg {
|
||||||
|
background-color: var(--highlight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-bg-15 {
|
||||||
|
background-color: rgba(var(--highlight-color-rgb), 0.15);
|
||||||
|
}
|
42
static/css/font.css
Normal file
42
static/css/font.css
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/* ---------------- Font ---------------- */
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "SpaceMono";
|
||||||
|
src:
|
||||||
|
local("SpaceMono"),
|
||||||
|
url("/res/ttf/SpaceMono-Regular.ttf") format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
/* Regular */
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "SpaceMono";
|
||||||
|
src:
|
||||||
|
local("SpaceMono-Bold"),
|
||||||
|
url("/res/ttf/SpaceMono-Bold.ttf") format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
/* Bold */
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "SpaceMono";
|
||||||
|
src:
|
||||||
|
local("SpaceMono-Italic"),
|
||||||
|
url("/res/ttf/SpaceMono-Italic.ttf") format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
/* Italic */
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "SpaceMono";
|
||||||
|
src:
|
||||||
|
local("SpaceMono-BoldItalic"),
|
||||||
|
url("/res/ttf/SpaceMono-BoldItalic.ttf") format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
/* Bold Italic */
|
||||||
|
}
|
BIN
static/ttf/SpaceMono-Bold.ttf
Normal file
BIN
static/ttf/SpaceMono-Bold.ttf
Normal file
Binary file not shown.
BIN
static/ttf/SpaceMono-Italic.ttf
Normal file
BIN
static/ttf/SpaceMono-Italic.ttf
Normal file
Binary file not shown.
BIN
static/ttf/SpaceMono-Regular.ttf
Normal file
BIN
static/ttf/SpaceMono-Regular.ttf
Normal file
Binary file not shown.
12
templates/base.html
Normal file
12
templates/base.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
{% include "head.html" %}
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
{% include "nav.html" %}
|
||||||
|
{% block content %}
|
||||||
|
{% endblock %}
|
||||||
|
</main>
|
||||||
|
{% include "footer.html" %}
|
||||||
|
</body>
|
||||||
|
</html>
|
8
templates/blog_list.html
Normal file
8
templates/blog_list.html
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
{% block content %}
|
||||||
|
{% for (slug, post) in posts %}
|
||||||
|
{% if loop.first %}<div class="new_callout">NEW!</div>{% endif %}
|
||||||
|
<a href="/blog/{{ slug }}"><h2>{{ post.title }}</h2></a>
|
||||||
|
<p>{{ post.description }}</p>
|
||||||
|
{% endfor %}
|
||||||
|
{% endblock %}
|
8
templates/blog_post.html
Normal file
8
templates/blog_post.html
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
{% block content %}
|
||||||
|
<h1>{{ post.meta.title }}</h1>
|
||||||
|
<img src="{{ post.cover_img_path }}"></img>
|
||||||
|
<article>
|
||||||
|
{{ post.body }}
|
||||||
|
</article>
|
||||||
|
{% endblock %}
|
3
templates/footer.html
Normal file
3
templates/footer.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<footer>
|
||||||
|
<p>Copyright 2024 cbax</p>
|
||||||
|
</footer>
|
23
templates/head.html
Normal file
23
templates/head.html
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="language" content="EN">
|
||||||
|
<title>{{ meta.title }}</title>
|
||||||
|
<style>
|
||||||
|
{{ styles }}
|
||||||
|
</style>
|
||||||
|
<meta name="title" content="{{ meta.title }}">
|
||||||
|
<meta name="description" content="{{ meta.description }}">
|
||||||
|
<meta name="author" content="{{ meta.author }}">
|
||||||
|
<meta name="canonical" content="{{ meta.canonical_url }}">
|
||||||
|
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="{{ meta.canonical_url }}">
|
||||||
|
<meta property="og:title" content="{{ meta.title }}">
|
||||||
|
<meta property="og:description" content="{{ meta.description }}">
|
||||||
|
<meta property="og:image" content="{{ meta.img_path }}">
|
||||||
|
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="{{ meta.canonical_url }}">
|
||||||
|
<meta property="twitter:title" content="{{ meta.title }}">
|
||||||
|
<meta property="twitter:description" content="{{ meta.description }}">
|
||||||
|
<meta property="twitter:image" content="{{ meta.img_path }}">
|
13
templates/meta.svg
Normal file
13
templates/meta.svg
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
|
||||||
|
<defs>
|
||||||
|
<pattern id="img" x="0" y="0" width="1" height="1" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice">
|
||||||
|
<image width="500" height="500" href="{{ meta_img_path }}"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="1200" height="630" fill="black" />
|
||||||
|
<rect width="400" height="400" x="200" y="115" fill="url(#img)" />
|
||||||
|
<text x="630" y="330" font-size="100px" fill="#ffffff" font-family="Inter" >
|
||||||
|
{{ text }}
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
|
After Width: | Height: | Size: 541 B |
3
templates/nav.html
Normal file
3
templates/nav.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<nav>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</nav>
|
Loading…
Reference in a new issue