From e46cb88d3763a64e97557b2db2f9b74ae7627555 Mon Sep 17 00:00:00 2001 From: axtloss Date: Tue, 24 Dec 2024 19:25:48 +0100 Subject: new website dropped --- style.css | 379 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 379 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..84735c5 --- /dev/null +++ b/style.css @@ -0,0 +1,379 @@ +body, h1, h2, h3, p, ul, li, a, div { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #505170; + color: #EEE; + margin: 0; + padding: 0; + display: flex; + height: 100vh; + overflow: hidden; + position: relative; + user-select: none; +} +.dock { + position: absolute; + right: 0; + top: 0; + width: 100px; + height: 100%; + background-color: #505170; + display: flex; + flex-direction: column; + align-items: center; +} + +.dock .dockelement { + border-top: 4px solid #fff; + border-left: 4px solid #fff; + border-right: 4px solid #000; + border-bottom: 4px solid #000; + background: linear-gradient(135deg, #BBBBC3, #565560); + text-align: center; + width: 100%; +} + +.dock a { + height: 100px; + display: block; + color: #EEE; + text-decoration: none; + font-size: 14px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +.dock img { + width: 80px; + height: 80px; +} + +.embedded { + position: absolute; + width: 80px; + height: 80px; + box-shadow: inset 2px 2px black, inset -2px -2px #cfcfcf; +} + +.bottom-bar-wrapper { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 88px; + overflow-x: scroll; +} + + +.bottom-bar { + background-color: #505170; + display: flex; + height: 88px; + width: 1000px; + justify-content: left; + align-items: left; + z-index: 100; +} + +.bottom-bar a { + border-top: 4px solid #fff; + border-left: 4px solid #fff; + border-right: 4px solid #000; + border-bottom: 4px solid #000; + width: 100px; + height: 100%; + display: block; + background: linear-gradient(135deg, #BBBBC3, #565560); + text-align: center; + color: #EEE; + text-decoration: none; + font-size: 14px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +.bottom-bar a img { + width: 88px; + height: 31px; +} + +.bottom-bar a .square { + width: 95%; + height: 95%; +} + +.bottom-bar a:hover { + background-color: #666; +} + +.menu { + position: absolute; + top: 0; + width: 160px; + background-color: #A0A0A0; + border: 2px solid #000; + color: black; + font-size: 14px; +} + +.menu.left { + left: 0; +} + +.menu li label { + border-top: 2px solid #fff; + border-left: 2px solid #fff; + border-right: 2px solid #000; + border-bottom: 2px solid #000; + list-style: none; + padding: 5px 15px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.menu li:first-child label { + background-color: black; + color: white; + border-top: 2px solid #fff; + border-left: 2px solid #fff; + border-right: 2px solid #4C4D50; + border-bottom: 2px solid #4C4D50; +} + +.menu li:not(:first-child) label:hover { + background-color: #CFCFCF; +} + +.menu li .key { + color: black; +} + +.menu li label.ripple-effect { + animation: ripple 0.5s steps(1, start); + animation-iteration-count: 1; +} + +@keyframes ripple { + 0% { + background-color: #A0A0A0; + } + 20% { + background-color: #CFCFCF; + } + 40% { + background-color: #A0A0A0; + } + 60% { + background-color: #CFCFCF; + } + 80% { + background-color: #A0A0A0; + } + 100% { + background-color: #CFCFCF; + } +} + + +.window { + position: absolute; + background-color: #A0A0A0; + border: 2px solid #000; + width: 70%; + height: 60%; + display: flex; + flex-direction: column; + top: 50%; + left: 40%; + transform: translate(-50%, -50%); +} + + +.window#home-window { + width: 60%; + height: 70%; +} + +.window#projects-window { + width: 70%; + height: 60%; +} + +@media screen and (min-width: 724px) { + .window { + top: 50%; + left: 50%; + } + + + .window#home-window { + width: 40%; + height: 65%; + } + + .window#projects-window { + width: 40%; + height: 60%; + } +} + + + +.window .title-bar { + background-color: #222; + border-top: 2px solid #fff; + border-left: 2px solid #fff; + border-right: 2px solid #4C4D50; + border-bottom: 2px solid #4C4D50; + padding: 5px 10px; + color: #EEE; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 2px solid #000; + cursor: grab; +} + +.window .title-bar .controls { + position: absolute; + right: 10px; + display: flex; + gap: 5px; +} + +.window .title-bar .controls span { + border-top: 2px solid #fff; + border-left: 2px solid #fff; + border-right: 2px solid #000; + border-bottom: 2px solid #000; + width: 20px; + height: 20px; + display: block; + background-color: #A0A0A0; + cursor: default; + justify-content: center; + align-items: center; +} + +.window .title-bar .controls span:hover { + background-color: #999; +} + +.window .content { + flex: 1; + flex-direction: column; + margin: 10px; + padding: 10px; + overflow-y: auto; + height: 100%; + background-color: white; + color: black; + box-shadow: inset 2px 2px black, inset -2px -2px #cfcfcf; + justify-content: space-between; + user-select: text; +} + +.window .content img { + max-width: 400px; +} + +.workspace { + position: relative; + flex: 1; + padding: 10px; +} + +#home, #home-menu, #home-window, +#projects, #projects-menu, #projects-window { + display: none; +} + +#home-content-info, #home-content-contact, +#projects-content-personal, #projects-content-shards, +#projects-content-crystal, #projects-content-vanillaos { + display: none; +} + +#home:checked ~ #home-window, +#projects:checked ~ #projects-window { + display: flex; +} + +#home:checked ~ #home-menu, +#projects:checked ~ #projects-menu { + display: block; +} + +#home-info:checked ~ .window #home-content-info, +#home-contact:checked ~ .window #home-content-contact { + display: flex; +} + +#projects-personal:checked ~ .window #projects-content-personal, +#projects-shards:checked ~ .window #projects-content-shards, +#projects-crystal:checked ~ .window #projects-content-crystal, +#projects-vanillaos:checked ~ .window #projects-content-vanillaos { + display: flex; +} + +.radio { + display:none; +} + +.clock { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-image: url("clockback.png"); + background-size: cover; + width: 100%; + height: 100px; + overflow: show; + gap: 1px; +} + +.time { + font-size: 18px; + font-style: italic; + font-family: monospace; + color: #32D059; + margin-bottom: 12px; +} + +.cal { + width: 80px; + gap: 0px; +} + +.day { + color: black; + font-size: 10px; + margin-bottom: 7px; +} + +.date { + color: black; + font-size: 25px; + margin-top: -8px; +} + +.month { + color: black; + font-style: italic; + font-size: 10px; + margin-top: -5px; + margin-bottom: 7px; + transform: translateX(-3px); +} -- cgit v1.2.3