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