diff --git a/src/components/AssociationList.js b/src/components/AssociationList.js index 423d612..8413d39 100644 --- a/src/components/AssociationList.js +++ b/src/components/AssociationList.js @@ -7,13 +7,13 @@ export default class AssociationList extends React.Component { static renderAssociation(association) { return ( - {association.featured_media && association.featured_media.localFile && ( -
+
+ {association.featured_media && association.featured_media.localFile && ( -
- )} + )} +

{association.title}

diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 14f097d..362c64c 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -55,7 +55,10 @@ export default class Navbar extends React.Component { Utleie
- = + Meny   ☰ +
+
+ Program
) diff --git a/src/components/PostList.js b/src/components/PostList.js index 18697d3..aff7b01 100644 --- a/src/components/PostList.js +++ b/src/components/PostList.js @@ -9,7 +9,7 @@ export default class PostList extends React.Component { return (
-

{title}

+

{title}

{posts.map(({ node: post }) => ( diff --git a/src/css/associations.scss b/src/css/associations.scss index d589780..522280c 100644 --- a/src/css/associations.scss +++ b/src/css/associations.scss @@ -13,9 +13,6 @@ width: 100%; margin: 0 0 1rem; } - @media (min-width: $media-xl) { - width: calc(33.333333333% - 1rem); - } display: flex; @@ -32,11 +29,22 @@ &-image { width: 100%; - max-width: 300px; - height: 300px; + max-width: 200px; + max-height: 200px; overflow: hidden; margin: 0 auto 1rem; - padding-right: 1rem; + padding-right: 1.6rem; + + .gatsby-image-wrapper { + max-width: 100%; + max-height: 100%; + + img { + max-height: 200px; + max-width: 200px; + object-fit: contain !important; + } + } } &-text { @@ -47,12 +55,40 @@ margin-left: 0; } } + + @media (max-width: $media-s) { + display: block; + + &-image { + padding-right: 0; + } + } + + &-homepage { + color: $color-orange; + font-weight: bold; + width: 100%; + max-width: $width-m; + margin: 0 auto; + } } .association-page { .association-logo { - width: $width-s; - max-width: 100%; - margin: 1rem auto; + width: 100%; + max-width: $width-s; + max-height: 20rem; + margin: 1rem auto 2rem; + + .gatsby-image-wrapper { + max-width: 100%; + max-height: 20rem; + + img { + max-height: 100%; + max-width: 20rem; + object-fit: contain !important; + } + } } } \ No newline at end of file diff --git a/src/css/base.scss b/src/css/base.scss index 911de99..4302421 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -94,9 +94,11 @@ button, .button { display: block; text-decoration: none; font-weight: 700; + line-height: 1.2; color: $color-black; border: 2px solid $color-orange; background: $color-orange; + text-align: center; padding: 0.2rem 2rem; margin: 0 auto 1rem; width: 100%; @@ -131,17 +133,23 @@ button, .button { .table-wrap { max-width: 100%; overflow: auto; - line-height: 1.3; } table { background: $color-yellow; margin: 1rem auto 2rem; + line-height: 1.1; } td, th { padding: 0.6rem 0.8rem; background: $color-white; } +@media (max-width: $media-m) { + td, th { + padding: 0.3rem 0.4rem; + } +} + .iframe-wrap { width: 100%; max-width: 36rem !important; @@ -156,6 +164,11 @@ td, th { width: 100%; height: 100%; } + + @media (max-width: $media-m) { + max-width: none; + padding-bottom: 56.25%; + } } input, textarea { diff --git a/src/css/events.scss b/src/css/events.scss index 7d3eda9..6dd980f 100644 --- a/src/css/events.scss +++ b/src/css/events.scss @@ -11,18 +11,21 @@ display: flex; flex-wrap: wrap; padding: 0 1rem 1rem; - @media (max-width: $media-s) { - padding: 0 0 1rem; - } .event-types { display: none; } + @media (max-width: $media-s) { + padding: 0 .6rem .6rem; + } } .event-grouped-by-month { width: 100%; margin: 0; padding: 0 1rem 1rem; + @media (max-width: $media-s) { + padding: 0 0 1rem; + } .event-group-header { text-align: left; @@ -37,7 +40,7 @@ letter-spacing: 0.05em; @media (max-width: $media-s) { - margin: 0 0 0.5rem; + margin: 0 .6rem 0.5rem; } } @@ -98,7 +101,7 @@ .event-date { background: $color-yellow; - padding: 0.2rem 0.6rem; + padding: 0.3rem 0.6rem; } .event-date, .event-meta { @@ -107,7 +110,7 @@ font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; - line-height: 1.2; + line-height: 1.1; } .event-start { @@ -115,6 +118,12 @@ padding: 0.666rem; } + transition: box-shadow .1s ease-in-out; + &:hover { + color: $color-black; + box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange; + } + @media (min-width: $media-xl) { width: calc(20% - 1rem); &:nth-child(9), @@ -154,18 +163,19 @@ &-header { width: 64%; } - } - transition: box-shadow .1s ease-in-out; - - &:hover { - color: $color-black; - box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange; + &:hover { + box-shadow: none; + } } &-content { margin: 0 auto; + @media (max-width: $media-s) { + margin: 0 1rem; + } + img, div { max-width: 100%; } @@ -233,6 +243,7 @@ background: $color-black; color: $color-white; overflow: hidden; + padding: 0 1rem; .event-meta { color: $color-white; } @@ -295,11 +306,13 @@ h1 { font-size: 2rem; margin: 0 auto; + line-height: 1.2; } } @media (max-width: $media-m) { padding: 0 1rem; + text-align: center; &_text, &_image { width: 100%; } @@ -311,9 +324,16 @@ &_text { padding: 0; } + h1 { + margin: 0 auto; + } .venue { font-size: 1rem; } + .event-types ul { + text-align: center; + margin: 1rem auto; + } } .event-organizers { @@ -501,4 +521,10 @@ color: darken($color-orange, 30%); cursor: default; } +} + +.event-list-tumbleweed { + margin: 0 auto; + padding: 1rem 1rem 3rem; + text-align: center; } \ No newline at end of file diff --git a/src/css/footer.scss b/src/css/footer.scss index 6249563..a728540 100644 --- a/src/css/footer.scss +++ b/src/css/footer.scss @@ -26,7 +26,7 @@ .logo { width: 60%; padding: 0; - margin: 0 auto; + margin: 2rem auto; order: 2; } .social-nav { diff --git a/src/css/front-page.scss b/src/css/front-page.scss index 090bdc5..3aa8c9b 100644 --- a/src/css/front-page.scss +++ b/src/css/front-page.scss @@ -21,10 +21,6 @@ .address, .volunteer { padding: 2rem; - - @media (max-width: $media-s) { - padding: 1rem 1rem 3rem; - } } .address { @@ -48,6 +44,18 @@ } } +@media (max-width: $media-s) { + .front-page-info { + display: block; + > div { + width: 100%; + } + } + .address, .volunteer { + padding: 1rem 1rem 3rem; + } +} + .show-more { display: block; width: 100%; diff --git a/src/css/header.scss b/src/css/header.scss index 6b89044..665bb8f 100644 --- a/src/css/header.scss +++ b/src/css/header.scss @@ -72,40 +72,59 @@ transition: transform 0.3s, opacity 0.3s; } } - &_toggle { + &_toggle, &_program { position: absolute; - top: 0; - left: 1rem; - font-size: 2rem; + top: 1rem; + right: 1rem; + left: auto; + font-size: $font-s; line-height: 1; + color: $color-white; + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 700; display: none; &:hover { cursor: pointer; - color: $color-orange; + } + } + &_program { + left: 1rem; + right: auto; + a { + color: $color-white; + text-decoration: none; } } } @media (max-width: $media-s) { .site-header { - display: flex; - flex-direction: column; + display: block; + background: $color-black; + height: 2.5rem; + padding-top: 2.5rem; .logo { position: absolute; top: 0; - right: 0; - margin: 0; + left: 50%; + margin-left: -1.6rem; + } + + &.site-nav-visible { + height: auto; } } .site-nav { flex: none; display: none; text-align: center; - margin-top: 3rem; - &_toggle { + background: $color-black; + + &_toggle, &_program { display: block; } order: 2; @@ -127,7 +146,6 @@ } } .site-nav-visible { - height: 100% !important; .site-nav { display: block; } diff --git a/src/css/page.scss b/src/css/page.scss index 71ab66d..259a478 100644 --- a/src/css/page.scss +++ b/src/css/page.scss @@ -31,16 +31,20 @@ font-weight: 400; text-align: center; margin-bottom: 2rem; - padding: 0 1rem; @media (max-width: $media-m) { font-size: 2.8rem; } @media (max-width: $media-s) { - font-size: 2rem; + font-size: 1.6rem; + margin-top: 1rem; } } +.page .page-title { + padding: 0; +} + .page-title-pre { display: block; font-size: $font-s; @@ -77,12 +81,13 @@ h1, h2, h3, h4, h5, h6 { max-width: $width-m; - margin: 2.2rem auto 1rem; + margin: 2.4rem auto .6rem; + line-height: 1.1; } table, .table-wrap { width: 100% !important; - max-width: 100%; + max-width: $width-l; } .instagram-media { @@ -90,6 +95,11 @@ } @media (max-width: $media-s) { - margin: 0 1rem; + h2 { + font-size: 1.6rem; + } + h3 { + font-size: 1.3rem; + } } } \ No newline at end of file diff --git a/src/css/venues.scss b/src/css/venues.scss index 7040d9d..7800b02 100644 --- a/src/css/venues.scss +++ b/src/css/venues.scss @@ -13,4 +13,19 @@ h2.venue-title { .venue-featured-image { width: 36rem; margin: 0 auto; +} + +@media (min-width: $media-l) { + .venue-featured-image, .venue-text { + display: inline-block; + width: 48%; + } + .venue-featured-image { + vertical-align: top; + } +} + +.neuf-map { + max-width: $width-l; + margin: 2rem auto; } \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 4cb4836..48a66ee 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -4,6 +4,7 @@ import { graphql, Link } from 'gatsby' import Layout from '../components/Layout' import PostList from '../components/PostList' import EventList from '../components/EventList' +import logo from '../img/logo/logo-xxl.svg' export default class IndexPage extends React.Component { render() { @@ -15,8 +16,8 @@ export default class IndexPage extends React.Component {
diff --git a/src/templates/association.js b/src/templates/association.js index 56b1da6..b8095b7 100644 --- a/src/templates/association.js +++ b/src/templates/association.js @@ -23,7 +23,7 @@ export const AssociationTemplate = ({ )} {homepage && ( )}
-
- {isSingle &&

{title}

} - {!isSingle && ( - -

{title}

- - )} - {hasFeaturedMedia && ( -
- -
- )} -
-
-
-
    - {floor &&
  • Etasje: {floor}
  • } - {capacityLegal &&
  • Branntillatelse for: {capacityLegal}
  • } - {capacityStanding &&
  • Stående: {capacityStanding}
  • } - {capacitySitting &&
  • Sittende: {capacitySitting}
  • } - {usedFor &&
  • Bruk: {usedFor}
  • } - {bar &&
  • Bar: {bar}
  • } - {audio &&
  • Lyd: {audio}
  • } - {lighting &&
  • Lys: {lighting}
  • } - {audioVideo &&
  • A/V: {audioVideo}
  • } -
+ {isSingle && ( +
+
Lokale
+

{title}

+
+ )} + {!isSingle && ( + +

{title}

+ + )} + {hasFeaturedMedia && ( +
+ +
+ )} +
+
+
+
    + {floor &&
  • Etasje: {floor}
  • } + {capacityLegal &&
  • Branntillatelse for: {capacityLegal}
  • } + {capacityStanding &&
  • Stående: {capacityStanding}
  • } + {capacitySitting &&
  • Sittende: {capacitySitting}
  • } + {usedFor &&
  • Bruk: {usedFor}
  • } + {bar &&
  • Bar: {bar}
  • } + {audio &&
  • Lyd: {audio}
  • } + {lighting &&
  • Lys: {lighting}
  • } + {audioVideo &&
  • A/V: {audioVideo}
  • } +
+
{isSingle && (
)} + {isSingle && ( + + Se alle lokaler + + )} ) }