From f1bb150401a7ef426ce1e86cc2c79a8003393591 Mon Sep 17 00:00:00 2001 From: elisejakob Date: Wed, 8 May 2019 00:03:55 +0200 Subject: [PATCH] =?UTF-8?q?lotsa=20cool=20hover=20effects=20=F0=9F=92=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/base.scss | 6 +- src/css/events.scss | 133 +++++++++++++++++++++++------------- src/css/front-page.scss | 7 +- src/css/header.scss | 27 ++++++-- src/css/page.scss | 11 +-- src/templates/event.js | 132 ++++++++++++++++++----------------- src/templates/front-page.js | 24 +++---- 7 files changed, 200 insertions(+), 140 deletions(-) diff --git a/src/css/base.scss b/src/css/base.scss index 2a8c9bb..cdfacbd 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -92,11 +92,11 @@ button, .button { max-width: $width-m; padding: 0.6rem 2rem; margin-bottom: 1rem; - transition: all .2s ease-in-out; + transition: all .1s ease-in-out; &:hover { - color: $color-orange; - background: $color-black; + color: $color-black; + background: $color-yellow; } } diff --git a/src/css/events.scss b/src/css/events.scss index e0bccde..884bad7 100644 --- a/src/css/events.scss +++ b/src/css/events.scss @@ -28,16 +28,20 @@ .event-group-header { text-align: center; background-color: $color-orange; - color: $color-white; + color: $color-black; margin: 0 -2rem 1rem; padding: 0.4rem 2rem; text-transform: uppercase; font-weight: 700; - font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.05em; } + .event-meta, .event-date-weekday, .event-date-day-month { + font-size: 1rem; + transition: none; + } + .event-types { display: none; } @@ -81,27 +85,27 @@ &-title { display: block; text-decoration: none; - font-size: 1.3rem; + font-size: 1.16rem; font-weight: 700; - line-height: 1.1; + line-height: 1.2; margin: 0.2rem 0; } - transition: color 1s ease-in-out; + transition: box-shadow .1s ease-in-out; + &:hover { - transition: color 1s ease-in-out; - color: $color-orange; - border-color: $color-orange; - - .event-title, .event-meta { + color: $color-black; + box-shadow: 0 0 0 4px $color-black, 0 0 0 6px darken($color-orange, 20%); + animation: shine 3s alternate infinite; + } + + @keyframes shine { + from { + color: $color-black; + } + to { color: $color-orange; } - .event-types li { - background: $color-orange; - } - .event-image { - filter: sepia(100%) hue-rotate(340deg) saturate(360%); - } } .event-start { @@ -153,7 +157,7 @@ .event-types { ul { list-style: none; - margin: 0; + margin: 1rem 0; padding: 0; } li { @@ -167,13 +171,13 @@ color: $color-black; background: $color-white; - opacity: 0.4; + opacity: 0.6; padding: 0.2rem 0.3rem; line-height: 1; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; - font-size: $font-xs; + font-size: $font-s; } a { @@ -183,23 +187,27 @@ } .event-page { - background: $color-black; - color: $color-white; - padding-top: 0; - - .event-meta { - color: $color-white; - } + background: $color-white; + color: $color-black; + padding: 0 0 4rem; } .event-hero { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - - max-width: $width-l; - margin: 2rem auto 6rem; + background: $color-black; + color: $color-white; + overflow: hidden; + .event-meta { + color: $color-white; + } + &-inner { + max-width: $width-l; + margin: 2rem auto 0; + padding: 2rem 0; + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + } &_text, &_image { width: 50%; @@ -252,30 +260,61 @@ text-transform: uppercase; letter-spacing: 0.1em; } +} + +.event-links { + max-width: $width-l; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: -2.5rem auto 3rem; + padding: 1rem 0; + + .event-link { + display: block; + width: calc(50% - 0.5rem); + margin: 0; + padding: 3px; + position: relative; + z-index: 9001; - .ticket-url { - display: inline-block; - background: $color-yellow; - color: $color-black; - margin: 1rem 0; - padding: 0.6rem 1.4rem; text-decoration: none; + text-align: center; text-transform: uppercase; letter-spacing: 0.06em; - font-weight: 500; - - transition: box-shadow .2s ease-in-out; + font-weight: 700; + color: $color-black; + transition: all .1s ease-in-out; &:hover { - background: $color-white; + transition: all .16s ease-in-out; + } + span { + display: block; + width: 100%; + padding: 1rem; + } + } + + .ticket-url { + background: $color-orange; + border: 3px solid $color-orange; + span { + background: $color-orange; + } + &:hover { + background: transparent; } } .facebook-url { - display: block; - text-decoration: none; - &:before { - content: "→ "; + background: $color-yellow; + border: 3px solid $color-yellow; + span { + background: $color-yellow; + } + &:hover { + background: transparent; } } } \ No newline at end of file diff --git a/src/css/front-page.scss b/src/css/front-page.scss index 633a3c6..85242ef 100644 --- a/src/css/front-page.scss +++ b/src/css/front-page.scss @@ -28,7 +28,7 @@ } .address { - background: $color-orange; + background: $color-green; label, input { display: block; @@ -37,13 +37,12 @@ } .opening-hours { - background: $color-orange; + background: $color-green; } .volunteer { - background: $color-black-gradient; - color: $color-white; + background: $color-pink; } .show-more { diff --git a/src/css/header.scss b/src/css/header.scss index 868fa32..7a5704e 100644 --- a/src/css/header.scss +++ b/src/css/header.scss @@ -9,7 +9,7 @@ top: 0; left: 0; right: 0; - z-index: 1000; + z-index: 9002; .logo { width: 1rem; @@ -31,6 +31,7 @@ text-decoration: none; display: inline-block; margin-right: 1.6rem; + position: relative; &:last-child { margin-right: 0; } @@ -40,10 +41,26 @@ text-transform: uppercase; letter-spacing: 0.08em; font-size: $font-s; - - transition: box-shadow 0.2s ease-in-out; - &:hover { - box-shadow: 0 1px 0 0 $color-white; + + &:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #fff; + opacity: 0; + transform: translateY(5px); + transition: transform 1s, opacity 0.1s; + pointer-events: none; + } + + &:hover:after, + &:focus:after { + opacity: 1; + transform: translateY(0px); + transition: transform 0.3s, opacity 0.3s; } } &_toggle { diff --git a/src/css/page.scss b/src/css/page.scss index ef71c6b..fb31664 100644 --- a/src/css/page.scss +++ b/src/css/page.scss @@ -2,17 +2,18 @@ display: block; position: relative; z-index: 5; - margin: -3rem auto 3rem; - padding: 0.5rem 1rem; + margin: 0 auto 3rem; font-weight: 400; - font-size: 2.4rem; + font-size: 3.6rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; text-align: center; text-decoration: none; - background: $color-black; - color: $color-white; + color: inherit; + &:hover { + color: inherit; + } } h1.section-title { margin-top: 1rem; diff --git a/src/templates/event.js b/src/templates/event.js index 9a7911a..a2c3b55 100644 --- a/src/templates/event.js +++ b/src/templates/event.js @@ -39,73 +39,77 @@ export const EventTemplate = ({ return (
-
-

{title}

-
-
- {venueCustom && {venueCustom}} - {venue && venue.title !== 'Hele huset' && ( - - {venue.preposition} {venue.title} - - )} - {venue && venue.title === 'Hele huset' && ( - på Chateau Neuf - )} -
-
- - {moment(startTime).format('dddd')}{' '} - - - {moment(startTime).format('D.')}{' '} - - - {moment(startTime).format('MMMM')}{' '} - - {/* Only specify year if different. */} - {!moment(startTime).isSame(new Date(), 'year') && ( - - {moment(startTime).format('YYYY')}{' '} - - )} -
-
- {/* TODO: make the API stop assuming event duration is 2 hours when unspecified? */} - kl. {moment(startTime).format('HH:mm')} - — - {endTime && moment(endTime).format('HH:mm')} -
-
- Pris: {formatPrices(priceRegular, priceStudent)} -
- {ticketUrl && ( - - Kjøp billetter - - )} - {facebookUrl && ( - - Se Facebook-event - - )} - {eventTypes && eventTypes.length && ( -
-
    - {eventTypes.map(type => ( -
  • - {type.name} -
    • - ))} -
+
+
+

{title}

+
+
+ {venueCustom && {venueCustom}} + {venue && venue.title !== 'Hele huset' && ( + + {venue.preposition} {venue.title} + + )} + {venue && venue.title === 'Hele huset' && ( + på Chateau Neuf + )}
- )} +
+ + {moment(startTime).format('dddd')}{' '} + + + {moment(startTime).format('D.')}{' '} + + + {moment(startTime).format('MMMM')}{' '} + + {/* Only specify year if different. */} + {!moment(startTime).isSame(new Date(), 'year') && ( + + {moment(startTime).format('YYYY')}{' '} + + )} +
+
+ {/* TODO: make the API stop assuming event duration is 2 hours when unspecified? */} + kl. {moment(startTime).format('HH:mm')} + — + {endTime && moment(endTime).format('HH:mm')} +
+
+ Pris: {formatPrices(priceRegular, priceStudent)} +
+ {eventTypes && eventTypes.length && ( +
+
    + {eventTypes.map(type => ( +
  • + {type.name} +
    • + ))} +
+
+ )} +
+ {hasFeaturedMedia && ( +
+ +
+ )}
- {hasFeaturedMedia && ( -
- -
+
+
+ {ticketUrl && ( + + Kjøp billetter + + )} + {facebookUrl && ( + + Se Facebook-event + )}
+
+ Bli frivillig +

Vil du være med å arrangere greier på studentersamfundet? Sjekk ut de ulike foreningene som holder til på Chateau Neuf.

+

Vi trenger alltid flere engasjerte folk! Her er noen eksempler på roller du kan innta:

+
    +
  • Økonomiansvarlig
    • +
  • Skuespiller
    • +
  • Designere
    • +
  • Utviklere
    • +
+
+

Besøk oss

@@ -32,18 +44,6 @@ export default class IndexPage extends React.Component {
-
- Bli frivillig -

Vil du være med å arrangere greier på studentersamfundet? Sjekk ut de ulike foreningene som holder til på Chateau Neuf.

-

Vi trenger alltid flere engasjerte folk! Her er noen eksempler på roller du kan innta:

-
    -
  • Økonomiansvarlig
    • -
  • Skuespiller
    • -
  • Designere
    • -
  • Utviklere
    • -
-
- ) }