gronod/analog-film-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added basic dark mode functionality

Browse Source
This commit is contained in:
Sebastian Lay 2022-12-18 19:21:01 +01:00
parent b6910f7e14
commit 5acbd3b29c
No known key found for this signature in database
GPG Key ID: A699D9B80D6068AA
12 changed files with 144 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_icons/arrow-down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

1
_icons/arrow-up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

1
_icons/sun.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 614 B

66
css/style.css
View File

@ -112,6 +112,16 @@ input, button, select {
width: 200px; width: 200px;
} }
.switch {
position: absolute;
top: 18px;
right: 0;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPjxwYXRoIGQ9Ik0xMiAxdjJNMTIgMjF2Mk00LjIyIDQuMjJsMS40MiAxLjQyTTE4LjM2IDE4LjM2bDEuNDIgMS40Mk0xIDEyaDJNMjEgMTJoMk00LjIyIDE5Ljc4bDEuNDItMS40Mk0xOC4zNiA1LjY0bDEuNDItMS40MiIvPjwvc3ZnPg==');
cursor: pointer;
}
button { button {
cursor: pointer; cursor: pointer;
} }
@ -153,7 +163,7 @@ aside > section {
label { label {
line-height: 36px; line-height: 36px;
margin: 0 5px 0 10px; margin: 2px 5px 0 10px;
} }
h1 { h1 {
@ -172,6 +182,7 @@ h2 {
header { header {
margin: 0 0 40px 10px; margin: 0 0 40px 10px;
position: relative;
} }
main { main {
@ -292,6 +303,59 @@ header a {
display: none; display: none;
} }
/* dark mode */
.dark {
background: #333;
color: #eee;
}
.dark a, .dark label {
color: #eee;
}
.dark .switch {
filter: invert();
}
.dark li {
border: 1px solid #333;
box-shadow: 1px 1px 2px #222;
background: #555;
}
.dark li img {
filter: drop-shadow(1px 1px 2px #222);
}
.dark li aside {
background: #444;
border-top: 1px solid #333;
}
.dark li aside div, .dark .link {
border-right: 1px solid #333;
color: #eee;
}
.dark li aside div:last-child {
border-right: none;
}
.dark input, .dark button, .dark select {
background: #555;
color: #eee;
border-color: #222;
}
.dark button:active, .dark button.active {
background: #666;
}
.dark .asc:after, .dark .desc:after {
filter: invert();
}
/* media queries */ /* media queries */
@media (max-width: 1200px) { @media (max-width: 1200px) {

5
faq.html
View File

@ -28,9 +28,10 @@
<link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
</head> </head>
<body> <body class="dark">
<div id="faq"> <div id="faq">
<header> <header>
<div class="switch" v-on:click="toggle"></div>
<h1><a href="/">analog film<span>.space</span></a></h1> <h1><a href="/">analog film<span>.space</span></a></h1>
<p>a database of currently available 35mm, 110 and medium format film stocks</p> <p>a database of currently available 35mm, 110 and medium format film stocks</p>
<nav><a href="/">overview</a> / <a href="/faq" class="active">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random">random film</a></nav> <nav><a href="/">overview</a> / <a href="/faq" class="active">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random">random film</a></nav>
@ -109,5 +110,7 @@
</ul> </ul>
</main> </main>
</div> </div>
<script src="js/vue.global.prod.js"></script>
<script src="js/script-faq.js?d=20221218"></script>
</body> </body>
</html> </html>

7
guide.html
View File

@ -28,9 +28,10 @@
<link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
</head> </head>
<body> <body class="dark">
<div id="guide"> <div id="guide">
<header> <header>
<div class="switch" v-on:click="toggle"></div>
<h1><a href="/">analog film<span>.space</span></a></h1> <h1><a href="/">analog film<span>.space</span></a></h1>
<p>a database of currently available 35mm, 110 and medium format film stocks</p> <p>a database of currently available 35mm, 110 and medium format film stocks</p>
<nav><a href="/">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide" class="active">film guide</a> / <a href="/random">random film</a></nav> <nav><a href="/">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide" class="active">film guide</a> / <a href="/random">random film</a></nav>
@ -71,9 +72,9 @@
</ul> </ul>
</main> </main>
</div> </div>
<script src="js/current-films.js?d=20221111"></script> <script src="js/current-films.js?d=20221218"></script>
<script src="js/guide.js"></script> <script src="js/guide.js"></script>
<script src="js/vue.global.prod.js"></script> <script src="js/vue.global.prod.js"></script>
<script src="js/script-guide.js?d=20221111"></script> <script src="js/script-guide.js?d=20221218"></script>
</body> </body>
</html> </html>

7
index.html
View File

@ -28,9 +28,10 @@
<link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
</head> </head>
<body> <body class="dark">
<div id="app"> <div id="app">
<header> <header>
<div class="switch" v-on:click="toggle"></div>
<h1><a href="/">analog film<span>.space</span></a></h1> <h1><a href="/">analog film<span>.space</span></a></h1>
<p>a database of currently available 35mm, 110 and medium format film stocks</p> <p>a database of currently available 35mm, 110 and medium format film stocks</p>
<nav><a href="/" class="active">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random">random film</a></nav> <nav><a href="/" class="active">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random">random film</a></nav>
@ -84,8 +85,8 @@
<h2 v-if="films.length === 0">nothing here :(</h2> <h2 v-if="films.length === 0">nothing here :(</h2>
</main> </main>
</div> </div>
<script src="js/current-films.js?d=20221111"></script> <script src="js/current-films.js?d=20221218"></script>
<script src="js/vue.global.prod.js"></script> <script src="js/vue.global.prod.js"></script>
<script src="js/script-index.js?d=20221111"></script> <script src="js/script-index.js?d=20221218"></script>
</body> </body>
</html> </html>

18
js/script-faq.js Normal file
View File

@ -0,0 +1,18 @@
Vue.createApp({
methods: {
toggle: function() {
if(document.querySelector('body').classList.contains('dark')) {
localStorage.setItem('theme', 'light');
document.querySelector('body').classList.remove('dark');
} else {
localStorage.setItem('theme', 'dark');
document.querySelector('body').classList.add('dark');
}
}
},
mounted: function() {
if(localStorage.getItem('theme') !== 'dark') {
document.querySelector('body').classList.remove('dark');
}
}
}).mount('#faq');

14
js/script-guide.js
View File

@ -56,6 +56,20 @@ Vue.createApp({
}, },
goto: function(step) { goto: function(step) {
this.step = step; this.step = step;
},
toggle: function() {
if(document.querySelector('body').classList.contains('dark')) {
localStorage.setItem('theme', 'light');
document.querySelector('body').classList.remove('dark');
} else {
localStorage.setItem('theme', 'dark');
document.querySelector('body').classList.add('dark');
}
}
},
mounted: function() {
if(localStorage.getItem('theme') !== 'dark') {
document.querySelector('body').classList.remove('dark');
} }
} }
}).mount('#guide'); }).mount('#guide');

14
js/script-index.js
View File

@ -81,6 +81,20 @@ Vue.createApp({
} else { } else {
this.sortBy = button.target.innerText.toLowerCase(); this.sortBy = button.target.innerText.toLowerCase();
} }
},
toggle: function() {
if(document.querySelector('body').classList.contains('dark')) {
localStorage.setItem('theme', 'light');
document.querySelector('body').classList.remove('dark');
} else {
localStorage.setItem('theme', 'dark');
document.querySelector('body').classList.add('dark');
}
}
},
mounted: function() {
if(localStorage.getItem('theme') !== 'dark') {
document.querySelector('body').classList.remove('dark');
} }
} }
}).mount('#app'); }).mount('#app');

