feat: Redo code blocks
This commit is contained in:
daudix-UFO
@ -3,7 +3,6 @@ base_url = "https://duckquill.exozy.me"
|
||||
description = "Modern, pretty, and clean theme"
|
||||
|
||||
compile_sass = true
|
||||
minify_html = true
|
||||
generate_feed = true
|
||||
feed_filename = "atom.xml"
|
||||
build_search_index = false
|
||||
|
||||
@ -47,6 +47,24 @@ GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
end
|
||||
```
|
||||
|
||||
```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
|
||||
pre mark {
|
||||
|
||||
display: block;
|
||||
|
||||
color: currentcolor;
|
||||
|
||||
}
|
||||
|
||||
pre table td:nth-of-type(1) {
|
||||
|
||||
color: #6b6b6b;
|
||||
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
#### Header 4
|
||||
|
||||
- This is an unordered list following a header.
|
||||
@ -163,7 +181,7 @@ Available variables are:
|
||||
|
||||
Variables should be comma-separated and be inside the brackets.
|
||||
|
||||
```
|
||||
```jinja2
|
||||
{{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
|
||||
```
|
||||
|
||||
@ -173,7 +191,7 @@ Variables should be comma-separated and be inside the brackets.
|
||||
|
||||
Same as images, but with a few differences: `no_hover` and `url_min` are not available.
|
||||
|
||||
```
|
||||
```jinja2
|
||||
{{/* video(url="video.webm", alt="This is a video") */}}
|
||||
```
|
||||
|
||||
@ -183,7 +201,7 @@ Same as images, but with a few differences: `no_hover` and `url_min` are not ava
|
||||
|
||||
Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks.
|
||||
|
||||
```
|
||||
```jinja2
|
||||
{%/* crt() */%}
|
||||
-> Markdown code block <-
|
||||
{%/* end */%}
|
||||
@ -218,7 +236,7 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
|
||||
|
||||
Media can have additional text description using the `<figcaption>` HTML tag.
|
||||
|
||||
```
|
||||
```markdown
|
||||
|
||||
<figcaption>The image caption</figcaption>
|
||||
```
|
||||
@ -247,7 +265,7 @@ The <abbr title="American Standard Code for Information Interchange">ASCII</abbr
|
||||
|
||||
## Keyboard shortcut
|
||||
|
||||
```
|
||||
```html
|
||||
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
|
||||
```
|
||||
|
||||
@ -259,7 +277,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
|
||||
|
||||
## Link to page (rightwards arrow)
|
||||
|
||||
```
|
||||
```html
|
||||
<a class="page-link" href="demo/demo-page">Link to page</a>
|
||||
```
|
||||
|
||||
@ -267,7 +285,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
|
||||
|
||||
## Link to site (up-rightwards arrow)
|
||||
|
||||
```
|
||||
```html
|
||||
<a class="site-link" href="https://example.org">Link to site</a>
|
||||
```
|
||||
|
||||
@ -275,7 +293,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
|
||||
|
||||
## Buttons
|
||||
|
||||
```
|
||||
```html.j2
|
||||
<p class="dialog-buttons">
|
||||
<a class="inline-button" href="#top">Go to top</a>
|
||||
<a href="{{site.issuesurl}}">File an issue</a>
|
||||
|
||||
130
sass/_main.scss
130
sass/_main.scss
@ -62,7 +62,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// LAYOUT
|
||||
// Layout
|
||||
.container {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
@ -71,7 +71,7 @@ body {
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
// MOBILE
|
||||
// Mobile
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
@ -201,15 +201,13 @@ details {
|
||||
}
|
||||
}
|
||||
|
||||
// TABLES
|
||||
// Tables
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
@ -230,12 +228,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;
|
||||
@ -256,7 +254,7 @@ img:not(.no-hover):hover {
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
// MOBILE
|
||||
// Mobile
|
||||
img:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
@ -267,7 +265,7 @@ img:not(.no-hover):hover {
|
||||
}
|
||||
|
||||
.pixels {
|
||||
image-rendering: crisp-edges; /* older firefox browsers */
|
||||
image-rendering: crisp-edges; // older firefox browsers
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
@ -276,7 +274,7 @@ img:not(.no-hover):hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// NAVBAR
|
||||
// Navbar
|
||||
.site-nav {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
@ -355,7 +353,7 @@ img:not(.no-hover):hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
// Footer
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
@ -369,7 +367,7 @@ img:not(.no-hover):hover {
|
||||
}
|
||||
}
|
||||
|
||||
// LINK ARROWS
|
||||
// Link arrows
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
@ -378,14 +376,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;
|
||||
@ -403,6 +401,70 @@ img:not(.no-hover):hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
// Code
|
||||
code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--fg-07);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: unset;
|
||||
border-radius: unset;
|
||||
color: unset;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
pre * {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: normal;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 100vw;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// The line numbers already provide some kind of left/right padding
|
||||
pre[data-linenos] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
pre table td {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
pre table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// CRT
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
@ -416,9 +478,6 @@ img:not(.no-hover):hover {
|
||||
padding: 1rem 1rem;
|
||||
margin: unset;
|
||||
background-color: unset;
|
||||
background-image: unset;
|
||||
background-size: unset;
|
||||
background-position: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
@ -444,42 +503,7 @@ img:not(.no-hover):hover {
|
||||
}
|
||||
}
|
||||
|
||||
// CODE
|
||||
pre,
|
||||
code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: normal;
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
box-shadow: var(--shadow);
|
||||
background-image: linear-gradient(var(--fg-03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--fg-03) 1px, transparent 1px);
|
||||
background-size: 10px 10px, 10px 10px;
|
||||
background-position: -1px -1px, -1px -1px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: unset;
|
||||
border-radius: unset;
|
||||
color: unset;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--fg-05);
|
||||
color: var(--red-fg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// STATEMENTS
|
||||
// Statements
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem;
|
||||
|
||||
Reference in New Issue
Block a user