751 lines
20 KiB
CSS
751 lines
20 KiB
CSS
/*
|
||
* Magick CSS
|
||
* by: winterveil (https://github.com/wintermute-cell/)
|
||
* license: MIT
|
||
* version: 1.0.5
|
||
*/
|
||
|
||
@charset "UTF-8";
|
||
|
||
/* Importing the fonts. */
|
||
@import url("./fonts.css");
|
||
|
||
/* Simple CSS Reset */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
/* Theme colors */
|
||
--fg: #0e0e0e;
|
||
--bg: #fefefe;
|
||
--form-bg: #fbfbfb;
|
||
--form-fg: #00004d;
|
||
--form-fg-placeholder: #00004d9a;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--fg: #fefefe;
|
||
--bg: #0e0e0e;
|
||
--form-bg: #1a1a1a;
|
||
--form-fg: #fefefe;
|
||
--form-fg-placeholder: #fefefe9a;
|
||
}
|
||
}
|
||
|
||
/*
|
||
1) Modify the base font-size to 62.5% so that 1.6rem = 16px.
|
||
2) Set box-sizing globally to handle padding and border widths.
|
||
*/
|
||
html {
|
||
font-size: 62.5%; /* 1 */
|
||
box-sizing: border-box; /* 2 */
|
||
}
|
||
|
||
/* Use smaller sizes on mobile devices. */
|
||
@media (max-width: 600px) {
|
||
html {
|
||
font-size: 56%;
|
||
}
|
||
}
|
||
|
||
/*
|
||
1) Set the base font-size to 18px with a normal weight.
|
||
2) Set the text and background colors to match the theme.
|
||
3) Use the 'Averia Serif Libre' font for the body text.
|
||
4) Reset the counter for sidenotes.
|
||
*/
|
||
body {
|
||
font-size: 1.8rem; /* 1 */
|
||
background-color: var(--bg); /* 2 */
|
||
color: var(--fg); /* 2 */
|
||
font-family: "Averia Serif Libre", serif; /* 3 */
|
||
font-style: normal; /* 3 */
|
||
line-height: 2.2rem; /* 3 */
|
||
font-weight: 300; /* 3 */
|
||
|
||
counter-reset: sidenote-counter; /* 4 */
|
||
}
|
||
|
||
/*
|
||
1) Center the main content.
|
||
2) Set the width of the element to 760px, with lower padding on mobile devices.
|
||
3) Relative position as the default allows for absolute positioning of child elements.
|
||
*/
|
||
article,
|
||
main {
|
||
margin: auto; /* 1 */
|
||
max-width: 76rem; /* 2 */
|
||
padding: 0 1rem; /* 2 */
|
||
width: 100%; /* 2 */
|
||
position: relative; /* 3 */
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
article,
|
||
main {
|
||
padding: 0 0.2rem; /* 2 */
|
||
}
|
||
}
|
||
|
||
/* ========================================================================================================================= */
|
||
/* Structure & Layout ===================================================================================================== */
|
||
/* ========================================================================================================================= */
|
||
|
||
/* Display the header, main, and footer sections as distinctly separate blocks. */
|
||
header,
|
||
section,
|
||
footer {
|
||
margin: 0.7rem;
|
||
padding: 0.7rem;
|
||
}
|
||
|
||
/* On mobile devices, a smaller margin looks more fitting due to the smaller view. */
|
||
@media (max-width: 600px) {
|
||
header,
|
||
section,
|
||
footer {
|
||
margin-top: 0.2rem;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
|
||
/* Avoid double margin on the last child of each section */
|
||
header > *:last-child,
|
||
section > *:last-child,
|
||
footer > *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Add large margins to the header to visually separate it from the main content. */
|
||
header {
|
||
margin-top: 12rem;
|
||
margin-bottom: 8rem;
|
||
}
|
||
|
||
/* On mobile devices, reduce the margin around the header to save space. */
|
||
@media (max-width: 600px) {
|
||
header {
|
||
margin: 0;
|
||
padding: 1.2rem;
|
||
}
|
||
}
|
||
|
||
/*
|
||
1) Center align the text in the footer.
|
||
2) Add a margin to the top of the footer to visually separate it from the main content.
|
||
3) Add a margin to the bottom of the footer to not have it stuck to the bottom of the page.
|
||
*/
|
||
footer {
|
||
text-align: center; /* 1 */
|
||
margin-top: 5rem; /* 2 */
|
||
margin-bottom: 2rem; /* 3 */
|
||
}
|
||
|
||
/* ========================================================================================================================= */
|
||
/* Typography & Links ===================================================================================================== */
|
||
/* ========================================================================================================================= */
|
||
|
||
/* Add some space between paragraphs. */
|
||
p {
|
||
margin: 1.6rem 0; /* 1 */
|
||
}
|
||
|
||
/* Remove link color. */
|
||
a {
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* Make string a little more bold, to adjust for the font. */
|
||
b,
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Make emphasized text a little larger, to adjust for the font. */
|
||
i,
|
||
em {
|
||
font-size: calc(1em + 0.1rem);
|
||
}
|
||
|
||
/*
|
||
1) Set the font-family, color, and font-style for the headings.
|
||
2) Add a margin to the top and bottom of the headings.
|
||
*/
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4 {
|
||
font-family: "Averia Libre", cursive; /* 1 */
|
||
color: var(--fg); /* 1 */
|
||
font-style: normal; /* 1 */
|
||
font-weight: 600; /* 1 */
|
||
margin: 1.6rem 0 1.6rem 0; /* 2 */
|
||
}
|
||
|
||
/* h1 headings are uppercase and 2x the size of the base font. */
|
||
h1 {
|
||
text-transform: uppercase;
|
||
font-size: 3.6rem;
|
||
line-height: 3.3rem;
|
||
}
|
||
|
||
/* h2 headings are uppercase and 1.250x (major third) the size of the base font. */
|
||
h2 {
|
||
font-size: 2.25rem;
|
||
text-transform: uppercase;
|
||
margin: 1.2rem 0 1.2rem 0;
|
||
}
|
||
|
||
/* h3 headings are 1.125x (major second) the size of the base font. */
|
||
h3 {
|
||
font-size: 2.025rem;
|
||
}
|
||
|
||
/* Add a decorative element before h3 headings. */
|
||
h3:before {
|
||
font-family: "Noto Sans Symbols 2", sans-serif;
|
||
content: "🙛 ";
|
||
}
|
||
|
||
/* h4 headings are the same size as h3 headings, but italic and without the decorative element. */
|
||
h4 {
|
||
font-style: italic;
|
||
font-size: 2.025rem;
|
||
}
|
||
|
||
/* A uniquely styled h1 for the header */
|
||
header h1 {
|
||
font-size: 4rem;
|
||
color: var(--fg);
|
||
text-align: center;
|
||
padding: 4rem 0 1.2rem 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Additional decorations for the header h1 */
|
||
header h1:before,
|
||
header h1:after {
|
||
content: "✦";
|
||
color: var(--fg);
|
||
font-size: 1.5rem;
|
||
vertical-align: middle;
|
||
padding: 0 0.5rem;
|
||
}
|
||
|
||
/*
|
||
1) Remove any list symbols.
|
||
2) Center align the nav links.
|
||
3) Add a margin to the top of the nav links.
|
||
4) Remove the default padding from the list.
|
||
*/
|
||
header nav ul {
|
||
list-style-type: none; /* 1 */
|
||
text-align: center; /* 2 */
|
||
margin-top: 1rem; /* 3 */
|
||
padding-inline-start: 0; /* 4 */
|
||
}
|
||
|
||
/* Display the navigation links as a centered, horizontal list. */
|
||
header nav ul li {
|
||
display: inline;
|
||
margin: 0 1.2rem;
|
||
}
|
||
|
||
/* Remove default link styles. */
|
||
header nav ul li a {
|
||
text-decoration: none;
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* Add a hover effect to the navigation links. */
|
||
header nav ul li a::before {
|
||
content: "❯ "; /* 1 */
|
||
opacity: 0; /* 1 */
|
||
}
|
||
header nav ul li a:hover::before {
|
||
opacity: 1; /* 1 */
|
||
}
|
||
|
||
/* ===================================================================================================================== */
|
||
/* Lists ===================================================================================================== */
|
||
/* ===================================================================================================================== */
|
||
|
||
/*
|
||
1) Add some indentation to the list items.
|
||
2) Add a margin to the top and bottom of the list.
|
||
*/
|
||
:where(main ol, main ul) {
|
||
margin-inline-start: 0; /* 1 */
|
||
padding-inline-start: 3rem; /* 1 */
|
||
margin: 0.8rem 0; /* 2 */
|
||
}
|
||
|
||
/* Add some vertical space around a definition list. */
|
||
dl {
|
||
margin: 0.8rem 0;
|
||
}
|
||
|
||
/* Add an indent to the definition term. */
|
||
dd {
|
||
margin: 0 1.6rem;
|
||
}
|
||
|
||
/* ===================================================================================================================== */
|
||
/* Media ===================================================================================================== */
|
||
/* ===================================================================================================================== */
|
||
|
||
/*
|
||
1) Set the maximum width of the image to 100% so they don't overflow the main column.
|
||
2) Set the height in respect to the width to prevent the image from stretching.
|
||
3) Add some margin to standalone images.
|
||
*/
|
||
img {
|
||
max-width: 100%; /* 1 */
|
||
height: auto; /* 2 */
|
||
margin: 0.8rem 0; /* 3 */
|
||
}
|
||
|
||
/* Images in figures should not have their own margins */
|
||
figure img {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/*
|
||
1) Set margins and padding for figures.
|
||
2) Center align any text inside figures.
|
||
*/
|
||
figure {
|
||
margin: 2rem 0; /* 1 */
|
||
padding: 0; /* 1 */
|
||
text-align: center; /* 2 */
|
||
}
|
||
|
||
/* Center align any element that is part of a figure */
|
||
figure * {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* We don't want to center prealigned text or code in figures */
|
||
figure code,
|
||
figure pre {
|
||
text-align: left;
|
||
}
|
||
|
||
/* Set the typography for the figure captions */
|
||
figcaption {
|
||
margin: 0.8rem 0;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
/* ===================================================================================================================== */
|
||
/* Forms & Inputs ===================================================================================================== */
|
||
/* ===================================================================================================================== */
|
||
|
||
/*
|
||
1) Display the form elements in a grid layout, two columns wide.
|
||
2) Add some space between the form elements.
|
||
3) Set padding and margin for the form.
|
||
4) Give the form a pop out paper note look.
|
||
*/
|
||
form {
|
||
display: grid; /* 1 */
|
||
grid-template-columns: 1fr 1fr; /* 1 */
|
||
gap: 10px; /* 2 */
|
||
padding: 1rem; /* 3 */
|
||
margin: 0.8rem 0; /* 3 */
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); /* 4 */
|
||
background-color: var(--form-bg); /* 4 */
|
||
}
|
||
|
||
/* Make form inputs and labels span two columns. (They get their own line) */
|
||
form input[type="email"],
|
||
form input[type="number"],
|
||
form input[type="password"],
|
||
form input[type="search"],
|
||
form input[type="tel"],
|
||
form input[type="text"],
|
||
form input[type="url"],
|
||
form label,
|
||
form fieldset,
|
||
form textarea {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
/*
|
||
1) Adjust the elements to take up full width of their grid cell.
|
||
2) Prevent textarea from being resized horizontally and overflowing the main column.
|
||
*/
|
||
form input,
|
||
form button,
|
||
form textarea {
|
||
width: 100%; /* 1 */
|
||
resize: vertical; /* 2 */
|
||
}
|
||
|
||
/*
|
||
1) Prevent radio and checkbox from taking up full width, so they can be put next to each other.
|
||
2) Add space between radio and checkbox options.
|
||
*/
|
||
input[type="radio"],
|
||
input[type="checkbox"] {
|
||
width: auto; /* 1 */
|
||
margin-right: 0.5rem; /* 2 */
|
||
}
|
||
input[type="radio"] + label,
|
||
input[type="checkbox"] + label {
|
||
margin-right: 2rem; /* 2 */
|
||
}
|
||
|
||
/* Add a disabled variant for radio and checkbox inputs */
|
||
input[type="radio"]:disabled + label,
|
||
input[type="checkbox"]:disabled + label {
|
||
text-decoration: line-through;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/*
|
||
1) Remove the default appearance of the input.
|
||
2) Set padding and margin for the input.
|
||
3) Apply some custom styles in place of the default ones.
|
||
4) Give the input a handwritten look.
|
||
*/
|
||
input[type="email"],
|
||
input[type="number"],
|
||
input[type="password"],
|
||
input[type="search"],
|
||
input[type="tel"],
|
||
input[type="text"],
|
||
input[type="url"],
|
||
textarea,
|
||
select {
|
||
-webkit-appearance: none; /* 1 */
|
||
-moz-appearance: none; /* 1 */
|
||
appearance: none; /* 1 */
|
||
box-shadow: none; /* 1 */
|
||
box-sizing: inherit; /* 1 */
|
||
border: none; /* 1 */
|
||
|
||
padding: 0.4rem 1rem; /* 2 */
|
||
margin-bottom: 1.6rem; /* 2 */
|
||
|
||
font-size: 2rem; /* 3 */
|
||
color: var(--fg); /* 3 */
|
||
background-color: transparent; /* 3 */
|
||
border-bottom: 1px solid var(--fg); /* 3 */
|
||
border-radius: 0; /* 3 */
|
||
font-size: 1.8rem; /* 3 */
|
||
|
||
font-family: "Caveat", cursive; /* 4 */
|
||
font-size: 2.6rem; /* 4 */
|
||
color: var(--form-fg); /* 4 */
|
||
caret-color: var(--form-fg); /* 4 */
|
||
}
|
||
|
||
/* Add disabled variant for input fields */
|
||
input[type="email"]:disabled,
|
||
input[type="number"]:disabled,
|
||
input[type="password"]:disabled,
|
||
input[type="search"]:disabled,
|
||
input[type="tel"]:disabled,
|
||
input[type="text"]:disabled,
|
||
input[type="url"]:disabled,
|
||
textarea:disabled,
|
||
select:disabled {
|
||
border-bottom: 1px dashed var(--fg); /* 3 */
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
/* A slightly more transparent color for the placeholder text. */
|
||
input::placeholder,
|
||
textarea::placeholder {
|
||
color: var(--form-fg-placeholder);
|
||
}
|
||
|
||
/*
|
||
1) Remove the default focus outline.
|
||
2) Add a thicker bottom border to the input when focused, reducing margin to prevent layout shifting.
|
||
*/
|
||
input[type="email"]:focus,
|
||
input[type="number"]:focus,
|
||
input[type="password"]:focus,
|
||
input[type="search"]:focus,
|
||
input[type="tel"]:focus,
|
||
input[type="text"]:focus,
|
||
input[type="url"]:focus,
|
||
textarea:focus,
|
||
select:focus {
|
||
outline: none; /* 1 */
|
||
border-bottom: 2px solid var(--fg); /* 2 */
|
||
margin-bottom: calc(1.6rem - 1px); /* 2 */
|
||
}
|
||
|
||
/*
|
||
1) Match the theme colors.
|
||
2) Add padding.
|
||
3) Add a top margin to visually separate the buttons for the rest of the form.
|
||
4) Add a thin border.
|
||
5) Add a pointer cursor on hover.
|
||
*/
|
||
button,
|
||
input[type="button"],
|
||
input[type="reset"],
|
||
input[type="submit"] {
|
||
background-color: transparent; /* 1 */
|
||
color: var(--fg); /* 1 */
|
||
padding: 10px; /* 2 */
|
||
margin-top: 1.6rem; /* 3 */
|
||
border: 1px solid var(--fg); /* 4 */
|
||
cursor: pointer; /* 5 */
|
||
}
|
||
|
||
/*
|
||
1) A thin border around the fieldset.
|
||
2) Set the width of the fieldset to fit around the content.
|
||
*/
|
||
fieldset {
|
||
border: 1px solid var(--fg); /* 1 */
|
||
width: fit-content; /* 2 */
|
||
}
|
||
|
||
/* In a form, the fieldset takes up 100% of the width. */
|
||
form fieldset {
|
||
width: 100%;
|
||
}
|
||
|
||
/*
|
||
1) Set the border of a disabled button to be dashed.
|
||
2) Add the not-allowed cursor when hovering a disabled button.
|
||
*/
|
||
button:disabled,
|
||
input[type="button"]:disabled,
|
||
input[type="reset"]:disabled,
|
||
input[type="submit"]:disabled {
|
||
opacity: 0.5;
|
||
border-style: dashed; /* 1 */
|
||
cursor: not-allowed; /* 2 */
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
/* ===================================================================================================================== */
|
||
/* Tables ========================================================================================================== */
|
||
/* ===================================================================================================================== */
|
||
|
||
/* Remove the distance between adjacent cells, since we don't have vertical border lines. */
|
||
table {
|
||
border-spacing: 0;
|
||
}
|
||
|
||
/* Add some padding around table cells. */
|
||
td,
|
||
th {
|
||
padding: 0.4rem 1rem;
|
||
}
|
||
|
||
/* Remove left padding for first cell in a row. */
|
||
td:first-child,
|
||
th:first-child {
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* Remove right padding for last cell in a row. */
|
||
td:last-child,
|
||
th:last-child {
|
||
padding-right: 0;
|
||
}
|
||
|
||
/*
|
||
1) Add a border under the table header.
|
||
2) Align the text to the left in the table header.
|
||
*/
|
||
th {
|
||
border-bottom: 2px solid var(--fg); /* 1 */
|
||
text-align: left; /* 2 */
|
||
}
|
||
|
||
/* ============================================================================================================================ */
|
||
/* Preformatting, Quotes & Code ============================================================================================ */
|
||
/* ============================================================================================================================ */
|
||
|
||
/*
|
||
1) Set custom padding and margins.
|
||
2) Hide the vertical scroll bar.
|
||
3) Set the width to fit just around the content, but limit it to 80% of the main column.
|
||
4) Center the blockquote horizontally and add some vertical margins.
|
||
*/
|
||
blockquote {
|
||
padding: 1rem 1.6rem; /* 1 */
|
||
overflow-y: hidden; /* 2 */
|
||
width: fit-content; /* 3 */
|
||
max-width: 80%; /* 3 */
|
||
margin: 2rem auto; /* 4 */
|
||
}
|
||
|
||
/*
|
||
1) Set a custom font for blockquote text paragraphs.
|
||
2) Add some space between the paragraphs.
|
||
*/
|
||
blockquote p {
|
||
font-family: "Spectral", serif; /* 1 */
|
||
font-style: italic; /* 1 */
|
||
font-size: 2.1rem; /* 1 */
|
||
font-weight: 300; /* 1 */
|
||
line-height: 2.4rem; /* 1 */
|
||
margin: 2.1rem 0; /* 2 */
|
||
}
|
||
|
||
/* Add a footer to the blockquote for citations. */
|
||
/*
|
||
1) Reset any margins and padding from the main footer.
|
||
2) Set the footer to float and align to the right.
|
||
3) Limit the width of the footer to 55% of the main column.
|
||
4) Set a custom font for the footer.
|
||
*/
|
||
blockquote footer {
|
||
margin: 0; /* 1 */
|
||
padding: 0; /* 1 */
|
||
float: right; /* 2 */
|
||
text-align: right; /* 2 */
|
||
width: 55%; /* 3 */
|
||
font-family: "Spectral", serif; /* 4 */
|
||
font-style: normal; /* 4 */
|
||
font-size: 1.4rem; /* 4 */
|
||
}
|
||
|
||
/* Make the actual citation italic */
|
||
blockquote footer cite {
|
||
font-style: italic;
|
||
}
|
||
|
||
/*
|
||
1) Set custom padding.
|
||
2) Hide the vertical scroll bar.
|
||
3) Set a custom monospace font.
|
||
4) Add a top and bottom border line.
|
||
*/
|
||
pre:has(code) {
|
||
padding: 1rem 1.6rem; /* 1 */
|
||
margin: 1.6rem 0; /* 1 */
|
||
overflow-y: hidden; /* 2 */
|
||
font-family: "Courier Prime", monospace; /* 3 */
|
||
font-size: 1.6rem; /* 3 */
|
||
border-top: 2px solid var(--fg); /* 4 */
|
||
border-bottom: 2px solid var(--fg); /* 4 */
|
||
}
|
||
|
||
/* Set a custom monospace font */
|
||
code {
|
||
font-family: "Courier Prime", monospace;
|
||
font-size: 1.6rem;
|
||
}
|
||
|
||
/*
|
||
1) Float the line numbers to the left, next to the code.
|
||
2) Make some distance between the line numbers and the code, and pull it all to the left with a negative margin.
|
||
3) Add a vertical line to separate the line numbers from the code.
|
||
4) Align the line numbers against the separator.
|
||
*/
|
||
pre .line-number {
|
||
float: left; /* 1 */
|
||
margin: 0 1.5rem 0 -1.5rem; /* 2 */
|
||
border-right: 1px solid; /* 3 */
|
||
text-align: right; /* 4 */
|
||
}
|
||
|
||
/*
|
||
1) Display as block, so we get a new line for each line number.
|
||
2) Add some padding to the line numbers.
|
||
*/
|
||
pre .line-number span {
|
||
display: block; /* 1 */
|
||
padding: 0 0.8rem 0 1.6rem; /* 2 */
|
||
}
|
||
|
||
/* ============================================================================================================================ */
|
||
/* Sidenotes & Asides ====================================================================================================== */
|
||
/* ============================================================================================================================ */
|
||
|
||
/*
|
||
1) On mobile devices, sidenotes behave the same as asides.
|
||
2) Float the sidenotes to the right.
|
||
3) Make sure the sidenotes don't clash.
|
||
4) Set the width of the sidenotes to 40% of the main column.
|
||
5) Add padding, margins and a border for better visual separation.
|
||
6) Adjust typography to be more compact.
|
||
*/
|
||
.sidenote, /* 1 */
|
||
aside {
|
||
float: right; /* 2 */
|
||
clear: right; /* 3 */
|
||
width: 40%; /* 4 */
|
||
margin: 1rem 1rem 1rem 3rem; /* 5 */
|
||
padding: 0.5rem 0.5rem 0.5rem 2rem; /* 5 */
|
||
border-left: 3px solid var(--fg); /* 5 */
|
||
font-size: 1.4rem; /* 6 */
|
||
line-height: 1.3; /* 6 */
|
||
}
|
||
|
||
/* Prevent double top margins */
|
||
aside h1,
|
||
aside h2,
|
||
aside h3,
|
||
aside h4 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/*
|
||
1) Set the distance from the main column.
|
||
2) Set the width of the element to a little less than the remaining space on one side, limited to 40% of the main column.
|
||
3) Remove any values set for the mobile version of the sidenotes.
|
||
4) Set the width to the variable defined above.
|
||
5) Set a negative right margin to (self-width + distance-from-main) to pull the sidenote to the right.
|
||
*/
|
||
/* Sadly, CSS does not support var() and rem in media queries, so we have to hardcode pixels. */
|
||
/* This will break if the main column width is changed without adjusting this media query. */
|
||
@media (min-width: calc(760px + 400px)) {
|
||
.sidenote {
|
||
--distance-from-main: 3rem; /* 1 */
|
||
--self-width: min(
|
||
calc((100vw - 760px) / 2 - (var(--distance-from-main))),
|
||
40%
|
||
); /* 2 */
|
||
margin: 0; /* 3 */
|
||
padding: 0; /* 3 */
|
||
border: none; /* 3 */
|
||
width: var(--self-width);
|
||
margin-right: calc(
|
||
calc(var(--self-width) + var(--distance-from-main)) * -1
|
||
);
|
||
}
|
||
}
|
||
|
||
/* Each time a sidenote anchor is encountered, increment the counter */
|
||
.sidenote-anchor {
|
||
counter-increment: sidenote-counter;
|
||
}
|
||
|
||
/* Use a custom font for the sidenote numbers */
|
||
.sidenote-anchor:after,
|
||
.sidenote:before {
|
||
font-size: 1.3rem;
|
||
position: relative;
|
||
font-family: "Spectral", serif;
|
||
}
|
||
|
||
/* Fine-adjust the number position for the sidenote anchor */
|
||
.sidenote-anchor:after {
|
||
content: counter(sidenote-counter);
|
||
top: -0.5rem;
|
||
left: 0.1rem;
|
||
}
|
||
|
||
/* Fine-adjust the number position for the sidenote */
|
||
.sidenote:before {
|
||
content: counter(sidenote-counter) " ";
|
||
top: -0.5rem;
|
||
}
|