sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 new lightmode theme

Browse source 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2024-08-23 13:40:00 +02:00
parent 9ef09e96c5
commit 5922ef2241
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
9 changed files with 39 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -30,11 +30,13 @@ The webpage offers a variety of features including a blog, bookmarks, ways to re
| Color | Hex |
|-|-|
| Coffee Cream | ![#F7F0E8](https://via.placeholder.com/10/F7F0E8?text=+) `#F7F0E8` |
| Espresso Text | ![#3B2C29](https://via.placeholder.com/10/3B2C29?text=+) `#3B2C29` |
| Latte Secondary Text | ![#78605C](https://via.placeholder.com/10/78605C?text=+) `#78605C` |
| Cappuccino Accents | ![#A48B82](https://via.placeholder.com/10/A48B82?text=+) `#A48B82` |
| Caramel Macchiato | ![#B08968](https://via.placeholder.com/10/B08968?text=+) `#B08968` |
| Soft Pastel Green Background | ![#E6F5E5](https://via.placeholder.com/10/E6F5E5?text=+) `#E6F5E5` |
| Dark Olive Green Text | ![#2E4033](https://via.placeholder.com/10/2E4033?text=+) `#2E4033` |
| Sage Green Secondary Text | ![#5F7A6D](https://via.placeholder.com/10/5F7A6D?text=+) `#5F7A6D` |
| Mint Green Accents | ![#88A597](https://via.placeholder.com/10/88A597?text=+) `#88A597` |
| Mint Green Accents (for hover states) | ![#88A597](https://via.placeholder.com/10/88A597?text=+) `#88A597` |
| Darker Moss Green Links | ![#3B6656](https://via.placeholder.com/10/3B6656?text=+) `#3B6656` |
| Light Mint Blockquote | ![#CCE3CC](https://via.placeholder.com/10/CCE3CC?text=+) `#CCE3CC` |
### Dark mode
@ -43,9 +45,10 @@ The webpage offers a variety of features including a blog, bookmarks, ways to re
| Midnight Navy | ![#1e1e2e](https://via.placeholder.com/10/1e1e2e?text=+) `#1e1e2e` |
| Lavender Mist | ![#cdd6f4](https://via.placeholder.com/10/cdd6f4?text=+) `#cdd6f4` |
| Amethyst Glow | ![#8f5cf4](https://via.placeholder.com/10/8f5cf4?text=+) `#8f5cf4` |
| Soft Sand | ![#f4e8cd](https://via.placeholder.com/10/f4e8cd?text=+) `#f4e8cd` |
| Dusty Lavender | ![#6f7aaa](https://via.placeholder.com/10/6f7aaa?text=+) `#6f7aaa` |
| Periwinkle Glow | ![#b4c0f4](https://via.placeholder.com/10/b4c0f4?text=+) `#b4c0f4` |
| Sky Blue | ![#89b4fa](https://via.placeholder.com/10/89b4fa?text=+) `#89b4fa` |
| Charcoal Abyss | ![#11111b](https://via.placeholder.com/10/11111b?text=+) `#11111b` |
## 📜 Versionlog

2
public/jollyroger_light.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

2
public/socials/github_light.svg
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907 15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988 15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005 9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297 6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194 6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804 5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779 3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698 3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919 9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344 4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648 4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889 4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639 4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114 14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053 3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373 17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946 5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843 6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309 6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153 8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214 15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479 14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811 16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#2E4033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

2
public/socials/grandlinewebring.light.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 97 KiB

2
public/socials/spotify_light.svg
View file

@ -8,7 +8,7 @@
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#3B2C29">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#2E4033">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z" id="spotify-[#162]">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

2
public/socials/xxiivvwebring_light.svg
View file

@ -1 +1 @@
<svg fill="none" height="300" stroke="#3B2C29" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
<svg fill="none" height="300" stroke="#2E4033" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 294 B

After

Width:  |  Height:  |  Size: 294 B

2
src/components/BlogHeader.astro
View file

@ -6,7 +6,7 @@ import ThemeIcon from './ThemeIcon.astro';
const isDark = document.documentElement.classList.contains('dark');
const svgPath = document.getElementById('themePath');
if (svgPath) {
svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#3B2C29');
svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#2E4033');
}
};

2
src/components/ThemeIcon.astro
View file

@ -12,7 +12,7 @@
border: 0;
background: none;
}
.sun { fill: #3B2C29; }
.sun { fill: #2E4033; }
.moon { fill: transparent; }

43
src/styles/global.css
View file

@ -1,16 +1,21 @@
:root {
--light-bg: #F7F0E8; /* Coffee Cream Background */
--light-1: #3B2C29; /* Espresso Text */
--light-2: #78605C; /* Latte Secondary Text */
--light-3: #A48B82; /* Cappuccino Accents */
--light-hover: #A48B82; /* Cappuccino Accents (for hover states) */
--light-link: #B08968; /* Caramel Macchiato Links */
--dark-bg: #1e1e2e; /* Midnight Navy */
--dark-1: #cdd6f4; /* Lavender Mist */
--dark-2: #8f5cf4; /* Amethyst Glow */
--dark-3: #6f7aaa; /* Soft Sand */
--dark-hover: #b4c0f4; /* Periwinkle Glow */
--dark-link: #89b4fa; /* Sky Blue */
--light-bg: #E6F5E5; /* Soft Pastel Green Background */
--light-1: #2E4033; /* Dark Olive Green Text */
--light-2: #5F7A6D; /* Sage Green Secondary Text */
--light-3: #88A597; /* Mint Green Accents */
--light-hover: #88A597; /* Mint Green Accents (for hover states) */
--light-link: #3B6656; /* Darker Moss Green Links */
--light-blockquote: #CCE3CC; /* Light Mint Blockquote */
--dark-bg: #1e1e2e; /* Midnight Navy */
--dark-1: #cdd6f4; /* Lavender Mist */
--dark-2: #8f5cf4; /* Amethyst Glow */
--dark-3: #6f7aaa; /* Dusty Lavender */
--dark-hover: #b4c0f4; /* Periwinkle Glow */
--dark-link: #89b4fa; /* Sky Blue */
--dark-blockquote: #11111b; /* Charcoal Abyss */
/* MISC */
--code-bg: #24292E;
--code-text: #A5A8AD;
}
html {
@ -25,7 +30,6 @@ html.dark {
body {
font-family: Jetbrains Mono, monospace;
/*"Noto Sans Mono", monospace*/
}
p {
@ -219,8 +223,8 @@ h2, h3, h4 {
/* RANDOM */
code {
display: inline;
background-color: #24292E;
color: #A5A8AD;
background-color: var(--code-bg);
color: var(--code-text);
border-radius: 8px;
padding: 4px 8px;
font-size: small;
@ -228,21 +232,20 @@ code {
pre {
padding: 10px;
background-color: #24292E;
color: #A5A8AD;
background-color: var(--code-bg);
color: var(--code-text);
border-radius: 10px;
margin: 10px 0;
}
blockquote {
background-color: #E6D5C8;
background-color: var(--light-blockquote);
padding: 0 0 0 10px;
border-left: 5px solid var(--light-link);
}
.dark blockquote {
background-color: #11111b;
padding: 0 0 0 10px;
background-color: var(--dark-blockquote);
border-left: 5px solid var(--dark-link);
}