Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-23 14:19:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

new pages, style, dark/light mode toggle, etc...

Browse source
This commit is contained in:
J-onasJones 2023-09-16 23:30:08 +02:00
parent 09c002f1ae
commit 57ab995f83
29 changed files with 342 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/lib/components/DarkModeSwitcher.svelte Normal file
View file

@ -0,0 +1,42 @@
<!-- DarkModeSwitcher.svelte -->
<script>
import { isDarkMode } from '$lib/stores/darkModeStore.js';
function toggleDarkMode() {
$isDarkMode = !$isDarkMode;
document.body.classList.toggle("dark-mode", $isDarkMode);
}
</script>
<button on:click={toggleDarkMode}>
<img src={$isDarkMode ? "/dark.svg" : "/light.svg"} alt="Dark Mode">
</button>
<div class:invert={$isDarkMode} class="content">
<!-- Your content here -->
</div>
<style>
body {
transition: background-color 0.5s, color 0.5s;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
}
button.dark {
color: #fff; /* Dark mode text color */
background-color: #333; /* Dark mode background color */
}
.content {
/* Your default content styles here */
}
.invert {
filter: invert(1); /* Apply the invert filter for dark mode */
}
</style>

19
src/lib/components/Footer.svelte
View file

@ -1,7 +1,9 @@
<!-- Footer.svelte -->
<footer>
<a href="/">Home</a>
<div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p>
</div>
<nav>
<ul>
<li>
@ -17,10 +19,14 @@
<style>
footer {
padding: 1rem;
background: lightskyblue;
margin: 2rem;
margin-bottom: 0;
margin-top: 0;
background: #16181c;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 0.5rem;
}
ul {
@ -34,4 +40,11 @@
text-decoration: none;
color: inherit;
}
</style>
.footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
</style>

86
src/lib/components/Header.svelte
View file

@ -1,25 +1,36 @@
<!-- Header.svelte -->
<header>
<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50" /></a>
<nav>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</header>
<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0">
<header>
<div class="header-title">
<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
</div>
<nav>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li>
<DarkModeSwitcher />
</li>
</ul>
</nav>
</header>
</body>
<style>
header {
padding: 1rem;
background: lightskyblue;
margin: 2rem;
margin-top: 0;
margin-bottom: 0;
background: rgb(0, 255, 0);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 0.5rem;
}
ul {
@ -31,6 +42,49 @@
a {
text-decoration: none;
color: inherit;
color: black;
}
</style>
a:hover {
color: #26292f;
}
h1 {
font-size:35px;
padding:0;
margin:0;
margin-left:20px;
float: left;
}
img {
float: left;
}
.header-title {
display: flex;
align-items: center;
float: left;
clear: both;
}
button#dark-mode-toggle {
background-color: transparent;
border: none;
cursor: pointer;
}
button#dark-mode-toggle img {
width: 30px;
height: 30px;
}
</style>
<script>
import DarkModeSwitcher from '$lib/components/DarkModeSwitcher.svelte';
import { isDarkMode } from '$lib/stores/darkModeStore.js';
function toggleDarkMode() {
$isDarkMode = !$isDarkMode;
document.body.classList.toggle("dark-mode", $isDarkMode);
}
</script>

4
src/lib/components/Navbar.svelte
View file

@ -39,10 +39,10 @@
const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
</script>
<div class="container">
<div class="container navbar">
<div class="row">
<div class="col-md-12">
<h1>Pages</h1>
<h2>Pages</h2>
{@html renderedList}
</div>
</div>

3
src/lib/stores/darkModeStore.js Normal file
View file

@ -0,0 +1,3 @@
import { writable } from 'svelte/store';
export let isDarkMode = writable(false);

81
src/lib/styles/style.css
View file

@ -1,34 +1,95 @@
/* style.css */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@font-face {
font-family: 'sary_soft_semiboldregular';
src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'inter-semibold';
src: url('/font/Inter-SemiBold.woff2');
}
html {
/*font-family: 'sary_soft_semiboldregular';*/
font-family: 'inter-semibold';
}
body {
margin: 0;
padding: 0;
background: #eee;
color: #333;
font-family: sans-serif;
color: #fff;
background-color: #16181c;
}
main {
padding: 1rem;
margin: 2rem auto;
max-width: 40rem;
padding: 2rem;
margin: 2rem;
background-color: #26292f;
border-radius: 0.5rem;
float: left;
overflow: hidden;
}
.column {
float: left;
padding: 10px;
height: auto;
display: table-cell;
padding: 0;
flex-grow: 0;
height: auto;
margin: 2rem;
background-color: #26292f;
border-radius: 0.5rem;
overflow:visible;
}
.flex_grow {
flex-grow: 1;
}
.navbar {
border-right: black solid 1px;
float: left;
padding: 2rem;
}
ul {
padding-left: 10px;
}
.container {
display: table;
display: flex;
}
.row:after {
content: "";
display: table;
clear: both;
}
.not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a {
color: #afb9c4;
text-decoration: none;
}
a:hover {
color: #fff;
}
.invert {
filter: invert(1);
}