redo event grid, adjust image sizes and spacing
This commit is contained in:
elisejakob committed
1 parent
f818c914f9
commit
798bebef76
8 files changed
+177
-107
No files matched your search
@@ -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%;
|
||||
|
||||
+5
-6
@@ -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 {
|
||||
|
||||
+49
-15
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
+72
-35
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+10
-9
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -16,7 +16,7 @@
|
||||
}
|
||||
}
|
||||
h1.section-title {
|
||||
margin-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
|
||||
@@ -11,9 +11,9 @@ export default class AssociationListPage extends React.Component {
|
||||
const { edges: associations } = data.allWordpressWpAssociations
|
||||
|
||||
return (
|
||||
<Layout classes="association-page">
|
||||
<Layout>
|
||||
<Helmet title="Foreningene" />
|
||||
<AssociationList associations={associations} title="Foreningene" />
|
||||
<AssociationList associations={associations} title="Foreninger" />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
+23
-32
@@ -15,44 +15,14 @@ export default class IndexPage extends React.Component {
|
||||
<Layout classes="index">
|
||||
<EventList
|
||||
events={events}
|
||||
maxEvents={9}
|
||||
maxEvents={10}
|
||||
title="Dette skjer"
|
||||
showMore
|
||||
/>
|
||||
<section className="volunteer">
|
||||
<Link to="/bli-aktiv/" className="section-title">
|
||||
Bli frivillig
|
||||
</Link>
|
||||
<p>
|
||||
Vil du være med å arrangere greier på studentersamfundet? Sjekk ut
|
||||
de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på
|
||||
Chateau Neuf.
|
||||
</p>
|
||||
<p>
|
||||
Vi trenger alltid flere engasjerte folk! Her er noen eksempler på
|
||||
roller du kan innta:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Økonomiansvarlig</li>
|
||||
<li>Skuespiller</li>
|
||||
<li>Designere</li>
|
||||
<li>Utviklere</li>
|
||||
</ul>
|
||||
</section>
|
||||
<PostList posts={posts} title="Aktuelt" showMore />
|
||||
<section className="front-page-info">
|
||||
<div className="address">
|
||||
<h2>Besøk oss</h2>
|
||||
<p>Vi holder til på Majorstua. Finn veibeskrivelse under.</p>
|
||||
<label htmlFor="directions">Jeg vil reise fra:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="directions"
|
||||
name="directions"
|
||||
placeholder="Skriv inn adresse"
|
||||
/>
|
||||
</div>
|
||||
<div className="opening-hours">
|
||||
<p>Vi holder til på Majorstua.</p>
|
||||
<h2>Åpningstider</h2>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -70,7 +40,28 @@ export default class IndexPage extends React.Component {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="volunteer">
|
||||
<Link to="/bli-aktiv/" className="section-title">
|
||||
Bli frivillig
|
||||
</Link>
|
||||
<p>
|
||||
Vil du være med å arrangere greier på studentersamfundet? Sjekk ut
|
||||
de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på
|
||||
Chateau Neuf.
|
||||
</p>
|
||||
<p>
|
||||
Vi trenger alltid flere engasjerte folk! Her er noen eksempler på
|
||||
roller du kan innta:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Økonomiansvarlig</li>
|
||||
<li>Skuespiller</li>
|
||||
<li>Designere</li>
|
||||
<li>Utviklere</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<PostList posts={posts} title="Aktuelt" showMore />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user