change CSS themes :)
Some checks failed
continuous-integration/drone/push Build is failing

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2022-12-05 19:54:19 +01:00
parent 9e78a778c0
commit 8a262bf8fd
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
26 changed files with 2908 additions and 153 deletions

3
.gitmodules vendored
View file

@ -1,3 +0,0 @@
[submodule "src/_includes/styles/external/pico"]
path = src/_includes/styles/external/pico
url = https://github.com/picocss/pico

View file

@ -1,5 +1,4 @@
{
"deno.config": "./deno.jsonc",
"deno.enable": true,
"deno.lint": true,
"deno.unstable": true,

View file

@ -8,14 +8,15 @@ import jsx from "lume/plugins/jsx_preact.ts";
import lightningcss from "lume/plugins/lightningcss.ts";
import metas from "lume/plugins/metas.ts";
import minifyHTML from "lume/plugins/minify_html.ts";
import mdx from "lume/plugins/mdx.ts"
import pug from "lume/plugins/pug.ts";
import remark from "lume/plugins/remark.ts";
import sass from "lume/plugins/sass.ts";
import sitemap from "lume/plugins/sitemap.ts"
import sourceMaps from "lume/plugins/source_maps.ts";
import svgo from "lume/plugins/svgo.ts";
// Experimental plugins
// import mdx from "experimental/mdx/mod.ts";
import sitemap from "experimental/sitemap/sitemap.ts";
// Custom plugins
import toml from "./custom/toml/toml.ts";
@ -33,17 +34,20 @@ site
.loadData([".toml"], toml)
.use(attributes())
.use(codeHighlight())
.use(jsx())
.use(metas())
// .use(mdx())
.use(jsx())
.use(mdx())
.use(remark())
.use(pug())
.use(sitemap())
.use(svgo())
.remoteFile(
"_includes/styles/external/nord.min.css",
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/nord.min.css",
)
.use(esbuild())
// .use(esbuild({
// extensions: [".ts", ".js", ".tsx",],
// }))
.use(lightningcss())
.use(sass())
.use(minifyHTML())

View file

@ -7,16 +7,28 @@
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:preact"
"jsxImportSource": "preact",
"lib": [
"dom",
"dom.iterable",
"dom.asynciterable",
"deno.ns"
]
},
"lint": {
"files": {
"exclude": ["src/_includes/styles/external/"]
"exclude": [
"src/_includes/styles/external/",
"dist/"
]
}
},
"fmt": {
"files": {
"exclude": ["src/_includes/styles/external/"]
"exclude": [
"src/_includes/styles/external/",
"dist"
]
}
}
}

2513
deno.lock Normal file

File diff suppressed because it is too large Load diff

View file

@ -1,8 +1,10 @@
{
"imports": {
"lume/": "https://deno.land/x/lume@v1.12.1/",
"lume/": "https://deno.land/x/lume@v1.13.2/",
"experimental/": "https://raw.githubusercontent.com/lumeland/experimental-plugins/main/",
"std/": "https://deno.land/std/",
"preact": "https://esm.sh/preact@10.11.0",
"preact/": "https://esm.sh/preact@10.11.0/",
"#types": "./src/_includes/types.ts"
}
}

View file

