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

Make --color-opacity variable "private", tweak switch style

Browse Source
This commit is contained in:
daudix
2024-09-02 01:53:02 +03:00
parent 2c110393c3
commit b6b2639373
8 changed files with 44 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -9,9 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Add `--color-opacity` CSS variable for setting global color opacity.
- Add `--disabled` CSS variable for setting opacity of disabled elements.
- Add `--hover` CSS variable for setting zoom on hover.
- Add `config.extra.color_opacity` and `config.extra.color_opacity_dark` config variables to set global color opacity used by `-bg` colors and `--primary-color-alpha`.
- Add `external` class to comment timestamp.
- Add active state to footer's "Powered by" links.
- Add active state to footnotes' go back button.
@ -24,7 +24,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
- **[BREAKING]** Change the way `--bg-color` works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
- Add margin between comment author name and timestamp.
- Add missing edge highlight to active footer navbar links.
- Make comment timestamp more subtle.
- Reduce the target heading transition time.
- Reduce top margin of the target heading.

52
content/demo/index.md
View File

@ -586,16 +586,6 @@ Blah blah <q>Inline Quote</q> hmm.
<input id="color-picker-dark" type="color" value="#ffa348" />
<label for="color-picker-dark">Dark theme</label>
<br />
<small>Color opacity:</small>
<br />
<small id="opacity-light-value">0.1</small>
<input type="range" id="opacity-light" min="0.1" max="0.9" step="0.1" value="0.1">
<label for="opacity-light">Light theme</label>
<br />
<small id="opacity-dark-value">0.1</small>
<input type="range" id="opacity-dark" min="0.1" max="0.9" step="0.1" value="0.1">
<label for="opacity-dark">Dark theme</label>
<br />
<small>Fix contrast:</small>
<br />
<input id="contrast-color-light" type="checkbox" />
@ -645,23 +635,9 @@ Blah blah <q>Inline Quote</q> hmm.
#color-picker-light,
#color-picker-dark,
#contrast-color-light,
#contrast-color-dark,
#opacity-light-value,
#opacity-dark-value,
#opacity-light,
#opacity-dark {
#contrast-color-dark {
margin-inline-end: 0.25rem;
}
#opacity-light,
#opacity-dark {
width: 8rem;
}
#opacity-light-value,
#opacity-dark-value {
font-variant-numeric: tabular-nums;
}
</style>
<script type="text/javascript">
@ -669,25 +645,14 @@ Blah blah <q>Inline Quote</q> hmm.
const colorPickerDark = document.querySelector("#color-picker-dark");
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
const opacityInputLight = document.querySelector("#opacity-light");
const opacityInputDark = document.querySelector("#opacity-dark");
const opacityValueLight = document.querySelector("#opacity-light-value");
const opacityValueDark = document.querySelector("#opacity-dark-value");
let primaryColorLight = colorPickerLight.value;
let primaryColorDark = colorPickerDark.value;
let opacityLight = opacityInputLight.value;
let opacityDark = opacityInputDark.value;
opacityValueLight.textContent = opacityLight;
opacityValueDark.textContent = opacityDark;
colorPickerLight.addEventListener("input", updatePrimaryColorLight);
colorPickerDark.addEventListener("input", updatePrimaryColorDark);
contrastCheckboxLight.addEventListener("change", updateStyles);
contrastCheckboxDark.addEventListener("change", updateStyles);
opacityInputLight.addEventListener("input", updateOpacityLight);
opacityInputDark.addEventListener("input", updateOpacityDark);
function updatePrimaryColorLight() {
primaryColorLight = colorPickerLight.value;
@ -699,18 +664,6 @@ Blah blah <q>Inline Quote</q> hmm.
updateStyles();
}
function updateOpacityLight() {
opacityLight = opacityInputLight.value;
opacityValueLight.textContent = opacityLight;
updateStyles();
}
function updateOpacityDark() {
opacityDark = opacityInputDark.value;
opacityValueDark.textContent = opacityDark;
updateStyles();
}
function updateStyles() {
const contrastColorLight = contrastCheckboxLight.checked;
const contrastColorDark = contrastCheckboxDark.checked;
@ -726,16 +679,13 @@ Blah blah <q>Inline Quote</q> hmm.
let styles = `
:root {
--primary-color: ${primaryColorLight};
--color-opacity: ${opacityLight};
}
[data-theme="dark"] {
--primary-color: ${primaryColorDark};
--color-opacity: ${opacityDark};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark};
--color-opacity: ${opacityDark};
}
}
`;

40
content/tricks/index.md
View File

@ -24,7 +24,7 @@ Duckquill is pretty easy to restyle with just a few lines of SCSS in the [approp
### Navbar
You can make navbar have more classic look:
You can make navbar have more traditional look:
![classic navabr](https://files.catbox.moe/wd9nal.png)
@ -94,7 +94,7 @@ Or you can make it sticked to top but not full-width:
### Headings
Default headings might not fit your taste, that's understandable. Good thing that we can ~~make them boring~~ fix them:
Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them:
![boring headings](https://files.catbox.moe/6ok740.png)
@ -137,7 +137,7 @@ h6 {
### Strikethrough
The default strikethrough style is too much for you? Let's sort this out:
The default strikethrough style is too much? Let's sort this out:
![plain strikethrough](https://files.catbox.moe/y2tbwm.png)
@ -153,11 +153,15 @@ del {
### Edge Highlights
Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy to get rid of them:
Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them:
```scss
:root {
@import "../themes/duckquill/sass/_variables.scss";
@include theme-variables using ($theme) {
@else {
--edge-highlight: 0 0 0 transparent;
}
}
```
@ -180,24 +184,26 @@ hr {
### Background Image
Want to set some nice image as a background? I got you covered:
Want to set some nice image as a background? We got you covered:
![background image](https://files.catbox.moe/kgrgqr.png)
```scss
@import "../themes/duckquill/sass/_variables.scss";
@include theme-variables using ($theme) {
@if $theme =="dark" {
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
}
@else {
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
}
}
body {
background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
```
Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` to your needs:
```scss
:root {
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
@media (prefers-color-scheme: dark) {
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
}
}
```
Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` based on your needs.

1
sass/_footer.scss
View File

@ -43,6 +43,7 @@
text-decoration: none;
&.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);

2
sass/_general.scss
View File

@ -33,7 +33,7 @@ body {
display: grid; // Put footer at the bottom for short pages, such as the 404
grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
margin: 0;
background: var(--bg-color), var(--primary-color);
background-color: var(--bg-color);
min-height: 100vh;
color: var(--fg-color);
line-height: 1.6;

10
sass/_input.scss
View File

@ -87,12 +87,12 @@ input[type="checkbox"] {
}
&.switch {
vertical-align: -0.625rem;
vertical-align: -0.375rem;
box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
width: 3rem;
height: 2rem;
width: 2.5rem;
height: 1.5rem;
&::before {
-webkit-mask-image: none;
@ -106,8 +106,8 @@ input[type="checkbox"] {
box-shadow: var(--shadow);
border-radius: 50%;
background-color: white;
width: 1.5rem;
height: 1.5rem;
width: 1rem;
height: 1rem;
}
&:checked {

5
sass/_variables.scss
View File

@ -17,7 +17,7 @@
@include theme-variables using ($theme) {
@if $theme =="dark" {
// COLORS
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@
@else {
// COLORS
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -63,6 +63,7 @@
// VARIABLES
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--color-opacity: 0.1;
--container-width: 720px;
--disabled: 0.6;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);

13
templates/partials/head.html
View File

@ -42,7 +42,6 @@
:root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
--color-opacity: {{ config.extra.color_opacity | default(value="0.1") }};
}
{%- if config.extra.primary_color_dark %}
@ -68,18 +67,6 @@
}
}
{%- endif %}
{%- if config.extra.color_opacity_dark %}
[data-theme="dark"] {
--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
}
}
{%- endif %}
</style>
{%- set stylesheets = [ "style.css" ] %}