From 1b7857096ceefd363c1c70cdb3ca6d31bc3f1a2e Mon Sep 17 00:00:00 2001
From: jlozovei <jlozovei@gmail.com>
Date: Wed, 26 Oct 2022 11:56:20 -0300
Subject: [PATCH 1/2] feat: add smooth scroll behavior
---
_sass/_og.scss | 62 ++++++++++++++++++++++++++++++--------------------
1 file changed, 37 insertions(+), 25 deletions(-)
diff --git a/_sass/_og.scss b/_sass/_og.scss
index ea3ef35..c6211de 100644
--- a/_sass/_og.scss
+++ b/_sass/_og.scss
@@ -20,13 +20,13 @@
--blue-300: #6ea8fe;
--blue-700: #084298;
- --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+ --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-heading: InterDisplay;
--body-bg: #fff;
--body-color: #212529;
--secondary-color: #6c757d;
- --border-color: rgba(0, 0, 0, .1);
+ --border-color: rgba(0, 0, 0, 0.1);
--accent-bg: #f8f9fa;
--link-color: var(--blue);
--masthead-bg: var(--accent-bg);
@@ -39,7 +39,7 @@
--body-color: #dee2e6;
--accent-bg: #2a2f34;
--link-color: var(--blue-300);
- --border-color: rgba(255, 255, 255, .1);
+ --border-color: rgba(255, 255, 255, 0.1);
}
}
@@ -53,6 +53,11 @@ html {
font-size: 16px;
font-family: var(--font);
line-height: 1.5;
+ scroll-behavior: smooth;
+
+ @media screen and (prefers-reduced-motion: reduce) {
+ scroll-behavior: auto;
+ }
}
body {
@@ -74,17 +79,28 @@ a {
}
}
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
margin-top: 0;
- margin-bottom: .5rem;
+ margin-bottom: 0.5rem;
font-family: var(--font-heading), var(--font);
font-weight: 600;
line-height: 1;
}
-h1 { font-size: 2.5rem; }
-h2 { font-size: 2rem; }
-h3 { font-size: 1.75rem; }
-h4 { font-size: 1.5rem }
+h1 {
+ font-size: 2.5rem;
+}
+h2 {
+ font-size: 2rem;
+}
+h3 {
+ font-size: 1.75rem;
+}
+h4 {
+ font-size: 1.5rem;
+}
p {
margin-top: 0;
@@ -108,10 +124,12 @@ ul {
li {
padding-inline-start: 1.5ch;
- margin-bottom: .25rem;
- list-style-type: "—";
+ margin-bottom: 0.25rem;
+ list-style-type: '—';
- &::marker { color: var(--secondary-color); }
+ &::marker {
+ color: var(--secondary-color);
+ }
}
p:last-child,
@@ -120,20 +138,19 @@ blockquote:last-child {
margin-bottom: 0;
}
-
//
// Code
//
code,
pre {
- font-family: "SFMono-Regular", Menlo, "Courier New", monospace;
+ font-family: 'SFMono-Regular', Menlo, 'Courier New', monospace;
font-size: 95%;
}
code {
font-size: 85%;
color: var(--pink);
- border-radius: .2rem;
+ border-radius: 0.2rem;
}
pre {
@@ -165,7 +182,6 @@ pre {
}
}
-
//
// Masthead
//
@@ -174,7 +190,7 @@ pre {
display: block;
width: 128px;
height: 128px;
- margin-left: -.75rem;
+ margin-left: -0.75rem;
margin-bottom: 1.5rem;
@media (min-width: 768px) {
@@ -204,7 +220,7 @@ pre {
margin-bottom: 1rem;
font-size: 4rem;
font-weight: 700;
- line-height: .9;
+ line-height: 0.9;
color: inherit;
@media (min-width: 768px) {
@@ -223,7 +239,6 @@ pre {
}
}
-
//
// Content
//
@@ -262,7 +277,6 @@ pre {
}
}
-
//
// The Grid
//
@@ -274,7 +288,6 @@ pre {
}
}
-
//
// Sections
//
@@ -283,10 +296,9 @@ h2 {
padding-top: 1rem;
margin-top: 3rem;
margin-bottom: 0;
- border-top: .25rem solid;
+ border-top: 0.25rem solid;
}
-
//
// Footer
//
@@ -296,11 +308,11 @@ h2 {
padding-top: 3rem;
padding-bottom: 3rem;
margin-top: 5rem;
- border-top: .25rem solid;
+ border-top: 0.25rem solid;
}
.footer p {
- margin-bottom: .5rem;
+ margin-bottom: 0.5rem;
}
.quick-links {
From 013099483788f786dba78d5ea71f62fb19c3c8c0 Mon Sep 17 00:00:00 2001
From: jlozovei <jlozovei@gmail.com>
Date: Wed, 26 Oct 2022 11:56:37 -0300
Subject: [PATCH 2/2] feat: add scroll margin top to topic title
---
_sass/_og.scss | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/_sass/_og.scss b/_sass/_og.scss
index c6211de..dd10232 100644
--- a/_sass/_og.scss
+++ b/_sass/_og.scss
@@ -261,6 +261,10 @@ pre {
flex-direction: column;
gap: var(--gap);
+ h3 {
+ scroll-margin-top: 24px;
+ }
+
@media (min-width: 768px) {
display: grid;
grid-template-columns: repeat(2, 1fr);