kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Created Flash-bang

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-20 05:25:29 +02:00
parent 057aabba15
commit 4169bacbbe
8 changed files with 120 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
static/main/css/colors.css
View File

@ -16,9 +16,11 @@
--color-scale-gray-9: #0d1117;
--color-scale-gray-0-transparent-10: #f0f6fc1a;
--color-scale-gray-1-transparent-15: #c9d1d966;
--color-scale-gray-3-transparent-20: #8b949e33;
--color-scale-gray-4-transparent-40: #6e768166;
--color-scale-gray-5-transparent-50: #484f5880;
--color-scale-gray-8-transparent-50: #161b2280;
--color-scale-gray-9-transparent-0: #0d111700;
--color-scale-purple-0: #eddeff;
--color-scale-purple-1: #e2c5ff;
@ -31,10 +33,19 @@
--color-scale-purple-8: #3c1e70;
--color-scale-purple-9: #271052;
--color-scale-purple-4-transparent-06: #a371f70f;
--color-scale-purple-2-transparent-40: #d2a8ff4d;
--color-scale-purple-4-transparent-10: #a371f71a;
--base-text-weight-semibold: 600;
--font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
font-family: "Roboto", arial, sans-serif;
font-size: 16px;
}
[data-color-mode="dark"] {
--color-canvas-default: var(--color-scale-gray-9);
--color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
--color-canvas-default-transparent: var(--color-transparent);
--color-canvas-subtle: var(--color-scale-gray-8);
--color-canvas-subtle-transparent: var(--color-scale-gray-4-transparent-40);
@ -43,7 +54,8 @@
--color-header-bg-default: var(--color-scale-gray-8);
--color-header-bg-transparent: var(--color-scale-gray-8-transparent-50);
--color-header-text: var(--color-scale-white-transparent-70);
--color-header-text: var(--color-scale-gray-0);
--color-header-text-hover: var(--color-scale-white-transparent-70);
--color-btn-text: var(--color-scale-gray-1);
--color-btn-bg: var(--color-scale-gray-7);
@ -61,8 +73,45 @@
--color-accent-fg: var(--color-scale-purple-4);
--color-text-link: var(--color-accent-fg);
--base-text-weight-semibold: 600;
--font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
font-family: "Roboto", arial, sans-serif;
font-size: 16px;
--color-card-default: var(--color-scale-gray-8);
--color-card-border: var(--color-scale-gray-0-transparent-10);
--color-card-bg-hover: var(--color-scale-purple-4-transparent-10);
--color-card-accent: var(--color-accent-fg);
}
[data-color-mode="light"] {
--color-canvas-default: var(--color-scale-white);
--color-canvas-default-transparent: var(--color-transparent);
--color-canvas-subtle: var(--color-scale-gray-0);
--color-canvas-subtle-transparent: var(--color-scale-gray-3-transparent-20);
--color-border-default: var(--color-scale-gray-1);
--color-border-muted: var(--color-scale-gray-2);
--color-header-bg-default: var(--color-scale-gray-7);
--color-header-bg-transparent: var(--color-scale-gray-5-transparent-50);
--color-header-text: var(--color-scale-gray-0);
--color-header-text-hover: var(--color-scale-white-transparent-70);
--color-btn-text: var(--color-scale-gray-7);
--color-btn-bg: var(--color-scale-gray-0);
--color-btn-border: var(--color-scale-gray-1-transparent-15);
--color-btn-hover-bg: var(--color-scale-gray-2);
--color-btn-hover-border: var(--color-scale-gray-1-transparent-15);
--color-btn-active-border: var(--color-scale-gray-1-transparent-15);
--color-fg-default: var(--color-scale-gray-7);
--color-fg-muted: var(--color-scale-gray-5);
--color-fg-subtle: var(--color-scale-gray-4);
--color-fg-on-emphasis: var(--color-scale-white);
--color-text-hover: var(--color-fg-muted);
--color-accent-fg: var(--color-scale-purple-5);
--color-text-link: var(--color-accent-fg);
--color-card-default: var(--color-scale-gray-1);
--color-card-border: var(--color-scale-gray-1-transparent-15);
--color-card-bg-hover: var(--color-scale-purple-2-transparent-40);
--color-card-accent: var(--color-accent-fg);
}

2
static/main/css/index.css
View File

