diff --git a/src/css/base.scss b/src/css/base.scss
index bf686e5..baeeb50 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -5,7 +5,7 @@
}
html {
- font-size: calc(13px + 6 * ((100vw - 320px) / 1200));
+ font-size: calc(16px + 6 * ((100vw - 320px) / 1200));
height: 100%;
background: $color-background;
}
@@ -16,26 +16,6 @@ body {
padding: 0;
background: $color-background;
color: $color-text;
-/*
- border-left: 1rem solid $color-black;
- border-right: 1rem solid $color-black;
- &:after {
- content: " ";
- display: block;
- position: fixed;
- bottom: 0;
- right: 0;
- left: 0;
- background: $color-black;
- height: 1rem;
- }*/
-
- @media (max-width: $media-s) {
- border: none;
- &:after {
- display: none;
- }
- }
font-family: $sans-serif;
line-height: 1.6;
diff --git a/src/css/blog.scss b/src/css/blog.scss
index 83b2510..fdc9123 100644
--- a/src/css/blog.scss
+++ b/src/css/blog.scss
@@ -1,6 +1,6 @@
.blog {
- background: $color-black;
- color: $color-white;
+ background: $color-yellow;
+ color: $color-black;
padding-bottom: 1rem;
}
@@ -11,27 +11,27 @@
}
.post {
- width: $width-xs;
- margin: 0 1rem 1.3rem 0;
+ width: 31.333333%;
+ margin: 0 1% 1rem 1%;
position: relative;
text-decoration: none;
- background: $color-yellow;
- color: $color-black;
+ background: $color-black;
+ color: $color-white;
box-shadow:
- 0 0 0 0.3rem $color-black,
- 0 0 0 0.35rem $color-black;
+ 0 0 0 0.3rem $color-yellow,
+ 0 0 0 0.35rem $color-yellow;
transition: box-shadow .1s ease-in-out;
&:hover {
- color: $color-black;
+ color: $color-white;
box-shadow:
- 0 0 0 0.3rem $color-black,
- 0 0 0 0.35rem $color-yellow;
+ 0 0 0 0.3rem $color-yellow,
+ 0 0 0 0.35rem $color-black;
}
&-text {
- padding: 0.4rem 1rem 1.4rem;
+ padding: 1.4rem 1.6rem 2rem;
p {
margin-bottom: 0;
diff --git a/src/css/events.scss b/src/css/events.scss
index 65a1b2a..27f35ec 100644
--- a/src/css/events.scss
+++ b/src/css/events.scss
@@ -3,26 +3,67 @@
color: $color-white;
}
+.event-group-header {
+ color: $color-orange;
+ text-transform: uppercase;
+ font-weight: 900;
+ font-size: 1.3rem;
+ line-height: 1.2;
+ letter-spacing: 0.05em;
+ margin: 0 0 1rem;
+}
+
.event-grouped-by-day {
- width: $width-m;
- max-width: 100%;
+ display: inline-block;
+ width: 31.333333%;
+ margin: 0 1% 1rem 1%;
+
+ .event-types, .event-date {
+ display: none;
+ }
+}
+
+.event-grouped-by-month {
+ width: 100%;
+ display: flex;
margin: 0 auto 4rem;
+
+ .event-group-header {
+ font-size: 1.6rem;
+ width: 20%;
+ }
+
+ .event-list {
+ width: 80%;
+ }
+
+ .event {
+ width: 50%;
+ }
+
+ .event-title {
+ font-size: 1.6rem;
+ }
+
+ .event-date {
+ font-size: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
}
.event-list {
display: flex;
flex-wrap: wrap;
- justify-content: center;
+ justify-content: left;
}
.event {
- width: $width-s;
- max-width: 100%;
- margin: 0 2rem 1.2rem;
+ width: 100%;
+ margin: 0 0 1.2rem 0;
position: relative;
-
- padding-top: 2rem;
- border-top: 1px solid $color-white;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid $color-white;
text-decoration: none;
@@ -101,8 +142,6 @@
}
.event-types {
- position: absolute;
- top: 0.2rem;
ul {
list-style: none;
margin: 0;
@@ -124,7 +163,7 @@
line-height: 1;
text-transform: uppercase;
font-weight: 600;
- letter-spacing: 0.05rem;
+ letter-spacing: 0.05em;
font-size: $font-xs;
}
@@ -191,7 +230,7 @@
.event-date {
text-transform: uppercase;
- letter-spacing: 0.1rem;
+ letter-spacing: 0.1em;
}
.ticket-url {
diff --git a/src/css/fonts.scss b/src/css/fonts.scss
index b566a33..2357132 100644
--- a/src/css/fonts.scss
+++ b/src/css/fonts.scss
@@ -1,3 +1,4 @@
+@import url("https://use.typekit.net/oze0djq.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,900,900i');
-$sans-serif: "Avenir Next", "Avenir", "Montserrat", helvetica, arial, sans-serif;
+$sans-serif: "futura-pt", "Montserrat", helvetica, arial, sans-serif;
diff --git a/src/css/footer.scss b/src/css/footer.scss
index eee8729..06b9b60 100644
--- a/src/css/footer.scss
+++ b/src/css/footer.scss
@@ -39,6 +39,8 @@
.hours {
font-size: 2rem;
+ background: $color-red;
+ width: 100%;
}
.meta {
diff --git a/src/templates/event-program.js b/src/templates/event-program.js
index fa80273..e8f22be 100644
--- a/src/templates/event-program.js
+++ b/src/templates/event-program.js
@@ -11,7 +11,7 @@ export default class EventProgram extends React.Component {
return (
-
+
)
}
diff --git a/src/templates/front-page.js b/src/templates/front-page.js
index de913f6..0e51191 100644
--- a/src/templates/front-page.js
+++ b/src/templates/front-page.js
@@ -14,6 +14,7 @@ export default class IndexPage extends React.Component {
return (
+ Bli frivillig!
)