feat: Restore BS icons, separate styles to modules
This commit is contained in:
daudix-UFO
@ -8,6 +8,6 @@ insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[*.{css,html}]
|
||||
[*.{css,scss,html}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
11
config.toml
11
config.toml
@ -45,11 +45,14 @@ source_url = "https://codeberg.org/daudix/duckquill"
|
||||
[extra.nav]
|
||||
# Display Atom/RSS feed button in the nav
|
||||
show_feed = true
|
||||
# Links used in the nav
|
||||
# Whether to use icons in the nav
|
||||
icons = true
|
||||
# Links used in the nav; any icon from https://icons.getbootstrap.com
|
||||
# can be used as the icon. The bi- prefix should not be added.
|
||||
links = [
|
||||
{url = "https://codeberg.org/daudix/duckquill", name = "Repo"},
|
||||
{url = "$BASE_URL/demo", name = "Demo"},
|
||||
{url = "$BASE_URL/blog", name = "Blog"},
|
||||
{url = "https://codeberg.org/daudix/duckquill", name = "Repo", icon = "code-slash"},
|
||||
{url = "$BASE_URL/demo", name = "Demo", icon = "car-front"},
|
||||
{url = "$BASE_URL/blog", name = "Blog", icon = "journal-bookmark"},
|
||||
]
|
||||
|
||||
[extra.footer]
|
||||
|
||||
2090
sass/_bootstrap-icons.scss
Normal file
2090
sass/_bootstrap-icons.scss
Normal file
File diff suppressed because it is too large
Load Diff
31
sass/_buttons.scss
Normal file
31
sass/_buttons.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-color);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
70
sass/_crt.scss
Normal file
70
sass/_crt.scss
Normal file
@ -0,0 +1,70 @@
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--glow);
|
||||
background: var(--crt-bg);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px,
|
||||
var(--primary-color) 0 0 12px;
|
||||
// Unset some <pre> stuff
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines::after {
|
||||
animation: scanlines 250ms linear infinite;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 3px,
|
||||
transparent 4px
|
||||
);
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(100% + 8px);
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: blicking 1s infinite;
|
||||
|
||||
@keyframes blicking {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
font-display: swap;
|
||||
src: url("./fonts/InterVariable.woff2?v=4.0") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
|
||||
10
sass/_footer.scss
Normal file
10
sass/_footer.scss
Normal file
@ -0,0 +1,10 @@
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 4rem;
|
||||
|
||||
details {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
7
sass/_johnvertisement.scss
Normal file
7
sass/_johnvertisement.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.johnvertisement {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: min(728px, 100vw);
|
||||
height: min(90px, 12.367vw);
|
||||
border: none;
|
||||
}
|
||||
7
sass/_links.scss
Normal file
7
sass/_links.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.link-site::after {
|
||||
content: " ↗";
|
||||
}
|
||||
378
sass/_main.scss
378
sass/_main.scss
@ -159,10 +159,14 @@ dl {
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0.125rem solid var(--fg-muted-3);
|
||||
margin: 3rem auto;
|
||||
width: 40%;
|
||||
border-radius: 9999px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--fg-muted-2);
|
||||
margin: 2rem auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-list hr:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -309,369 +313,3 @@ th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// MEDIA
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
max-width: 100%;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: var(--transition-longer);
|
||||
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(125%);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pixels {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// NAVBAR
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
background-color: var(--nav-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&-container {
|
||||
margin: 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
transition: var(--transition);
|
||||
color: var(--default-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: transparent;
|
||||
color: var(--fg-muted-4);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
& {
|
||||
width: 90vw;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
& {
|
||||
border-radius: 9999px;
|
||||
|
||||
&-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FOOTER
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 4rem;
|
||||
|
||||
details {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// LINK ARROWS
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.link-site::after {
|
||||
content: " ↗";
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-color);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CRT
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--glow);
|
||||
background: var(--crt-bg);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px,
|
||||
var(--primary-color) 0 0 12px;
|
||||
// Unset some <pre> stuff
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines::after {
|
||||
animation: scanlines 250ms linear infinite;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 3px,
|
||||
transparent 4px
|
||||
);
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(100% + 8px);
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: blicking 1s infinite;
|
||||
|
||||
@keyframes blicking {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// STATEMENTS
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.johnvertisement {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: min(728px, 100vw);
|
||||
height: min(90px, 12.367vw);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.2rem 0.4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 9999px;
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color-alpha);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
margin-top: 6rem;
|
||||
border-top: 1px solid var(--fg-muted-2);
|
||||
|
||||
.post-nav-item {
|
||||
font-weight: 600;
|
||||
width: 50%;
|
||||
padding-top: 1rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .post-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--fg-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
|
||||
.not-found {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-right: 35%;
|
||||
padding-left: 35%;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
37
sass/_media.scss
Normal file
37
sass/_media.scss
Normal file
@ -0,0 +1,37 @@
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
max-width: 100%;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: var(--transition-longer);
|
||||
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(125%);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pixels {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
77
sass/_nav.scss
Normal file
77
sass/_nav.scss
Normal file
@ -0,0 +1,77 @@
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
background-color: var(--nav-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&-container {
|
||||
margin: 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
transition: var(--transition);
|
||||
color: var(--default-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-muted-4);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 1rem;
|
||||
transform: scale(1);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
& {
|
||||
width: 90vw;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
& {
|
||||
border-radius: 9999px;
|
||||
|
||||
&-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
sass/_not-found.scss
Normal file
7
sass/_not-found.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.not-found {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-right: 35%;
|
||||
padding-left: 35%;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
34
sass/_post-nav.scss
Normal file
34
sass/_post-nav.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.post-nav {
|
||||
display: flex;
|
||||
|
||||
.post-nav-item {
|
||||
width: 50%;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .post-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
text-align: right;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--fg-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
sass/_statements.scss
Normal file
35
sass/_statements.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
28
sass/_tags.scss
Normal file
28
sass/_tags.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.2rem 0.4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: 9999px;
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color-alpha);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
@ -9,11 +9,24 @@
|
||||
*/
|
||||
|
||||
@use "normalize";
|
||||
@use "variables";
|
||||
@use "gnome-hig";
|
||||
@use "fonts";
|
||||
@use "main";
|
||||
|
||||
@use "bootstrap-icons";
|
||||
@use "buttons";
|
||||
@use "comments";
|
||||
@use "crt";
|
||||
@use "fonts";
|
||||
@use "footer";
|
||||
@use "gnome-hig";
|
||||
@use "johnvertisement";
|
||||
@use "links";
|
||||
@use "main";
|
||||
@use "media";
|
||||
@use "nav";
|
||||
@use "not-found";
|
||||
@use "post-nav";
|
||||
@use "statements";
|
||||
@use "tags";
|
||||
@use "variables";
|
||||
|
||||
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
|
||||
@import url("syntax-theme-light.css") (prefers-color-scheme: light);
|
||||
|
||||
BIN
static/fonts/bootstrap-icons.woff
Normal file
BIN
static/fonts/bootstrap-icons.woff
Normal file
Binary file not shown.
BIN
static/fonts/bootstrap-icons.woff2
Normal file
BIN
static/fonts/bootstrap-icons.woff2
Normal file
Binary file not shown.
@ -73,6 +73,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if page.lower or page.higher %}
|
||||
<hr>
|
||||
<nav class="post-nav">
|
||||
{% if page.higher %}
|
||||
<a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
From newest to oldest ↓
|
||||
</small>
|
||||
|
||||
<div class="blog-list">
|
||||
{% for page in section.pages %}
|
||||
<article>
|
||||
<h3>
|
||||
@ -39,5 +40,7 @@
|
||||
</small>
|
||||
{%- endif %}
|
||||
</article>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="{{ get_url(path='') }}">
|
||||
<svg class="icon" width="16" height="16">
|
||||
<path fill="currentColor" d="M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.143 3.143 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363" />
|
||||
</svg>
|
||||
{% if config.extra.nav.icons %}
|
||||
<i class="bi bi-house"></i>
|
||||
{% endif %}
|
||||
{{ config.title }}
|
||||
</a>
|
||||
<ul>
|
||||
{% for link in config.extra.nav.links %}
|
||||
<li>
|
||||
<a href="{{ link.url | safe | replace(from='$BASE_URL', to=get_url(path='')) | safe }}">
|
||||
{% if config.extra.nav.icons %}
|
||||
{% if link.icon %}
|
||||
<i class="bi bi-{{ link.icon }}"></i>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %} {% if config.extra.nav.show_feed %}
|
||||
<li>
|
||||
<a href="{{ get_url(path='atom.xml') }}">
|
||||
<svg class="icon" width="16" height="16">
|
||||
<path fill="currentColor" d="m3 1.984-1.012.004V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988zm0 4-1.012.004V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988zm.988 4.004a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998" />
|
||||
</svg>
|
||||
{% if config.extra.nav.icons %}
|
||||
<i class="bi bi-rss"></i>
|
||||
{% endif %}
|
||||
Feed
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user