hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Variable names and smth

Browse Source
This commit is contained in:
daudix-UFO
2023-10-15 23:10:55 +00:00
parent abf31905ad
commit 6b6c9a0a78
9 changed files with 135 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@ -38,15 +38,15 @@ Duckquill offers some configuration options to make it fit you better.
You can add your own or override existing styles in the `sass/custom.scss` of your site, if for some reason overridden class are not respected, try using `!important`. You can import styles from Duckquill using `@use "../themes/duckquill/sass/NEEDED_FILE.scss";`. You can add your own or override existing styles in the `sass/custom.scss` of your site, if for some reason overridden class are not respected, try using `!important`. You can import styles from Duckquill using `@use "../themes/duckquill/sass/NEEDED_FILE.scss";`.
### Accent color ### Primary color
Duckquill respects chosen accent color everywhere, you can use any HEX color code you want Duckquill respects chosen primary color everywhere, you can use any HEX color code you want
First, change the accent color in `config.toml`: First, change the primary color in `config.toml`:
```toml ```toml
[extra] [extra]
accent_color = "#HEX_COLOR_CODE" primary_color = "#HEX_COLOR_CODE"
``` ```
Then, paste the following code inside `sass/custom.scss` (inside your site, not the theme): Then, paste the following code inside `sass/custom.scss` (inside your site, not the theme):
@ -54,42 +54,48 @@ Then, paste the following code inside `sass/custom.scss` (inside your site, not
```sass ```sass
@use "sass:color"; @use "sass:color";
$accent-color: #HEX_COLOR_CODE; $primary-color: #HEX_COLOR_CODE;
$accent-color-20: color.scale($accent-color, $alpha: -80%); $primary-color-alpha: color.scale($primary-color, $alpha: -80%);
$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
$crt-bg: radial-gradient( $crt-bg: radial-gradient(
color.scale($accent-color, $lightness: -80%), color.scale($primary-color, $lightness: -80%),
color.scale($accent-color, $lightness: -90%) color.scale($primary-color, $lightness: -90%)
); );
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%); $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%); 0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
$glow:
0 0 0 1px color.scale($accent-color, $alpha: -95%),
0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
:root { :root {
--accent-color-20: #{$accent-color-20}; // GENERAL SETUP
--accent-color: #{$accent-color}; --primary-color: #{$primary-color};
--background: #{$bg-l}; --primary-color-alpha: #{$primary-color-alpha};
--bg-color: #{$bg-color-l};
--crt-bg: #{$crt-bg}; --crt-bg: #{$crt-bg};
// CUSTOM VARIABLES
--glow: #{$glow}; --glow: #{$glow};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: #{$bg-d}; color-scheme: dark;
// GENERAL SETUP
--bg-color: #{$bg-color-d};
--fg-color: var(--light2);
} }
} }
``` ```
Set any color in `$accent-color` and reload, the accent color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` inside Sass. Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` inside Sass.
### `[extra]` variables: ### `[extra]` variables:
- `accent_color`: Accent color used in some browsers set in metadata, see [#accent-color](https://git.exozy.me/daudix/duckquill#accent-color) - `primary_color`: Primary color used in some browsers set in metadata, see [#primary-color](https://git.exozy.me/daudix/duckquill#primary-color)
- `animated_favicon`: Specify if the favicon are animated GIF (true, false) - `animated_favicon`: Specify if the favicon are animated GIF (true, false)
- `blog_title`: The title of the blog - `blog_title`: The title of the blog
- `blog_description`: The description of the blog, displayed right under the blog title - `blog_description`: The description of the blog, displayed right under the blog title

2
config.toml
View File

@ -21,7 +21,7 @@ highlight_themes_css = [
smart_punctuation = true smart_punctuation = true
[extra] [extra]
accent_color = "#ff7800" primary_color = "#ff7800"
animated_favicon = false animated_favicon = false
blog_description = "Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo" blog_description = "Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo"
blog_title = "Writings of Duck's Feet" blog_title = "Writings of Duck's Feet"

2
content/_index.md
View File

@ -17,7 +17,7 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes! Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
- Pretty, yet lightweight. No JavaScript are used. - Pretty, yet lightweight. No JavaScript are used.
- For a very pleasant look, the colors are tinted with an accent color. - For a very pleasant look, the colors are tinted with the primary color.
- Proper favicon for modern browsers and Apple device icons. - Proper favicon for modern browsers and Apple device icons.
- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test. - Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
- Local copy of the amazing [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts. No slowdowns pulling from external hosting. - Local copy of the amazing [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts. No slowdowns pulling from external hosting.

2
content/demo/index.md
View File

@ -28,7 +28,7 @@ This is a normal paragraph following a header. Codeberg is a code hosting platfo
> This is a blockquote following a header. > This is a blockquote following a header.
> >
> When something is important enough, you do it even if the odds are not in your favor. > > When something is important enough, you do it even if the odds are not in your favor.
### Header 3 ### Header 3

18
sass/_comments.scss
View File

@ -22,7 +22,7 @@ section#comments {
.avatar { .avatar {
all: unset; all: unset;
display: block; display: block;
background-color: var(--fg-05); background-color: var(--fg05);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
height: 100%; height: 100%;
@ -30,7 +30,7 @@ section#comments {
} }
&.op::after { &.op::after {
background-color: var(--accent-color); background-color: var(--primary-color);
border-radius: 50%; border-radius: 50%;
bottom: -0.25rem; bottom: -0.25rem;
color: var(--light2); color: var(--light2);
@ -56,9 +56,9 @@ section#comments {
grid-area: name; grid-area: name;
.instance { .instance {
background-color: var(--fg-05); background-color: var(--fg05);
border-radius: 9999px; border-radius: 9999px;
color: var(--text); color: var(--fg-color);
font-size: smaller; font-size: smaller;
font-weight: normal; font-weight: normal;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
@ -69,7 +69,7 @@ section#comments {
} }
&.op { &.op {
background-color: var(--accent-color); background-color: var(--primary-color);
color: var(--light2); color: var(--light2);
&::before { &::before {
@ -117,7 +117,7 @@ section#comments {
figure { figure {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--fg-05); background-color: var(--fg05);
box-shadow: var(--shadow); box-shadow: var(--shadow);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -127,7 +127,7 @@ section#comments {
img { img {
all: unset; all: unset;
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
&:hover { &:hover {
@ -136,7 +136,7 @@ section#comments {
} }
figcaption { figcaption {
color: var(--text); color: var(--fg-color);
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
margin: 0; margin: 0;
@ -155,7 +155,7 @@ section#comments {
} }
} }
// Hide the card from the shared post // hide the card from the shared post
&:first-of-type .card { &:first-of-type .card {
display: none; display: none;
} }

129
sass/_main.scss
View File

@ -10,10 +10,11 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-color: var(--accent-color) transparent; scrollbar-color: var(--primary-color) transparent;
accent-color: var(--accent-color); primary-color: var(--primary-color);
} }
// smaller font size on mobile
// @media only screen and (max-device-width: 480px) { // @media only screen and (max-device-width: 480px) {
// html, // html,
// body { // body {
@ -25,9 +26,9 @@ body {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
line-height: 1.6; line-height: 1.6;
color: var(--text); color: var(--fg-color);
background-color: var(--background); background-color: var(--background);
// ⇩⇩ put footer at the bottom for short pages, such as the 404 ⇩⇩ // put footer at the bottom for short pages, such as the 404
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-rows: auto minmax(auto, 1fr) auto; // header, stuff, footer grid-template-rows: auto minmax(auto, 1fr) auto; // header, stuff, footer
@ -39,11 +40,14 @@ body {
} }
} }
// style text selection to use primary color
::selection { ::selection {
color: var(--background); color: var(--background);
background-color: var(--accent-color); background-color: var(--primary-color);
} }
// make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it
:target { :target {
scroll-margin-top: 25vh; scroll-margin-top: 25vh;
animation: highlight-in-out var(--transition-long); animation: highlight-in-out var(--transition-long);
@ -52,11 +56,11 @@ body {
@keyframes highlight-in-out { @keyframes highlight-in-out {
50% { 50% {
color: var(--accent-color); color: var(--primary-color);
} }
} }
// Layout // LAYOUT
.container { .container {
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
@ -65,7 +69,6 @@ body {
} }
@media only screen and (max-device-width: 480px) { @media only screen and (max-device-width: 480px) {
// Mobile
.container { .container {
width: 90%; width: 90%;
} }
@ -93,7 +96,7 @@ h2 {
a { a {
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
color: var(--accent-color); color: var(--primary-color);
cursor: pointer; cursor: pointer;
} }
@ -101,12 +104,13 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
b { b,
strong {
font-weight: 600; font-weight: 600;
} }
small { small {
color: var(--fg-50); color: var(--fg50);
} }
dl { dl {
@ -134,8 +138,8 @@ hr {
blockquote { blockquote {
padding: 0 1rem; padding: 0 1rem;
margin-left: 0; margin-left: 0;
color: var(--fg-50); color: var(--fg50);
border-left: 0.3rem solid var(--accent-color); border-left: 0.3rem solid var(--primary-color);
} }
blockquote > :first-child { blockquote > :first-child {
@ -146,6 +150,11 @@ blockquote > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
// make border slightly transparent for nested blockquote
blockquote > blockquote {
border-left: 0.3rem solid var(--primary-color-alpha);
}
abbr { abbr {
cursor: help; cursor: help;
} }
@ -154,25 +163,26 @@ kbd {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
background-color: var(--fg-07); background-color: var(--fg07);
box-shadow: inset 0 -2px 0 var(--fg-09); box-shadow: inset 0 -2px 0 var(--fg09);
font-size: medium; font-size: medium;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
// small nice thingy, keys can be pressed!
kbd:active { kbd:active {
background-color: var(--fg-09); background-color: var(--fg09);
box-shadow: inset 0 1px 0 var(--fg-09); box-shadow: inset 0 1px 0 var(--fg09);
transform: translate(0, 2px); transform: translate(0, 2px);
} }
mark { mark {
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
background-color: var(--accent-color-20); background-color: var(--primary-color-alpha);
color: var(--accent-color); color: var(--primary-color);
} }
figcaption { figcaption {
@ -180,12 +190,12 @@ figcaption {
margin-bottom: 2rem; margin-bottom: 2rem;
display: block; display: block;
text-align: center; text-align: center;
color: var(--fg-50); color: var(--fg50);
font-size: smaller; font-size: smaller;
} }
details { details {
background-color: var(--fg-05); background-color: var(--fg05);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 1rem; padding: 1rem;
@ -195,7 +205,7 @@ details {
} }
} }
// Tables // TABLES
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
@ -214,7 +224,7 @@ table th {
table th, table th,
table td { table td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: 1px solid var(--fg-05); border: 1px solid var(--fg05);
} }
td, td,
@ -222,12 +232,12 @@ th {
padding: 0; padding: 0;
} }
// Make tables vertically aligned to the top // make tables vertically aligned to the top
tbody td { tbody td {
vertical-align: top; vertical-align: top;
} }
// Media // MEDIA
img, img,
video { video {
display: block; display: block;
@ -248,7 +258,6 @@ img:not(.no-hover):hover {
} }
@media only screen and (max-device-width: 480px) { @media only screen and (max-device-width: 480px) {
// Mobile
img:not(.no-hover):hover { img:not(.no-hover):hover {
transform: scale(110%); transform: scale(110%);
} }
@ -268,20 +277,20 @@ img:not(.no-hover):hover {
box-shadow: none; box-shadow: none;
} }
// Navbar // NAVBAR
.site-nav { .site-nav {
position: sticky;
top: 1rem;
z-index: 1; z-index: 1;
width: 80%; width: 80%;
top: 1rem;
position: sticky;
overflow: auto;
max-width: var(--content-width); max-width: var(--content-width);
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--shadow);
border-radius: var(--border-radius-big); border-radius: var(--border-radius-big);
background-color: var(--fg-05); background-color: var(--fg05);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
box-shadow: var(--shadow);
overflow: auto;
ul { ul {
list-style-type: none; list-style-type: none;
@ -291,7 +300,7 @@ img:not(.no-hover):hover {
} }
li { li {
color: var(--fg-50); color: var(--fg50);
display: inline-block; display: inline-block;
} }
@ -301,23 +310,23 @@ img:not(.no-hover):hover {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: transparent; background-color: transparent;
color: var(--fg-50); color: var(--fg50);
transition: var(--transition); transition: var(--transition);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
background-color: var(--fg-05); background-color: var(--fg05);
color: var(--accent-color); color: var(--primary-color);
} }
a.site-nav-title { a.site-nav-title {
line-height: normal; line-height: normal; // unset line height
font-size: 1.2rem; font-size: 1.2rem;
} }
svg { svg {
transform: translateY(-0.125rem) translateX(-0.125rem); transform: translateY(-0.125rem) translateX(-0.125rem); // fix icon position
} }
} }
@ -347,7 +356,7 @@ img:not(.no-hover):hover {
} }
} }
// Footer // FOOTER
.site-footer { .site-footer {
text-align: center; text-align: center;
padding: 3rem 0 3rem; padding: 3rem 0 3rem;
@ -361,7 +370,7 @@ img:not(.no-hover):hover {
} }
} }
// Link arrows // LINK ARROWS
.link-page::after { .link-page::after {
content: " →"; content: " →";
} }
@ -370,14 +379,14 @@ img:not(.no-hover):hover {
content: " ↗"; content: " ↗";
} }
// Center link icons vertically // center link icons vertically
.link-icon { .link-icon {
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
vertical-align: middle; vertical-align: middle;
} }
// Buttons // BUTTONS
.dialog-buttons { .dialog-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -391,16 +400,16 @@ img:not(.no-hover):hover {
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--fg-05); background-color: var(--fg05);
color: var(--text); color: var(--fg-color);
} }
// Code // CODE
code { code {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
background-color: var(--fg-07); background-color: var(--fg07);
color: var(--red-fg); color: var(--red-fg);
} }
@ -411,12 +420,13 @@ pre code {
padding: unset; padding: unset;
} }
// apply monospace font to everything inside <pre>
pre * { pre * {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
} }
pre { pre {
line-height: normal; line-height: normal; // unset line height
padding: 1rem; padding: 1rem;
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -425,7 +435,7 @@ pre {
overflow: auto; overflow: auto;
} }
// The line numbers already provide some kind of left/right padding // the line numbers already provide some kind of left/right padding
pre[data-linenos] { pre[data-linenos] {
padding: 1rem 0; padding: 1rem 0;
} }
@ -435,23 +445,18 @@ pre table td {
border: none; border: none;
} }
// The line number cells // the line number cells
pre table td:nth-of-type(1) { pre table td:nth-of-type(1) {
text-align: center; text-align: center;
user-select: none; user-select: none;
} }
pre mark { pre mark {
// If you want your highlights to take the full width.
display: block; display: block;
// The default background colour of a mark is bright yellow background-color: var(--fg07);
background-color: var(--fg-07); color: var(--fg-color); // unset mark color from primary color to text color
// Set color from accent color to text color border-radius: 0; // unset code block border radius
color: var(--text); padding: 0; // unset mark padding
// Unset code block border radius
border-radius: 0;
// Unset mark padding
padding: 0;
} }
pre table { pre table {
@ -467,16 +472,16 @@ pre table {
background: var(--crt-bg); background: var(--crt-bg);
pre { pre {
text-shadow: var(--accent-color) 0 0 12px; text-shadow: var(--primary-color) 0 0 12px;
color: var(--accent-color); color: var(--primary-color);
padding: 1rem 1rem; padding: 1rem 1rem;
// unset some <pre> stuff
margin: unset; margin: unset;
background-color: unset; background-color: unset;
box-shadow: unset; box-shadow: unset;
} }
a { a {
color: var(--accent-color);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -497,7 +502,7 @@ pre table {
} }
} }
// Statements // STATEMENTS
.statement-container { .statement-container {
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
padding: 1rem 1rem; padding: 1rem 1rem;

56
sass/_variables.scss
View File

@ -1,40 +1,38 @@
@use "sass:color"; @use "sass:color";
$accent-color: #ff7800; $primary-color: #ff7800;
$accent-color-20: color.scale($accent-color, $alpha: -80%); $primary-color-alpha: color.scale($primary-color, $alpha: -80%);
$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
$crt-bg: radial-gradient( $crt-bg: radial-gradient(
color.scale($accent-color, $lightness: -80%), color.scale($primary-color, $lightness: -80%),
color.scale($accent-color, $lightness: -90%) color.scale($primary-color, $lightness: -90%)
); );
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%); $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%); 0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
$glow:
0 0 0 1px color.scale($accent-color, $alpha: -95%),
0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
:root { :root {
// GENERAL SETUP // GENERAL SETUP
--accent-color-20: #{$accent-color-20}; --primary-color: #{$primary-color};
--accent-color: #{$accent-color}; --primary-color-alpha: #{$primary-color-alpha};
--background: #{$bg-l}; --bg-color: #{$bg-color-l};
--fg-color: var(--dark4);
--crt-bg: #{$crt-bg};
--border-radius-big: 1.2rem; --border-radius-big: 1.2rem;
--border-radius-small: 0.5rem; --border-radius-small: 0.5rem;
--border-radius: 0.75rem; --border-radius: 0.75rem;
--border: rgba(120, 120, 120, 0.4);
--content-width: 720px; --content-width: 720px;
--crt-bg: #{$crt-bg};
--text: var(--dark4);
// CUSTOM COLOR PALETTE // CUSTOM COLOR PALETTE
--fg-03: rgba(0, 0, 0, 0.03); --fg03: rgba(0, 0, 0, 0.03);
--fg-05: rgba(0, 0, 0, 0.05); --fg05: rgba(0, 0, 0, 0.05);
--fg-07: rgba(0, 0, 0, 0.07); --fg07: rgba(0, 0, 0, 0.07);
--fg-09: rgba(0, 0, 0, 0.09); --fg09: rgba(0, 0, 0, 0.09);
--fg-50: rgba(0, 0, 0, 0.5); --fg50: rgba(0, 0, 0, 0.5);
--orange-bg: rgba(255, 120, 0, 0.1); --orange-bg: rgba(255, 120, 0, 0.1);
--orange-fg: rgb(255, 120, 0); --orange-fg: rgb(255, 120, 0);
@ -64,15 +62,15 @@ $glow:
color-scheme: dark; color-scheme: dark;
// GENERAL SETUP // GENERAL SETUP
--background: #{$bg-d}; --bg-color: #{$bg-color-d};
--text: var(--light2); --fg-color: var(--light2);
// CUSTOM COLOR PALETTE // CUSTOM COLOR PALETTE
--fg-03: rgba(255, 255, 255, 0.03); --fg03: rgba(255, 255, 255, 0.03);
--fg-05: rgba(255, 255, 255, 0.05); --fg05: rgba(255, 255, 255, 0.05);
--fg-07: rgba(255, 255, 255, 0.07); --fg07: rgba(255, 255, 255, 0.07);
--fg-09: rgba(255, 255, 255, 0.09); --fg09: rgba(255, 255, 255, 0.09);
--fg-50: rgba(255, 255, 255, 0.5); --fg50: rgba(255, 255, 255, 0.5);
--orange-bg: rgba(255, 190, 111, 0.1); --orange-bg: rgba(255, 190, 111, 0.1);
--orange-fg: rgb(255, 190, 111); --orange-fg: rgb(255, 190, 111);

2
static/card.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 146 KiB

2
templates/includes/head.html
View File

@ -2,7 +2,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="{{ config.extra.accent_color }}" /> <meta name="theme-color" content="{{ config.extra.primary_color }}" />
<title>{% block title %}{{ config.title }}{% endblock title %}</title> <title>{% block title %}{{ config.title }}{% endblock title %}</title>