Skip to content

Commit f87634c

Browse files
noemie-uiMartinDelille
noemie-ui
authored and
MartinDelille
committed
Correction responsive
1 parent de2fc5b commit f87634c

File tree

10 files changed

+205
-51
lines changed

10 files changed

+205
-51
lines changed

‎_includes/blogs.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{% endif %}
1111
</div>
1212
<div class="post-content">
13-
<h2>{{ post.title }}</h2>
13+
<h3>{{ post.title }}</h3>
1414
<p class="post-meta">
1515
<span class="published">Publié le <time datetime="{{ post.date }}">{{ post.date | date: "%d/%m/%Y"
1616
}}</time></span>
@@ -41,7 +41,7 @@ <h2>{{ post.title }}</h2>
4141

4242
{% if paginator.previous_page %}
4343
<li class="previous">
44-
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr;</a>
44+
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="fa fa-arrow-left"></a>
4545
</li>
4646
{% endif %}
4747

@@ -71,7 +71,7 @@ <h2>{{ post.title }}</h2>
7171

7272
{% if paginator.next_page %}
7373
<li class="next">
74-
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&rarr;</a>
74+
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="fa fa-arrow-right"></a>
7575
</li>
7676
{% endif %}
7777

‎_layouts/autopage_categories.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
title: Le Blog
33
layout: default
44
pagination:
5-
enabled: true
5+
enabled: true
66
---
77

8-
<h2>Le blog</h2>
9-
<div>Les blogs sont filtrés sur <strong>{{page.autopage.display_name}} </strong><a href="/blog">Afficher tous les blogs</a></div>
8+
<section class="normal">
9+
<h2>Le blog</h2>
10+
<div class="category">Les blogs sont filtrés sur <strong>{{page.autopage.display_name}} </strong><a href="/blog" class="category-link">Afficher tous les
11+
blogs</a></div>
1012

11-
{% include blogs.html %}
13+
{% include blogs.html %}
14+
</section>

‎_layouts/post.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<body>
66
{% include header.html %}
77
<div class="content">
8-
<div class="post">
8+
<div class="post normal">
99
<h1>{{ page.title }}</h1>
1010
<p class="post-meta">
1111
<span class="published">Publié le <time
@@ -22,7 +22,7 @@ <h1>{{ page.title }}</h1>
2222
{% if page.show_image and page.image %}
2323
<img src="{{ page.image }}" alt="{{ page.title }}" class="featured">
2424
{% endif %}
25-
<div class="normal post-content">
25+
<div class="post-content">
2626
{{ content }}
2727
</div>
2828
</div>

‎_sass/_base.scss‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,6 @@ body {
2323
}
2424

