diff --git a/public/assets/eventSlug/flare.svg b/public/assets/eventSlug/flare.svg new file mode 100644 index 00000000..e7cf699b --- /dev/null +++ b/public/assets/eventSlug/flare.svg @@ -0,0 +1,432 @@ + + 28159249_lens_flares_003-ai + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/eventSlug/flare.webp b/public/assets/eventSlug/flare.webp new file mode 100644 index 00000000..c971d43e Binary files /dev/null and b/public/assets/eventSlug/flare.webp differ diff --git a/src/pages/event/[slug].tsx b/src/pages/event/[slug].tsx index cea40577..31f2bcb4 100644 --- a/src/pages/event/[slug].tsx +++ b/src/pages/event/[slug].tsx @@ -6,6 +6,7 @@ import { PublishedEventsSlugDocument, } from "@/src/generated/generated"; import { client } from "@/src/lib/apollo"; +import styles from "./eventSlug.module.css"; import Image from "next/image"; import Link from "next/link"; @@ -75,151 +76,80 @@ function event({ event, error }: { event: Event; error: String }) { }; return ( - //
- //
- //
-
- {/* bg */} +
+ events-bg +
{event ? ( - //
- //
- //
-
- - {/*
*/} - {/*
*/} -
-
-
-
- {/*
*/} - {/*
*/} -
+
+
+
+
+
+
{event.image && ( {event.name} )}

{event.name}

-
+
-
-
- {/*
*/} -
- {/*
-

Details

-
- {getEventAttributes().map((attr) => - attr.text ? ( -
- {} -

- {attr.name} {': '} -

-

{attr.text}

-
- ) : ( - <> - ) - )} -
-
-
- {event.rounds.map((round) => ( -
-
- Round {round.roundNo} -
-
-

- - {round.date && - new Date(round.date).toLocaleDateString("en-IN", { - day: "numeric", - month: "short", - })} -

-

- - {round.date && - new Date(round.date).toLocaleTimeString('en-IN', { - hour: 'numeric', - minute: 'numeric', - hour12: true, - })} -

-
-
- ))} -
-
-
- {event.name.toLowerCase() !== 'lazzerena' ? :
- On-spot registrations only -
} -
*/} -
-
-
-
+
+
+
+
+
+

Details

-
+
{getEventAttributes().map((attr) => attr.text ? (
{}

{attr.name} {": "}

-

{attr.text}

+

{attr.text}

) : ( <> ) )}
-
-
+
+
{event.rounds.map((round) => (
-
+
Round {round.roundNo}
-
-

+

+

{round.date && new Date(round.date).toLocaleDateString( @@ -230,7 +160,7 @@ function event({ event, error }: { event: Event; error: String }) { } )}

-

+

{round.date && new Date(round.date).toLocaleTimeString( @@ -248,7 +178,7 @@ function event({ event, error }: { event: Event; error: String }) {

-
+
{event.name.toLowerCase() !== "lazzerena" ? ( ) : ( -
+
On-spot registrations only
)}
-
-
-
-
-

Organizers

-
+
+
+
+
+

+ Organizers +

+
{event.organizers.map((organizer) => (
-

+

{organizer.user.name}

-
+
{organizer.user.email && ( - {" "} + {" "} {organizer.user.email} )} {organizer.user.phoneNumber && ( - {" "} + {" "} {organizer.user.phoneNumber} )} @@ -304,7 +235,7 @@ function event({ event, error }: { event: Event; error: String }) {
- + - - {/*
-

Organizers

-
- {event.organizers.map((organizer) => ( -
-

- {organizer.user.name} -

-
- {organizer.user.email && ( - - {' '} - {organizer.user.email} - - )} - {organizer.user.phoneNumber && ( - - {' '} - {organizer.user.phoneNumber} - - )} -
-
- ))} -
-
*/}
) : ( -
-

Oops!

-
+
+

Oops!

+

Looks like you've wandered too deep and gotten lost!

Click{" "} - + here {" "} to head back to the events page

-

+

Error message: {error}

diff --git a/src/pages/event/eventSlug.module.css b/src/pages/event/eventSlug.module.css new file mode 100644 index 00000000..27f86b46 --- /dev/null +++ b/src/pages/event/eventSlug.module.css @@ -0,0 +1,166 @@ +.main { + position: relative; + width: 100%; + height: auto; +} + +/* WARNING ! This solution seems to not work on all navigators. + This problem was reported to me on : + https://stackoverflow.com/questions/14585101/old-paper-background-texture-with-just-css/ + + August 2021 : ok on Chrome v92+, Firefox v90+, Edge v92+ + */ + +.parchment { + position: absolute; + /* display: flex; */ + width: 100%; + height: 100%; + /* center page with absolute position */ + top: 0%; + left: 50%; + transform: translate(-50.5%, 0); + /* margin: 2em 0; */ + padding: 4em; + /* box-shadow: 2px 3px 20px black, 0 0 125px #8f5922 inset; */ + box-shadow: 1px 1px 5px black, 0 0 125px #8f5922 inset; + background: #fffef0; + /* v2.1 : borders effect with SVG : try to play with scale to change them */ + filter: url(#wavy2); + /* v2.2 : Noise added for a vellum paper effect */ + background-image: url(data:image/png;base64,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); +} + +/* main p { + font-size: 2.25em; + color: #7F3300; + margin-top: .75em; + text-align: justify; + } */ + +/* div p:not(:first-child)::first-letter { + float: left; + /* font: 1.7em/1em Morris; + text-shadow: 1px 1px 1px #000; + margin: 0 .5rem; + } */ + +.contain { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: auto; + height: auto; + margin: 0 auto; + padding: 2em; +} + +.mapicon::before { + content: ""; + background-image: url('/assets/eventSlug/map.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + opacity: 0.3; +} + +/* .inkTitle { + font-size: 3em; + font-family: Pirata One, sans-serif; + text-align: center; + line-height: 3em; + color: black; + opacity: 0.6; + } */ + +/* #labarum { + width: 20%; + margin-left: calc((100% - 20%) / 2); + height: auto; + } */ + +/* .cachet { + /* image width = 210px and height = 250px + /* 5 is one common denominator 210 = 5 * 42 + width: calc((100vw * 5) / 42); + height: auto; /* Height is auto ajusted + margin-top: 4rem; + margin-left: auto; + } */ + +/* #labarum img, .cachet img { + object-fit: cover; + width: 100%; + height: 100%; + } */ + +/* #signature { + text-align: right; + color: black; + font-size: 250%; + } */ + + +.bg { + /* top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + position: absolute; */ + background: radial-gradient(ellipse at center, #f3e2c7 50%, #c19e67 85%, #6c1b00 93%, #000000 100%); + box-shadow: inset 0 0 20px 2px black; + /* width: 100%; */ + /* height: 100%; */ + /* filter: blur(1px) brightness(110%) contrast(150%); */ + /* filter: blur(1px) brightness(110%) contrast(100%); */ + filter: brightness(100%) contrast(100%); + /* opacity: .7; */ + /* vertical-align: central; */ + /* text-align: center; */ +} + +.bg:before { + /* font-family: Arial; */ + /* font-size: 30px; */ + position: absolute; + /* color: black; */ + /* content: '*'; */ + /* text-align: left; */ + vertical-align: top; + /* width: 100%; + height: 100%; */ + left: 0px; + top: 0px; + /* opacity: .15; */ + filter: blur(3px); + border: solid 1px black; + box-sizing: border-box; +} + +.bg:after { + /* font-family: Arial; */ + /* font-size: 8px; */ + position: absolute; + /* text-align: left; */ + vertical-align: top; + /* color: black; */ + content: '+'; + position: absolute; + /* width: 100%; + height: 100%; */ + left: 0px; + top: 0px; + opacity: .1; + filter: blur(0px); + box-shadow: inset 0 0 20px 10px black; +} + +.masker { + mask: url(https://static.rfstat.com/renderforest/images/website_maker_images/components/component-images/text14-3.4.0.svg) -2px top / auto 100% repeat-x; +} \ No newline at end of file diff --git a/src/pages/event/old.tsx b/src/pages/event/old.tsx index c3f71ae8..90c87787 100644 --- a/src/pages/event/old.tsx +++ b/src/pages/event/old.tsx @@ -78,41 +78,59 @@ function event({ event, error }: { event: Event; error: String }) { //
//
//
-
- {/* bg */} +
+ events-bg +
+ {/*
*/} + + {/*
*/} + {/* bg */} {event ? ( //
-
+ //
+ //
+
+ {/*
*/} {/*
*/} -
-
-
- {/*
*/} -
- {event.image && ( - {event.name} - )} -

- {event.name} -

-
- +
+
+
+
+ {/*
*/} + {/*
*/} +
+ {event.image && ( + {event.name} + )} +

+ {event.name} +

+
+ +
-
-
+
+
{/*
*/} -
+
{/*

Details

@@ -177,7 +195,7 @@ function event({ event, error }: { event: Event; error: String }) {
}
*/}
-
+

Details

@@ -258,7 +276,7 @@ function event({ event, error }: { event: Event; error: String }) {
-
+

Organizers

diff --git a/src/styles/globals.css b/src/styles/globals.css index 0b72d241..5d0ea533 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -228,172 +228,6 @@ @apply p-4 md:p-12; } - -.main { - position: relative; - width: 100%; - height: auto; -} - -/* WARNING ! This solution seems to not work on all navigators. -This problem was reported to me on : -https://stackoverflow.com/questions/14585101/old-paper-background-texture-with-just-css/ - -August 2021 : ok on Chrome v92+, Firefox v90+, Edge v92+ -*/ - -.parchment { - position: absolute; - /* display: flex; */ - width: 100%; - height: 100%; - /* center page with absolute position */ - top: 0%; left: 50%; - transform: translate(-50.5%, 0); - /* margin: 2em 0; */ - padding: 4em; - box-shadow: 2px 3px 20px black, 0 0 125px #8f5922 inset; - background: #fffef0; - /* v2.1 : borders effect with SVG : try to play with scale to change them */ - filter: url(#wavy2); - /* v2.2 : Noise added for a vellum paper effect */ - background-image: url(data:image/png;base64,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); -} - -/* main p { - font-size: 2.25em; - color: #7F3300; - margin-top: .75em; - text-align: justify; -} */ - -/* div p:not(:first-child)::first-letter { - float: left; - /* font: 1.7em/1em Morris; - text-shadow: 1px 1px 1px #000; - margin: 0 .5rem; -} */ - -.contain { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: auto; - height: auto; - margin: 0 auto; - padding: 2em; -} - -.mapicon::before{ - content: ""; - background-image: url('/assets/eventSlug/map.svg'); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - opacity: 0.3; -} - -/* .inkTitle { - font-size: 3em; - font-family: Pirata One, sans-serif; - text-align: center; - line-height: 3em; - color: black; - opacity: 0.6; -} */ - -/* #labarum { - width: 20%; - margin-left: calc((100% - 20%) / 2); - height: auto; -} */ - -/* .cachet { - /* image width = 210px and height = 250px - /* 5 is one common denominator 210 = 5 * 42 - width: calc((100vw * 5) / 42); - height: auto; /* Height is auto ajusted - margin-top: 4rem; - margin-left: auto; -} */ - -/* #labarum img, .cachet img { - object-fit: cover; - width: 100%; - height: 100%; -} */ - -/* #signature { - text-align: right; - color: black; - font-size: 250%; -} */ - - -.bg { - /* top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - position: absolute; */ - background: radial-gradient(ellipse at center, #f3e2c7 50%,#c19e67 85%,#6c1b00 93%,#000000 100%); - box-shadow: inset 0 0 20px 2px black; - /* width: 100%; */ - /* height: 100%; */ - /* filter: blur(1px) brightness(110%) contrast(150%); */ - /* filter: blur(1px) brightness(110%) contrast(100%); */ - filter: brightness(100%) contrast(100%); - /* opacity: .7; */ - /* vertical-align: central; */ - /* text-align: center; */ -} - -.bg:before { - /* font-family: Arial; */ - /* font-size: 30px; */ - position: absolute; - /* color: black; */ - /* content: '*'; */ - /* text-align: left; */ - vertical-align: top; - /* width: 100%; - height: 100%; */ - left: 0px; - top: 0px; - /* opacity: .15; */ - filter: blur(3px); - border: solid 1px black; - box-sizing: border-box; -} - -.bg:after { - /* font-family: Arial; */ - /* font-size: 8px; */ - position: absolute; - /* text-align: left; */ - vertical-align: top; - /* color: black; */ - content: '+'; - position: absolute; - /* width: 100%; - height: 100%; */ - left: 0px; - top: 0px; - opacity: .1; - filter: blur(0px); - box-shadow: inset 0 0 20px 10px black; -} - -.masker{ - mask: url(https://static.rfstat.com/renderforest/images/website_maker_images/components/component-images/text14-3.4.0.svg) -2px top / auto 100% repeat-x; -} - @layer utilities { /* Hide scrollbar for Chrome, Safari, and Opera */ .no-scrollbar::-webkit-scrollbar {