feat: Use fonts provided by system, new navbar (again)
This commit is contained in:
daudix
@ -87,28 +87,19 @@ section#comments {
|
||||
}
|
||||
|
||||
&::before {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\F4B5";
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
content: "✔";
|
||||
margin-inline-end: 0.25rem;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
all: unset;
|
||||
display: inline;
|
||||
height: 1.25rem;
|
||||
height: 2rem;
|
||||
vertical-align: middle;
|
||||
width: 1.25rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
time {
|
||||
@ -149,18 +140,8 @@ section#comments {
|
||||
}
|
||||
|
||||
&::before {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\F417";
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
content: "♥";
|
||||
margin-inline-end: 0.25rem;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("./fonts/InterVariable.woff2?v=4.0") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("./fonts/InterVariable-Italic.woff2?v=4.0") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: JetBrainsMono;
|
||||
font-style: normal;
|
||||
font-weight: 100 800;
|
||||
font-display: swap;
|
||||
src: url("./fonts/JetBrainsMono.woff2?v=2.304") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: JetBrainsMono;
|
||||
font-style: italic;
|
||||
font-weight: 100 800;
|
||||
font-display: swap;
|
||||
src: url("./fonts/JetBrainsMono-Italic.woff2?v=2.304") format("woff2");
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
/* GNOME HIG Colors */
|
||||
:root {
|
||||
--blue1: rgb(153, 193, 241);
|
||||
--blue2: rgb(98, 160, 234);
|
||||
--blue3: rgb(53, 132, 228);
|
||||
--blue4: rgb(28, 113, 216);
|
||||
--blue5: rgb(26, 95, 180);
|
||||
--green1: rgb(143, 240, 164);
|
||||
--green2: rgb(87, 227, 137);
|
||||
--green3: rgb(51, 209, 122);
|
||||
--green4: rgb(46, 194, 126);
|
||||
--green5: rgb(38, 162, 105);
|
||||
--yellow1: rgb(249, 240, 107);
|
||||
--yellow2: rgb(248, 228, 92);
|
||||
--yellow3: rgb(246, 211, 45);
|
||||
--yellow4: rgb(245, 194, 17);
|
||||
--yellow5: rgb(229, 165, 10);
|
||||
--orange1: rgb(255, 190, 111);
|
||||
--orange2: rgb(255, 163, 72);
|
||||
--orange3: rgb(255, 120, 0);
|
||||
--orange4: rgb(230, 97, 0);
|
||||
--orange5: rgb(198, 70, 0);
|
||||
--red1: rgb(246, 97, 81);
|
||||
--red2: rgb(237, 51, 59);
|
||||
--red3: rgb(224, 27, 36);
|
||||
--red4: rgb(192, 28, 40);
|
||||
--red5: rgb(165, 29, 45);
|
||||
--purple1: rgb(220, 138, 221);
|
||||
--purple2: rgb(192, 97, 203);
|
||||
--purple3: rgb(145, 65, 172);
|
||||
--purple4: rgb(129, 61, 156);
|
||||
--purple5: rgb(97, 53, 131);
|
||||
--brown1: rgb(205, 171, 143);
|
||||
--brown2: rgb(181, 131, 90);
|
||||
--brown3: rgb(152, 106, 68);
|
||||
--brown4: rgb(134, 94, 60);
|
||||
--brown5: rgb(99, 69, 44);
|
||||
--light1: rgb(255, 255, 255);
|
||||
--light2: rgb(246, 245, 244);
|
||||
--light3: rgb(222, 221, 218);
|
||||
--light4: rgb(192, 191, 188);
|
||||
--light5: rgb(154, 153, 150);
|
||||
--dark1: rgb(119, 118, 123);
|
||||
--dark2: rgb(94, 92, 100);
|
||||
--dark3: rgb(61, 56, 70);
|
||||
--dark4: rgb(36, 31, 49);
|
||||
--dark5: rgb(0, 0, 0);
|
||||
}
|
||||
@ -26,7 +26,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: InterVariable, sans-serif;
|
||||
font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
line-height: 1.6;
|
||||
color: var(--fg-color);
|
||||
background: var(--bg-color);
|
||||
@ -70,9 +70,7 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: JetBrainsMono, monospace;
|
||||
font-feature-settings: "ss02";
|
||||
font-style: italic;
|
||||
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-weight: 200;
|
||||
line-height: 1.25;
|
||||
margin: 3rem 0 1rem;
|
||||
@ -92,27 +90,27 @@ h6 {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.14rem;
|
||||
letter-spacing: -0.15rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
letter-spacing: -0.14rem;
|
||||
letter-spacing: -0.15rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.08rem;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: -0.06rem;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.04rem;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -179,7 +177,7 @@ abbr {
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
font-family: JetBrainsMono, monospace;
|
||||
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
}
|
||||
|
||||
code:not(pre code) {
|
||||
|
||||
@ -8,29 +8,16 @@
|
||||
margin: 1rem auto;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
width: min(calc(var(--content-width) + 10rem), 90%);
|
||||
max-width: min(calc(var(--content-width) + 10rem), 90%);
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
& {
|
||||
width: auto;
|
||||
max-width: min(calc(var(--content-width) + 10rem), 90%);
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
& {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -48,7 +35,6 @@
|
||||
a {
|
||||
border-radius: 999px;
|
||||
color: var(--fg-muted-4);
|
||||
font-weight: 400;
|
||||
padding: 0.325rem 0.75rem;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
@ -62,24 +48,34 @@
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
&:has(span) {
|
||||
padding: 0.325rem 0.625rem;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#home {
|
||||
margin-right: 0.25rem;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 110%;
|
||||
width: 1px;
|
||||
background-color: var(--fg-muted-2);
|
||||
top: 0;
|
||||
right: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#feed {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.325rem 0.625rem;
|
||||
|
||||
svg {
|
||||
vertical-align: -.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
2091
sass/bootstrap-icons.scss
vendored
2091
sass/bootstrap-icons.scss
vendored
File diff suppressed because it is too large
Load Diff
@ -8,9 +8,8 @@
|
||||
* https://github.com/systemd/systemd/tree/main/docs
|
||||
*/
|
||||
|
||||
@use "normalize";
|
||||
@use "variables";
|
||||
@use "gnome-hig";
|
||||
@use "fonts";
|
||||
@use "main";
|
||||
|
||||
@use "buttons";
|
||||
@ -27,7 +26,5 @@
|
||||
@use "statements";
|
||||
@use "tags";
|
||||
|
||||
@import url("normalize.css");
|
||||
@import url("bootstrap-icons.css");
|
||||
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
|
||||
@import url("syntax-theme-light.css") (prefers-color-scheme: light);
|
||||
|
||||
Reference in New Issue
Block a user