thohlt/aurora
1
0
Fork 0
mirror of https://github.com/thiloho/aurora.git synced 2025-11-22 03:21:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use OpenProps for consistent styles

Browse Source
This commit is contained in:
thiloho
2023-05-22 12:34:55 +02:00
parent a3334ab45e
commit dd4e6491de
10 changed files with 107 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ArticleSearch.svelte
View File

@@ -40,7 +40,7 @@
<style>
.article-search {
padding: 1rem;
padding: var(--size-3);
position: absolute;
inset-inline: 0;
border: var(--standard-border);
@@ -56,6 +56,6 @@
input {
inline-size: 100%;
margin-block-start: 0.25rem;
margin-block-start: var(--size-1);
}
</style>

2
src/components/Dropdown.svelte
View File

@@ -44,6 +44,6 @@
<style>
summary {
display: grid;
padding: 0.5rem;
padding: var(--size-2);
}
</style>

8
src/components/Footer.astro
View File

@@ -20,9 +20,9 @@ const currentDateYear = new Date().getFullYear();
<style>
footer {
margin-block-start: 4rem;
padding-block: 1rem;
background: linear-gradient(
padding-block: var(--size-3);
margin-block-start: var(--size-9);
background-image: linear-gradient(
0deg,
var(--tertiary-background-color) 0%,
var(--background-color) 100%
@@ -40,6 +40,6 @@ const currentDateYear = new Date().getFullYear();
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 1rem;
gap: var(--size-3);
}
</style>

2
src/components/Header.astro
View File

@@ -11,6 +11,6 @@ const { title } = Astro.props;
<style>
header {
margin-block-end: 4rem;
margin-block-end: var(--size-9);
}
</style>

5
src/components/TableOfContents.svelte
View File

@@ -24,7 +24,6 @@
ul {
position: absolute;
border: var(--standard-border);
padding-inline-start: 2rem;
background-color: var(--background-color);
inset-block-start: var(--nav-height);
margin: 0;
@@ -35,7 +34,7 @@
a {
display: block;
padding-inline: 1rem;
padding-block: 0.25rem;
padding-inline: var(--size-3);
padding-block: var(--size-1);
}
</style>

16
src/components/ThemeToggle.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import Dropdown from "./Dropdown.svelte";
let themeOptions = ["System", "Light", "Dark"];
let themeOptions = ["system", "light", "dark"];
let theme = "System";
function loadTheme() {
theme = localStorage.getItem("theme") || "System";
theme = localStorage.getItem("theme") || "system";
}
function saveTheme() {
@@ -27,7 +27,7 @@
{#each themeOptions as option, index}
<div class="input-wrapper">
<input type="radio" id="theme-{option}" name="theme" value={option} bind:group={theme} on:change={saveTheme} />
<label for="theme-{option}">{option}</label>
<label for="theme-{option}">{option[0].toUpperCase() + option.slice(1)}</label>
</div>
{/each}
</div>
@@ -40,18 +40,14 @@
inset-block-start: var(--nav-height);
background-color: var(--background-color);
border: var(--standard-border);
padding: 1rem;
padding: var(--size-3);
display: grid;
gap: 0.5rem;
}
input {
margin: 0;
gap: var(--size-2);
}
.input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--size-2);
}
</style>

1
src/layouts/PageLayout.astro
View File

@@ -1,6 +1,7 @@
---
const { title, description } = Astro.props;
import "open-props/style";
import "../styles/global.css";
import "@fontsource/roboto";
import "@fontsource/roboto/700.css";

122
src/styles/global.css
View File

@@ -1,31 +1,37 @@
:root, html.Light {
--nav-height: 3rem;
--standard-border: 0.0625rem solid var(--tertiary-background-color);
--background-color: hsl(0 0% 100%);
--secondary-background-color: hsl(0 0% 95%);
--tertiary-background-color: hsl(0 0% 90%);
--text-color: hsl(0 0% 10%);
--accent-color: #1e40af;
:root, .light {
--nav-height: var(--size-8);
--standard-border: var(--border-size-1) solid var(--tertiary-background-color);
--font-sans: "Roboto", sans-serif;
--font-mono: "JetBrains Mono", monospace;
--background-color: var(--gray-0);
--secondary-background-color: var(--gray-1);
--tertiary-background-color: var(--gray-2);
--text-color: var(--gray-12);
--accent-color: var(--blue-11);
--radio-border-color: var(--gray-5);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: hsl(0 0% 10%);
--secondary-background-color: hsl(0 0% 15%);
--tertiary-background-color: hsl(0 0% 20%);
--text-color: hsl(0 0% 90%);
--accent-color: #93c5fd;
:root:not(.light):not(.dark) {
--background-color: var(--gray-10);
--secondary-background-color: var(--gray-9);
--tertiary-background-color: var(--gray-8);
--text-color: var(--gray-0);
--accent-color: var(--blue-2);
--radio-border-color: var(--gray-7);
color-scheme: dark;
}
}
html.Dark {
--background-color: hsl(0 0% 10%);
--secondary-background-color: hsl(0 0% 15%);
--tertiary-background-color: hsl(0 0% 20%);
--text-color: hsl(0 0% 90%);
--accent-color: #93c5fd;
.dark {
--background-color: var(--gray-10);
--secondary-background-color: var(--gray-9);
--tertiary-background-color: var(--gray-8);
--text-color: var(--gray-0);
--accent-color: var(--blue-2);
--radio-border-color: var(--gray-7);
color-scheme: dark;
}
@@ -34,9 +40,9 @@ html {
}
body {
line-height: 1.6;
line-height: var(--font-lineheight-3);
margin: 0;
font-family: "Roboto", sans-serif;
font-family: var(--font-sans);
background-color: var(--background-color);
color: var(--text-color);
display: flex;
@@ -48,7 +54,7 @@ nav,
header,
main,
footer {
padding-inline: 1rem;
padding-inline: var(--size-3);
}
main {
@@ -56,7 +62,7 @@ main {
}
.container {
max-inline-size: 65ch;
max-inline-size: var(--size-content-3);
margin-inline: auto;
}
@@ -76,9 +82,8 @@ img {
}
.icon {
inline-size: 1.5rem;
block-size: 1.5rem;
vertical-align: middle;
inline-size: var(--size-5);
block-size: var(--size-5);
}
table {
@@ -90,19 +95,19 @@ table {
td,
th {
border: var(--standard-border);
padding-inline: 0.5rem;
padding-block: 0.25rem;
padding-inline: var(--size-2);
padding-block: var(--size-1);
}
pre {
padding: 1rem;
background-color: hsl(0 0% 15%) !important;
padding: var(--size-3);
background-color: var(--gray-9) !important;
border: var(--standard-border);
}
code {
font-family: "JetBrains Mono", monospace;
font-size: 0.875rem;
font-family: var(--font-mono);
font-size: var(--font-size-0);
}
.heading-linker {
@@ -113,12 +118,16 @@ code {
.heading-linker::before {
content: "#";
color: var(--accent-color);
margin-inline-end: 0.25rem;
margin-inline-end: var(--size-2);
}
input {
button, input {
font: inherit;
padding-inline: 0.5rem;
padding-inline: var(--size-2);
padding-block: var(--size-1);
background-color: var(--secondary-background-color);
border: var(--standard-border);
color: inherit;
}
summary,
@@ -126,13 +135,9 @@ button {
cursor: pointer;
}
button {
color: inherit;
}
ul,
ol {
line-height: 2;
line-height: var(--font-lineheight-5);
padding-inline-start: 1rem;
}
@@ -142,6 +147,39 @@ a {
blockquote {
margin-inline-start: 0;
padding-inline-start: 1rem;
padding-inline-start: var(--size-3);
border-inline-start: var(--standard-border);
}
input[type="radio"] {
appearance: none;
background-color: var(--background-color);
border: var(--standard-border);
border-color: var(--radio-border-color);
margin: 0;
font: inherit;
inline-size: var(--size-4);
block-size: var(--size-4);
border-radius: var(--radius-round);
display: grid;
place-content: center;
}
input[type="radio"]::before {
content: "";
inline-size: var(--size-2);
block-size: var(--size-2);
border-radius: var(--radius-round);
transform: scale(0);
background-color: var(--accent-color);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
hr {
block-size: var(--border-size-2);
background-color: var(--tertiary-background-color);
border: none;
}