2
0
mirror of https://github.com/offen/website.git synced 2024-12-25 22:30:21 +01:00

update blog index desktop

This commit is contained in:
Hendrik Niefeld 2020-08-05 21:24:39 +02:00
parent 639c143ba3
commit e5c43a25e0
2 changed files with 25 additions and 6 deletions

View File

@ -54,8 +54,14 @@ COLORS
.cclr-bg-white-fade-metrics {
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7;
}
.cclr-bg-white-responsive {
background-color: #f9f7f2;
}
@media only screen and (min-width: 60rem) {
.cclr-bg-white-responsive {
background-color: #ffffff;
}
}
/* ---------------------------------------------------
LAYOUT
----------------------------------------------------*/
@ -281,6 +287,19 @@ body {
.f25 {
font-size: 1.9rem;
}
.f26 {
font-size: 1.9rem;
}
@media only screen and (min-width: 60em) {
.f26 {
font-size: 2.25rem;
}
}
@media only screen and (min-width: 60em) {
.f26 {
font-size: 1.9rem;
}
}
span {
display: table;
}

View File

@ -8,15 +8,15 @@
{% set cta_index = True %}
{% block content %}
<div class="mw8 center bg-white pr4-l">
<div class="mw8 center cclr-bg-white-responsive pr5-l">
<div class="flex flex-wrap mt0 mt5-l">
{% for article in articles %}
<div class="w-100 w-50-l">
{% if loop.index != 1 %}
<hr class="mb5 b--none dn-l">
<hr class="mb5 b--none db dn-l">
{% endif %}
<article class="w-100 mt5-m mt0-l gray">
<div class="mw8 center pv5 ph3 ph5-m pr0-l pl4-l bg-white">
<div class="mw8 center pv5 ph3 ph5-m pr0-l pl5-l bg-white">
<figure class="larger-image mb4">
<a href="{{ article.slug }}">
<img alt="{{ article.title }}" src="{{ article.image_url }}"/>
@ -25,7 +25,7 @@
<h6 class="f5 lh-solid normal ma0 light-silver">
{{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
</h6>
<h1 class="f2 normal lh-title mt3 ma0 mb3 light-silver">
<h1 class="f26 normal lh-title mt3 ma0 mb3 light-silver">
<a href="{{ article.slug }}" class="link b dim gray">{{ article.title }}</a>
</h1>
<p class="">