@ -1,30 +1,21 @@
import { Application, Router } from "https://deno.land/x/oak@v11.1.0/mod.ts";
import Server from "lume/core/server.ts";
import expires from "lume/middlewares/expires.ts";
import not_found from "lume/middlewares/not_found.ts";
const app = new Application();
const port = 8000
app.addEventListener("error", (evt) => {
// Will log the thrown error to the console.
console.dir(evt.error);
const server = new Server({
port: port,
root: `${Deno.cwd()}/dist`,
});
// First we try to serve static files from the dist folder. If that fails, we
// fall through to the router below.
app.use(async (ctx, next) => {
await ctx.send({
root: `${Deno.cwd()}/dist`,
index: "index.html",
hidden: true,
}).catch(async () => {
ctx.response.status = 404;
ctx.response.body = await Deno.readTextFile(`${Deno.cwd()}/dist/404.html`);
await next();
});
});
server.use(expires());
const router = new Router();
server.use(not_found({
root: `${Deno.cwd()}/dist`,
page404: "404.html",
}));
// After creating the router, we can add it to the app.
app.use(router.routes());
app.use(router.allowedMethods());
server.start();
await app.listen({ port: 8000 });
console.log(`Listening on http://localhost:${port}`);

View file

@ -1,7 +1,7 @@
---
title: Well, how did I get here?
subtitle: 404 - Not found
layout: layouts/head.tsx
layout: layouts/base.pug
url: /404.html
---

View file

@ -1,16 +0,0 @@
export default () => {
return (
<nav>
<ul>
<ul>
<li>
<a href="https://google.com">Test</a>
</li>
<li>
<a href="https://google.com">Test 2</a>
</li>
</ul>
</ul>
</nav>
);
};

View file

@ -0,0 +1,9 @@
---
layout: "layouts/base.pug"
---
.row
.column
| !{content}
.column
iframe(src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=75&header=true&replies=true&boosts=true", title="Powered by Fedifeed", allowfullscreen, sandbox="allow-top-navigation allow-scripts" width="400", height="600")

View file

@ -1,23 +0,0 @@
import { PageData } from "lume/core.ts";
export const title = "Sam Site 2.0";
export const layout = "layouts/head.tsx";
export default ({ children }: PageData) => (
<div class="grid">
<div>
{children}
</div>
<div>
<iframe
title="Powered by Fedifeed"
allowfullscreen
sandbox="allow-top-navigation allow-scripts"
width="400"
height="500"
src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=75&header=true&replies=true&boosts=true"
>
</iframe>
</div>
</div>
);

View file

@ -0,0 +1,13 @@
doctype html
html(lang=metas.lang)
head
title= title
include meta.pug
body
header
h1= title
h2= subtitle
main
| !{content}
footer
include footer.html

View file

@ -0,0 +1,10 @@
<!-- This is a template because I need to make raw HTML -->
<small>
Built with <a href="https://lume.land">Lume</a>
Hosted on <a href="https://deno.com/deploy">Deno Deploy</a> from <a href="https://samtherapy.net">here</a>
<em>and</em>
<a href="https://pages.git.froth.zone">Codeberg Pages</a> from <a href="https://samtherapy.xyz">here</a>
<a href="https://git.froth.zone/sam/site">Source</a>
</small>

View file

@ -1,34 +0,0 @@
import { PageData } from "lume/core.ts";
export default ({ metas, children, title, subtitle }: PageData) => (
<html lang={metas?.lang}>
<head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/img/favicon.png" />
<link rel="stylesheet" href="/styles/style.css" />
</head>
<body>
<header class="container">
<hgroup>
<h1>{title}</h1>
<h2>{subtitle}</h2>
</hgroup>
</header>
<main class="container">
{children}
</main>
<footer class="container">
<small>
Built with <a href="https://lume.land">Lume</a> Hosted on{" "}
<a href="https://deno.com/deploy">Deno Deploy</a> from{" "}
<a href="https://samtherapy.net">here</a> <em>and</em>{" "}
<a href="https://freecumextremist.finance">Froth Pages</a> from{" "}
<a href="https://samtherapy.xyz">here</a> {" "}
<a href="https://git.froth.zone/sam/site">Source</a>
</small>
</footer>
</body>
</html>
);

View file

@ -0,0 +1,4 @@
meta(charset="utf-8")
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel="shortcut icon", href="/img/favicon.png", type="image/png")
link(rel="stylesheet", href="/css/style.css")

View file

@ -1,28 +1,17 @@
// Imports
// Pico CSS, https: //picocss.com/
@use "styles/external/pico/scss/pico" with (
$primary-500: #9e9e9e,
$primary-600: #757575,
$primary-700: #616161
);
@use "styles/sakura.theme";
// Highlight.js theme
@use "styles/external/nord.min";
// // Font
// @import url("https://rsms.me/inter/inter.css");
// /* CSS */
// :root {
// font-family: "Inter", sans-serif;
// }
// @supports (font-variation-settings: normal) {
// :root {
// font-family: "Inter var", sans-serif;
// }
// }
:root {
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
}
}
.row {
display: flex;
}
.column {
flex: 50%;
}

@ -1 +0,0 @@
Subproject commit 3052db4bd3439e236479dc0f98069f7d3b559486

View file

@ -0,0 +1,264 @@
/* Sakura.css v1.4.1
* ================
* Minimal css theme.
* Project: https://github.com/oxalorg/sakura/
*/
/* Body */
html {
font-size: 62.5%; // So that root size becomes 10px
font-family: $font-family-base;
}
body {
// $font-size-base must be a rem value
font-size: $font-size-base;
line-height: 1.618;
max-width: 60em;
margin: auto;
color: $color-text;
background-color: $color-bg;
padding: 13px;
}
@media (max-width: 684px) {
body {
font-size: $font-size-base * 0.85;
}
}
@media (max-width: 382px) {
body {
font-size: $font-size-base * 0.75;
}
}
@mixin word-wrap() {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
font-family: $font-family-heading;
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1.5rem;
@include word-wrap;
}
h1 {
font-size: 2.35em
}
h2 {
font-size: 2.00em
}
h3 {
font-size: 1.75em
}
h4 {
font-size: 1.5em
}
h5 {
font-size: 1.25em
}
h6 {
font-size: 1em
}
p {
margin-top: 0px;
margin-bottom: 2.5rem;
}
small,
sub,
sup {
font-size: 75%;
}
hr {
border-color: $color-blossom;
}
a {
text-decoration: none;
color: $color-blossom;
&:visited {
color: darken($color-blossom, 10%);
}
&:hover {
color: $color-fade;
border-bottom: 2px solid $color-text;
}
}
ul {
padding-left: 1.4em;
margin-top: 0px;
margin-bottom: 2.5rem;
}
li {
margin-bottom: 0.4em;
}
blockquote {
margin-left: 0px;
margin-right: 0px;
padding-left: 1em;
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-right: 0.8em;
border-left: 5px solid $color-blossom;
margin-bottom: 2.5rem;
background-color: $color-bg-alt;
}
blockquote p {
margin-bottom: 0;
}
img,
video {
height: auto;
max-width: 100%;
margin-top: 0px;
margin-bottom: 2.5rem;
}
/* Pre and Code */
pre {
background-color: $color-bg-alt;
display: block;
padding: 1em;
overflow-x: auto;
margin-top: 0px;
margin-bottom: 2.5rem;
font-size: 0.9em;
}
code,
kbd,
samp {
font-size: 0.9em;
padding: 0 0.5em;
background-color: $color-bg-alt;
white-space: pre-wrap;
}
pre>code {
padding: 0;
background-color: transparent;
white-space: pre;
font-size: 1em;
}
/* Tables */
table {
text-align: justify;
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
border-bottom: 1px solid $color-bg-alt;
}
/* Buttons, forms and input */
input,
textarea {
border: 1px solid $color-text;
&:focus {
border: 1px solid $color-blossom;
}
}
textarea {
width: 100%;
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: $color-blossom;
color: $color-bg;
border-radius: 1px;
border: 1px solid $color-blossom;
cursor: pointer;
box-sizing: border-box;
&[disabled] {
cursor: default;
opacity: .5;
}
&:focus:enabled,
&:hover:enabled {
background-color: $color-fade;
border-color: $color-fade;
color: $color-bg;
outline: 0;
}
}
textarea,
select,
input {
color: $color-text;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
margin-bottom: 10px;
background-color: $color-bg-alt;
border: 1px solid $color-bg-alt;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
&:focus {
border: 1px solid $color-blossom;
outline: 0;
}
}
input[type="checkbox"]:focus {
outline: 1px dotted $color-blossom;
}
label,
legend,
fieldset {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}

View file

@ -0,0 +1,15 @@
// Settings for SakuraCSS
$color-blossom: #ffffff;
$color-fade: #c9c9c9;
$color-bg: #222222;
$color-bg-alt: #4a4a4a;
/* $color-text: #dedce5; */
$color-text: #c9c9c9;
$font-size-base: 1.8rem;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
$font-family-heading: $font-family-base;
@import "styles/external/sakura";

View file

@ -1,7 +1,7 @@
---
title: About me
subtitle: This is actually just a list of things I host because I have the personality of a ham sandwich
layout: layouts/about.tsx
layout: layouts/base.pug
---
### An inexhaustible list of everything I host :)
@ -15,7 +15,7 @@ layout: layouts/about.tsx
- [Writefreely](https://blog.froth.zone)
- [PeerTube](https://tube.froth.zone)
- [Funkwhale](https://funkwhale.samtherapy.net)
- [Fedifeed (pictured either to the right or below)](https://fedifeed.com)
- [Fedifeed](https://fedifeed.com)
#### Private frontends

14
src/contact.mdx Normal file
View file

@ -0,0 +1,14 @@
---
title: Contact me
subtitle: (NOT RECOMMENDED)
layout: layouts/base.pug
---
##### List of ways that I may or may not respond to:
- Email: `sam @ samtherapy DOT net` \
If you want to use GPG try using WKD or DANE, the keys should be there.
- XMPP: Same as email
- [Matrix](https://matrix.to/#/@samme:schizo.cafe)
- [Fediverse](https://froth.zone/sam) (below)
- <iframe title="Powered by Fedifeed" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=pleroma&theme=pleroma&size=100&header=true&replies=true&boosts=true"></iframe>

View file

@ -1,11 +0,0 @@
---
title: Sam's Website, 2.0
subtitle: Under construction since October 2022
layout: layouts/head.tsx
---
### Hello there.
Website!
[Information, I guess](/about)

12
src/index.mdx Normal file
View file

@ -0,0 +1,12 @@
---
title: Sam's Website, 2.0
subtitle: Under construction since October 2022
layout: layouts/base.pug
---
### Hello there.
Website again!
- [Information, I guess](/about)
- [Contact me, if you want](/contact)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View file

@ -1,8 +0,0 @@
scripts:
lint: deno lint
format: deno fmt
pre-commit:
cmd:
- vr lint
- vr format
gitHook: pre-commit