@ -51,7 +51,7 @@ video {
border-radius: 100%;
margin: 0 0.5rem 1rem 0.5rem;
width: 3rem;
aspect-ratio: 1;
aspect-ratio: 1/1;
}
.social-link:hover > i {

28
static/main/css/layout.css
View File

@ -36,7 +36,7 @@ em {
margin: 1rem;
padding: 1rem;
width: 3rem;
aspect-ratio: 1;
aspect-ratio: 1/1;
}
.primary-header {
@ -56,12 +56,12 @@ em {
}
.primary-navigation a {
color: var(--color-fg-default);
color: var(--color-header-text);
font-size: 1.5rem;
text-decoration: none;
}
.primary-navigation a:hover {
color: var(--color-text-hover);
padding: 1rem 0;
margin: -1rem 0;
border-radius: 0.5rem;
}
.primary-navigation a > [aria-hidden="true"] {
@ -83,9 +83,15 @@ em {
transform: translateX(100%);
transition: transform 350ms ease-out;
}
.primary-navigation a {
padding: 1rem;
text-align: right;
transition: background-color 350ms;
}
.primary-navigation a:hover {
background-color: var(--color-btn-hover-bg);
}
.primary-navigation[data-visible="true"] {
@ -95,6 +101,9 @@ em {
.mobile-nav-toggle {
display: flex;
}
[data-color-mode="light"] {
--color-header-text: var(--color-fg-default);
}
}
@media (min-width: 35em) {
@ -104,4 +113,13 @@ em {
padding-inline: clamp(3rem, 8vw, 10rem);
background-color: var(--color-header-bg-default);
}
.primary-navigation a:hover {
color: var(--color-header-text-hover);
}
}
#color-mode-toggle {
width: 2rem;
height: 2rem;
}

7
static/main/css/markdown.css
View File

@ -290,7 +290,14 @@
border-left: none;
border-right: none;
border-radius: 0;
}
[data-color-mode="dark"] {
background-color: var(--color-scale-gray-8);
color: var(--color-scale-gray-0);
}
[data-color-mode="light"] {
background-color: var(--color-scale-gray-2);
color: var(--color-scale-gray-9);
}
}

2
static/main/css/navigation_button.css
View File

@ -11,7 +11,7 @@
justify-content: center;
align-items: center;
width: var(--button-width);
aspect-ratio: 1;
aspect-ratio: 1/1;
cursor: pointer;
transition: all 0.5s ease-in-out;
position: absolute;

26
static/main/js/lightmode.js Normal file
View File

@ -0,0 +1,26 @@
let lightmode = localStorage.getItem("lightmode")
const HTML = document.documentElement
console.log(HTML)
const ENABLE_LIGHT_MODE = () => {
HTML.setAttribute("data-color-mode", "light")
localStorage.setItem("lightmode", "enabled")
}
const DISABLE_LIGHT_MODE = () => {
HTML.setAttribute("data-color-mode", "dark")
localStorage.setItem("lightmode", null)
}
if (lightmode === "enabled") {
ENABLE_LIGHT_MODE()
}
document.querySelector("#color-mode-toggle").addEventListener("click", () => {
lightmode = localStorage.getItem("lightmode")
if (lightmode !== "enabled") {
ENABLE_LIGHT_MODE()
} else {
DISABLE_LIGHT_MODE()
}
})

7
static/projects/css/projects.css
View File

@ -1,10 +1,3 @@
:root {
--color-card-default: var(--color-scale-gray-8);
--color-card-border: var(--color-scale-gray-0-transparent-10);
--color-card-bg-hover: var(--color-scale-purple-4-transparent-06);
--color-card-accent: var(--color-accent-fg);
}
.body {
align-items: center;
display: flex;

6
templates/layout.html
View File

@ -1,6 +1,6 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-color-mode="dark">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark light">
@ -26,6 +26,7 @@
type="text/css"
href="{% static 'main/css/layout.css' %}"/>
<script src="{% static 'main/js/navigation.js' %}" defer></script>
<script src="{% static 'main/js/lightmode.js' %}" defer></script>
{% block meta %}{% endblock %}
</head>
<body>
@ -44,6 +45,9 @@
data-visible="false">
<a href="{% url 'home' %}" class="bold">Home</a>
<a href="{% url 'projects' %}" class="bold">Projects</a>
<button id="color-mode-toggle"
class="color-mode-toggle"
aria-label="toggle dark mode "></button>
</div>
</nav>
</header>