design progress, mobile and color adjustments
This commit is contained in:
elisejakob committed
1 parent
fc48f00a34
commit
a67008e185
11 files changed
+265
-73
No files matched your search
@@ -12,6 +12,7 @@
|
||||
@media (max-width: $media-m) {
|
||||
width: 100%;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
@@ -74,6 +75,13 @@
|
||||
}
|
||||
|
||||
.association-page {
|
||||
padding-top: 2rem;
|
||||
.page-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
.page-title-pre {
|
||||
color: $color-red;
|
||||
}
|
||||
.association-logo {
|
||||
width: 100%;
|
||||
max-width: $width-s;
|
||||
|
||||
+25
-5
@@ -128,17 +128,37 @@ button, .button {
|
||||
background: $color-orange;
|
||||
}
|
||||
}
|
||||
|
||||
&-small {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0.3rem 1rem;
|
||||
margin: .5rem auto;
|
||||
color: $color-white;
|
||||
background: $color-black;
|
||||
border: none;
|
||||
font-size: $font-s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
background: $color-yellow;
|
||||
margin: 1rem auto 2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.table-wrap {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
td, th {
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: $color-white;
|
||||
@@ -146,7 +166,7 @@ td, th {
|
||||
|
||||
@media (max-width: $media-m) {
|
||||
td, th {
|
||||
padding: 0.3rem 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+14
-3
@@ -291,7 +291,11 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.venue {
|
||||
a {
|
||||
color: $color-bloodorange;
|
||||
}
|
||||
|
||||
.event-meta-venue {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
font-style: italic;
|
||||
@@ -302,6 +306,12 @@
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.event-types {
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-s) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
@@ -318,7 +328,8 @@
|
||||
}
|
||||
&_image {
|
||||
.gatsby-image-wrapper {
|
||||
margin-left: auto;
|
||||
width: calc(100% + 2rem);
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
}
|
||||
&_text {
|
||||
@@ -327,7 +338,7 @@
|
||||
h1 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.venue {
|
||||
.event-meta-venue {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.event-types ul {
|
||||
|
||||
+1
-1
@@ -53,7 +53,7 @@
|
||||
height: 2rem;
|
||||
path {
|
||||
transition: all .2s ease-in-out;
|
||||
fill: $color-orange;
|
||||
fill: $color-bloodorange;
|
||||
}
|
||||
&:hover path {
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
+46
-13
@@ -2,42 +2,75 @@
|
||||
display: flex;
|
||||
background: $color-white;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
h2, h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, p, ul, .button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 0;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.address, .volunteer {
|
||||
.visit-us, .volunteer {
|
||||
padding: 2rem;
|
||||
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
max-width: $width-m;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
.visit-us {
|
||||
background: $color-green;
|
||||
|
||||
.button {
|
||||
color: $color-green;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
label, input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.opening-hours {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.volunteer {
|
||||
background: $color-yellow;
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
color: $color-white;
|
||||
text-shadow: 0.05em 0.05em $color-black;
|
||||
|
||||
.button {
|
||||
color: $color-yellow;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
@@ -51,7 +84,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.address, .volunteer {
|
||||
.visit-us, .volunteer {
|
||||
padding: 1rem 1rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,6 +148,12 @@
|
||||
.site-nav-visible {
|
||||
.site-nav {
|
||||
display: block;
|
||||
&:first-of-type {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+63
-1
@@ -49,11 +49,16 @@
|
||||
display: block;
|
||||
font-size: $font-s;
|
||||
font-weight: 700;
|
||||
color: $color-red;
|
||||
color: $color-bloodorange;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page .page-title-pre {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.wp-content {
|
||||
img, div, ul, p, h1, h2, h3, h4, h5, h6, span, blockquote {
|
||||
max-width: $width-m;
|
||||
@@ -65,6 +70,10 @@
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
img, div, .wp-caption {
|
||||
max-width: $width-m;
|
||||
width: 100% !important;
|
||||
@@ -94,6 +103,43 @@
|
||||
margin: 1rem auto 2rem !important;
|
||||
}
|
||||
|
||||
@media (max-width: $media-m) {
|
||||
table {
|
||||
width: 100% !important;
|
||||
max-width: $width-m;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
td, tr {
|
||||
display: block;
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
td {
|
||||
display: table-cell;
|
||||
&:first-child {
|
||||
padding-top: .3rem;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: .3rem;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-s) {
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
@@ -101,5 +147,21 @@
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
table, .table-wrap {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
td, tr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.iframe-wrap {
|
||||
width: calc(100% + 2rem) !important;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
+56
-6
@@ -1,18 +1,63 @@
|
||||
.venue {
|
||||
text-align: center;
|
||||
|
||||
ul, p {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: $font-s;
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-of-type {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.venue-page {
|
||||
padding-top: 2rem;
|
||||
.page-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul, p {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: $font-s;
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-of-type {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.venue-hero {
|
||||
max-width: $width-l;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
h2.venue-title {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin: 1rem auto;
|
||||
padding-top: 2rem;
|
||||
.venue-title {
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin: 1rem auto;
|
||||
padding-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.venue-featured-image {
|
||||
width: 36rem;
|
||||
margin: 0 auto;
|
||||
max-width: calc(100% + 2rem);
|
||||
margin: 0 -1rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: $media-l) {
|
||||
@@ -21,7 +66,12 @@ h2.venue-title {
|
||||
width: 48%;
|
||||
}
|
||||
.venue-featured-image {
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
.venue-title h2 {
|
||||
margin: 1rem auto 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+43
-41
@@ -21,50 +21,52 @@ export default class IndexPage extends React.Component {
|
||||
showMore
|
||||
/>
|
||||
<section className="front-page-info">
|
||||
<div className="address">
|
||||
<div>
|
||||
<h2>Besøk oss</h2>
|
||||
<p>Vi holder til på Majorstua.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Åpningstider</h2>
|
||||
<ul>
|
||||
<li>
|
||||
Glassbaren:
|
||||
<ul>
|
||||
<li>Mandag–lørdag: 14:00–00:00</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Bokcaféen:
|
||||
<ul>
|
||||
<li>Mandag–torsdag: 19:00–00:00</li>
|
||||
<li>Fredag: 20:00–03:00</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#">Se alle åpningstider</a>
|
||||
<div className="visit-us">
|
||||
<div className="inner">
|
||||
<h2 className="section-title">Besøk oss</h2>
|
||||
<div className="address">
|
||||
<p>Vi holder til på Majorstua, i Slemdalsveien 15.</p>
|
||||
<a href="https://www.google.no/maps/place/Slemdalsveien+15,+0369+Oslo/data=!4m2!3m1!1s0x46416dc4ab53aa7d:0x5629681f36c1c8af?sa=X&ved=2ahUKEwjR94re3unjAhUj4aYKHRLOAuwQ8gEwAHoECBQQAQ" target="_blank" className="button button-small">Se i Google Maps</a>
|
||||
</div>
|
||||
<div className="opening-hours">
|
||||
<h3>Åpningstider</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="opening-hours_venue">Glassbaren</span>
|
||||
<ul>
|
||||
<li>Mandag–lørdag: 14:00–00:00</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="opening-hours_venue">Bokcaféen</span>
|
||||
<ul>
|
||||
<li>Mandag–torsdag: 19:00–00:00</li>
|
||||
<li>Fredag: 20:00–03:00</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" className="button button-small">Se alle åpningstider</a>
|
||||
</div>
|
||||
</div>
|
||||
</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 className="inner">
|
||||
<Link to="/bli-aktiv/" className="section-title">
|
||||
Bli frivillig
|
||||
</Link>
|
||||
<p>
|
||||
Vil du være med å arrangere greier på studentersamfundet? Chateau Neuf drives i stor grad av frivillige, og vi trenger alltid flere engasjerte folk! Sjekk ut de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på huset for å finne ut hva som passer for deg. Her er noen eksempler på roller du kan innta:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Økonomiansvarlig</li>
|
||||
<li>Skuespiller</li>
|
||||
<li>Designer</li>
|
||||
<li>Utvikler</li>
|
||||
</ul>
|
||||
<Link to="/bli-aktiv/" className="button button-small">
|
||||
Les mer om å bli frivillig
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<PostList posts={posts} title="Aktuelt" showMore />
|
||||
|
||||
@@ -44,7 +44,7 @@ export const EventTemplate = ({
|
||||
<div className="event-hero_text">
|
||||
<h1>{title}</h1>
|
||||
<div className="event-meta">
|
||||
<div className="venue">
|
||||
<div className="event-meta-venue">
|
||||
{venueCustom && <span>{venueCustom}</span>}
|
||||
{venue && venue.title !== 'Hele huset' && (
|
||||
<span>
|
||||
|
||||
@@ -36,8 +36,8 @@ export class VenueTemplate extends React.Component {
|
||||
</div>
|
||||
)}
|
||||
{!isSingle && (
|
||||
<Link to={path}>
|
||||
<h2 className="venue-title">{title}</h2>
|
||||
<Link to={path} className="venue-title">
|
||||
<h2>{title}</h2>
|
||||
</Link>
|
||||
)}
|
||||
{hasFeaturedMedia && (
|
||||
|
||||
Reference in new issue
Block a user