michael/blog
1
0
Fork 0
Code Issues 2 Pull requests Releases Packages 1 Wiki Activity

tentative dotted background
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Michael Zhang 2024-09-18 16:37:23 -05:00
parent 4273a1ca0b
commit 2d92966043
3 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/styles/_colors.scss
View file

@ -5,6 +5,7 @@
:root { :root {
--background-color: #{$backgroundColor}; --background-color: #{$backgroundColor};
--sidebar-color: #f8f8f8;
--faded-background-color: #{darken($backgroundColor, 10%)}; --faded-background-color: #{darken($backgroundColor, 10%)};
--shadow-color: #{darken($backgroundColor, 10%)}; --shadow-color: #{darken($backgroundColor, 10%)};
--heading-color: #{darken(royalblue, 10%)}; --heading-color: #{darken(royalblue, 10%)};
@ -48,6 +49,7 @@
:root { :root {
--background-color: #{$backgroundColor}; --background-color: #{$backgroundColor};
--sidebar-color: hsl(230, 20%, 20%);
--faded-background-color: #{lighten($backgroundColor, 10%)}; --faded-background-color: #{lighten($backgroundColor, 10%)};
--shadow-color: #{lighten($backgroundColor, 10%)}; --shadow-color: #{lighten($backgroundColor, 10%)};
--heading-color: #{lighten(lightskyblue, 20%)}; --heading-color: #{lighten(lightskyblue, 20%)};

5
src/styles/global.scss
View file

@ -12,6 +12,11 @@ body {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
// Dotted background :)
background-image: radial-gradient(var(--faded-background-color) 1px, transparent 0);
background-size: 20px 20px;
background-position: -19px -19px;
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 1px; height: 1px;

4
src/styles/leftNav.scss
View file

@ -64,6 +64,8 @@
@media screen and (max-width: variables.$breakpoint) { @media screen and (max-width: variables.$breakpoint) {
.side-nav { .side-nav {
background: linear-gradient(to top, var(--sidebar-color) 50%, transparent);
.side-nav-content { .side-nav-content {
width: 100%; width: 100%;
padding: 18px 0; padding: 18px 0;
@ -95,6 +97,8 @@
width: 300px; width: 300px;
min-width: 300px; min-width: 300px;
background: linear-gradient(to left, var(--sidebar-color) 50%, transparent);
.side-nav-content { .side-nav-content {
height: 100vh; height: 100vh;
position: sticky; position: sticky;