chore: Variable names and smth
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
abf31905ad
commit
6b6c9a0a78
GPG key ID:
93ECF15D3053D81C
48
README.md
48
README.md
|
|
@ -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";`.
|
||||
|
||||
### 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
|
||||
[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):
|
||||
|
|
@ -54,42 +54,48 @@ Then, paste the following code inside `sass/custom.scss` (inside your site, not
|
|||
```sass
|
||||
@use "sass:color";
|
||||
|
||||
$accent-color: #HEX_COLOR_CODE;
|
||||
$accent-color-20: color.scale($accent-color, $alpha: -80%);
|
||||
$primary-color: #HEX_COLOR_CODE;
|
||||
$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(
|
||||
color.scale($accent-color, $lightness: -80%),
|
||||
color.scale($accent-color, $lightness: -90%)
|
||||
color.scale($primary-color, $lightness: -80%),
|
||||
color.scale($primary-color, $lightness: -90%)
|
||||
);
|
||||
|
||||
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
|
||||
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
|
||||
$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
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 {
|
||||
--accent-color-20: #{$accent-color-20};
|
||||
--accent-color: #{$accent-color};
|
||||
--background: #{$bg-l};
|
||||
// GENERAL SETUP
|
||||
--primary-color: #{$primary-color};
|
||||
--primary-color-alpha: #{$primary-color-alpha};
|
||||
--bg-color: #{$bg-color-l};
|
||||
--crt-bg: #{$crt-bg};
|
||||
|
||||
// CUSTOM VARIABLES
|
||||
--glow: #{$glow};
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
: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:
|
||||
|
||||
- `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)
|
||||
- `blog_title`: The title of the blog
|
||||
- `blog_description`: The description of the blog, displayed right under the blog title
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ highlight_themes_css = [
|
|||
smart_punctuation = true
|
||||
|
||||
[extra]
|
||||
accent_color = "#ff7800"
|
||||
primary_color = "#ff7800"
|
||||
animated_favicon = false
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
|
|||
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.
|
||||
- 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.
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
>
|
||||
> 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
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ section#comments {
|
|||
.avatar {
|
||||
all: unset;
|
||||
display: block;
|
||||
background-color: var(--fg-05);
|
||||
background-color: var(--fg05);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
height: 100%;
|
||||
|
|
@ -30,7 +30,7 @@ section#comments {
|
|||
}
|
||||
|
||||
&.op::after {
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
bottom: -0.25rem;
|
||||
color: var(--light2);
|
||||
|
|
@ -56,9 +56,9 @@ section#comments {
|
|||
grid-area: name;
|
||||
|
||||
.instance {
|
||||
background-color: var(--fg-05);
|
||||
background-color: var(--fg05);
|
||||
border-radius: 9999px;
|
||||
color: var(--text);
|
||||
color: var(--fg-color);
|
||||
font-size: smaller;
|
||||
font-weight: normal;
|
||||
padding: 0.25rem 0.75rem;
|
||||
|
|
@ -69,7 +69,7 @@ section#comments {
|
|||
}
|
||||
|
||||
&.op {
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary-color);
|
||||
color: var(--light2);
|
||||
|
||||
&::before {
|
||||
|
|
@ -117,7 +117,7 @@ section#comments {
|
|||
|
||||
figure {
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--fg-05);
|
||||
background-color: var(--fg05);
|
||||
box-shadow: var(--shadow);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
|
@ -127,7 +127,7 @@ section#comments {
|
|||
img {
|
||||
all: unset;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -136,7 +136,7 @@ section#comments {
|
|||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--text);
|
||||
color: var(--fg-color);
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
129
sass/_main.scss
129
sass/_main.scss
|
|
@ -10,10 +10,11 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: var(--accent-color) transparent;
|
||||
accent-color: var(--accent-color);
|
||||
scrollbar-color: var(--primary-color) transparent;
|
||||
primary-color: var(--primary-color);
|
||||
}
|
||||
|
||||
// smaller font size on mobile
|
||||
// @media only screen and (max-device-width: 480px) {
|
||||
// html,
|
||||
// body {
|
||||
|
|
@ -25,9 +26,9 @@ body {
|
|||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
color: var(--fg-color);
|
||||
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;
|
||||
min-height: 100vh;
|
||||
grid-template-rows: auto minmax(auto, 1fr) auto; // header, stuff, footer
|
||||
|
|
@ -39,11 +40,14 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// style text selection to use primary color
|
||||
::selection {
|
||||
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 {
|
||||
scroll-margin-top: 25vh;
|
||||
animation: highlight-in-out var(--transition-long);
|
||||
|
|
@ -52,11 +56,11 @@ body {
|
|||
|
||||
@keyframes highlight-in-out {
|
||||
50% {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Layout
|
||||
// LAYOUT
|
||||
.container {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
|
|
@ -65,7 +69,6 @@ body {
|
|||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
// Mobile
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
|
|
@ -93,7 +96,7 @@ h2 {
|
|||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -101,12 +104,13 @@ a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
b {
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg-50);
|
||||
color: var(--fg50);
|
||||
}
|
||||
|
||||
dl {
|
||||
|
|
@ -134,8 +138,8 @@ hr {
|
|||
blockquote {
|
||||
padding: 0 1rem;
|
||||
margin-left: 0;
|
||||
color: var(--fg-50);
|
||||
border-left: 0.3rem solid var(--accent-color);
|
||||
color: var(--fg50);
|
||||
border-left: 0.3rem solid var(--primary-color);
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
|
|
@ -146,6 +150,11 @@ blockquote > :last-child {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// make border slightly transparent for nested blockquote
|
||||
blockquote > blockquote {
|
||||
border-left: 0.3rem solid var(--primary-color-alpha);
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -154,25 +163,26 @@ kbd {
|
|||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--fg-07);
|
||||
box-shadow: inset 0 -2px 0 var(--fg-09);
|
||||
background-color: var(--fg07);
|
||||
box-shadow: inset 0 -2px 0 var(--fg09);
|
||||
font-size: medium;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
// small nice thingy, keys can be pressed!
|
||||
kbd:active {
|
||||
background-color: var(--fg-09);
|
||||
box-shadow: inset 0 1px 0 var(--fg-09);
|
||||
background-color: var(--fg09);
|
||||
box-shadow: inset 0 1px 0 var(--fg09);
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--accent-color-20);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--primary-color-alpha);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
|
|
@ -180,12 +190,12 @@ figcaption {
|
|||
margin-bottom: 2rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: var(--fg-50);
|
||||
color: var(--fg50);
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
details {
|
||||
background-color: var(--fg-05);
|
||||
background-color: var(--fg05);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1rem;
|
||||
|
|
@ -195,7 +205,7 @@ details {
|
|||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
// TABLES
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
|
@ -214,7 +224,7 @@ table th {
|
|||
table th,
|
||||
table td {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--fg-05);
|
||||
border: 1px solid var(--fg05);
|
||||
}
|
||||
|
||||
td,
|
||||
|
|
@ -222,12 +232,12 @@ th {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
// Make tables vertically aligned to the top
|
||||
// make tables vertically aligned to the top
|
||||
tbody td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Media
|
||||
// MEDIA
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
|
|
@ -248,7 +258,6 @@ img:not(.no-hover):hover {
|
|||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
// Mobile
|
||||
img:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
|
|
@ -268,20 +277,20 @@ img:not(.no-hover):hover {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
// NAVBAR
|
||||
.site-nav {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
top: 1rem;
|
||||
position: sticky;
|
||||
overflow: auto;
|
||||
max-width: var(--content-width);
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--border-radius-big);
|
||||
background-color: var(--fg-05);
|
||||
background-color: var(--fg05);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: auto;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
|
@ -291,7 +300,7 @@ img:not(.no-hover):hover {
|
|||
}
|
||||
|
||||
li {
|
||||
color: var(--fg-50);
|
||||
color: var(--fg50);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -301,23 +310,23 @@ img:not(.no-hover):hover {
|
|||
padding: 0.4rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: transparent;
|
||||
color: var(--fg-50);
|
||||
color: var(--fg50);
|
||||
transition: var(--transition);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--fg-05);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--fg05);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
a.site-nav-title {
|
||||
line-height: normal;
|
||||
line-height: normal; // unset line height
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
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 {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
|
|
@ -361,7 +370,7 @@ img:not(.no-hover):hover {
|
|||
}
|
||||
}
|
||||
|
||||
// Link arrows
|
||||
// LINK ARROWS
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
|
@ -370,14 +379,14 @@ img:not(.no-hover):hover {
|
|||
content: " ↗";
|
||||
}
|
||||
|
||||
// Center link icons vertically
|
||||
// center link icons vertically
|
||||
.link-icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
// BUTTONS
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -391,16 +400,16 @@ img:not(.no-hover):hover {
|
|||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--fg-05);
|
||||
color: var(--text);
|
||||
background-color: var(--fg05);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
// Code
|
||||
// CODE
|
||||
code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--fg-07);
|
||||
background-color: var(--fg07);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
|
|
@ -411,12 +420,13 @@ pre code {
|
|||
padding: unset;
|
||||
}
|
||||
|
||||
// apply monospace font to everything inside <pre>
|
||||
pre * {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: normal;
|
||||
line-height: normal; // unset line height
|
||||
padding: 1rem;
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -425,7 +435,7 @@ pre {
|
|||
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] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
|
@ -435,23 +445,18 @@ pre table td {
|
|||
border: none;
|
||||
}
|
||||
|
||||
// The line number cells
|
||||
// the line number cells
|
||||
pre table td:nth-of-type(1) {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre mark {
|
||||
// If you want your highlights to take the full width.
|
||||
display: block;
|
||||
// The default background colour of a mark is bright yellow
|
||||
background-color: var(--fg-07);
|
||||
// Set color from accent color to text color
|
||||
color: var(--text);
|
||||
// Unset code block border radius
|
||||
border-radius: 0;
|
||||
// Unset mark padding
|
||||
padding: 0;
|
||||
background-color: var(--fg07);
|
||||
color: var(--fg-color); // unset mark color from primary color to text color
|
||||
border-radius: 0; // unset code block border radius
|
||||
padding: 0; // unset mark padding
|
||||
}
|
||||
|
||||
pre table {
|
||||
|
|
@ -467,16 +472,16 @@ pre table {
|
|||
background: var(--crt-bg);
|
||||
|
||||
pre {
|
||||
text-shadow: var(--accent-color) 0 0 12px;
|
||||
color: var(--accent-color);
|
||||
text-shadow: var(--primary-color) 0 0 12px;
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
// unset some <pre> stuff
|
||||
margin: unset;
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -497,7 +502,7 @@ pre table {
|
|||
}
|
||||
}
|
||||
|
||||
// Statements
|
||||
// STATEMENTS
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,38 @@
|
|||
@use "sass:color";
|
||||
|
||||
$accent-color: #ff7800;
|
||||
$accent-color-20: color.scale($accent-color, $alpha: -80%);
|
||||
$primary-color: #ff7800;
|
||||
$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(
|
||||
color.scale($accent-color, $lightness: -80%),
|
||||
color.scale($accent-color, $lightness: -90%)
|
||||
color.scale($primary-color, $lightness: -80%),
|
||||
color.scale($primary-color, $lightness: -90%)
|
||||
);
|
||||
|
||||
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
|
||||
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
|
||||
$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
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 {
|
||||
// GENERAL SETUP
|
||||
--accent-color-20: #{$accent-color-20};
|
||||
--accent-color: #{$accent-color};
|
||||
--background: #{$bg-l};
|
||||
--primary-color: #{$primary-color};
|
||||
--primary-color-alpha: #{$primary-color-alpha};
|
||||
--bg-color: #{$bg-color-l};
|
||||
--fg-color: var(--dark4);
|
||||
--crt-bg: #{$crt-bg};
|
||||
--border-radius-big: 1.2rem;
|
||||
--border-radius-small: 0.5rem;
|
||||
--border-radius: 0.75rem;
|
||||
--border: rgba(120, 120, 120, 0.4);
|
||||
--content-width: 720px;
|
||||
--crt-bg: #{$crt-bg};
|
||||
--text: var(--dark4);
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg-03: rgba(0, 0, 0, 0.03);
|
||||
--fg-05: rgba(0, 0, 0, 0.05);
|
||||
--fg-07: rgba(0, 0, 0, 0.07);
|
||||
--fg-09: rgba(0, 0, 0, 0.09);
|
||||
--fg-50: rgba(0, 0, 0, 0.5);
|
||||
--fg03: rgba(0, 0, 0, 0.03);
|
||||
--fg05: rgba(0, 0, 0, 0.05);
|
||||
--fg07: rgba(0, 0, 0, 0.07);
|
||||
--fg09: rgba(0, 0, 0, 0.09);
|
||||
--fg50: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--orange-bg: rgba(255, 120, 0, 0.1);
|
||||
--orange-fg: rgb(255, 120, 0);
|
||||
|
|
@ -64,15 +62,15 @@ $glow:
|
|||
color-scheme: dark;
|
||||
|
||||
// GENERAL SETUP
|
||||
--background: #{$bg-d};
|
||||
--text: var(--light2);
|
||||
--bg-color: #{$bg-color-d};
|
||||
--fg-color: var(--light2);
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg-03: rgba(255, 255, 255, 0.03);
|
||||
--fg-05: rgba(255, 255, 255, 0.05);
|
||||
--fg-07: rgba(255, 255, 255, 0.07);
|
||||
--fg-09: rgba(255, 255, 255, 0.09);
|
||||
--fg-50: rgba(255, 255, 255, 0.5);
|
||||
--fg03: rgba(255, 255, 255, 0.03);
|
||||
--fg05: rgba(255, 255, 255, 0.05);
|
||||
--fg07: rgba(255, 255, 255, 0.07);
|
||||
--fg09: rgba(255, 255, 255, 0.09);
|
||||
--fg50: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--orange-bg: rgba(255, 190, 111, 0.1);
|
||||
--orange-fg: rgb(255, 190, 111);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 146 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue