diff --git a/src/game.rs b/src/game.rs index 2bb5958..2f2533c 100644 --- a/src/game.rs +++ b/src/game.rs @@ -62,7 +62,7 @@ async fn index(State(backend): State>, cookies: CookieJar) -> Respo (rank.client.get_display_name()) @if rank.client == client { (PreEscaped("")) } } - span.font-headline.cam { (rank.amount) (PreEscaped(" ")) "📸" } + span.font-headline.font-lg { (rank.amount) (PreEscaped(" ")) "📸" } } } } diff --git a/src/index.rs b/src/index.rs index 947e271..e1fab34 100644 --- a/src/index.rs +++ b/src/index.rs @@ -29,7 +29,7 @@ pub(super) async fn index(cookies: CookieJar, headers: HeaderMap) -> Markup { blockquote { "Digital Shadows confronts visitors with their digital self – copied, measured, analyzed. An experiment on data power, visibility, and control in the digital age." footer { - cite { "— René Mayrhofer" } + cite { "— Digital Shadow Team" } } } p { @@ -37,72 +37,32 @@ pub(super) async fn index(cookies: CookieJar, headers: HeaderMap) -> Markup { } h2 { - mark { "TODO: Hier weitermachen" } + "What to do with this information?" } - h2 { "Features" } - h3 { "Sample Form" } - form { - fieldset { - label for="name" { - "Name" - input type="text" id="name" name="name" placeholder="Your name" required; - } - - label for="email" { - "Email" - input - type="email" - id="email" - name="email" - placeholder="your@email.com" - required; - } - - label for="message" { - "Message" - textarea - id="message" - name="message" - placeholder="Your message here..." - rows="4" {} - } + div.grid.gap-lg { + article { + header { + "Visit our booth" } - input type="submit" value="Send Message"; - } + "We will be delighted to see you at our booth in the Post City Linz, where our team will show you, what happens when your Digital Shadow becomes allmighty." - h3 { "Sample Grid" } - div.grid { - div { - article { - header { "Card 1" } - p { "This is the first card in a responsive grid layout." } - } + footer { + "Where: Postcity Linz" } - div { - article { - header { "Card 2" } - p { - "This is the second card. Pico CSS handles the responsive behavior automatically." - } - } + } + article { + header { + "Play our game" } - div { - article { - header { "Card 3" } - p { "Third card completes our example grid layout." } - } - } - } - h3 { "Sample Buttons" } - p { - button { "Primary Button" } - " " - button.secondary { "Secondary Button" } - " " - button.contrast { "Contrast Button" } + "Ever wandered through Linz with the aim to find (hidden) cameras? Well, if you are that kind of person than our 'Discover cameras' game will be ideal for you!" + + footer { + "Where: all over Linz" + } + } } }) } diff --git a/static/serve/style.css b/static/serve/style.css index bad01f2..7209bfe 100644 --- a/static/serve/style.css +++ b/static/serve/style.css @@ -10,10 +10,17 @@ --pico-font-family: 'Arial', sans-serif; --pico-form-element-spacing-vertical: .3rem; --pico-form-element-spacing-horizontal: .8rem; + --pico-box-shadow: unset; + --pico-card-sectioning-background-color: unset; +} + +h2 { + --pico-typography-spacing-top: 4rem; } h1 { font-family: 'Rubik Doodle Shadow', sans-serif; + text-transform: uppercase; font-size: clamp(3rem, 1.875rem + 2vw, 4.5rem); letter-spacing: 0.33rem; margin-top: clamp(3rem, 1.875rem + 2vw, 5rem); @@ -56,6 +63,7 @@ input[type="submit"]:active { .font-headline { font-family: 'Rubik Doodle Shadow', sans-serif; + text-transform: uppercase; } .rank { @@ -65,10 +73,16 @@ input[type="submit"]:active { letter-spacing: 0.33rem; } -.cam { +.font-lg { font-size: 1.3rem; } +@media (min-width: 768px) { + .gap-lg { + grid-gap: 5rem; + } +} + ul.iterated { padding-left: unset; } @@ -78,14 +92,24 @@ ul.iterated > li { display: flex; justify-content: space-between; align-items: flex-end; - border-bottom: 3px solid white; -} + border-bottom: 2px solid var(--pico-color); + border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; + position: relative; -:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] ul.iterated > li { - border-bottom: 3px solid black; + &::before { + content: ''; + border-bottom: 1px solid var(--pico-color); + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); + border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; + } } - /* Header */ #theme_switcher { width: 20px; @@ -102,3 +126,52 @@ header a { .easteregg { color: var(--pico-background-color); } + +blockquote { + text-align: center; + font-size: 1.3rem; + margin-top: 4rem; + margin-bottom: 4rem; + font-family: 'Courier New', monospace; + border: none; +} + +/** Style article*/ + +article { + display: inline-block; + border: 2px solid var(--pico-color); + border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; + position: relative; + padding: clamp(1rem, 1.875rem + 2vw, 3rem); + + &::before { + content: ''; + border: 1px solid var(--pico-color); + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); + border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; + } +} + +article>header { + font-family: 'Rubik Doodle Shadow', sans-serif; + text-transform: uppercase; + letter-spacing: 0.2rem; + color: var(--pico-primary); + font-size: 1.8rem; + text-align: center; + border: unset; + background-color: unset; +} + +article>footer { + font-family: 'Courier New', monospace; + border: unset; + background-color: unset; +} \ No newline at end of file