From 4a278ef2add27f8bbbc438804f5a94bbd9d5e771 Mon Sep 17 00:00:00 2001 From: elisejakob Date: Thu, 1 Aug 2019 23:46:03 +0200 Subject: [PATCH] design progress, add xs logo --- src/components/EventList.js | 4 ++-- src/components/Navbar.js | 2 +- src/components/PostList.js | 4 ++-- src/css/base.scss | 31 +++++++++++++++++++++++++--- src/css/events.scss | 11 +++++++++- src/css/header.scss | 22 +++++++++++++------- src/css/page.scss | 4 ++++ src/img/logo/logo-xs.svg | 9 ++++++++ src/pages/index.js | 41 +++++++++++++++++++++---------------- src/pages/program.js | 2 +- src/templates/event.js | 22 +++++++++----------- 11 files changed, 105 insertions(+), 47 deletions(-) create mode 100644 src/img/logo/logo-xs.svg diff --git a/src/components/EventList.js b/src/components/EventList.js index dac0eb9..08a52ad 100644 --- a/src/components/EventList.js +++ b/src/components/EventList.js @@ -181,8 +181,8 @@ const EventList = props => { )} {showMore && (
- - Vis alle + + Se alle arrangementer
)} diff --git a/src/components/Navbar.js b/src/components/Navbar.js index a34c431..14f097d 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,6 +1,6 @@ import React from 'react' import { Link } from 'gatsby' -import logo from '../img/logo/logo-s.svg' +import logo from '../img/logo/logo-xs.svg' export default class Navbar extends React.Component { constructor(props) { diff --git a/src/components/PostList.js b/src/components/PostList.js index 79a3742..18697d3 100644 --- a/src/components/PostList.js +++ b/src/components/PostList.js @@ -39,8 +39,8 @@ export default class PostList extends React.Component { {showMore && (
- - Vis alle + + Se alle nyheter
)} diff --git a/src/css/base.scss b/src/css/base.scss index 3c9a9e8..911de99 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -20,6 +20,10 @@ body { font-family: $sans-serif; line-height: 1.6; letter-spacing: 0.02rem; + + &:focus { + outline-color: $color-orange; + } } main { @@ -94,12 +98,33 @@ button, .button { border: 2px solid $color-orange; background: $color-orange; padding: 0.2rem 2rem; - margin: 0 .5rem 1rem; + margin: 0 auto 1rem; + width: 100%; + max-width: $width-m; transition: all .2s ease-in-out; &:hover { - color: $color-orange; - background: transparent; + color: $color-black; + } + + &-large { + padding: 2px; + position: relative; + background: $color-orange; + border: 2px solid $color-orange; + + color: $color-black; + transition: all .1s ease-in-out; + &:hover { + transition: all .16s ease-in-out; + background: transparent; + } + span { + display: block; + width: 100%; + padding: .5rem 2rem; + background: $color-orange; + } } } diff --git a/src/css/events.scss b/src/css/events.scss index 8d8ba05..7d3eda9 100644 --- a/src/css/events.scss +++ b/src/css/events.scss @@ -28,7 +28,7 @@ text-align: left; border-bottom: 2px solid $color-yellow; color: $color-yellow; - margin: 0 1.5rem 0.5rem; + margin: 0 1.5rem 1rem; padding: 0.4rem 2rem 0.4rem 0; text-transform: uppercase; font-weight: 700; @@ -315,6 +315,10 @@ font-size: 1rem; } } + + .event-organizers { + margin-bottom: 1rem; + } } .event-links { @@ -378,6 +382,7 @@ } @media (max-width: $media-s) { display: block; + margin-bottom: 1rem; .event-link { width: 100%; margin-bottom: 0.5rem; @@ -399,11 +404,15 @@ &-read-more { a { display: block; + margin-top: .5rem; width: 100%; color: $color-orange; text-decoration: underline; font-size: 1rem; text-align: center; + &:hover { + color: $color-white; + } } } } diff --git a/src/css/header.scss b/src/css/header.scss index 5fe865d..6b89044 100644 --- a/src/css/header.scss +++ b/src/css/header.scss @@ -1,9 +1,10 @@ .site-header { - padding: 0.6rem 1rem; + padding: 0; background: $color-black; color: $color-white; display: flex; justify-content: center; + align-items: flex-end; position: fixed; top: 0; @@ -12,10 +13,16 @@ z-index: 9002; .logo { - width: 2rem; - height: 1rem; - margin: 0 3rem; - margin-top: -0.35rem; + width: 3.2rem; + height: 2.5rem; + position: relative; + margin: 0 1.2rem; + + img { + position: absolute; + bottom: 0; + width: 3.6rem; + } } } @@ -25,6 +32,7 @@ flex-wrap: wrap; align-items: center; justify-content: flex-end; + padding: 0.6rem 1rem; &:last-of-type { justify-content: flex-start; } @@ -67,7 +75,7 @@ &_toggle { position: absolute; top: 0; - right: 0; + left: 1rem; font-size: 2rem; line-height: 1; @@ -88,7 +96,7 @@ .logo { position: absolute; top: 0; - left: 0; + right: 0; margin: 0; } } diff --git a/src/css/page.scss b/src/css/page.scss index e66ff01..71ab66d 100644 --- a/src/css/page.scss +++ b/src/css/page.scss @@ -88,4 +88,8 @@ .instagram-media { margin: 1rem auto 2rem !important; } + + @media (max-width: $media-s) { + margin: 0 1rem; + } } \ No newline at end of file diff --git a/src/img/logo/logo-xs.svg b/src/img/logo/logo-xs.svg new file mode 100644 index 0000000..6392aad --- /dev/null +++ b/src/img/logo/logo-xs.svg @@ -0,0 +1,9 @@ + + + + logo-xs + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 4369653..4cb4836 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -21,24 +21,29 @@ export default class IndexPage extends React.Component { />
-

Besøk oss

-

Vi holder til på Majorstua.

-

Åpningstider

-
    -
  • - Glassbaren: -
      -
    • Mandag–lørdag: 14:00–00:00
      • -
    -
    • -
  • - Bokcaféen: -
      -
    • Mandag–torsdag: 19:00–00:00
      • -
    • Fredag: 20:00–03:00
      • -
    -
    • -
+
+

Besøk oss

+

Vi holder til på Majorstua.

+
+
+

Åpningstider

+
    +
  • + Glassbaren: +
      +
    • Mandag–lørdag: 14:00–00:00
      • +
    +
    • +
  • + Bokcaféen: +
      +
    • Mandag–torsdag: 19:00–00:00
      • +
    • Fredag: 20:00–03:00
      • +
    +
    • +
+ Se alle åpningstider +
diff --git a/src/pages/program.js b/src/pages/program.js index 483fcbc..0beb141 100644 --- a/src/pages/program.js +++ b/src/pages/program.js @@ -16,7 +16,7 @@ export default class EventProgram extends React.Component { diff --git a/src/templates/event.js b/src/templates/event.js index 4c15979..873a0ee 100644 --- a/src/templates/event.js +++ b/src/templates/event.js @@ -92,6 +92,16 @@ export const EventTemplate = ({
)} + {organizers && ( +
+ Arrangeres av + {organizers.map(organizer => ( + + {organizer.name} + + ))} +
+ )} {hasFeaturedMedia && ( @@ -118,18 +128,6 @@ export const EventTemplate = ({ )} - {organizers && ( -
-
- {organizers.length === 1 ? 'Arrangør' : 'Arrangører'} -
- {organizers.map(organizer => ( -
- {organizer.name} -
- ))} -
- )}