mirror of
https://github.com/danbulant/design
synced 2026-06-18 22:01:06 +00:00
Dark mode, hide posts
This commit is contained in:
Daniel Bulant
parent
1f3468955a
commit
a563bf964e
5 changed files with 60 additions and 10 deletions
|
|
@ -10,10 +10,14 @@ body {
|
|||
box-sizing: border-box;
|
||||
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
margin-top: 30px;
|
||||
transition: color .3s, background-color .3s;
|
||||
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
|
||||
body.dark {
|
||||
background-color: #1f1f1f;
|
||||
background-image: linear-gradient(to top, rgba(94, 61, 74, 0.685), transparent min(180vh, 1080px));
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,24 @@
|
|||
import Button from "./components/button.svelte";
|
||||
import Contact from "./components/contact.svelte";
|
||||
import Hero from "./components/hero.svelte";
|
||||
import Posts from "./components/posts.svelte";
|
||||
// import Posts from "./components/posts.svelte";
|
||||
import Project from "./components/project.svelte";
|
||||
import Split from "./components/split.svelte";
|
||||
import darkmode from "./stores/darkmode";
|
||||
|
||||
function toggle() {
|
||||
$darkmode = !$darkmode;
|
||||
}
|
||||
|
||||
$: {
|
||||
if(typeof document !== "undefined") {
|
||||
if($darkmode) {
|
||||
document.body.classList.add("dark");
|
||||
} else {
|
||||
document.body.classList.remove("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -15,16 +28,17 @@
|
|||
<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
|
||||
</svelte:head>
|
||||
|
||||
<div class="bar">
|
||||
<div class="bar" class:dark={$darkmode}>
|
||||
<Bar>
|
||||
<h3>Daniel Bulant</h3>
|
||||
<a href="#contact" class="big">Contact</a>
|
||||
<Split />
|
||||
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
|
||||
<a href="#contact" class="small">Contact</a>
|
||||
<a href="mailto:danbulant@danbulant.eu" class="big">danbulant@danbulant.eu</a>
|
||||
</Bar>
|
||||
</div>
|
||||
<main>
|
||||
<main class:dark={$darkmode}>
|
||||
<Hero>
|
||||
<h1>I'm a young developer making <u>websites</u> and <u>discord bots</u>.</h1>
|
||||
<!-- <h3>To be used later</h3> -->
|
||||
|
|
@ -52,12 +66,12 @@
|
|||
</Project>
|
||||
</div>
|
||||
</div>
|
||||
<Posts />
|
||||
<!-- <Posts /> -->
|
||||
<div id="contact">
|
||||
<Contact />
|
||||
</div>
|
||||
</main>
|
||||
<div class="bottombar">
|
||||
<div class="bottombar" class:dark={$darkmode}>
|
||||
<Bar>
|
||||
<h3>Daniel Bulant</h3>
|
||||
<Split />
|
||||
|
|
@ -98,6 +112,9 @@
|
|||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
.dark.bottombar {
|
||||
background: rgb(28, 28, 33);
|
||||
}
|
||||
}
|
||||
.bottombar h3 {
|
||||
font-size: 18px;
|
||||
|
|
@ -146,6 +163,9 @@
|
|||
margin: 0 auto 30px auto;
|
||||
background: white;
|
||||
}
|
||||
.dark.bar {
|
||||
background: rgb(28, 28, 33);
|
||||
}
|
||||
.bar h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -153,6 +173,9 @@
|
|||
h1, h3 {
|
||||
color: #282B29;
|
||||
}
|
||||
.dark h3 {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
|
@ -168,4 +191,7 @@
|
|||
.bar a {
|
||||
color: #202020b2;
|
||||
}
|
||||
.dark.bar a {
|
||||
color: rgba(191, 191, 191, 0.698);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,6 +12,9 @@
|
|||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
:global(.dark nav.bar-component) {
|
||||
background: rgb(28, 28, 33);
|
||||
}
|
||||
:global(nav.bar-component > *) {
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script>
|
||||
import darkmode from "../stores/darkmode";
|
||||
|
||||
export var href = "";
|
||||
export var text = false;
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a href={href} class="button" class:text><slot /></a>
|
||||
<a href={href} class="button" class:text class:dark={$darkmode}><slot /></a>
|
||||
{:else}
|
||||
<button on:click class:text><slot /></button>
|
||||
<button on:click class:text class:dark={$darkmode}><slot /></button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
@ -34,4 +36,7 @@
|
|||
color: black;
|
||||
border-color: transparent;
|
||||
}
|
||||
.dark.text {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<script>
|
||||
import darkmode from "../stores/darkmode";
|
||||
</script>
|
||||
|
||||
<div class="contact">
|
||||
<div class="contact" class:dark={$darkmode}>
|
||||
<div class="address">Prague, Czech Republic</div>
|
||||
<a href="mailto:danbulant@danbulant.eu" target="_blank">danbulant@danbulant.eu</a>
|
||||
<div class="profiles">
|
||||
|
|
@ -26,6 +29,9 @@
|
|||
.address {
|
||||
color: #202020d5;
|
||||
}
|
||||
.dark .address {
|
||||
color: rgba(191, 191, 191, 0.835);
|
||||
}
|
||||
.contact > a {
|
||||
color: #202020;
|
||||
font-size: 36px;
|
||||
|
|
@ -34,6 +40,9 @@
|
|||
display: block;
|
||||
font-size: max(min(36px, 4vw), 23px);
|
||||
}
|
||||
.dark.contact > a {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.profiles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -60,6 +69,9 @@
|
|||
.github {
|
||||
color: #333333;
|
||||
}
|
||||
.dark .github {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.discord {
|
||||
color: #7289DA;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue