diff options
Diffstat (limited to 'public/index.css')
| -rw-r--r-- | public/index.css | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/public/index.css b/public/index.css new file mode 100644 index 0000000..4800826 --- /dev/null +++ b/public/index.css @@ -0,0 +1,255 @@ +body { + width: 50vw; + font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 14px; + background-color: transparent; + color: black; + 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: 2rem; + margin-bottom: 1rem; + padding-left: 0.25rem; +} + +header > nav > ul { + display: flex; + flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; +} + +header > nav > ul > li { + padding-right: 1rem; +} + +header > nav > ul a { + text-decoration: none; + color: blue; + font-size: 1rem; + border-bottom: 1px solid transparent; +} + +header > nav > ul a:hover { + opacity: 0.7; + 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: darkviolet; +} + +a:hover { + opacity: 0.7; +} + +/* 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 rgba(0, 0, 0, 0.7); +} + +.image_item > figcaption { + font-size: 10px; + font-style: italic; +} + +.image_item > img { + width: inherit; + border-radius: 3px; + border: 2px solid rgba(0, 0, 0, 0.3); +} + +.image_item_expanded_container { + position: fixed; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + 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 lightgray; +} + +.action_button { + border: 1px solid #f0f0f0; + 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_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 black; + color: black; + background-color: white; + 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; +} + +/* Phone screen adjustments */ +@media only screen and (device-width: 1440px), +only screen and (max-width:1440px) { + header > h1 { + font-size: 1.5rem; + } + + body { + width: 70vw !important; + } +} + +@media only screen and (device-width: 960px), +only screen and (max-width:960px) { + #theme_selector { + padding-bottom: 2rem !important; + flex-direction: column; + gap: 1rem; + } + + #theme_selector > button { + width: 100%; + } + + .image_item_expanded_container > .image_item { + width: 80vw; + } + + #carousel > button { + font-size: 6rem; + top: calc(50% - 4rem); + } +} |