diff options
Diffstat (limited to 'src/styles/index.css')
| -rw-r--r-- | src/styles/index.css | 332 |
1 files changed, 332 insertions, 0 deletions
diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..3856449 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,332 @@ +:root { + --bg: transparent; + --color: black; + --link-color: darkviolet; + --image-border: rgba(0, 0, 0, 0.3); + --image-border-hover: rgba(0, 0, 0, 0.7); + --image-overlay: rgba(0, 0, 0, 0.7); + --theme-btn-bg: white; + --theme-btn-border: gray; + --theme-btn-color: black; + --input-focus-border: lightgray; + --action-button-border: #f0f0f0; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: rgba(13, 17, 23, 0.92); + --color: #e6edf3; + --link-color: #b083f0; + --image-border: rgba(255, 255, 255, 0.2); + --image-border-hover: rgba(255, 255, 255, 0.5); + --image-overlay: rgba(0, 0, 0, 0.85); + --theme-btn-bg: #21262d; + --theme-btn-border: #444c56; + --theme-btn-color: #e6edf3; + --input-focus-border: #586069; + --action-button-border: #30363d; + } +} + +[data-theme="dark"] { + --bg: rgba(13, 17, 23, 0.92); + --color: #e6edf3; + --link-color: #b083f0; + --image-border: rgba(255, 255, 255, 0.2); + --image-border-hover: rgba(255, 255, 255, 0.5); + --image-overlay: rgba(0, 0, 0, 0.85); + --theme-btn-bg: #21262d; + --theme-btn-border: #444c56; + --theme-btn-color: #e6edf3; + --input-focus-border: #586069; + --action-button-border: #30363d; +} + +body { + width: 50vw; + height: calc(100vh - 2rem); + font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 14px; + background-color: var(--bg); + color: var(--color); + padding: 0; + margin: auto; +} + +header { + width: 100%; +} + +header > h1 { + font-weight: bold; + font-size: 2rem; + padding-top: 1rem; + padding-bottom: 0.5rem; + margin: 0; +} + +header > nav { + margin-top: 1rem; + margin-bottom: 1rem; + padding-left: 0.25rem; +} + +header > nav > ul { + display: flex; + flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; + gap: 1rem; +} + +header > nav > ul > li { + display: flex; + align-items: center; +} + +header > nav > ul a { + text-decoration: none; + color: var(--link-color); + font-size: 1rem; + border-bottom: 1px solid transparent; +} + +header > nav > ul a:hover { + opacity: 0.8; + text-decoration: underline; +} + +h1 { + font-size: 2.5rem; +} + +h2 { + font-size: 1.5rem; + margin-bottom: 0rem; + margin-top: 2rem; +} + +section { + width: 100%; +} + +p { + text-align: left; +} + +a { + color: var(--link-color); +} + +a:hover { + opacity: 0.7; +} + +/* Theme toggle button */ +#theme-toggle { + background: none; + border: 1px solid var(--theme-btn-border); + color: var(--link-color); + border-radius: 3px; + padding: 0.1rem 0.5rem; + cursor: pointer; + font-size: 0.85rem; + font-family: inherit; +} + +#theme-toggle:hover { + opacity: 0.8; +} + +/* Image styling */ +#image_container { + display: flex; + flex-direction: row; + transition: transform 100ms ease-in-out; + flex: 0 1 auto; + width: 100%; + overflow: auto; +} + +#image_container .image_item { + width: 240px; + transition: opacity 100ms ease-in-out; + padding: 0; + margin: 0; + padding-right: 12px; + cursor: pointer; + position: relative; +} + +#image_container .image_item:hover > img { + border: 2px solid var(--image-border-hover); +} + +.image_item > figcaption { + font-size: 10px; + font-style: italic; +} + +.image_item > img { + width: inherit; + border-radius: 3px; + border: 2px solid var(--image-border); +} + +.image_item_expanded_container { + position: fixed; + width: 100vw; + height: 100vh; + background-color: var(--image-overlay); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.image_item_expanded_container > .image_item { + width: 35vw; + opacity: 1.0 !important; +} + +input { + outline: none; + border: 1px solid transparent; + border-radius: 2px; + font-size: 1rem; + padding: 0.5rem; +} + +input:focus { + border: 1px solid var(--input-focus-border); +} + +.action_button { + border: 1px solid var(--action-button-border); + border-radius: 2px; + width: 108px; + height: 2rem; +} + +.action_button:hover { + cursor: pointer; + opacity: 0.9; +} + +/* Theme display */ +#theme_container { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: transparent; + z-index: -1; +} + +#theme_canvas { + width: 100%; + height: 100%; + z-index: -1; +} + +/* Theme Selector */ +#theme_section { + position: fixed; + bottom: 1rem; + left: 0; + width: 100%; + text-align: center; +} + +#theme_selector { + display: flex; + align-items: center; + justify-content: center; + bottom: 1rem; + pointer-events: all; + opacity: 1; + transition: opacity 150ms linear; + gap: 2rem; +} + +#theme_selector.hidden { + pointer-events: none; + opacity: 0; +} + +#theme_selector > button { + width: 6rem; + height: 2rem; + border-radius: 3px; + border: 1px solid var(--theme-btn-border); + color: var(--theme-btn-color); + background-color: var(--theme-btn-bg); + cursor: pointer; + transition: opacity 100ms linear; +} + +#theme_selector > button:hover { + opacity: 0.8; +} + +#theme_selector > #theme_button_default { +} + +#theme_selector > #theme_button_autumn { + background-color: orange; +} + +#theme_selector > #theme_button_winter { + background-color: #79C0D7; +} + +#theme_selector > #theme_button_spring { + background-color: #00FF7F; +} + +#theme_selector > #theme_button_summer { + background-color: yellow; +} + +.theme_button_text { + margin-left: 0.5rem; +} + +/* Phone screen adjustments */ +@media only screen and (device-width: 1280px), +only screen and (max-width:1280px) { + header > h1 { + font-size: 1.5rem; + } + + body { + width: 80vw !important; + } +} + +@media only screen and (device-width: 960px), +only screen and (max-width:960px) { + #theme_selector { + margin-left: 1rem; + margin-right: 1rem; + } + .theme_button_text { + display: none; + } + + #theme_selector > button { + width: 100%; + } + + .image_item_expanded_container > .image_item { + width: 80vw; + } + + #carousel > button { + font-size: 6rem; + top: calc(50% - 4rem); + } +} |