diff --git a/_icons/arrow-down.svg b/_icons/arrow-down.svg new file mode 100644 index 0000000..e18e73f --- /dev/null +++ b/_icons/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_icons/arrow-up.svg b/_icons/arrow-up.svg new file mode 100644 index 0000000..9aab5c3 --- /dev/null +++ b/_icons/arrow-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_icons/sun.svg b/_icons/sun.svg new file mode 100644 index 0000000..44d197f --- /dev/null +++ b/_icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 72863f1..5171bba 100644 --- a/css/style.css +++ b/css/style.css @@ -112,6 +112,16 @@ input, button, select { 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 { cursor: pointer; } @@ -153,7 +163,7 @@ aside > section { label { line-height: 36px; - margin: 0 5px 0 10px; + margin: 2px 5px 0 10px; } h1 { @@ -172,6 +182,7 @@ h2 { header { margin: 0 0 40px 10px; + position: relative; } main { @@ -292,6 +303,59 @@ header a { 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 (max-width: 1200px) { diff --git a/faq.html b/faq.html index 8d6acf5..4ce969d 100644 --- a/faq.html +++ b/faq.html @@ -28,9 +28,10 @@ - +
+

analog film.space

a database of currently available 35mm, 110 and medium format film stocks

@@ -109,5 +110,7 @@
+ + \ No newline at end of file diff --git a/guide.html b/guide.html index 897169e..2dfb7c0 100644 --- a/guide.html +++ b/guide.html @@ -28,9 +28,10 @@ - +
+

analog film.space

a database of currently available 35mm, 110 and medium format film stocks

@@ -71,9 +72,9 @@
- + - + \ No newline at end of file diff --git a/index.html b/index.html index 1c0c820..d5dd6de 100644 --- a/index.html +++ b/index.html @@ -28,9 +28,10 @@ - +
+

analog film.space

a database of currently available 35mm, 110 and medium format film stocks

@@ -84,8 +85,8 @@

nothing here :(

- + - + \ No newline at end of file diff --git a/js/script-faq.js b/js/script-faq.js new file mode 100644 index 0000000..3287b5b --- /dev/null +++ b/js/script-faq.js @@ -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'); \ No newline at end of file diff --git a/js/script-guide.js b/js/script-guide.js index 3f945c7..fa2de6f 100644 --- a/js/script-guide.js +++ b/js/script-guide.js @@ -56,6 +56,20 @@ Vue.createApp({ }, goto: function(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'); \ No newline at end of file diff --git a/js/script-index.js b/js/script-index.js index 9bfc153..01a5726 100644 --- a/js/script-index.js +++ b/js/script-index.js @@ -81,6 +81,20 @@ Vue.createApp({ } else { 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'); \ No newline at end of file diff --git a/js/script-random.js b/js/script-random.js index 0ace2ac..1208ec3 100644 --- a/js/script-random.js +++ b/js/script-random.js @@ -24,6 +24,20 @@ Vue.createApp({ this.tick = 0; } 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'); \ No newline at end of file diff --git a/random.html b/random.html index 39bf04b..1c7d007 100644 --- a/random.html +++ b/random.html @@ -28,9 +28,10 @@ - +
+

analog film.space

a database of currently available 35mm, 110 and medium format film stocks

@@ -70,8 +71,8 @@
- + - + \ No newline at end of file