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

Optional bundled fonts (fixes #44). Style cleanups

Browse Source
This commit is contained in:
daudix
2024-09-15 03:49:59 +03:00
parent 4ed42a397b
commit a5f16ca54f
66 changed files with 172 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
sass/_article-list.scss
View File

@ -237,10 +237,9 @@
display: inline-block;
box-shadow: var(--edge-highlight);
border-radius: 999px;
padding: 0.5rem 0.75rem;
padding: 0.375rem 0.75rem;
height: fit-content;
font-weight: bold;
line-height: 1.25;
white-space: nowrap;
.icon {
@ -315,10 +314,6 @@
margin-block-start: 1rem;
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
padding-block-start: 0.5rem;
small {
line-height: 1.25;
}
}
}
}

6
sass/_buttons.scss
View File

@ -2,7 +2,6 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
margin-block-start: 4rem;
}
@ -25,11 +24,10 @@ button.inline-button {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 0.75rem 1rem;
padding: 0.5rem 1rem;
color: var(--fg-muted-5);
font-weight: bold;
font-size: 0.875rem;
line-height: 1;
font-size: smaller;
&:hover {
background-color: var(--fg-muted-2);

4
sass/_code.scss
View File

@ -12,7 +12,7 @@ code:not(pre code) {
background-color: var(--fg-muted-1);
padding: 0.125rem 0.375rem;
color: var(--red-fg);
font-size: 0.875em;
font-size: smaller;
}
pre {
@ -23,7 +23,7 @@ pre {
padding: 1rem;
max-width: 100vw;
overflow: auto;
line-height: 1.25;
line-height: normal;
table {
box-shadow: none;

14
sass/_comments.scss
View File

@ -64,7 +64,7 @@
margin-block-start: 0;
color: var(--fg-muted-4);
font-weight: bold;
font-size: 1.5em;
font-size: x-large;
text-align: center;
}
@ -123,10 +123,9 @@
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
padding: 0.25rem 0.75rem;
color: var(--fg-muted-5);
font-size: 0.875rem;
line-height: 1;
font-size: smaller;
text-decoration: none;
&:hover {
@ -194,7 +193,7 @@
border-radius: var(--rounded-corner-small);
background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem;
line-height: 1.25;
line-height: normal;
text-decoration: none;
&:hover {
@ -221,8 +220,7 @@
time {
grid-area: time;
margin-block-start: 0.5rem;
font-size: 0.875rem;
line-height: 1.25;
font-size: smaller;
a {
color: var(--fg-muted-5);
@ -270,7 +268,7 @@
transition: var(--transition);
border-radius: 999px;
background-color: transparent;
padding: 0.25rem 0.75rem;
padding: 0.375rem 0.75rem;
font-variant-numeric: tabular-nums;
text-decoration: none;

10
sass/_footer.scss
View File

@ -24,7 +24,8 @@
li {
display: flex;
line-height: 1.25;
margin: 0;
padding: 0;
list-style: none;
@media only screen and (max-width: 480px) {
@ -36,9 +37,8 @@
flex: 1;
transition: var(--transition);
border-radius: 999px;
padding: 0.5rem 0.75rem;
padding: 0.375rem 0.75rem;
color: var(--fg-muted-4);
line-height: 1.25;
text-align: center;
text-decoration: none;
@ -74,7 +74,8 @@
padding: 0;
li {
line-height: 0;
margin: 0;
padding: 0;
list-style: none;
}
@ -113,7 +114,6 @@
p {
margin: 1rem auto;
line-height: 1.25;
}
.link {

3
sass/_general.scss
View File

@ -6,7 +6,6 @@
scroll-behavior: smooth;
scrollbar-color: var(--accent-color) transparent;
accent-color: var(--accent-color);
font-size: 16px;
// Smaller font size on mobile
// @media only screen and (max-width: 480px) {
@ -22,7 +21,7 @@ body {
background-color: var(--bg-color);
min-height: 100vh;
color: var(--fg-color);
line-height: 1.6;
line-height: 1.5;
font-family: var(--font-system-ui), var(--font-emoji);
overflow-wrap: break-word;
}

2
sass/_icon.scss
View File

@ -3,6 +3,6 @@
mask-size: cover;
font-style: normal;
font-variant: normal;
line-height: 1;
line-height: 0;
text-rendering: auto;
}

13
sass/_nav.scss
View File

@ -32,9 +32,8 @@
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 999px;
background-color: var(--nav-bg);
padding: 0.5rem 0.75rem;
padding: 0.375rem 0.75rem;
pointer-events: none;
line-height: 1.25;
text-decoration: none;
&:focus {
@ -55,7 +54,8 @@
li {
display: flex;
line-height: 1.25;
margin: 0;
padding: 0;
list-style: none;
@media only screen and (max-width: 480px) {
@ -71,10 +71,9 @@
transition: var(--transition);
border-radius: 999px;
background-color: transparent;
padding: 0.5rem 0.75rem;
padding: 0.375rem 0.75rem;
color: var(--fg-muted-4);
font-weight: bold;
line-height: 1.25;
list-style: none;
text-align: center;
text-decoration: none;
@ -171,7 +170,7 @@
}
.circle {
padding: 0.5rem 0.625rem;
padding: 0.375rem 0.625rem;
.icon {
vertical-align: -0.125em;
@ -409,7 +408,7 @@
padding: 0.5rem;
a {
line-height: 1.25;
width: fit-content;
&::after {
content: " →";

4
sass/_post-nav.scss
View File

@ -7,7 +7,7 @@
flex: 1 1 0;
transition: var(--transition);
border-radius: var(--rounded-corner);
padding: 1rem;
padding: 0.75rem 1rem;
width: 0;
max-width: calc(50% - 0.125rem);
text-decoration: none;
@ -50,7 +50,6 @@
margin-block-end: 0.5rem;
color: var(--fg-muted-5);
font-weight: normal;
line-height: 1.25;
}
.post-title {
@ -58,7 +57,6 @@
transition: var(--transition);
overflow: hidden;
color: var(--fg-color);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}

1
sass/_pre-container.scss
View File

@ -16,7 +16,6 @@
margin-inline-start: 0.75rem;
color: var(--fg-muted-5);
font-weight: bold;
line-height: 1.25;
}
button {

21
sass/_statements.scss
View File

@ -1,17 +1,19 @@
.statement-container {
margin: 1rem 0 1rem;
margin: 1rem 0;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
padding: 1rem 1rem 0.5rem;
padding: 0.75rem 1rem;
* {
margin: 0;
:last-child {
margin-block-end: 0;
}
p,
ul,
ol {
margin: 0.5rem 0 0.5rem;
& > :nth-child(2) {
margin-block-start: 0.5rem;
}
li::marker {
color: inherit;
}
a {
@ -19,8 +21,7 @@
}
.big {
font-size: 1.5rem;
line-height: 1.25;
font-size: x-large;
.icon {
margin-inline-end: 0.375rem;

7
sass/_tags.scss
View File

@ -9,7 +9,8 @@
li {
display: inline-flex;
transition: var(--transition);
line-height: 1;
margin: 0;
padding: 0;
&:active {
transform: var(--active);
@ -21,9 +22,9 @@
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
padding: 0.2031rem 0.75rem;
color: var(--fg-muted-5);
font-size: 0.875rem;
font-size: small;
text-decoration: none;
white-space: nowrap;

48
sass/_typography.scss
View File

@ -8,7 +8,6 @@ h6 {
text-wrap: balance;
margin: 2rem 0 1rem;
font-weight: lighter;
line-height: 1.25;
font-family: var(--font-antique);
letter-spacing: -0.05em;
}
@ -25,9 +24,21 @@ h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.75rem;
}
small {
color: var(--fg-muted-5);
font-size: 0.875em;
font-size: smaller;
}
abbr[title] {
@ -42,7 +53,7 @@ abbr[title] {
figcaption {
color: var(--fg-muted-4);
font-size: 0.875em;
font-size: smaller;
text-align: center;
}
@ -86,7 +97,7 @@ ins {
samp {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
font-size: 0.875em;
font-size: smaller;
}
q {
@ -141,9 +152,8 @@ kbd {
box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-1);
padding: 0.25rem 0.375rem;
font-size: 0.875em;
line-height: 1;
padding: 0.125rem 0.375rem;
font-size: smaller;
&:hover {
cursor: pointer;
@ -193,6 +203,7 @@ dt {
}
dd {
margin-inline-start: 1.5rem;
margin-block-end: 1rem;
}
@ -222,12 +233,8 @@ details {
background-color: var(--fg-muted-1);
padding: 1rem;
summary {
line-height: 1.25;
&:hover {
cursor: pointer;
}
summary:hover {
cursor: pointer;
}
:last-child {
@ -238,3 +245,18 @@ details {
figure {
margin-inline: 0;
}
ol,
ul {
padding-inline-start: 1.5rem;
}
li {
margin: 0.125rem 0;
padding-inline-start: 0.25rem;
&::marker {
color: var(--accent-color);
font-weight: bold;
}
}

56
sass/fonts.scss Normal file
View File

@ -0,0 +1,56 @@
@font-face {
font-style: normal;
font-weight: 100 900;
src: url("fonts/InterVariable.woff2") format("woff2");
font-family: "Inter Variable";
font-display: swap;
}
@font-face {
font-style: italic;
font-weight: 100 900;
src: url("fonts/InterVariable-Italic.woff2") format("woff2");
font-family: "Inter Variable";
font-display: swap;
}
@font-face {
font-style: normal;
font-weight: 100 900;
src: url("fonts/JetBrainsMono.woff2") format("woff2");
font-family: "JetBrains Mono";
font-display: swap;
}
@font-face {
font-style: italic;
font-weight: 100 900;
src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
font-family: "JetBrains Mono";
font-display: swap;
}
body {
font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
}
h1 {
font-weight: 900;
}
pre,
code,
kbd,
samp {
font-family: "JetBrains Mono", var(--font-monospace-code);
}