From 326c8f3352cb515ae500a637d489ee9ef1dd12c4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 14 Jan 2023 20:47:27 +0100 Subject: [PATCH] Turn About page into a very fancy playground --- css/dark.css | 19 ++++++- css/main.css | 116 ++++++++++++++++++++++++++++++++++++++-- index.html | 147 +++++++++++++++++++++++++++++++++++++++------------ js/dom.js | 8 ++- js/main.js | 35 +++++++++++- 5 files changed, 285 insertions(+), 40 deletions(-) diff --git a/css/dark.css b/css/dark.css index 9f3764d..214fa18 100644 --- a/css/dark.css +++ b/css/dark.css @@ -23,6 +23,23 @@ a { background: #FFF1; } .box .icon { - background: hsl(var(--color), 100%, 22%); + background: hsl(var(--color), 100%, 18%); color: hsl(var(--color), 100%, 85%); +} +.selector { + position: relative; + background: #0008; +} +.selector .bg { + background: #FFF1; +} +.setting { + background: #1118; +} +.setting:hover { + background: #2228; +} +.setting.checked { + background: #36F; + box-shadow: 2px 2px 8px #36F8; } \ No newline at end of file diff --git a/css/main.css b/css/main.css index be33091..1590191 100644 --- a/css/main.css +++ b/css/main.css @@ -21,10 +21,10 @@ body { a { color: #44F; } -body.init * { +.init * { transition: none !important; } -body.init .page { +.init .page { transition: opacity .3s, top .3s !important; } .icon { @@ -116,6 +116,7 @@ body.init .page { text-align: center; overflow: hidden; min-width: 340px; + transition: background .2s; } .home .wrapper { box-shadow: none; @@ -169,6 +170,7 @@ body.init .page { background: #EEE8; margin: 20px; backdrop-filter: blur(16px); + transition: background .2s; } .back .icon { @@ -196,7 +198,7 @@ body.init .page { flex-wrap: wrap; } .static { - margin: 24px 6px 16px; + margin: 16px 6px; } .static .box:hover { background: transparent; @@ -252,4 +254,112 @@ a.box { } .header .text { font-size: 26px; +} + +.selector { + position: relative; + background: #FFF8; + margin: 18px auto; + border-radius: 16px; + display: flex; + align-items: center; + overflow: hidden; + width: calc(100% - 32px); + max-width: 640px; + transition: color .2s, background .2s; +} +.selector .bg { + position: absolute; + width: calc(100% / var(--screens) - 8px); + height: calc(100% - 8px); + background: #0001; + top: 50%; + left: 0; + margin-left: 4px; + border-radius: 12px; + transform: translateY(-50%); + transition: all .4s; +} +.selector .entry { + margin: 0 auto; + width: 100%; + display: flex; + align-items: center; + padding: 14px; + margin: 2px; + z-index: 1; + cursor: pointer; +} +.selector .entry > div { + margin: 0 auto; +} + +.split { + display: flex; + align-items: center; + justify-content: space-between; + text-align: right; + padding: 80px 24px; + max-width: 480px; + margin: 0 auto; +} +.split .fancy { + font-size: 80px; +} +.split .pp > b { + font-size: 48px; + margin-right: 2px; +} +.split .text { + max-width: 240px; + margin-left: auto; + opacity: .6; +} +.split .right { + margin-right: 8px; +} + +.screens { + display: flex; + width: calc(100% * var(--screens)); + align-items: flex-start; + transition: all .4s; +} +.screen { + width: 100%; + height: auto; +} +.screen.hidden { + height: 0; +} + +.settings { + margin: 12px 16px 32px; +} +.setting { + background: #FFF8; + max-width: 640px; + border-radius: 16px; + margin: 8px auto; + display: flex; + align-items: center; + padding: 12px; + text-align: left; + cursor: pointer; + transition: background .2s, color .2s, box-shadow .2s; +} +.setting:hover { + background: #DDD8; +} +.setting .icon { + margin-right: 8px; + padding: 12px; +} +.setting .desc { + opacity: .6; +} +.setting.checked { + color: #EEE; + background: #56F; + box-shadow: 2px 2px 8px #56F8; } \ No newline at end of file diff --git a/index.html b/index.html index a5a20c8..aaabfda 100644 --- a/index.html +++ b/index.html @@ -32,9 +32,9 @@
apps
Services
-
-
info
-
About
+
+
more
+
More
@@ -49,44 +49,125 @@
-