14
js/script-random.js
View File

@ -24,6 +24,20 @@ Vue.createApp({
this.tick = 0; this.tick = 0;
} }
this.show = true; this.show = true;
},
toggle: function() {
if(document.querySelector('body').classList.contains('dark')) {
localStorage.setItem('theme', 'light');
document.querySelector('body').classList.remove('dark');
} else {
localStorage.setItem('theme', 'dark');
document.querySelector('body').classList.add('dark');
}
}
},
mounted: function() {
if(localStorage.getItem('theme') !== 'dark') {
document.querySelector('body').classList.remove('dark');
} }
} }
}).mount('#random'); }).mount('#random');

7
random.html
View File

@ -28,9 +28,10 @@
<link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-400-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin> <link href="fonts/ek-mukta-700-latin.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
</head> </head>
<body> <body class="dark">
<div id="random"> <div id="random">
<header> <header>
<div class="switch" v-on:click="toggle"></div>
<h1><a href="/">analog film<span>.space</span></a></h1> <h1><a href="/">analog film<span>.space</span></a></h1>
<p>a database of currently available 35mm, 110 and medium format film stocks</p> <p>a database of currently available 35mm, 110 and medium format film stocks</p>
<nav><a href="/">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random" class="active">random film</a></nav> <nav><a href="/">overview</a> / <a href="/faq">frequently asked questions</a> / <a href="/guide">film guide</a> / <a href="/random" class="active">random film</a></nav>
@ -70,8 +71,8 @@
</ul> </ul>
</main> </main>
</div> </div>
<script src="js/current-films.js?d=20221111"></script> <script src="js/current-films.js?d=20221218"></script>
<script src="js/vue.global.prod.js"></script> <script src="js/vue.global.prod.js"></script>
<script src="js/script-random.js?d=20221111"></script> <script src="js/script-random.js?d=20221218"></script>
</body> </body>
</html> </html>