From 1ccb7fefda646a1a58eb7511b652e70bd19f633d Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sat, 9 Mar 2019 18:38:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20lotsa=20nice=20styles=20(wip)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventList.js    | 56 ++++++++++++++++------------------
 src/components/Footer.js       |  6 +---
 src/components/Navbar.js       |  6 ++--
 src/css/associations.scss      | 35 +++++++++++++++++++++
 src/css/base.scss              |  4 +--
 src/css/events.scss            | 52 +++++++++++++++++++++----------
 src/css/footer.scss            | 40 ++++++++++++------------
 src/css/header.scss            |  6 ++--
 src/css/page.scss              |  4 +--
 src/css/variables.scss         |  3 ++
 src/templates/association.js   |  2 +-
 src/templates/event-program.js | 13 ++++----
 src/templates/front-page.js    |  6 ++--
 13 files changed, 144 insertions(+), 89 deletions(-)

diff --git a/src/components/EventList.js b/src/components/EventList.js
index 881a251..7afb3de 100644
--- a/src/components/EventList.js
+++ b/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,
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8160a04..cfa5807 100644
--- a/src/components/Footer.js
+++ b/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>
 )
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 046e33e..719eee9 100644
--- a/src/components/Navbar.js
+++ b/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">
diff --git a/src/css/associations.scss b/src/css/associations.scss
index beb0656..b3a6e19 100644
--- a/src/css/associations.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/css/base.scss b/src/css/base.scss
index 788b807..96c4200 100644
--- a/src/css/base.scss
+++ b/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;
 
diff --git a/src/css/events.scss b/src/css/events.scss
index 66bf6c9..6423ce9 100644
--- a/src/css/events.scss
+++ b/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;
   }
diff --git a/src/css/footer.scss b/src/css/footer.scss
index 06b9b60..6191ed5 100644
--- a/src/css/footer.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/css/header.scss b/src/css/header.scss
index 7f31f5d..4289bec 100644
--- a/src/css/header.scss
+++ b/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;
   }
 }
diff --git a/src/css/page.scss b/src/css/page.scss
index 72a7b79..29dbee1 100644
--- a/src/css/page.scss
+++ b/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;
 }
 
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 6891be4..7cc97e4 100644
--- a/src/css/variables.scss
+++ b/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;
 
diff --git a/src/templates/association.js b/src/templates/association.js
index 91a102b..ee5f81b 100644
--- a/src/templates/association.js
+++ b/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>
       )}
diff --git a/src/templates/event-program.js b/src/templates/event-program.js
index a50fe75..fe5a0d7 100644
--- a/src/templates/event-program.js
+++ b/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>
     )
   }
diff --git a/src/templates/front-page.js b/src/templates/front-page.js
index b64d2e4..4255ab6 100644
--- a/src/templates/front-page.js
+++ b/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>