2525
.content {
26-
display: flex;
27-
28-
flex: 1 0 auto;
29-
flex-direction: column;
30-
31-
align-items: center;
32-
3326
width: 100%;
3427

3528
margin-top: 80px;
@@ -38,7 +31,7 @@ body {
3831

3932
.normal {
4033
max-width: 800px;
41-
margin: 2rem auto;
34+
margin: 4rem auto;
4235
}
4336

4437
.map {
@@ -57,3 +50,24 @@ footer {
5750
flex-shrink: 0;
5851
width: 100%;
5952
}
53+
54+
@media screen and (max-width: 900px) {
55+
.content {
56+
margin-top: 0;
57+
padding-top: 0;
58+
}
59+
60+
.normal {
61+
padding: 0 2rem;
62+
}
63+
}
64+
65+
@media screen and (max-width: 700px) {
66+
.button-join {
67+
display: block !important;
68+
69+
width: fit-content;
70+
margin-right: auto !important;
71+
margin-left: auto !important;
72+
}
73+
}

‎_sass/_blog.scss‎

Lines changed: 98 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,40 @@ h2 {
22
margin-bottom: 1em;
33
}
44

5+
.category {
6+
font-size: .9rem;
7+
8+
.category-link {
9+
display: block;
10+
11+
width: fit-content;
12+
margin-top: .35em;
13+
padding: .4em .6em .45em;
14+
15+
border: none;
16+
border-radius: .2em;
17+
18+
background: #88ba30;
19+
20+
color: #fff;
21+
font-size: .8rem;
22+
line-height: 1;
23+
list-style: none;
24+
white-space: nowrap;
25+
}
26+
}
27+
528
.blogroll {
629
max-width: 900px;
730
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
831
list-style: none;
932

1033
li {
11-
margin: 1rem;
34+
margin: 1rem 0;
1235
border: 1px solid #ddd;
1336

37+
--ratio: 16/10;
38+
1439
.post-link {
1540
display: flex;
1641
flex-direction: column;
@@ -20,47 +45,30 @@ h2 {
2045
flex-direction: row;
2146
}
2247

23-
.post-image {
24-
flex: none;
25-
height: 100%;
26-
max-height: 170px;
27-
28-
@media screen and (min-width: 560px) {
29-
width: 220px;
30-
}
31-
32-
img {
33-
display: block;
34-
35-
width: 100%;
36-
height: 100%;
37-
38-
object-fit: cover;
39-
object-position: center 25%;
40-
41-
//@media screen and (min-width: 560px) {
42-
// height: 160px;
43-
//}
48+
@media screen and (max-width: 650px) {
49+
.post-content {
50+
width: 100% !important;
4451
}
4552
}
4653

4754
.post-content {
4855
display: flex;
4956

50-
flex: 1 1 0%;
5157
flex-direction: column;
5258
justify-content: flex-start;
5359

60+
width: 65%;
5461
padding: 1.5rem;
5562

56-
h2 {
63+
h3 {
5764
margin-bottom: .5rem;
5865

5966
color: #4d4d4d;
6067
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
6168
font-size: 1.25rem;
6269
font-weight: bold;
6370
line-height: 1.3;
71+
text-transform: none;
6472
}
6573

6674
.post-meta {
@@ -83,6 +91,55 @@ h2 {
8391
}
8492
}
8593
}
94+
95+
.post-link > .post-image {
96+
width: 35%;
97+
aspect-ratio: var(--ratio);
98+
99+
img {
100+
display: block;
101+
102+
width: 100%;
103+
height: 100%;
104+
105+
object-fit: cover;
106+
object-position: center 25%;
107+
108+
//@media screen and (min-width: 560px) {
109+
// height: 160px;
110+
//}
111+
}
112+
}
113+
114+
.post-link > a {
115+
width: 35%;
116+
aspect-ratio: var(--ratio);
117+
118+
.post-image {
119+
width: 100%;
120+
height: 100%;
121+
122+
img {
123+
display: block;
124+
125+
width: 100%;
126+
height: 100%;
127+
128+
object-fit: cover;
129+
object-position: center 25%;
130+
}
131+
}
132+
}
133+
134+
@media screen and (max-width: 650px) {
135+
.post-link > .post-image {
136+
width: 100%;
137+
}
138+
139+
.post-link > a {
140+
width: 100%;
141+
}
142+
}
86143
}
87144
}
88145

@@ -103,6 +160,8 @@ h2 {
103160
.pager {
104161
display: flex;
105162

163+
justify-content: center;
164+
106165
margin: 1rem 1rem 2rem;
107166

108167
list-style: none;
@@ -137,6 +196,21 @@ h2 {
137196
background-color: rgb(132 203 213 / 15%);
138197
}
139198
}
199+
200+
.selected {
201+
background: #84cbd5;
202+
203+
a {
204+
color: #fff;
205+
}
206+
}
207+
208+
.next,
209+
.previous {
210+
a {
211+
line-height: 1.2;
212+
}
213+
}
140214
}
141215

142216
.post-categories {

‎_sass/_events.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
h2 {
2+
text-align: left;
3+
}
4+
15
.event {
26
display: flex;
37
flex-direction: column;
@@ -48,11 +52,18 @@
4852
.icons.flex {
4953
margin-bottom: 0;
5054
}
55+
56+
@media screen and (max-width: 700px) {
57+
.icons.flex {
58+
flex-wrap: wrap;
59+
justify-content: center;
60+
}
61+
}
5162
}
5263

5364
.contact {
5465
max-width: 800px;
55-
margin-bottom: 2rem;
66+
margin: 0 auto 2rem;
5667
padding: 2em;
5768

5869
border-top: solid 1px #84cbd5;

‎_sass/_formulas.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,12 @@
8383
background-color: #84cbd5;
8484
}
8585

86+
@media screen and (max-width: 700px) {
87+
flex-direction: column;
88+
}
89+
8690
@media screen and (min-width: 400px) {
8791
display: flex;
88-
89-
flex-direction: column;
9092
justify-content: center;
9193
gap: 1rem;
9294

@@ -102,4 +104,16 @@
102104
flex-direction: row;
103105
}
104106
}
107+
108+
@media screen and (max-width: 800px) {
109+
.formula {
110+
width: 50%;
111+
}
112+
}
113+
114+
@media screen and (max-width: 700px) {
115+
.formula {
116+
width: auto;
117+
}
118+
}
105119
}

0 commit comments

Comments
 (0)