💅 lotsa nice styles (wip)

src/components/EventList.js

@@ -10,7 +10,7 @@ moment.locale('nb')
 
 export default class EventList extends React.Component {
   render() {
-    const { events, title, onlyUpcoming, numDays, groupBy } = this.props
+    const { events, onlyUpcoming, numDays, groupBy } = this.props
 
     const filteredEvents = events.filter(({ node: event }) => {
       const startTime = moment(event.start_time)
@@ -27,12 +27,11 @@ export default class EventList extends React.Component {
     })
 
     return (
-      <section className="events">
-        {title && <h1 className="section-title">{title}</h1>}
+      <div className="events">
         {groupBy && this.renderEventsByDate(filteredEvents, groupBy)}
         {!groupBy &&
           filteredEvents.map(({ node: event }) => this.renderEvent(event))}
-      </section>
+      </div>
     )
   }
 
@@ -75,35 +74,35 @@ export default class EventList extends React.Component {
           )}
         </div>
         <header className="event-header">
+          <span
+            className={`event-date $(compactDate && event-date-is-compact)`}
+          >
+            <span className="event-date-weekday">
+              {moment(event.start_time).format('dddd')}{' '}
+            </span>
+            {!compactDate && (
+              <span className="event-date-day-month">
+                {moment(event.start_time).format('D.')}{' '}
+                {moment(event.start_time).format('MMMM')}{' '}
+              </span>
+            )}
+            {compactDate && (
+              <span className="event-date-day-month">
+                {moment(event.start_time).format('D/M')}{' '}
+              </span>
+            )}
+            {/* Only specify year if different. */}
+            {!moment(event.start_time).isSame(new Date(), 'year') && (
+              <span className="event-date-year">
+                {moment(event.start_time).format('YYYY')}{' '}
+              </span>
+            )}
+          </span>
           <h2 className="event-title">{event.title}</h2>
           <div className="event-meta">
             <span className="event-start">
               {moment(event.start_time).format('HH:mm')}
             </span>
-            <span
-              className={`event-date $(compactDate && event-date-is-compact)`}
-            >
-              <span className="event-date-weekday">
-                {moment(event.start_time).format('dddd')}{' '}
-              </span>
-              {!compactDate && (
-                <span className="event-date-day-month">
-                  {moment(event.start_time).format('D.')}{' '}
-                  {moment(event.start_time).format('MMMM')}{' '}
-                </span>
-              )}
-              {compactDate && (
-                <span className="event-date-day-month">
-                  {moment(event.start_time).format('D/M')}{' '}
-                </span>
-              )}
-              {/* Only specify year if different. */}
-              {!moment(event.start_time).isSame(new Date(), 'year') && (
-                <span className="event-date-year">
-                  {moment(event.start_time).format('YYYY')}{' '}
-                </span>
-              )}
-            </span>
             {event.event_types && event.event_types.length && (
               <div className="event-types">
                 <ul>
@@ -122,7 +121,6 @@ export default class EventList extends React.Component {
 
 EventList.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string,
   onlyUpcoming: PropTypes.bool,
   numDays: PropTypes.number,
   groupBy: PropTypes.string,

src/components/Footer.js

@@ -4,7 +4,7 @@ import logo from '../img/logo/logo-h.svg'
 
 const Footer = () => (
   <footer className="site-footer">
-    <div className="hours">
+    <div className="opening-hours">
       Åpningstider:
       <br />
       Glassbaren
@@ -31,10 +31,6 @@ const Footer = () => (
         ønsker en tur i baren, på kafé, på debatt, på konsert, teater eller
         kino, har man muligheten på Det Norske Studentersamfund.
       </p>
-      <div className="meta">
-        Chateau Neuf – Det Norske Studentersamfund | Slemdalsveien 15, 0369 Oslo
-        | Ansvarlig redaktør: Stein-Olav Moe Fause | <a href="#">Logg inn</a>
-      </div>
     </div>
   </footer>
 )

src/components/Navbar.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import github from '../img/github-icon.svg'
-import logo from '../img/logo/logo-xl.svg'
+import logo from '../img/logo/logo-s.svg'
 
 export default class Navbar extends React.Component {
   constructor(props) {
@@ -28,7 +28,6 @@ export default class Navbar extends React.Component {
   }
 
   resizeHeader() {
-    console.log(this.state.headerSize)
     if (window.scrollY < 160) {
       this.setState({
         headerSize: 200 - window.scrollY,
@@ -40,14 +39,13 @@ export default class Navbar extends React.Component {
     return (
       <header
         className={`site-header ${this.state.showNav ? 'site-nav-visible' : ''}`}
-        style={{ height: `${ this.state.headerSize }px` }}
       >
         <nav className="site-nav">
           <Link to="/program/">Program</Link>
           <Link to="/nyheter/">Nyheter</Link>
           <Link to="/om-dns/">Praktisk</Link>
         </nav>
-        <Link to="/" className="logo" style={{ width: `${ this.state.headerSize }px`, height: `${ this.state.headerSize }px` }}>
+        <Link to="/" className="logo">
           <img src={logo} alt="Det Norske Studentersamfund" />
         </Link>
         <nav className="site-nav">

src/css/associations.scss

@@ -27,4 +27,39 @@
       font-size: $font-s;
     }
   }
+}
+
+.association-page {
+  .association-logo {
+    width: $width-s;
+    max-width: 100%;
+    margin: 1rem auto;
+  }
+
+  .association-type {
+    max-width: $width-m;
+    margin: 0 auto;
+  }
+}
+.association-content {
+  max-width: $width-m;
+  margin: 0 auto;
+
+  img, div {
+    max-width: 100%;
+  }
+
+  ul {
+    max-width: $width-m;
+    margin: 0 auto 1rem;
+  }
+
+  ul, p {
+    margin: 0 auto 1.6rem;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    max-width: $width-m;
+    margin-top: 3.6rem;
+  }
 }

src/css/base.scss

@@ -12,8 +12,8 @@ html {
 
 body {
   min-height: 100%;
-  margin: 14rem 0 0;
-  padding: 0;
+  margin: 0;
+  padding: 2.5rem 0 0;
   background: $color-background;
   color: $color-text;
 

src/css/events.scss

@@ -1,6 +1,7 @@
-.events {
-  background: $color-black;
-  color: $color-white;
+.front-page-events, .event-program, .events {
+  background: $color-pink;
+  color: $color-text-event;
+  padding-top: 0;
 }
 
 .event-group-header {
@@ -10,15 +11,29 @@
   font-size: 1.3rem;
   line-height: 1.2;
   letter-spacing: 0.05em;
-  margin: 0 0 1.2rem;
+  margin: 0;
 }
 
 .event-grouped-by-day {
   display: inline-block;
-  width: 31.333333%;
-  margin: 0 1% 1rem 1%;
+  width: 29.333333%;
+  margin: 0 2% 1rem 2%;
 
-  .event-types, .event-date {
+  @media (max-width: $media-m) {
+    width: 46%;
+  }
+
+  @media (max-width: $media-s) {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media (min-width: $media-xl) {
+    width: 21%;
+  }
+
+  .event-types, .event-group-header {
     display: none;
   }
 }
@@ -31,7 +46,8 @@
     text-align: center;
     background-color: $color-red;
     color: $color-white;
-    margin: 2rem -2rem;
+    margin: 0 -2rem;
+    padding: 0.4rem 2rem;
   }
 
   .event {
@@ -53,11 +69,6 @@
     }
   }
 
-  .event-date {
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
 
   .event-types {
     display: none;
@@ -65,6 +76,7 @@
 }
 
 .event-list {
+  padding-top: 2rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
@@ -75,7 +87,7 @@
   margin: 0 0 1.2rem 0;
   position: relative;
   padding-bottom: 1.2rem;
-  border-bottom: 1px solid $color-white;
+  border-bottom: 0.13rem solid $color-text-event;
 
   text-decoration: none;
 
@@ -88,7 +100,7 @@
   &-title {
     display: block;
     text-decoration: none;
-    color: $color-white;
+    color: $color-text-event;
     font-size: 1.3rem;
     font-weight: 700;
     line-height: 1.2;
@@ -112,7 +124,7 @@
 
   &-meta {
     font-size: $font-s;
-    color: $color-white;
+    color: $color-text-event;
   }
 
   .event-start {
@@ -148,6 +160,14 @@
     }
   }
 
+  .event-date {
+    display: block;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: 1.2;
+  }
+
   @media (max-width: $media-s) {
     margin: 0 0 1.2rem;
   }

src/css/footer.scss

@@ -7,21 +7,33 @@
   flex-wrap: wrap;
   justify-content: center;
 
+  .info {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 auto 2rem;
+  }
+
   .logo {
-    width: $width-m;
+    width: 50%;
     padding-right: 3rem;
   }
-
   p {
-    margin: 0 0 3rem;
+    width: 50%;
+    margin: 0;
   }
-}
 
-.info {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  @media (max-width: $media-s) {
+    .info {
+      display: block;
+    }
+    .logo, p {
+      width: 100%;
+      padding: 0;
+      margin: 0 0 2rem;
+    }
+  }
 }
 
 .social-nav {
@@ -35,14 +47,4 @@
       margin-right: 0;
     }
   }
-}
-
-.hours {
-  font-size: 2rem;
-  background: $color-red;
-  width: 100%;
-}
-
-.meta {
-  font-size: $font-xs;
 }

src/css/header.scss

@@ -1,5 +1,5 @@
 .site-header {
-  padding: 1rem;
+  padding: 0.6rem 1rem;
   background: $color-black;
   color: $color-white;
   display: flex;
@@ -12,8 +12,8 @@
   z-index: 10;
 
   .logo {
-    width: 6rem;
-    height: 6rem;
+    width: 1rem;
+    height: 1rem;
     margin: 0 3rem;
   }
 }

src/css/page.scss

@@ -1,8 +1,8 @@
 .section-title {
-  margin: 2rem auto 4rem;
+  margin: 1rem auto 3rem;
   font-weight: 700;
-
   font-size: 3.2rem;
+  line-height: 1.1;
   text-align: center;
 }
 

src/css/variables.scss

@@ -12,7 +12,10 @@ $color-black: #060606;
 $color-white: #FFFFFF;
 
 $color-background: $color-black;
+
 $color-text: $color-white;
+$color-text-event: $color-black;
+
 $color-link: $color-orange;
 $color-hover: $color-yellow;
 

src/templates/association.js

@@ -17,7 +17,7 @@ export const AssociationTemplate = data => {
     <section className="association-page">
       <h1 className="section-title">{title}</h1>
       {hasFeaturedMedia && (
-        <div className="assocation-logo">
+        <div className="association-logo">
           <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
         </div>
       )}

src/templates/event-program.js

@@ -11,12 +11,13 @@ export default class EventProgram extends React.Component {
 
     return (
       <Layout>
-        <EventList
-          events={events}
-          title="Dette skjer"
-          groupBy="month"
-          compactDate={true}
-        />
+        <section className="event-program">
+          <EventList
+            events={events}
+            groupBy="month"
+            compactDate={true}
+          />
+        </section>
       </Layout>
     )
   }

src/templates/front-page.js

@@ -15,8 +15,10 @@ export default class IndexPage extends React.Component {
 
     return (
       <Layout>
-        <EventList events={events} numDays={7} groupBy="day" />
-        <Link to="/program/">Vis alle</Link>
+        <section className="front-page-events">
+          <EventList events={events} numDays={7} groupBy="day" />
+          <Link to="/program/">Vis alle</Link>
+        </section>
         <section className="front-page-info">
           <div className="opening-hours">
             <h2>Åpningstider</h2>