diff --git a/style.css b/style.css index d1f2e6b..bf7b53b 100644 --- a/style.css +++ b/style.css @@ -1,255 +1,258 @@ :root { - --background-light: #f9f9f9; - --text-primary-light: #222222; - --text-secondary-light: #4a4a4a; - --accent-light: #007aff; - --border-light: #e0e0e0; - --shadow-light: rgba(0, 0, 0, 0.1); + --background-light: #f9f9f9; + --text-primary-light: #222222; + --text-secondary-light: #4a4a4a; + --accent-light: #007aff; + --border-light: #e0e0e0; + --shadow-light: rgba(0, 0, 0, 0.1); - --background-dark: #1a1a1a; - --text-primary-dark: #f5f5f5; - --text-secondary-dark: #cccccc; - --accent-dark: #00bfff; - --border-dark: #333333; - --shadow-dark: rgba(255, 255, 255, 0.1); + --background-dark: #1a1a1a; + --text-primary-dark: #f5f5f5; + --text-secondary-dark: #cccccc; + --accent-dark: #00bfff; + --border-dark: #333333; + --shadow-dark: rgba(255, 255, 255, 0.1); - --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster, - Comic Sans MS, comic-sans, sans-serif; + --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster, Comic Sans MS, comic-sans, sans-serif; +} + +html { + overscroll-behavior: none; } h1 { - font-size: 3rem; + font-size: 3rem; } a { - color: unset; + color: unset; } /* Light Theme */ body { - background-color: var(--background-light); - color: var(--text-primary-light); - font-family: var(--font-stack); + background-color: var(--background-light); + color: var(--text-primary-light); + font-family: var(--font-stack); } body a:hover { - color: var(--accent-light); + color: var(--accent-light); } button { - /* Remove all default styling */ - background: none; - border: none; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - cursor: pointer; - outline: none; + /* Remove all default styling */ + background: none; + border: none; + padding: 0; + margin: 0; + font: inherit; + color: inherit; + cursor: pointer; + outline: none; - /* Fix for odd text sizing in some browsers */ - line-height: normal; + /* Fix for odd text sizing in some browsers */ + line-height: normal; - /* Prevent text selection */ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + /* Prevent text selection */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; - /* Remove default focus styles */ - -webkit-tap-highlight-color: transparent; + /* Remove default focus styles */ + -webkit-tap-highlight-color: transparent; } button:focus-visible { - outline: 2px solid #4d90fe; - outline-offset: 2px; + outline: 2px solid #4d90fe; + outline-offset: 2px; } button::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } body button { - background: none; - color: unset; + background: none; + color: unset; } body button:hover { - color: var(--accent-light); + color: var(--accent-light); } body .secondary-text { - color: var(--text-secondary-light); + color: var(--text-secondary-light); } body .border { - border-color: var(--border-light); + border-color: var(--border-light); } body .shadow { - box-shadow: 0 2px 4px var(--shadow-light); + box-shadow: 0 2px 4px var(--shadow-light); } svg.logo { - height: 60vh; - width: 60vh; - margin-bottom: -10vh; - margin-top: -10vh; + height: 60vh; + width: 60vh; + margin-bottom: -10vh; + margin-top: -10vh; } html { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } body { - overflow-x: hidden; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - height: 100%; - width: 100%; - margin: auto; - text-align: center; + overflow-x: hidden; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100%; + width: 100%; + margin: auto; + text-align: center; } .links { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin-top: 1.25rem; - gap: 2rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin-top: 1.25rem; + gap: 2rem; } .links svg { - height: 2.5rem; - width: 2.5rem; - vertical-align: middle; + height: 2.5rem; + width: 2.5rem; + vertical-align: middle; } body a[title="bluesky"]:hover { - color: #0085FF; + color: #0085ff; } body a.semble-link:hover { - color: #FF6400; + color: #ff6400; } .semble-link svg { - width: auto; + width: auto; } .leaflet-link svg { - width: auto; + width: auto; } body a.leaflet-link:hover { - color: #639431; + color: #639431; } @media (prefers-color-scheme: dark) { - body { - background-color: var(--background-dark); - color: var(--text-primary-dark); - font-family: var(--font-stack); - } + body { + background-color: var(--background-dark); + color: var(--text-primary-dark); + font-family: var(--font-stack); + } - body a:hover { - color: var(--accent-dark); - } + body a:hover { + color: var(--accent-dark); + } - body .secondary-text { - color: var(--text-secondary-dark); - } + body .secondary-text { + color: var(--text-secondary-dark); + } - body .border { - border-color: var(--border-dark); - } + body .border { + border-color: var(--border-dark); + } - body .shadow { - box-shadow: 0 2px 4px var(--shadow-dark); - } + body .shadow { + box-shadow: 0 2px 4px var(--shadow-dark); + } - body a[title="bluesky"]:hover { - color: #0085FF; - } + body a[title="bluesky"]:hover { + color: #0085ff; + } - body a.semble-link:hover { - color: #FF6400; - } + body a.semble-link:hover { + color: #ff6400; + } - body a.leaflet-link:hover { - color: #639431; - } + body a.leaflet-link:hover { + color: #639431; + } - .leaflet-inner { - fill: var(--background-dark); - } + .leaflet-inner { + fill: var(--background-dark); + } } .bluesky-flutter { - display: flex; - gap: 0.5em; - align-items: center; + display: flex; + gap: 0.5em; + align-items: center; } .bluesky-flutter svg { - width: 2em; - height: 2em; - transition: 200ms; + width: 2em; + height: 2em; + transition: 200ms; } .bluesky-flutter .left { - transform-origin: center; + transform-origin: center; } .bluesky-flutter .right { - transform-origin: center; - transform: scale(-1, 1); + transform-origin: center; + transform: scale(-1, 1); } .bluesky-flutter:hover .left, .bluesky-flutter:focus .left { - animation: flutter 430ms ease-in-out; - --flip: 1; + animation: flutter 430ms ease-in-out; + --flip: 1; } .bluesky-flutter:hover .right, .bluesky-flutter:focus .right { - animation: flutter 500ms ease-in-out; - --flip: -1; + animation: flutter 500ms ease-in-out; + --flip: -1; } .bluesky-flutter:hover svg, .bluesky-flutter:focus svg { - transform: rotate(-5deg); - transition: 500ms; + transform: rotate(-5deg); + transition: 500ms; } @media (prefers-reduced-motion) { - .bluesky-flutter:hover .left, - .bluesky-flutter:focus .left, - .bluesky-flutter:hover .right, - .bluesky-flutter:focus .right { - animation: none; - } + .bluesky-flutter:hover .left, + .bluesky-flutter:focus .left, + .bluesky-flutter:hover .right, + .bluesky-flutter:focus .right { + animation: none; + } } @keyframes flutter { - 10% { - transform: scale(calc(var(--flip) * 1), 0.9); - } - 20% { - transform: scale(calc(var(--flip) * 0.5), 1); - } - 40% { - transform: scale(calc(var(--flip) * 0.9), 0.95); - } - 60% { - transform: scale(calc(var(--flip) * 0.3), 1); - } - 80% { - transform: scale(calc(var(--flip) * 0.9), 0.95); - } - 100% { - transform: scale(calc(var(--flip) * 1), 1); - } + 10% { + transform: scale(calc(var(--flip) * 1), 0.9); + } + 20% { + transform: scale(calc(var(--flip) * 0.5), 1); + } + 40% { + transform: scale(calc(var(--flip) * 0.9), 0.95); + } + 60% { + transform: scale(calc(var(--flip) * 0.3), 1); + } + 80% { + transform: scale(calc(var(--flip) * 0.9), 0.95); + } + 100% { + transform: scale(calc(var(--flip) * 1), 1); + } }