From 26607a77c1ae36bed4949317f4270d0a6fe30233 Mon Sep 17 00:00:00 2001 From: Isaac Shoebottom Date: Sat, 8 Oct 2022 16:25:40 -0300 Subject: [PATCH] Add Dark Mode --- index.html | 117 ++++++++++++++++++++++++++++++++++------------------- style.css | 108 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 177 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index b42a314..063bea1 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,84 @@ - - - - - - - - - - - - - - - Isaac's Website + + + + + + + + + + + + + + + + + Isaac's Website + + + + + +
+

Isaac's domain

+
+

Dark Mode

+
+ +
+
+
- - -
- Biden's America - It's ok little minion - It's the crazy frog! +

List of things on this domain!

+
- - + + + +
+ Biden's America + It's ok little minion + It's the crazy frog! +
+ + \ No newline at end of file diff --git a/style.css b/style.css index 5ef48d5..9941342 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,22 @@ .text { font-family: 'Trebuchet MS', sans-serif; margin: 0 auto; - max-width:300px; + max-width: 300px; width: 50%; - line-height:1.6; - font-size:18px; - color:#444; - padding:010px; + line-height: 1.6; + font-size: 18px; + color: #444; + padding: 010px; left: 50%; top: 50%; } + h1 { - line-height:1.2; + line-height: 1.2; } + html { - cursor:url(troll.cur),url(glaceon.gif),auto; + cursor: url(troll.cur), url(glaceon.gif), auto; } .image { @@ -27,3 +29,95 @@ html { /* display: block; */ display: none; } + +#dark-mode{ + text-align: center; +} + +#dark-mode #button-1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +/* Button css */ +#button-1 .knobs:before { + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 20px; + height: 10px; + color: #fff; + font-size: 10px; + font-weight: bold; + text-align: center; + line-height: 1; + padding: 9px 4px; + background-color: #fff; + border-radius: 50%; + transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20); +} + +#button-1 .checkbox:checked+.knobs:before { + content: ''; + left: 32px; + background-color: #fff; +} + +#button-1 .checkbox:checked~.layer { + background-color: #1f1f1f; +} + +#button-1 .knobs, +#button-1 .knobs:before, +#button-1 .layer { + transition: 0.3s ease all; +} + +.knobs, +.layer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.button { + position: relative; + top: 50%; + width: 65px; + height: 36px; + margin: -20px auto 0 auto; + overflow: hidden; +} + +.button.r, +.button.r .layer { + border-radius: 100px; +} + +.checkbox { + position: relative; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + cursor: pointer; + z-index: 3; +} + +.knobs { + z-index: 2; +} + +.layer { + width: 100%; + background-color: #d3d3d3; + transition: 0.3s ease all; + z-index: 1; +} \ No newline at end of file