Posts list pages and post page
This commit is contained in:
Yves Gatesoupe
parent
120def00bc
commit
d89fc3516a
22
.eleventy.js
22
.eleventy.js
@ -41,28 +41,32 @@ module.exports = function(config) {
|
||||
|
||||
// Custom collections
|
||||
const livePosts = post => post.date <= now && !post.data.draft;
|
||||
const newsPosts = post => post.data.type === 'news';
|
||||
const eventPosts = post => post.data.type === 'event';
|
||||
|
||||
config.addCollection('posts', collection => {
|
||||
return [
|
||||
...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)
|
||||
...collection.getFilteredByGlob('./src/posts/*.md')
|
||||
].reverse();
|
||||
});
|
||||
|
||||
config.addCollection('postFeed', collection => {
|
||||
return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
|
||||
.reverse()
|
||||
.slice(0, site.maxPostsPerPage);
|
||||
config.addCollection('news', collection => {
|
||||
return [
|
||||
...collection.getFilteredByGlob('./src/posts/*.md').filter(newsPosts)
|
||||
].reverse();
|
||||
});
|
||||
config.addCollection('events', collection => {
|
||||
return [
|
||||
...collection.getFilteredByGlob('./src/posts/*.md').filter(eventPosts)
|
||||
].reverse();
|
||||
});
|
||||
config.addCollection('newsFeed', collection => {
|
||||
return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
|
||||
.reverse()
|
||||
.slice(0, site.maxNewsPerPage);
|
||||
});
|
||||
|
||||
// const teamMembers = member;
|
||||
config.addCollection('members', collection => {
|
||||
return [...collection.getFilteredByGlob("./src/members/*.md")];
|
||||
});
|
||||
|
||||
config.addCollection('profiles', collection => {
|
||||
return [...collection.getFilteredByGlob("./src/members/*.md")]
|
||||
.slice(0, site.maxProfilePreview);
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{
|
||||
"items": [
|
||||
{
|
||||
"text": "Actualité",
|
||||
"url": "/posts/",
|
||||
"external": false
|
||||
},
|
||||
{
|
||||
"text": "Comprendre la CAE",
|
||||
"url": "/comprendre-la-cae",
|
||||
"url": "/comprendre-la-cae/",
|
||||
"external": false
|
||||
},
|
||||
{
|
||||
"text": "Nous rejoindre",
|
||||
"url": "/nous-rejoindre",
|
||||
"url": "/nous-rejoindre/",
|
||||
"external": false
|
||||
},
|
||||
{
|
||||
"text": "L'équipe",
|
||||
"url": "/equipe",
|
||||
"external": false
|
||||
},
|
||||
{
|
||||
"text": "Actualité",
|
||||
"url": "/actualite",
|
||||
"url": "/equipe/",
|
||||
"external": false
|
||||
},
|
||||
{
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{% block content %}
|
||||
<main id="main-content" class="home" tabindex="-1">
|
||||
{% include "partials/components/intro.njk" %}
|
||||
{% include "partials/components/news-list.njk" %}
|
||||
{% include "partials/components/posts-list-home.njk" %}
|
||||
{% include "partials/components/post-list.njk" %}
|
||||
{% include "partials/components/presentation.njk" %}
|
||||
{% include "partials/components/sponsor.njk" %}
|
||||
|
||||
@ -1,47 +1,17 @@
|
||||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{# Intro content #}
|
||||
{% set introHeading = title %}
|
||||
{% set introSummary %}
|
||||
<p class="[ intro__meta ] [ text-500 leading-tight ]">
|
||||
{% if date %}
|
||||
<time datetime="{{ date | w3DateFilter }}" class="dt-published">{{ date | dateFilter }}</time>
|
||||
{% endif %}
|
||||
<span>— {{ helpers.getReadingTime(content) }} minute read</span>
|
||||
</p>
|
||||
{% endset %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" tabindex="-1">
|
||||
<article class="[ post ] [ h-entry ]">
|
||||
{% include "partials/components/intro.njk" %}
|
||||
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 {{ 'pad-bottom-900' if not site.enableThirdPartyComments }} text-500 ] [ sf-flow ] [ e-content ]">
|
||||
<article class="[ post wrapper ]">
|
||||
<div class="[ post__body ]">
|
||||
<h1>{{ title }}</h1>
|
||||
{% if illustration %}
|
||||
<img class="post-pic" src="{{ illustration }}" alt="illustration de l'article">
|
||||
{% endif %}
|
||||
{{ content | safe }}
|
||||
<a class="return-link" href="/posts">Voir toute l'actualité</a>
|
||||
</div>
|
||||
{% if site.enableThirdPartyComments %}
|
||||
<hr />
|
||||
<aside class="[ post__body ] [ inner-wrapper ] [ pad-bottom-900 text-500 ]">
|
||||
{% include "partials/global/third-party-comments.njk" %}
|
||||
</aside>
|
||||
{% endif %}
|
||||
{% if tags %}
|
||||
<footer class="[ post__footer ] [ pad-top-500 pad-bottom-500 ]">
|
||||
<div class="inner-wrapper">
|
||||
<div class="[ nav ] [ box-flex align-center ]">
|
||||
<h2 class="font-base text-600 weight-mid">Filed under</h2>
|
||||
<ul class="[ nav__list ] [ box-flex align-center pad-left-400 ] [ p-category ]">
|
||||
{% for item in tags %}
|
||||
<li class="nav__item">
|
||||
<a href="/tags/{{ item }}">{{ item }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
24
src/_includes/layouts/posts-events.njk
Normal file
24
src/_includes/layouts/posts-events.njk
Normal file
@ -0,0 +1,24 @@
|
||||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{% set newsListItems = collections.events %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="posts" tabindex="-1">
|
||||
<div class="[ wrapper ]">
|
||||
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
|
||||
<ul class="post-filter">
|
||||
<li>
|
||||
<a href="/posts">Tout</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts-news">Actualités</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="/posts-events">Évènements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% include "partials/components//posts-list.njk" %}
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
24
src/_includes/layouts/posts-news.njk
Normal file
24
src/_includes/layouts/posts-news.njk
Normal file
@ -0,0 +1,24 @@
|
||||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{% set newsListItems = collections.news %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="posts" tabindex="-1">
|
||||
<div class="[ wrapper ]">
|
||||
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
|
||||
<ul class="post-filter">
|
||||
<li>
|
||||
<a href="/posts">Tout</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="/posts-news">Actualités</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts-events">Évènements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% include "partials/components//posts-list.njk" %}
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
27
src/_includes/layouts/posts.njk
Normal file
27
src/_includes/layouts/posts.njk
Normal file
@ -0,0 +1,27 @@
|
||||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{% set newsListItems = collections.posts %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="posts" tabindex="-1">
|
||||
<div class="[ wrapper ]">
|
||||
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
|
||||
<ul class="post-filter">
|
||||
<li class="active">
|
||||
<a href="/posts">Tout</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts-news">Actualités</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts-events">Évènements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<section class="[ news-list wrapper ]">
|
||||
{% include "partials/components/posts-list.njk" %}
|
||||
</section>
|
||||
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
@ -13,8 +13,12 @@
|
||||
{% set currentAttribute = ' aria-current="page"' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.url == item.url %}
|
||||
<li class="nav__item active">
|
||||
{% else %}
|
||||
<li class="nav__item">
|
||||
<a href="{{ item.url | url }}"{{ relAttribute | safe }}{{ currentAttribute | safe }}>{{ item.text }}</a>
|
||||
{% endif %}
|
||||
<a href="{{ item.url | url }}" {{ relAttribute | safe }}{{ currentAttribute | safe }}>{{ item.text }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
{% if newsListItems.length %}
|
||||
<section class="[ news-list ]">
|
||||
<svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
|
||||
<div class="[ wrapper ]">
|
||||
<div class="news-list__inner">
|
||||
<h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
|
||||
<ol class="[ news-list__items ]" reversed>
|
||||
{% for item in newsListItems %}
|
||||
{% if item.date.getTime() <= global.now %}
|
||||
<li class="news-list__item">
|
||||
<h3 class="news-list__item-heading">
|
||||
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
|
||||
</h3>
|
||||
<p class="news-list__item-date">
|
||||
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
|
||||
</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
<a href="/" class="news-list__see-all">Voir tout</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
10
src/_includes/partials/components/posts-list-home.njk
Normal file
10
src/_includes/partials/components/posts-list-home.njk
Normal file
@ -0,0 +1,10 @@
|
||||
<section class="[ news-list ]">
|
||||
<svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
|
||||
<div class="[ wrapper ]">
|
||||
<div class="news-list__inner">
|
||||
<h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
|
||||
{% include "partials/components/posts-list.njk" %}
|
||||
<a href="/posts" class="news-list__see-all">Voir tout</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
16
src/_includes/partials/components/posts-list.njk
Normal file
16
src/_includes/partials/components/posts-list.njk
Normal file
@ -0,0 +1,16 @@
|
||||
{% if newsListItems.length %}
|
||||
<ol class="[ news-list__items ]" reversed>
|
||||
{% for item in newsListItems %}
|
||||
{% if item.date.getTime() <= global.now %}
|
||||
<li class="news-list__item {{ item.data.type }}">
|
||||
<h3 class="news-list__item-heading">
|
||||
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
|
||||
</h3>
|
||||
<p class="news-list__item-date">
|
||||
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
|
||||
</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% endif %}
|
||||
BIN
src/images/reunion-24-06-2020.jpeg
Normal file
BIN
src/images/reunion-24-06-2020.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
8
src/pages/posts-events.md
Normal file
8
src/pages/posts-events.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 'Actualité & Évènements'
|
||||
permalink: '/posts-events/index.html'
|
||||
layout: 'layouts/posts-events.njk'
|
||||
pageHeading: 'Actualité & Évènements'
|
||||
---
|
||||
|
||||
|
||||
8
src/pages/posts-news.md
Normal file
8
src/pages/posts-news.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 'Actualité & Évènements'
|
||||
permalink: '/posts-news/index.html'
|
||||
layout: 'layouts/posts-news.njk'
|
||||
pageHeading: 'Actualité & Évènements'
|
||||
---
|
||||
|
||||
|
||||
8
src/pages/posts.md
Normal file
8
src/pages/posts.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 'Actualité & Évènements'
|
||||
permalink: '/posts/index.html'
|
||||
layout: 'layouts/posts.njk'
|
||||
pageHeading: 'Actualité & Évènements'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: A post with code samples
|
||||
date: '2019-12-18'
|
||||
type: 'news'
|
||||
tags:
|
||||
- demo-content
|
||||
- code
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: A post with figures and video
|
||||
date: '2019-04-18'
|
||||
type: 'news'
|
||||
tags:
|
||||
- demo-content
|
||||
- blog
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: A scheduled post
|
||||
date: '2022-06-18'
|
||||
type: 'news'
|
||||
tags:
|
||||
- demo-content
|
||||
- simple-post
|
||||
|
||||
29
src/posts/a-simple-post copy.md
Normal file
29
src/posts/a-simple-post copy.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: A simple post
|
||||
date: '2019-05-18'
|
||||
type: 'news'
|
||||
tags:
|
||||
- demo-content
|
||||
- simple-post
|
||||
- blog
|
||||
---
|
||||
A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
|
||||
|
||||
How about a `<blockquote>`?
|
||||
|
||||
> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
|
||||
|
||||
A list of stuff:
|
||||
|
||||
- Sed posuere consectetur est at lobortis
|
||||
- Aenean lacinia bibendum nulla sed consectetur
|
||||
- Sed posuere consectetur est at lobortis
|
||||
|
||||
How about an ordered list of stuff:
|
||||
|
||||
1. Sed posuere consectetur est at lobortis
|
||||
2. Aenean lacinia bibendum nulla sed consectetur
|
||||
3. Sed posuere consectetur est at lobortis
|
||||
|
||||
|
||||
Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.
|
||||
@ -1,28 +1,10 @@
|
||||
---
|
||||
title: A simple post
|
||||
date: '2019-05-18'
|
||||
title: A simpler post
|
||||
date: '2019-05-19'
|
||||
type: 'news'
|
||||
tags:
|
||||
- demo-content
|
||||
- simple-post
|
||||
- blog
|
||||
---
|
||||
A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
|
||||
|
||||
How about a `<blockquote>`?
|
||||
|
||||
> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
|
||||
|
||||
A list of stuff:
|
||||
|
||||
- Sed posuere consectetur est at lobortis
|
||||
- Aenean lacinia bibendum nulla sed consectetur
|
||||
- Sed posuere consectetur est at lobortis
|
||||
|
||||
How about an ordered list of stuff:
|
||||
|
||||
1. Sed posuere consectetur est at lobortis
|
||||
2. Aenean lacinia bibendum nulla sed consectetur
|
||||
3. Sed posuere consectetur est at lobortis
|
||||
|
||||
|
||||
Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
title: Réunion d'information Astrolabe
|
||||
date: '2020-06-12'
|
||||
time: '19:00'
|
||||
type: 'event'
|
||||
tags:
|
||||
- évenement
|
||||
- réunion
|
||||
|
||||
16
src/posts/evenement-24-06-20.md
Normal file
16
src/posts/evenement-24-06-20.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Réunion d'information Astrolabe
|
||||
date: '2020-06-24'
|
||||
time: '19:00'
|
||||
type: 'event'
|
||||
illustration: '/images/reunion-24-06-2020.jpeg'
|
||||
layout: 'layouts/post.njk'
|
||||
---
|
||||
Vous vous demandez ce qu'est une #SCOP #CAE ? Le statut d'entrepreneur salarié #CESA est-il fait pour vous ?
|
||||
|
||||
Venez nous rencontrer lors de notre réunion d'information :
|
||||
|
||||
- Date : 24 Juin 19H
|
||||
- Lieu : Visio-conférence
|
||||
|
||||
[Formulaire d'inscription](https://framaforms.org/reunion-dinformation-scop-astrolabe-cae-du-24-juin-a-19h-en-visio-1591805443)
|
||||
@ -60,5 +60,21 @@ a:visited {
|
||||
|
||||
&.highlight {
|
||||
background-color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.return-link {
|
||||
align-self: flex-end;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
|
||||
&:visited {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,5 +29,10 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
text-decoration: underline;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,23 @@
|
||||
.post {
|
||||
padding-bottom: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
|
||||
&__body {
|
||||
// --flow-space: #{get-size(800)};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/**
|
||||
* Generic HTML styles
|
||||
*/
|
||||
h1 {
|
||||
margin-top: 8rem;
|
||||
margin: 8rem 0 4rem;
|
||||
}
|
||||
|
||||
// h2 + *,
|
||||
// h3 + * {
|
||||
// --flow-space: #{get-size(500)};
|
||||
// }
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
@include apply-utility('leading', 'tight');
|
||||
position: relative;
|
||||
/*display: flex;*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
p {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
@ -75,6 +66,7 @@
|
||||
ol:not([class]),
|
||||
ul:not([class]) {
|
||||
margin-left: get-size(800);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
li + li {
|
||||
margin-top: get-size(300);
|
||||
@ -101,12 +93,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
figure img,
|
||||
pre > code,
|
||||
.video-player {
|
||||
// box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
figure img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -120,6 +106,11 @@
|
||||
padding: 0 get-size(500);
|
||||
}
|
||||
|
||||
.post-pic {
|
||||
align-self: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
background: var(--color-dark);
|
||||
@ -134,7 +125,6 @@
|
||||
grid-template-rows: auto;
|
||||
grid-column-gap: 1.5rem;
|
||||
grid-row-gap: 0;
|
||||
margin-top: 4rem;
|
||||
|
||||
.video-player > iframe {
|
||||
height: 89%;
|
||||
@ -237,7 +227,7 @@
|
||||
|
||||
.process-cae {
|
||||
max-width: 34.875rem;
|
||||
margin: 8rem auto 0;
|
||||
margin: 0 auto;
|
||||
|
||||
&.split {
|
||||
max-width: 100%;
|
||||
|
||||
@ -1,23 +1,9 @@
|
||||
.news-list {
|
||||
margin-top: 8rem;
|
||||
margin-bottom: 24rem;
|
||||
position: relative;
|
||||
|
||||
// > svg {
|
||||
// position: absolute;
|
||||
// z-index: -1;
|
||||
// top: -18rem;
|
||||
// }
|
||||
|
||||
.wrapper {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
position: absolute;
|
||||
top: -9rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -33,7 +19,7 @@
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 1.5rem;
|
||||
grid-row-gap: 0;
|
||||
grid-row-gap: 2rem;
|
||||
}
|
||||
|
||||
&__item {
|
||||
@ -43,6 +29,10 @@
|
||||
color: var(--color-dark);
|
||||
border-radius: 1rem;
|
||||
|
||||
&.event {
|
||||
background-color: #97dffc;
|
||||
}
|
||||
|
||||
&-heading {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
@ -78,16 +68,16 @@
|
||||
align-self: flex-end;
|
||||
margin-top: 3rem;
|
||||
padding: .875rem 1.5rem;
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home .news-list {
|
||||
margin-top: 8rem;
|
||||
margin-bottom: 24rem;
|
||||
position: relative;
|
||||
|
||||
&__inner {
|
||||
position: absolute;
|
||||
top: -9rem;
|
||||
}
|
||||
}
|
||||
28
src/scss/components/_posts.scss
Normal file
28
src/scss/components/_posts.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.posts {
|
||||
.wrapper:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-filter {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 1.5rem;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
text-decoration: underline;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -68,11 +68,12 @@ img {
|
||||
@import 'components/intro';
|
||||
@import 'components/nav';
|
||||
@import 'components/pagination';
|
||||
@import 'components/posts';
|
||||
@import 'components/post';
|
||||
@import 'components/post-list';
|
||||
@import 'components/member';
|
||||
@import 'components/member-list';
|
||||
@import 'components/news-list';
|
||||
@import 'components/posts-list';
|
||||
@import 'components/presentation';
|
||||
@import 'components/site-head';
|
||||
@import 'components/site-foot';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user