Across the board style fixes and simplifications
Plus bump to v3
This commit is contained in:
@ -47,7 +47,7 @@ It is highly recommended to switch from the `main` branch to the lates release:
|
||||
|
||||
```sh
|
||||
cd themes/duckquill
|
||||
git checkout tags/v2.1.0
|
||||
git checkout tags/v3.0.0
|
||||
```
|
||||
|
||||
To update the submodule, simply switch to a new tag:
|
||||
@ -57,7 +57,7 @@ To update the submodule, simply switch to a new tag:
|
||||
```sh
|
||||
git submodule update --remote --merge
|
||||
git tag --list
|
||||
git checkout tags/v2.1.0
|
||||
git checkout tags/v3.0.0
|
||||
```
|
||||
|
||||
Then, enable it in your `config.toml`:
|
||||
|
@ -47,7 +47,7 @@ git submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill
|
||||
|
||||
```sh
|
||||
cd themes/duckquill
|
||||
git checkout tags/v2.1.0
|
||||
git checkout tags/v3.0.0
|
||||
```
|
||||
|
||||
Чтобы обновить субмодуль, просто переключитесь на новый тег:
|
||||
@ -57,7 +57,7 @@ git checkout tags/v2.1.0
|
||||
```sh
|
||||
git submodule update --remote --merge
|
||||
git tag --list
|
||||
git checkout tags/v2.1.0
|
||||
git checkout tags/v3.0.0
|
||||
```
|
||||
|
||||
Затем включите её в файле `config.toml`:
|
||||
|
@ -6,14 +6,14 @@
|
||||
transform: scale(0.95);
|
||||
opacity: 0.6;
|
||||
transition: var(--transition-longer);
|
||||
outline: 2px dashed var(--fg-muted-2);
|
||||
outline: 0.125rem dashed var(--fg-muted-2);
|
||||
outline-offset: 1rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
outline: 2px dashed transparent;
|
||||
outline: 0.125rem dashed transparent;
|
||||
outline-offset: 0;
|
||||
}
|
||||
}
|
||||
@ -34,8 +34,9 @@
|
||||
right: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
|
@ -7,15 +7,15 @@
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.625rem 1rem;
|
||||
color: var(--fg-color);
|
||||
font-size: 0.9rem;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -2,63 +2,63 @@
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
font-family: var(--font-monospace-code);
|
||||
font-family: var(--font-monospace-code);
|
||||
}
|
||||
|
||||
code:not(pre code) {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-2);
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--red-fg);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-2);
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
line-height: normal;
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
line-height: normal;
|
||||
|
||||
table td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
table td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// The line number cells
|
||||
table td:nth-of-type(1) {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
// The line number cells
|
||||
table td:nth-of-type(1) {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
mark {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
border-radius: 0; // Unset code block border radius
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0; // Unset mark padding
|
||||
color: var(--fg-color); // Unset mark color from primary color to text color
|
||||
}
|
||||
mark {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
border-radius: 0; // Unset code block border radius
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0; // Unset mark padding
|
||||
color: var(--fg-color); // Unset mark color from primary color to text color
|
||||
}
|
||||
|
||||
table {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
overflow: auto;
|
||||
table {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
overflow: auto;
|
||||
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The line numbers already provide some kind of left/right padding
|
||||
&[data-linenos] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
// The line numbers already provide some kind of left/right padding
|
||||
&[data-linenos] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
@ -1,11 +1,12 @@
|
||||
section#comments {
|
||||
#qrcode {
|
||||
float: right;
|
||||
box-sizing: content-box;
|
||||
margin: 3rem 0 0 1rem;
|
||||
background-color: white;
|
||||
padding: 12.5px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
padding: 0.75rem;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
|
||||
body[dir="rtl"] & {
|
||||
float: left;
|
||||
|
@ -8,7 +8,6 @@
|
||||
|
||||
button {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
@ -20,6 +19,7 @@
|
||||
border-radius: 50%;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
line-height: 0;
|
||||
|
||||
body[dir="rtl"] & {
|
||||
right: unset;
|
||||
|
@ -40,11 +40,11 @@
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
line-height: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
display: block;
|
||||
transition: var(--transition);
|
||||
border-radius: 999px;
|
||||
padding: 0.5rem;
|
||||
|
@ -44,6 +44,7 @@ body {
|
||||
// and flash it with primary color when jumping to it
|
||||
:target:not(#main) {
|
||||
animation: var(--transition-long) 1s highlight-in-out;
|
||||
transition: all var(--transition-longer), scroll-margin-top 0s;
|
||||
scroll-margin-top: 20vh;
|
||||
color: var(--primary-color);
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
|
||||
|
@ -1,9 +1,9 @@
|
||||
.icon {
|
||||
-webkit-mask-size: cover;
|
||||
display: inline-block;
|
||||
mask-size: cover;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
-webkit-mask-size: cover;
|
||||
display: inline-block;
|
||||
mask-size: cover;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
@ -1,7 +0,0 @@
|
||||
#johnvertisement {
|
||||
display: block;
|
||||
margin: 1rem auto 0;
|
||||
border: none;
|
||||
width: min(728px, 100vw);
|
||||
height: min(90px, 12.367vw);
|
||||
}
|
@ -11,23 +11,21 @@
|
||||
max-width: min(var(--container-width), 90%);
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
line-height: normal;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -48,7 +46,7 @@
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
border-radius: 999px;
|
||||
padding: 0.325rem 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--fg-muted-4);
|
||||
text-decoration: none;
|
||||
|
||||
@ -107,11 +105,11 @@
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: -0.25rem;
|
||||
right: -0.5rem;
|
||||
background-color: var(--fg-muted-2);
|
||||
width: 1px;
|
||||
height: 110%;
|
||||
height: calc(100% + 0.5rem);
|
||||
content: "";
|
||||
|
||||
body[dir="rtl"] & {
|
||||
@ -132,7 +130,7 @@
|
||||
|
||||
#feed a,
|
||||
#dropdown summary {
|
||||
padding: 0.325rem 0.625rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
|
||||
&:hover .icon {
|
||||
background-color: var(--primary-color);
|
||||
@ -208,6 +206,7 @@
|
||||
padding: 0.25rem;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
|
@ -7,9 +7,9 @@
|
||||
//
|
||||
|
||||
:where(html) {
|
||||
line-height: 1.15; // 1
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
text-size-adjust: 100%; // 2
|
||||
line-height: 1.15; // 1
|
||||
}
|
||||
|
||||
// Sections
|
||||
@ -21,9 +21,9 @@
|
||||
//
|
||||
|
||||
:where(h1) {
|
||||
font-size: 2em;
|
||||
margin-block-end: 0.67em;
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
@ -34,8 +34,8 @@
|
||||
//
|
||||
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
//
|
||||
@ -44,9 +44,9 @@
|
||||
//
|
||||
|
||||
:where(hr) {
|
||||
box-sizing: content-box; // 1
|
||||
color: inherit; // 2
|
||||
height: 0; // 1
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
color: inherit; // 2
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
@ -57,8 +57,8 @@
|
||||
//
|
||||
|
||||
:where(abbr[title]) {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
//
|
||||
@ -66,7 +66,7 @@
|
||||
//
|
||||
|
||||
:where(b, strong) {
|
||||
font-weight: bolder;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
//
|
||||
@ -75,8 +75,8 @@
|
||||
//
|
||||
|
||||
:where(code, kbd, pre, samp) {
|
||||
font-family: monospace, monospace; // 1
|
||||
font-size: 1em; // 2
|
||||
font-size: 1em; // 2
|
||||
font-family: monospace, monospace; // 1
|
||||
}
|
||||
|
||||
//
|
||||
@ -84,7 +84,7 @@
|
||||
//
|
||||
|
||||
:where(small) {
|
||||
font-size: 80%;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// Tabular data
|
||||
@ -96,8 +96,8 @@
|
||||
//
|
||||
|
||||
:where(table) {
|
||||
border-color: currentColor; // 1
|
||||
text-indent: 0; // 2
|
||||
border-color: currentColor; // 1
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Forms
|
||||
@ -108,7 +108,7 @@
|
||||
//
|
||||
|
||||
:where(button, input, select) {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//
|
||||
@ -116,7 +116,7 @@
|
||||
//
|
||||
|
||||
:where(button) {
|
||||
text-transform: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
@ -124,7 +124,7 @@
|
||||
//
|
||||
|
||||
:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
|
||||
-webkit-appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
//
|
||||
@ -132,7 +132,7 @@
|
||||
//
|
||||
|
||||
:where(progress) {
|
||||
vertical-align: baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
//
|
||||
@ -140,7 +140,7 @@
|
||||
//
|
||||
|
||||
:where(select) {
|
||||
text-transform: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
@ -148,7 +148,7 @@
|
||||
//
|
||||
|
||||
:where(textarea) {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//
|
||||
@ -157,8 +157,8 @@
|
||||
//
|
||||
|
||||
:where(input[type="search" i]) {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
//
|
||||
@ -167,7 +167,7 @@
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
@ -175,8 +175,8 @@
|
||||
//
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
opacity: 0.54;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
@ -184,7 +184,7 @@
|
||||
//
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
@ -193,8 +193,8 @@
|
||||
//
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
//
|
||||
@ -202,8 +202,8 @@
|
||||
//
|
||||
|
||||
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
@ -211,7 +211,7 @@
|
||||
//
|
||||
|
||||
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
//
|
||||
@ -219,7 +219,7 @@
|
||||
//
|
||||
|
||||
:where(:-moz-ui-invalid) {
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Interactive
|
||||
@ -230,22 +230,22 @@
|
||||
//
|
||||
|
||||
:where(dialog) {
|
||||
background-color: white;
|
||||
border: solid;
|
||||
color: black;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
border: solid;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:where(dialog:not([open])) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
//
|
||||
@ -253,5 +253,5 @@
|
||||
//
|
||||
|
||||
:where(summary) {
|
||||
display: list-item;
|
||||
display: list-item;
|
||||
}
|
||||
|
@ -1,34 +1,34 @@
|
||||
// TABLE
|
||||
table {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-collapse: collapse;
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-collapse: collapse;
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
th {
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -1,12 +1,14 @@
|
||||
.tags {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
transition: var(--transition);
|
||||
margin: 0 0.25rem 0.5rem 0;
|
||||
line-height: normal;
|
||||
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
@ -20,6 +22,7 @@
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.25rem 0.75rem;
|
||||
color: var(--fg-color);
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -5,150 +5,150 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-wrap: balance;
|
||||
margin: 3rem 0 1rem;
|
||||
font-weight: lighter;
|
||||
line-height: normal;
|
||||
font-family: var(--font-antique);
|
||||
letter-spacing: -0.05em;
|
||||
text-wrap: balance;
|
||||
margin: 3rem 0 1rem;
|
||||
font-weight: lighter;
|
||||
line-height: normal;
|
||||
font-family: var(--font-antique);
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
border-left: 0.25rem solid var(--primary-color);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
margin: 0;
|
||||
border-left: 0.25rem solid var(--primary-color);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
body[dir="rtl"] & {
|
||||
border-right: 0.25rem solid var(--primary-color);
|
||||
border-left: unset;
|
||||
}
|
||||
body[dir="rtl"] & {
|
||||
border-right: 0.25rem solid var(--primary-color);
|
||||
border-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--primary-color-alpha);
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--primary-color);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--primary-color-alpha);
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-2);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: normal;
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-2);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: normal;
|
||||
|
||||
// Small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: inset 0 1px 0 var(--fg-muted-2);
|
||||
background-color: var(--fg-muted-3);
|
||||
}
|
||||
// Small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: inset 0 1px 0 var(--fg-muted-2);
|
||||
background-color: var(--fg-muted-3);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
-webkit-text-decoration: underline wavy;
|
||||
text-decoration: underline wavy;
|
||||
}
|
||||
&:hover {
|
||||
-webkit-text-decoration: underline wavy;
|
||||
text-decoration: underline wavy;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2rem auto;
|
||||
border: none;
|
||||
border-top: 3px double var(--fg-muted-2);
|
||||
overflow: visible;
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 2rem auto;
|
||||
border: none;
|
||||
border-top: 3px double var(--fg-muted-2);
|
||||
overflow: visible;
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
background: var(--bg-color), var(--primary-color);
|
||||
padding: 0 0.25rem;
|
||||
content: "☙❧";
|
||||
&::after {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
background: var(--bg-color), var(--primary-color);
|
||||
padding: 0 0.25rem;
|
||||
content: "☙❧";
|
||||
|
||||
// An ugly hack to fix mirroring in rtl
|
||||
body[dir="rtl"] & {
|
||||
content: "❧☙";
|
||||
}
|
||||
}
|
||||
// An ugly hack to fix mirroring in rtl
|
||||
body[dir="rtl"] & {
|
||||
content: "❧☙";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
float: right;
|
||||
margin-inline-start: 1rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--primary-color-alpha);
|
||||
padding: 1rem;
|
||||
width: 30%;
|
||||
float: right;
|
||||
margin-inline-start: 1rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--primary-color-alpha);
|
||||
padding: 1rem;
|
||||
width: 30%;
|
||||
|
||||
body[dir="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
body[dir="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
|
||||
&>summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
&>summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
@ -76,7 +76,6 @@
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
@ -4,37 +4,37 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:hover .zola-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover .zola-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zola-anchor {
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
margin: 0 0.25em;
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:hover .icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
&:hover .icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
-webkit-mask-size: cover;
|
||||
mask-image: $icon;
|
||||
mask-size: cover;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg-muted-4);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
-webkit-mask-size: cover;
|
||||
mask-image: $icon;
|
||||
mask-size: cover;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg-muted-4);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
:target .zola-anchor .icon {
|
||||
background-color: var(--primary-color-alpha);
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Duckquill v2.1.0 (https://daudix.codeberg.page/duckquill)
|
||||
* Duckquill v3.0.0 (https://daudix.codeberg.page/duckquill)
|
||||
* Copyright 2024 David "Daudix" Lapshin
|
||||
* Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE)
|
||||
*/
|
||||
@ -19,7 +19,6 @@
|
||||
@use "general";
|
||||
@use "icon";
|
||||
@use "input";
|
||||
@use "johnvertisement";
|
||||
@use "media";
|
||||
@use "nav";
|
||||
@use "not-found";
|
||||
|
@ -6,7 +6,7 @@
|
||||
{{ section.description | markdown | safe }}
|
||||
|
||||
<small>
|
||||
<a class="link-page" href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="filter_by_tag", lang=lang) }}</a>
|
||||
<a href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="filter_by_tag", lang=lang) }}</a>
|
||||
<br />
|
||||
{{ trans(key="newest_to_oldest", lang=lang) }} ↓
|
||||
</small>
|
||||
@ -14,7 +14,7 @@
|
||||
<div id="article-list">
|
||||
{% for page in section.pages %}
|
||||
<article {% if page.draft %}class="draft"{% endif %}>
|
||||
<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
|
||||
<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
|
||||
{%- if page.draft %}
|
||||
<span class="draft-badge">
|
||||
<i class="icon"></i>
|
||||
@ -32,7 +32,9 @@
|
||||
{%- endif %}
|
||||
{%- if page.date %}
|
||||
<small>
|
||||
<time datetime="{{ page.date | date(format='%+') }}" pubdate>{{- page.date | date(format=config.extra.date_format) -}}</time>
|
||||
<time datetime="{{ page.date | date(format='%+') }}" pubdate>
|
||||
{{- page.date | date(format=config.extra.date_format) -}}
|
||||
</time>
|
||||
{%- if page.authors %}
|
||||
<span>•</span>
|
||||
<span>{{ trans(key="author", lang=lang) }}: {{ page.authors[0] }}</span>
|
||||
|
@ -4,11 +4,9 @@
|
||||
<h1>{{ trans(key="tags", lang=lang) }}</h1>
|
||||
<small>{{ terms | length }} {{ trans(key="tags_in_total", lang=lang) }}</small>
|
||||
<br />
|
||||
<small>
|
||||
<ul class="tags">
|
||||
{% for tag in terms %}
|
||||
<li><a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag.name, lang=lang) }}">{{ tag.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</small>
|
||||
<ul class="tags">
|
||||
{% for tag in terms %}
|
||||
<li><a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag.name, lang=lang) }}">{{ tag.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endblock content %}
|
||||
|
@ -2,30 +2,55 @@
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ trans(key="posts_with_tag", lang=lang) }} “{{ term.name }}”</h1>
|
||||
|
||||
<small>
|
||||
<a class="link-page" href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="see_all_tags", lang=lang) }}</a>
|
||||
<a href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="see_all_tags", lang=lang) }}</a>
|
||||
<br />
|
||||
{{ term.pages | length }} {{ trans(key="posts_in_total", lang=lang) }}
|
||||
</small>
|
||||
<article>
|
||||
|
||||
<div id="article-list">
|
||||
{% for page in term.pages %}
|
||||
<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
|
||||
{%- if page.description %}
|
||||
<p>{{ page.description }}</p>
|
||||
{%- endif %}
|
||||
<small>
|
||||
<time datetime='{{ page.date | date(format=' %+') }}' pubdate>{{- page.date | date(format=config.extra.date_format) -}}</time>
|
||||
{%- if page.taxonomies %}
|
||||
{%- for name, taxon in page.taxonomies %}
|
||||
<span>•</span>
|
||||
<ul class="tags">
|
||||
{%-for item in taxon %}
|
||||
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- endfor %}
|
||||
<article {% if page.draft %}class="draft"{% endif %}>
|
||||
<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
|
||||
{%- if page.draft %}
|
||||
<span class="draft-badge">
|
||||
<i class="icon"></i>
|
||||
{{ trans(key="drafted", lang=lang) }}
|
||||
</span>
|
||||
{%- endif %}
|
||||
</small>
|
||||
{%- if page.extra.archive %}
|
||||
<span class="archive-badge">
|
||||
<i class="icon"></i>
|
||||
{{ trans(key="archived", lang=lang) }}
|
||||
</span>
|
||||
{%- endif %}
|
||||
{%- if page.description %}
|
||||
{{ page.description | markdown | safe }}
|
||||
{%- endif %}
|
||||
{%- if page.date %}
|
||||
<small>
|
||||
<time datetime="{{ page.date | date(format='%+') }}" pubdate>
|
||||
{{- page.date | date(format=config.extra.date_format) -}}
|
||||
</time>
|
||||
{%- if page.authors %}
|
||||
<span>•</span>
|
||||
<span>{{ trans(key="author", lang=lang) }}: {{ page.authors[0] }}</span>
|
||||
{%- endif %}
|
||||
{%- if page.taxonomies %}
|
||||
{%- for name, taxon in page.taxonomies %}
|
||||
<span>•</span>
|
||||
<ul class="tags">
|
||||
{%-for item in taxon %}
|
||||
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- endfor %}
|
||||
{%- endif %}
|
||||
</small>
|
||||
{%- endif %}
|
||||
</article>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</article>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
Reference in New Issue
Block a user