lotsa cool hover effects 💅
This commit is contained in:
elisejakob committed
1 parent
eff9fde69b
commit
f1bb150401
7 files changed
+200
-140
No files matched your search
+3
-3
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+86
-47
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
+22
-5
@@ -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 {
|
||||
|
||||
+6
-5
@@ -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;
|
||||
|
||||
+68
-64
@@ -39,73 +39,77 @@ export const EventTemplate = ({
|
||||
return (
|
||||
<section className="event-page">
|
||||
<div className="event-hero">
|
||||
<div className="event-hero_text">
|
||||
<h1>{title}</h1>
|
||||
<div className="event-meta">
|
||||
<div className="venue">
|
||||
{venueCustom && <span>{venueCustom}</span>}
|
||||
{venue && venue.title !== 'Hele huset' && (
|
||||
<span>
|
||||
{venue.preposition} <Link to={venue.path}>{venue.title}</Link>
|
||||
</span>
|
||||
)}
|
||||
{venue && venue.title === 'Hele huset' && (
|
||||
<span>på Chateau Neuf</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="event-date">
|
||||
<span className="event-date-weekday">
|
||||
{moment(startTime).format('dddd')}{' '}
|
||||
</span>
|
||||
<span className="event-date-day">
|
||||
{moment(startTime).format('D.')}{' '}
|
||||
</span>
|
||||
<span className="event-date-month">
|
||||
{moment(startTime).format('MMMM')}{' '}
|
||||
</span>
|
||||
{/* Only specify year if different. */}
|
||||
{!moment(startTime).isSame(new Date(), 'year') && (
|
||||
<span className="event-date-year">
|
||||
{moment(startTime).format('YYYY')}{' '}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="event-time">
|
||||
{/* 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')}
|
||||
</div>
|
||||
<div className="price">
|
||||
Pris: {formatPrices(priceRegular, priceStudent)}
|
||||
</div>
|
||||
{ticketUrl && (
|
||||
<a className="ticket-url" href={ticketUrl} target="_blank">
|
||||
Kjøp billetter
|
||||
</a>
|
||||
)}
|
||||
{facebookUrl && (
|
||||
<a className="facebook-url" href={facebookUrl}>
|
||||
Se Facebook-event
|
||||
</a>
|
||||
)}
|
||||
{eventTypes && eventTypes.length && (
|
||||
<div className="event-types">
|
||||
<ul>
|
||||
{eventTypes.map(type => (
|
||||
<li key={`${type.slug}`}>
|
||||
<Link to={type.path}>{type.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="event-hero-inner">
|
||||
<div className="event-hero_text">
|
||||
<h1>{title}</h1>
|
||||
<div className="event-meta">
|
||||
<div className="venue">
|
||||
{venueCustom && <span>{venueCustom}</span>}
|
||||
{venue && venue.title !== 'Hele huset' && (
|
||||
<span>
|
||||
{venue.preposition} <Link to={venue.path}>{venue.title}</Link>
|
||||
</span>
|
||||
)}
|
||||
{venue && venue.title === 'Hele huset' && (
|
||||
<span>på Chateau Neuf</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="event-date">
|
||||
<span className="event-date-weekday">
|
||||
{moment(startTime).format('dddd')}{' '}
|
||||
</span>
|
||||
<span className="event-date-day">
|
||||
{moment(startTime).format('D.')}{' '}
|
||||
</span>
|
||||
<span className="event-date-month">
|
||||
{moment(startTime).format('MMMM')}{' '}
|
||||
</span>
|
||||
{/* Only specify year if different. */}
|
||||
{!moment(startTime).isSame(new Date(), 'year') && (
|
||||
<span className="event-date-year">
|
||||
{moment(startTime).format('YYYY')}{' '}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="event-time">
|
||||
{/* 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')}
|
||||
</div>
|
||||
<div className="price">
|
||||
Pris: {formatPrices(priceRegular, priceStudent)}
|
||||
</div>
|
||||
{eventTypes && eventTypes.length && (
|
||||
<div className="event-types">
|
||||
<ul>
|
||||
{eventTypes.map(type => (
|
||||
<li key={`${type.slug}`}>
|
||||
<Link to={type.path}>{type.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{hasFeaturedMedia && (
|
||||
<div className="event-hero_image">
|
||||
<Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{hasFeaturedMedia && (
|
||||
<div className="event-hero_image">
|
||||
<Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="event-links">
|
||||
{ticketUrl && (
|
||||
<a className="event-link ticket-url" href={ticketUrl} target="_blank">
|
||||
<span>Kjøp billetter</span>
|
||||
</a>
|
||||
)}
|
||||
{facebookUrl && (
|
||||
<a className="event-link facebook-url" href={facebookUrl}>
|
||||
<span>Se Facebook-event</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
|
||||
+12
-12
@@ -16,6 +16,18 @@ export default class IndexPage extends React.Component {
|
||||
return (
|
||||
<Layout>
|
||||
<EventList events={events} numDays={7} groupBy="day" title="Dette skjer" showMore />
|
||||
<section className="volunteer">
|
||||
<Link to="/bli-aktiv/" className="section-title">Bli frivillig</Link>
|
||||
<p>Vil du være med å arrangere greier på studentersamfundet? Sjekk ut de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på Chateau Neuf.</p>
|
||||
<p>Vi trenger alltid flere engasjerte folk! Her er noen eksempler på roller du kan innta:</p>
|
||||
<ul>
|
||||
<li>Økonomiansvarlig</li>
|
||||
<li>Skuespiller</li>
|
||||
<li>Designere</li>
|
||||
<li>Utviklere</li>
|
||||
</ul>
|
||||
</section>
|
||||
<PostList posts={posts} title="Aktuelt" showMore />
|
||||
<section className="front-page-info">
|
||||
<div className="address">
|
||||
<h2>Besøk oss</h2>
|
||||
@@ -32,18 +44,6 @@ export default class IndexPage extends React.Component {
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section className="volunteer">
|
||||
<Link to="/bli-aktiv/" className="section-title">Bli frivillig</Link>
|
||||
<p>Vil du være med å arrangere greier på studentersamfundet? Sjekk ut de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på Chateau Neuf.</p>
|
||||
<p>Vi trenger alltid flere engasjerte folk! Her er noen eksempler på roller du kan innta:</p>
|
||||
<ul>
|
||||
<li>Økonomiansvarlig</li>
|
||||
<li>Skuespiller</li>
|
||||
<li>Designere</li>
|
||||
<li>Utviklere</li>
|
||||
</ul>
|
||||
</section>
|
||||
<PostList posts={posts} title="Aktuelt" showMore />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user