diff --git a/src/css/associations.scss b/src/css/associations.scss index 1799be3..a9c0b54 100644 --- a/src/css/associations.scss +++ b/src/css/associations.scss @@ -5,10 +5,9 @@ .association { position: relative; - width: calc(50% - 1rem); + width: calc(50% - 2rem); margin: 0 0.5rem 1rem; - border: 1px solid black; - padding: 1rem; + padding: 2rem; @media (max-width: $media-m) { width: 100%; @@ -33,12 +32,11 @@ &-image { width: 100%; - max-width: 200px; - height: 200px; + max-width: 300px; + height: 300px; overflow: hidden; margin: 0 auto 1rem; - padding-left: 2rem; - order: 2; + padding-right: 1rem; } &-text { @@ -52,6 +50,16 @@ } .association-page { + .page-title { + &:before { + content: "Forening"; + display: block; + font-size: $font-s; + font-weight: 700; + color: $color-red; + } + } + .association-logo { width: $width-s; max-width: 100%; diff --git a/src/css/base.scss b/src/css/base.scss index d5cfc80..3c9a9e8 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -87,16 +87,14 @@ figure { } button, .button { - display: inline-block; + display: block; text-decoration: none; font-weight: 700; color: $color-black; border: 2px solid $color-orange; background: $color-orange; - width: 100%; - max-width: $width-m; - padding: 0.6rem 2rem; - margin-bottom: 1rem; + padding: 0.2rem 2rem; + margin: 0 .5rem 1rem; transition: all .2s ease-in-out; &:hover { @@ -121,8 +119,9 @@ td, th { .iframe-wrap { width: 100%; + max-width: 36rem !important; position: relative; - padding-bottom: 56.25%; + padding-bottom: calc(36rem * 0.5625); padding-top: 25px; height: 0; iframe { diff --git a/src/css/blog.scss b/src/css/blog.scss index 2f4bbf9..34a3cd1 100644 --- a/src/css/blog.scss +++ b/src/css/blog.scss @@ -1,23 +1,25 @@ .blog { background: $color-background-blog; color: $color-black; - padding-bottom: 1rem; + padding: 2rem 0 0; } .post-list { display: flex; flex-wrap: wrap; - justify-content: space-between; + padding: 0 1rem 1rem; } .post { - width: 31.333333%; - margin-bottom: 1rem; + width: calc(33.333333% - 1.2rem); + margin: 0 0.6rem 1rem; position: relative; text-decoration: none; color: $color-black; cursor: pointer; + transition: all .2s ease-in-out; + &:hover { color: $color-black; } @@ -31,14 +33,23 @@ } &--no-media { + border: 2px solid $color-yellow; + padding: 0.5rem 1.5rem 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; .post-title { - font-size: 2.4rem; + font-size: 1.86rem; margin-bottom: 1rem; + word-break: break-word; } - p { - font-size: 1rem; - line-height: 1.36; + .post-text { + padding-right: 1rem; + } + + &:hover { + border-color: $color-orange; } } @@ -95,18 +106,19 @@ color: $color-black; padding-bottom: 1rem; display: flex; - align-items: center; - justify-content: center; + width: 93.999999%; + margin: 0 auto; a { display: inline-block; padding: 0.3rem 1rem; text-decoration: none; - margin: 0; - width: 46.9999995%; + margin: 0 0 0 auto; + width: 50%; max-width: none; &.button-prev { background: $color-yellow; border-color: $color-yellow; + margin: 0 auto 0 0; } &:hover { background: transparent; @@ -142,9 +154,18 @@ &_image { width: 36rem; max-width: 90%; - margin: -11rem auto 2rem; + margin: -10rem auto 2rem; + } + @media (max-width: $media-m) { + h1 { + font-size: 3rem; + padding: 0 1rem; + } } @media (max-width: $media-s) { + &-inner { + padding-bottom: 5rem; + } h1 { font-size: 2rem; padding: 0 1rem; @@ -152,7 +173,16 @@ &_image { max-width: 100%; padding: 0 1rem; - margin-bottom: 1.6rem; + margin: -5rem auto 1.6rem; + } + } + } + + &.no-featured-media { + .post-hero { + margin-bottom: 2rem; + &-inner { + padding-bottom: 0; } } } @@ -164,6 +194,10 @@ font-size: $font-s; text-transform: uppercase; opacity: 0.6; - margin: 2rem auto; + margin: 2rem auto 0; + padding-bottom: 1rem; + p { + margin: 0 auto; + } } } \ No newline at end of file diff --git a/src/css/events.scss b/src/css/events.scss index 6ebbe03..2103cd7 100644 --- a/src/css/events.scss +++ b/src/css/events.scss @@ -10,14 +10,10 @@ .event-list { display: flex; flex-wrap: wrap; - justify-content: center; -} - -.event-group { padding: 0 1rem 1rem; } -.index .event { +.event-list { .event-types { display: none; } @@ -27,16 +23,16 @@ width: 100%; margin: 0; padding: 0 1rem 1rem; - background: $color-background-events; .event-group-header { - text-align: center; - background-color: $color-orange; - color: $color-black; - margin: 0 -2rem 1rem; - padding: 0.4rem 2rem; + text-align: left; + border-bottom: 2px solid $color-orange; + color: $color-orange; + margin: 0 1.5rem 1rem; + padding: 0.4rem 2rem 0.4rem 0; text-transform: uppercase; font-weight: 700; + font-size: .8rem; line-height: 1.2; letter-spacing: 0.05em; } @@ -51,38 +47,40 @@ } .event { - width: calc(33.333333333% - 1rem); + width: calc(25% - 1rem); margin: 0 0.5rem 1rem; - @media (max-width: $media-l) { - width: calc(50% - 1rem); - } - @media (max-width: $media-s) { - width: 100%; - margin: 0 0 1rem; - } position: relative; text-decoration: none; color: $color-black; background: $color-white; text-align: left; display: flex; - justify-content: space-between; + flex-direction: column; align-items: center; + &:nth-child(9), + &:nth-child(10) { + display: none; + } + &-image { display: block; position: relative; - width: 30%; - height: 100%; + width: 100%; + height: 8rem; margin: 0; overflow: hidden; background: $color-black; + + .gatsby-image-wrapper { + height: 100%; + } } &-header { - width: 70%; - padding: 0.6rem 0.8rem; + width: 100%; line-height: 1.1; + padding-bottom: 0.5rem; } &-title { @@ -91,14 +89,54 @@ font-size: 1.5rem; font-weight: 400; line-height: 1.1; - margin: 0.4rem 0 0.5rem; + margin: 0.4rem 0.5rem 0.5rem; + } + + @media (min-width: $media-xl) { + width: calc(20% - 1rem); + &:nth-child(9), + &:nth-child(10) { + display: block; + } + } + @media (max-width: $media-l) { + width: calc(33.333333% - 1rem); + &:nth-child(9) { + display: block; + } + } + @media (max-width: $media-m) { + width: calc(50% - 1rem); + &:nth-child(9), + &:nth-child(10) { + display: none; + } + } + @media (max-width: $media-s) { + width: 100%; + margin: 0 0 .8rem; + flex-direction: row; + + &:nth-child(7), + &:nth-child(8) { + display: none; + } + + &-image { + width: 36%; + height: 100%; + } + + &-header { + width: 64%; + } } transition: box-shadow .1s ease-in-out; &:hover { - color: $color-orange; - box-shadow: 0 0 0 4px $color-black, 0 0 0 6px darken($color-orange, 20%); + color: $color-black; + box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange; } &-content { @@ -129,6 +167,11 @@ } } + .event-date { + background: $color-yellow; + padding: 0.2rem 0.5rem; + } + .event-date, .event-meta { display: block; font-size: .8rem; @@ -140,13 +183,7 @@ .event-start { text-transform: none; - } - - @media (max-width: $media-s) { - margin: 0 0 1.2rem; - &-content { - padding: 0 1rem; - } + padding: 0.5rem; } } @@ -306,7 +343,7 @@ span { display: block; width: 100%; - padding: 1rem; + padding: 0.5rem 1rem; } } diff --git a/src/css/front-page.scss b/src/css/front-page.scss index 85d930a..090bdc5 100644 --- a/src/css/front-page.scss +++ b/src/css/front-page.scss @@ -19,8 +19,8 @@ } } -.address, .opening-hours { - padding: 2rem 2rem 6rem; +.address, .volunteer { + padding: 2rem; @media (max-width: $media-s) { padding: 1rem 1rem 3rem; @@ -36,13 +36,8 @@ } } -.opening-hours { - background: $color-green; -} - - .volunteer { - background: $color-pink; + background: $color-yellow; .section-title { font-weight: 700; color: $color-white; @@ -57,5 +52,11 @@ display: block; width: 100%; text-align: center; - padding: 1rem; + padding: 0 1rem 1rem; + + @media (max-width: $media-s) { + .button { + margin: 0; + } + } } \ No newline at end of file diff --git a/src/css/page.scss b/src/css/page.scss index b39b17c..1069840 100644 --- a/src/css/page.scss +++ b/src/css/page.scss @@ -16,7 +16,7 @@ } } h1.section-title { - margin-top: 1rem; + margin-top: 2rem; } .page-title { diff --git a/src/pages/foreningene.js b/src/pages/foreningene.js index 221f113..a96e237 100644 --- a/src/pages/foreningene.js +++ b/src/pages/foreningene.js @@ -11,9 +11,9 @@ export default class AssociationListPage extends React.Component { const { edges: associations } = data.allWordpressWpAssociations return ( - + - + ) } diff --git a/src/pages/index.js b/src/pages/index.js index 040dd95..4369653 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -15,44 +15,14 @@ export default class IndexPage extends React.Component { -
- - Bli frivillig - -

- Vil du være med å arrangere greier på studentersamfundet? Sjekk ut - de ulike foreningene som holder til på - Chateau Neuf. -

-

- Vi trenger alltid flere engasjerte folk! Her er noen eksempler på - roller du kan innta: -

-
    -
  • Økonomiansvarlig
    • -
  • Skuespiller
    • -
  • Designere
    • -
  • Utviklere
    • -
-
-

Besøk oss

-

Vi holder til på Majorstua. Finn veibeskrivelse under.

- - -
-
+

Vi holder til på Majorstua.

Åpningstider

  • @@ -70,7 +40,28 @@ export default class IndexPage extends React.Component {
+
+ + Bli frivillig + +

+ Vil du være med å arrangere greier på studentersamfundet? Sjekk ut + de ulike foreningene som holder til på + Chateau Neuf. +

+

+ Vi trenger alltid flere engasjerte folk! Her er noen eksempler på + roller du kan innta: +

+
    +
  • Økonomiansvarlig
    • +
  • Skuespiller
    • +
  • Designere
    • +
  • Utviklere
    • +
+
+ ) }