lots of templates

This commit is contained in:
cbax 2024-10-22 23:46:54 -04:00
parent 8289137d3d
commit dcdec71f4c
14 changed files with 471 additions and 0 deletions

42
static/css/colors.css Normal file
View 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
View 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
View 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
View 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 */
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

12
templates/base.html Normal file
View 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
View 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
View 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
View file

@ -0,0 +1,3 @@
<footer>
<p>Copyright 2024 cbax</p>
</footer>

23
templates/head.html Normal file
View 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
View 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
View file

@ -0,0 +1,3 @@
<nav>
<a href="/">Home</a>
</nav>