dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-06-18 13:51:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix for the 3% of people

Browse source
This commit is contained in:
Daniel Bulant 2022-04-10 22:08:47 +02:00
parent 69d68f7ec1
commit 966c8fc18c
4 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/navbar.svelte
View file

@ -38,6 +38,14 @@
background: rgba(255,255,255, 0.2);
backdrop-filter: blur(10px);
}
@supports (-moz-appearance:none) {
.bar {
background: rgba(255,255,255,0.9) !important;
}
.dark.bar {
background: rgba(28, 28, 33, 0.9) !important;
}
}
@media (max-width: 400px) {
.bar {
width: 100vw;

5
src/lib/components/project.svelte
View file

@ -81,6 +81,11 @@
background-color: rgba(0,0,0,0.2);
color: rgb(214, 214, 214);
}
@supports (-moz-appearance:none) {
.desc {
background: rgba(0,0,0,0.9) !important;
}
}
.desc.extradark {
background-color: rgba(0,0,0,0.4);
}

15
src/lib/components/technologyDetails.svelte
View file

@ -1,4 +1,6 @@
<script>
import darkmode from "$lib/stores/darkmode";
export var selected = true;
var shouldClose = true;
@ -11,7 +13,7 @@
}
</script>
<div class="dialog" class:selected on:mousedown={() => shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}>
<div class="dialog" class:dark={$darkmode} class:selected on:mousedown={() => shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}>
<div class="main">
{#if selected === "typescript"}
<h2>Typescript</h2>
@ -138,7 +140,16 @@
border-radius: 15px;
cursor: pointer;
background: rgba(255,255,255,0.1);
box-shadow: 0.6px 1.3px 1.3px hsl(0deg 0% 0% / 0.48);
}
@supports (-moz-appearance:none) {
.dialog {
background: rgba(255,255,255,0.9) !important;
}
.dark.dialog {
background: rgba(70,70,70,0.97) !important;
}
}
h2 {
margin-top: 0;
margin-block-start: 0;
@ -158,7 +169,7 @@
.a:hover {
text-decoration: underline;
}
:global(.dark .dialog) {
.dark.dialog {
background: rgba(255,255,255,0.2);
}
.dialog.selected {

9
src/routes/index.svelte
View file

@ -62,6 +62,7 @@
<Button href="/posts">blog</Button>
</div>
</div>
<p class="center firefox-notice">Firefox (and it's 3.4% users) doesn't support background blur. This website is better viewed on a more modern browser.</p>
<div class="projects" id="projects">
<div>
<h2>
@ -221,6 +222,14 @@
<Bottombar />
<style>
.firefox-notice {
display: none;
}
@supports (-moz-appearance:none) {
.firefox-notice {
display: block !important;
}
}
img.white {
background: white;
border-radius: 50%;