-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
412 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <dialog id="info"> | ||
| <div class="dialog-header"> | ||
| <h1>About {{ site.title }}</h1> | ||
|
|
||
| <button | ||
| autofocus | ||
| onclick="document.getElementById('info').close()" | ||
| title="Close" | ||
| > | ||
| <svg alt="Close" loading="lazy" aria-hidden="true"> | ||
| <use xlink:href="/assets/symbols.svg#close"></use> | ||
| </svg> | ||
| <span class="visually-hidden">Close</span> | ||
| </button> | ||
| </div> | ||
| <p>Who we are. How to contribute. Cori is a bitch.</p> | ||
| </dialog> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <footer> | ||
| <ul> | ||
| <li>© {{site.time | date: "%Y" }} {{ site.title }}</li> | ||
| <li> | ||
| <a href="mailto:[email protected]">Contact us</a> | ||
| </li> | ||
| </ul> | ||
| <p>Website designed by <a href="https://JonGraft.design">Jon Graft</a></p> | ||
| </footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,17 +5,34 @@ | |
| <script src="https://unpkg.com/[email protected]/dist/color.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="banner">{% include globe.html %}</div> | ||
| {% include header.html %} | ||
|
|
||
| <div class="banner" data-variant="events" id="top"> | ||
| {% include banner-events.html %} | ||
| </div> | ||
|
|
||
| <div class="page-title"> | ||
| <h1>Events</h1> | ||
|
|
||
| <nav> | ||
| <button>North America</button> | ||
| <button>South America</button> | ||
| <button>Europe</button> | ||
| <button>Asia</button> | ||
| </nav> | ||
| <div> | ||
| <label for="pet-select">Location</label> | ||
| <select name="pets" id="pet-select"> | ||
| <option value="all" selected>All</option> | ||
| <option value="north-america">North America</option> | ||
| <option value="south-america">South America</option> | ||
| <option value="europe">Europe</option> | ||
| <option value="asia">Asia</option> | ||
| </select> | ||
|
|
||
| <label for="pet-select">Genre</label> | ||
| <select name="pets" id="pet-select"> | ||
| <option value="all" selected>All</option> | ||
| <option value="north-america">Multigenre</option> | ||
| <option value="south-america">Hardstyle</option> | ||
| <option value="europe">Hardcore</option> | ||
| <option value="asia">Uptempo</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ol class="event-list"> | ||
|
|
@@ -74,6 +91,8 @@ <h1>Events</h1> | |
| {% endfor %} | ||
| </ol> | ||
|
|
||
| {% include footer.html %} {% include dialog.html %} | ||
|
|
||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| // Select all images | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| .banner { | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| background-size: cover; | ||
|
|
||
| &[data-variant="events"] { | ||
| position: relative; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| } | ||
|
|
||
| // #region Events | ||
| .banner-events-logo { | ||
| fill: var(--color-text); | ||
| width: 42.5%; | ||
| } | ||
|
|
||
| .banner-events-globe { | ||
| width: 15%; | ||
| aspect-ratio: 1/1; | ||
| position: relative; | ||
|
|
||
| > canvas { | ||
| border-radius: 50%; | ||
| width: 120%; | ||
| aspect-ratio: 1/1; | ||
| contain: layout paint size; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| &::before, | ||
| &::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| // Shadow | ||
| &::before { | ||
| width: 200%; | ||
| height: 200%; | ||
| background: radial-gradient(circle at center, black 30%, transparent 70%); | ||
| } | ||
|
|
||
| // Pulse | ||
| &::after { | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: -1; | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| animation: pulse 1.6s infinite; | ||
| } | ||
| @media (prefers-reduced-motion: no-preference) { | ||
| @keyframes pulse { | ||
| 0% { | ||
| box-shadow: 0 0 0 0 white; | ||
| } | ||
|
|
||
| 70% { | ||
| box-shadow: 0 0 0 6vh rgba(0, 0, 0, 0); | ||
| } | ||
|
|
||
| 100% { | ||
| box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @function multiple-box-shadow($n) { | ||
| $value: "#{random(2000)}px #{random(2000)}px #FFF"; | ||
| @for $i from 2 through $n { | ||
| $value: "#{$value}, #{random(2000)}px #{random(2000)}px #FFF"; | ||
| } | ||
| @return unquote($value); | ||
| } | ||
|
|
||
| $shadows-small: multiple-box-shadow(700); | ||
| $shadows-medium: multiple-box-shadow(200); | ||
| $shadows-big: multiple-box-shadow(100); | ||
|
|
||
| .banner-events-stars { | ||
| width: 1px; | ||
| height: 1px; | ||
| background: transparent; | ||
| animation: animStar 50s linear infinite; | ||
| position: absolute; | ||
| inset: 0; | ||
|
|
||
| &:after { | ||
| content: " "; | ||
| position: absolute; | ||
| top: 2000px; | ||
| width: 1px; | ||
| height: 1px; | ||
| background: transparent; | ||
| } | ||
|
|
||
| &[data-variant="1"] { | ||
| box-shadow: $shadows-small; | ||
|
|
||
| &:after { | ||
| box-shadow: $shadows-small; | ||
| } | ||
| } | ||
|
|
||
| &[data-variant="2"] { | ||
| width: 2px; | ||
| height: 2px; | ||
| box-shadow: $shadows-medium; | ||
| animation-duration: 100s; | ||
|
|
||
| &:after { | ||
| width: 2px; | ||
| height: 2px; | ||
| box-shadow: $shadows-medium; | ||
| } | ||
| } | ||
|
|
||
| &[data-variant="3"] { | ||
| width: 3px; | ||
| height: 3px; | ||
| box-shadow: $shadows-big; | ||
| animation-duration: 150s; | ||
|
|
||
| &:after { | ||
| width: 3px; | ||
| height: 3px; | ||
| box-shadow: $shadows-big; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @keyframes animStar { | ||
| from { | ||
| transform: translateY(0px); | ||
| } | ||
| to { | ||
| transform: translateY(-2000px); | ||
| } | ||
| } | ||
| // #endregion Events |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| dialog { | ||
| display: block; | ||
| position: fixed; | ||
| inset: 0; | ||
| min-height: 100vh; | ||
| min-height: 100dvh; | ||
| max-height: 100vh; | ||
| max-height: 100dvh; | ||
| min-width: 100vw; | ||
| min-width: 100dvw; | ||
| max-width: 100vw; | ||
| max-width: 100dvw; | ||
| border: none; | ||
| overscroll-behavior: none; | ||
| background-color: var(--color-background-backdrop); | ||
| z-index: 3; | ||
| transform: scale(1); | ||
| transition: opacity var(--duration) ease-out, | ||
| transform var(--duration) ease-out; | ||
|
|
||
| &:not([open]) { | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| transform: scale(0.85); | ||
| transition-timing-function: ease-in; | ||
| } | ||
| } | ||
|
|
||
| .dialog-header { | ||
| background-color: red !important; | ||
| padding-left: env(safe-area-inset-left); | ||
| padding-right: env(safe-area-inset-right); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| height: var(--header-height); | ||
| position: sticky; | ||
| inset: 0 0 auto 0; | ||
| background-color: var(--color-background); | ||
| @supports (backdrop-filter: saturate(180%) blur(20px)) { | ||
| background-color: hsl(var(--color-background-hsl) / 0.8); | ||
| backdrop-filter: saturate(180%) blur(20px); | ||
| } | ||
| @media (forced-colors: active) { | ||
| background-color: var(--color-background); | ||
| backdrop-filter: none; | ||
| } | ||
|
|
||
| svg { | ||
| width: 50%; | ||
| height: 50%; | ||
| fill: currentColor; | ||
| @media (forced-colors: active) { | ||
| fill: LinkText; | ||
| } | ||
| } | ||
|
|
||
| > button, | ||
| > a { | ||
| aspect-ratio: 1/1; | ||
| background-color: transparent; | ||
| border: none; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| outline-offset: calc(var(--border-width) * -2); | ||
|
|
||
| &:hover { | ||
| background-color: var(--color-background-hover); | ||
| } | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.