design progress: footer, post list, buttons, heroes
This commit is contained in:
elisejakob committed
1 parent
9134a0eb1c
commit
831e7f69c5
11 files changed
+160
-119
No files matched your search
@@ -75,7 +75,7 @@ export default class EventList extends React.Component {
|
||||
<h2 className="event-title">{event.title}</h2>
|
||||
<div className="event-meta">
|
||||
<span className="event-start">
|
||||
{moment(event.start_time).format('HH:mm')}
|
||||
kl. {moment(event.start_time).format('HH:mm')}
|
||||
</span>
|
||||
{event.event_types && event.event_types.length && (
|
||||
<div className="event-types">
|
||||
|
||||
@@ -7,13 +7,13 @@ const Pagination = ({ pageContext, pathPrefix }) => {
|
||||
return (
|
||||
<nav className="pagination" role="navigation">
|
||||
{previousPagePath && (
|
||||
<Link to={previousPagePath} rel="prev">
|
||||
← Forrige
|
||||
<Link to={previousPagePath} rel="prev" class="button button-prev">
|
||||
Forrige
|
||||
</Link>
|
||||
)}
|
||||
{nextPagePath && (
|
||||
<Link to={nextPagePath} rel="next">
|
||||
Neste →
|
||||
<Link to={nextPagePath} rel="next" class="button button-next">
|
||||
Neste
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default class PostList extends React.Component {
|
||||
<h2 className="page-title">{title}</h2>
|
||||
<div className="post-list">
|
||||
{posts.map(({ node: post }) => (
|
||||
<Link to={post.path} className="post" key={post.id}>
|
||||
<Link to={post.path} className={`post ${post.featured_media && post.featured_media.localFile ? 'post--with-media' : 'post--no-media'}`} key={post.id}>
|
||||
{post.featured_media && post.featured_media.localFile && (
|
||||
<div className="post-image">
|
||||
<Img
|
||||
|
||||
+5
-5
@@ -89,19 +89,19 @@ figure {
|
||||
button, .button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
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;
|
||||
transition: all .1s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
background: $color-yellow;
|
||||
color: $color-orange;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+68
-42
@@ -16,10 +16,6 @@
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $color-black;
|
||||
box-shadow:
|
||||
0 0 0 0.3rem $color-background-blog,
|
||||
0 0 0 0.35rem $color-background-blog;
|
||||
transition: box-shadow .1s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@@ -34,6 +30,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--no-media {
|
||||
|
||||
.post-title {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.36;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
@@ -57,7 +65,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $media-m) {
|
||||
@media (max-width: $media-l) {
|
||||
width: 48%;
|
||||
&:nth-of-type(3) {
|
||||
display: none;
|
||||
@@ -68,6 +76,9 @@
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
&-content {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $media-xl) {
|
||||
@@ -78,56 +89,71 @@
|
||||
}
|
||||
}
|
||||
|
||||
.post-hero {
|
||||
display: block;
|
||||
|
||||
max-width: $width-xl;
|
||||
margin: 0 auto 4rem;
|
||||
|
||||
&_text, &_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $media-m) {
|
||||
&_text, &_image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.6rem;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
background: $color-background-blog;
|
||||
color: $color-black;
|
||||
padding-bottom: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $color-green;
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
margin-right: 0.6rem;
|
||||
|
||||
margin: 0;
|
||||
width: 46.9999995%;
|
||||
max-width: none;
|
||||
&.button-prev {
|
||||
background: $color-yellow;
|
||||
border-color: $color-yellow;
|
||||
}
|
||||
&:hover {
|
||||
background: $color-orange;
|
||||
color: $color-black;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-page {
|
||||
.section-title {
|
||||
font-size: 4rem;
|
||||
line-height: 1.14;
|
||||
padding: 0 0 4rem;
|
||||
.post-hero {
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
|
||||
&-inner {
|
||||
max-width: $width-l;
|
||||
margin: 2rem auto 0;
|
||||
padding: 2rem 0 10rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&_text {
|
||||
text-align: center;
|
||||
h1 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1;
|
||||
text-shadow: -0.06rem 0.1rem 0.26rem rgba(0, 0, 0, 0.9);
|
||||
@media (max-width: $media-s) {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_image {
|
||||
width: 36rem;
|
||||
max-width: 90%;
|
||||
margin: -11rem auto 2rem;
|
||||
}
|
||||
@media (max-width: $media-s) {
|
||||
font-size: 2.6rem;
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
&_image {
|
||||
max-width: 100%;
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-meta, .section-title {
|
||||
@@ -137,7 +163,7 @@
|
||||
.post-meta {
|
||||
font-size: $font-s;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0.6;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
}
|
||||
+14
-26
@@ -17,8 +17,8 @@
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.event-grouped-by-day {
|
||||
.event-types, .event-group-header {
|
||||
.index .event {
|
||||
.event-types {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -42,7 +42,6 @@
|
||||
}
|
||||
|
||||
.event-meta, .event-date-weekday, .event-date-day-month {
|
||||
font-size: 1rem;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@@ -89,33 +88,17 @@
|
||||
&-title {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 1.16rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0.2rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
margin: 0.4rem 0 0.5rem;
|
||||
}
|
||||
|
||||
transition: box-shadow .1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $color-orange;
|
||||
box-shadow: 0 0 0 4px $color-black, 0 0 0 7px darken($color-orange, 20%);
|
||||
animation: shine 2s alternate infinite;
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
from {
|
||||
color: $color-orange;
|
||||
}
|
||||
to {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.event-start {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 0 0 4px $color-black, 0 0 0 6px darken($color-orange, 20%);
|
||||
}
|
||||
|
||||
&-content {
|
||||
@@ -146,14 +129,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.event-date {
|
||||
.event-date, .event-meta {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.event-start {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@media (max-width: $media-s) {
|
||||
margin: 0 0 1.2rem;
|
||||
&-content {
|
||||
|
||||
+38
-22
@@ -2,7 +2,7 @@
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
font-size: $font-s;
|
||||
padding: 3rem 2rem 1rem;
|
||||
padding: 3rem 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -19,20 +19,21 @@
|
||||
.logo {
|
||||
width: 50%;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
p {
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
@media (max-width: $media-s) {
|
||||
.info {
|
||||
display: block;
|
||||
@media (max-width: $media-m) {
|
||||
.logo {
|
||||
width: 60%;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
order: 2;
|
||||
}
|
||||
.logo, p {
|
||||
.social-nav {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0 0 2rem;
|
||||
margin: 0 auto 1rem;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,7 +43,7 @@
|
||||
padding: 3rem 0;
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 1.6rem;
|
||||
margin-right: 1.2rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -52,27 +53,42 @@
|
||||
height: 2rem;
|
||||
path {
|
||||
transition: all .2s ease-in-out;
|
||||
fill: $color-orange;
|
||||
}
|
||||
&:hover path {
|
||||
transition: all .2s ease-in-out;
|
||||
fill: $color-orange;
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
flex: 1;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $color-black;
|
||||
margin: 0;
|
||||
padding: 0.13rem 0.5rem;
|
||||
background: $color-yellow;
|
||||
transition: all .2s ease-in-out;
|
||||
&:hover {
|
||||
color: $color-orange;
|
||||
background: $color-white !important;;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
background: $color-orange;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background: $color-yellow;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background: $color-green;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
background: $color-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-s) {
|
||||
.social-nav {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,14 @@
|
||||
|
||||
.volunteer {
|
||||
background: $color-pink;
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
color: $color-white;
|
||||
text-shadow: 0.05em 0.05em $color-black;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
||||
+3
-3
@@ -38,9 +38,9 @@
|
||||
}
|
||||
|
||||
color: $color-white;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 700;
|
||||
//text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: $font-s;
|
||||
|
||||
&:after {
|
||||
|
||||
+4
-3
@@ -44,21 +44,22 @@ h1.section-title {
|
||||
}
|
||||
|
||||
img, div, .wp-caption {
|
||||
max-width: $width-l;
|
||||
max-width: $width-m;
|
||||
width: 100% !important;
|
||||
}
|
||||
.wp-caption-text {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.24;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
ul, p {
|
||||
margin: 0 auto 1.6rem;
|
||||
margin: 0 auto 1.24rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
max-width: $width-m;
|
||||
margin: 3.6rem auto 1rem;
|
||||
margin: 2.2rem auto 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
+14
-12
@@ -26,21 +26,23 @@ export const BlogPostTemplate = ({
|
||||
}`}
|
||||
>
|
||||
<div className="post-hero">
|
||||
<div className="post-hero_text">
|
||||
<h1>{title}</h1>
|
||||
<div className="post-meta">
|
||||
<p>
|
||||
{moment(date).format('dddd D. MMMM YYYY')} av{' '}
|
||||
<Link to={`/author/${author.slug}`}>{author.name}</Link>
|
||||
</p>
|
||||
<div className="post-hero-inner">
|
||||
<div className="post-hero_text">
|
||||
<h1>{title}</h1>
|
||||
<div className="post-meta">
|
||||
<p>
|
||||
{moment(date).format('dddd D. MMMM YYYY')} av{' '}
|
||||
<Link to={`/author/${author.slug}`}>{author.name}</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{hasFeaturedMedia && (
|
||||
<div className="post-hero_image">
|
||||
<Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{hasFeaturedMedia && (
|
||||
<div className="post-hero_image">
|
||||
<Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="post-content wp-content"
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
|
||||
Reference in new issue
Block a user