diff --git a/.inscode b/.inscode index 3112d25a896a3f565b93f4a5b4be553c2b962926..f70468bfc8aba5d4bbefe748009d3384145523fe 100644 --- a/.inscode +++ b/.inscode @@ -1,6 +1,10 @@ run = "index.html" +language = "node" [env] PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}" XDG_CONFIG_HOME = "/root/.config" -npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" \ No newline at end of file +npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" + +[debugger] +program = "main.js" diff --git a/index.html b/index.html index 1876fcae63d4a035cdfd60c26b112cda230be43e..a565d5dc272564f9c6baf619d0b596ec321bcdde 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,48 @@ InsCode -
+ + + \ No newline at end of file diff --git a/script.js b/script.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e0294beb7aeb3e07bb3b9eae5b75e230f48601b0 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,30 @@ +// MAIN +/* ======================================================= */ +let body = document.querySelector("body"); +let stateToggle = document.querySelector("button"); + +stateToggle.addEventListener("click", () => { + body.classList.toggle("on"); +}); + +let l2 = document.querySelector(".lower-2"); + +stateToggle.addEventListener("mousedown", () => { + l2.style.transform = "translateX(13px) translateY(0)"; +}); + +stateToggle.addEventListener("mouseup", () => { + l2.style.transform = "translateX(13px) translateY(-4px)"; +}); + +stateToggle.addEventListener("mouseleave", () => { + l2.style.transform = "translateX(13px) translateY(-4px)"; +}); + +stateToggle.addEventListener("touchstart", () => { + l2.style.transform = "translateX(13px) translateY(0)"; +}); + +stateToggle.addEventListener("touchend", () => { + l2.style.transform = "translateX(13px) translateY(-4px)"; +}); \ No newline at end of file diff --git a/style.css b/style.css index b71aefeb44c37fd9fbd21145a8912cf62322ebdc..2f5bbfcd28e17294c36f337eac3f88f6e33e4de7 100644 --- a/style.css +++ b/style.css @@ -6,4 +6,247 @@ html{ .container { text-align: center; padding: 64px; +} +/* Press the light bulb button using either a mouse or a keyboard, touch works too! to change the theme :) */ + +/* DEFAULTS */ +/* ======================================================= */ + +body { + --global-bg: hsl(222 4% 96%); + --global-s: hsl(222 99% 46%); + --global-l: hsl(222 22% 92%); + --global-bs: transparent; +} + +body.on { + --global-bg: hsl(228 100% 4%); + --global-s: hsl(254 100% 83%); + --global-l: hsl(254 2% 18%); + --global-bs: hsl(146 100% 84% / .06); +} + +body { + display: grid; + place-content: center; + min-height: 100vh; + padding: 20px; + box-sizing: border-box; + margin: 0; + background: var(--global-bg); + transition: .3s linear; +} + +/* BUTTON */ +/* ======================================================= */ +button { + width: 200px; + height: 200px; + border-radius: 1000px; + padding: 2rem; + box-sizing: content-box; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid var(--global-l); + background: transparent; + cursor: pointer; + transition: .3s; + margin: 0 auto; +} + +button:focus { + outline: 0; + border-color: var(--global-s); +} + +button:active { + transform: scale(.92); +} + +/* LIGHT BULB */ +/* ======================================================= */ +.light-bulb { + --t-duration: .3s; + --t-type: linear; + pointer-events: none; + transform: translateY(9px); +} + +.upper { + transform: translateY(-11px); +} + +.circle { + width: 56px; + height: 54px; + background: inherit; + border: 2px solid var(--global-s); + border-radius: 100px; + position: relative; + transition: var(--t-duration) var(--t-type); + box-shadow: inset 0 8px 12px 2px var(--global-bs), 2px -4px 12px var(--global-bs); +} + +.line-1 { + width: 10px; + height: 30px; + border-bottom: 0; + position: absolute; + bottom: 0; + left: 0; + z-index: 2; + background: var(--global-bg); + transform: rotate(-30deg) translateX(-3px) translateY(50%); + display: flex; + justify-content: center; + transition: var(--t-duration) var(--t-type); +} + +.line-2 { + width: 10px; + height: 30px; + border-bottom: 0; + position: absolute; + bottom: 0; + right: 0; + z-index: 2; + background: var(--global-bg); + transform: rotate(30deg) translateX(3px) translateY(50%); + display: flex; + justify-content: center; + transition: var(--t-duration) var(--t-type); +} + +.line-c { + width: 0; + height: inherit; + border: 1px solid var(--global-s); + transition: var(--t-duration) var(--t-type); +} + +.circle-bottom { + width: 40px; + height: 40px; + background: var(--global-l); + border-radius: 100%; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + transition: var(--t-duration) var(--t-type); +} + +.lower { + display: flex; + justify-content: center; + flex-direction: column; + position: relative; +} + +.lower-1 { + align-self: center; + width: 20px; + height: 24px; + border: 2px solid var(--global-s); + border-radius: 0 0 0 4px; + position: relative; + display: flex; + justify-content: space-evenly; + flex-direction: column; + transition: var(--t-duration) var(--t-type); + box-shadow: 2px 0 4px var(--global-bs); +} + +.lower-1::before { + content: ''; + position: absolute; + left: 2px; + top: -2px; + z-index: 2; + width: 8px; + height: 8px; + border-radius: 50px 50px 0 0; + background: var(--global-bg); + transform: translate(-100%, -100%); + transition: var(--t-duration) var(--t-type); +} + +.lower-1::after { + content: ''; + position: absolute; + left: calc(100% - 6px); + top: -4px; + z-index: 2; + width: 6px; + height: 8px; + background: var(--global-bg); + transition: var(--t-duration) var(--t-type); +} + +.lower-line { + width: 50%; + height: 2px; + background: var(--global-s); + transition: var(--t-duration) var(--t-type) +} + +.lower-2 { + align-self: center; + transform: translateX(13px) translateY(-4px); + transition: .3s linear; +} + +.lower-2-lines { + width: 2px; + height: 40px; + background: linear-gradient(to bottom, + transparent, + transparent 20%, + var(--global-s) 20%, + var(--global-s) 80%, + transparent 80%); + background-repeat: repeat-y; + background-size: 2px 10px; + transition: var(--t-duration) var(--t-type); +} + +.lower-2-circle { + width: 3px; + height: 3px; + border: 2px solid var(--global-s); + border-radius: 10px; + transform: translateX(-2px) translateY(2px); + transition: var(--t-duration) var(--t-type) +} + +.lower-2-inner { + transform-origin: center top; + animation: swing 4s infinite alternate linear; +} + +@keyframes swing { + + 50% { + transform: rotate(-20deg) + } + + 100% { + transform: rotate(20deg) + } +} + +/* ABS-PROFILES */ +/* ======================================================= */ +.abs-profiles { + position: fixed; + right: calc(20px + .6vw); + bottom: calc(23px + .6vw); + filter: saturate(0) brightness(1); + opacity: .7; +} + +.abs-profiles a { + display: inline-block; + margin-left: 10px; } \ No newline at end of file