Skip to content

Commit c0ab321

Browse files
MorganCaronMorganCaron
committed
Amélioration du design
1 parent 4a68517 commit c0ab321

File tree

6 files changed

+93
-29
lines changed

6 files changed

+93
-29
lines changed

‎articles.html‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,31 @@
33
title: Articles
44
permalink: /articles/
55
order: 2
6+
categories:
7+
- title: Git
8+
slug: git
9+
background: monolith0.webp
10+
- title: Langage C++
11+
slug: c++
12+
background: cavern2.webp
13+
- title: Langage CSS
14+
slug: css
15+
background: mountains1.jpg
616
---
717

818
<header class="parallax text-center">
919
<h2><span class="rounded-card">Articles par catégories</span></h2>
1020

1121
<div class="container">
12-
1322
<section class="category-cards">
14-
<a href="/articles/git" class="card" style="--card-background-image: url('/assets/images/backgrounds/monolith0.webp');">
15-
<img src="/assets/images/logos/git.svg" alt="Git" class="logo">
16-
<h3 class="text-center">Git</h3>
17-
</a>
18-
19-
<a href="/articles/c++" class="card" style="--card-background-image: url('/assets/images/backgrounds/cavern2.webp');">
20-
<img src="/assets/images/logos/c++.svg" alt="C++" class="logo">
21-
<h3 class="text-center">Langage C++</h3>
22-
</a>
23-
24-
<a href="/articles/css" class="card" style="--card-background-image: url('/assets/images/backgrounds/meadow1.webp');">
25-
<img src="/assets/images/logos/css.svg" alt="Web" class="logo">
26-
<h3 class="text-center">Langage CSS</h3>
23+
{% for category in page.categories %}
24+
{% assign nbArticles = site.articles | where: "category", category.slug | size %}
25+
<a href="/articles/{{ category.slug }}" class="card{% if nbArticles == 0 %} no-articles{% endif %}" style="--card-background-image: url('/assets/images/backgrounds/{{ category.background }}');">
26+
<img src="/assets/images/logos/{{ category.slug }}.svg" alt="{{ category.title }}" class="logo">
27+
<h3 class="text-center">{{ category.title }}</h3>
2728
</a>
29+
{% endfor %}
2830
</section>
29-
3031
</div>
3132
</header>
3233

‎articles_c++.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
permalink: /articles/c++/
44
logo: c++.svg
5-
background: mountains1.jpg
5+
background: cavern2.webp
66
---
77

88
{% include header.html %}
@@ -13,16 +13,19 @@
1313
<a href="/articles/{{page.category}}" class="button nier highlight-hover bullet triangle-left">Back</a>
1414
</span>
1515
</div>
16+
{% assign articles = site.articles | where: "category", "c++" %}
17+
{% if articles.size == 0 %}
18+
{% wip %}
19+
<p>Aucun article disponible pour le moment. Ils sont bien en cours de rédaction mais aucun n'est encore publié. Merci de repasser ultérieurement.</p>
20+
{% endif %}
1621
<section class="article-cards">
17-
{% for article in site.articles %}
18-
{% if article.category == "c++" %}
22+
{% for article in articles %}
1923
<a href="{{ article.url }}" class="card">
2024
<header{% if article.background != "" %} style="--background-image: url('/assets/images/backgrounds/{{article.background}}');"{% endif %}>
2125
<h2>{{ article.title }}</h2>
2226
</header>
2327
<div>{{ article.excerpt }}</div>
2428
</a>
25-
{% endif %}
2629
{% endfor %}
2730
</section>
2831
</div>

‎articles_css.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
permalink: /articles/css/
44
logo: css.svg
5-
background: mountains0.jpg
5+
background: mountains1.jpg
66
---
77

88
{% include header.html %}
@@ -13,16 +13,19 @@
1313
<a href="/articles/{{page.category}}" class="button nier highlight-hover bullet triangle-left">Back</a>
1414
</span>
1515
</div>
16+
{% assign articles = site.articles | where: "category", "css" %}
17+
{% if articles.size == 0 %}
18+
{% wip %}
19+
<p>Aucun article disponible pour le moment. Ils sont bien en cours de rédaction mais aucun n'est encore publié. Merci de repasser ultérieurement.</p>
20+
{% endif %}
1621
<section class="article-cards">
17-
{% for article in site.articles %}
18-
{% if article.category == "css" %}
22+
{% for article in articles %}
1923
<a href="{{ article.url }}" class="card">
2024
<header{% if article.background != "" %} style="--background-image: url('/assets/images/backgrounds/{{article.background}}');"{% endif %}>
2125
<h2>{{ article.title }}</h2>
2226
</header>
2327
<div>{{ article.excerpt }}</div>
2428
</a>
25-
{% endif %}
2629
{% endfor %}
2730
</section>
2831
</div>

‎articles_git.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: page
33
permalink: /articles/git/
44
logo: git.svg
5-
background: mountains0.jpg
5+
background: monolith0.webp
66
---
77

88
{% include header.html %}
@@ -13,16 +13,19 @@
1313
<a href="/articles/{{page.category}}" class="button nier highlight-hover bullet triangle-left">Back</a>
1414
</span>
1515
</div>
16+
{% assign articles = site.articles | where: "category", "git" %}
17+
{% if articles.size == 0 %}
18+
{% wip %}
19+
<p>Aucun article disponible pour le moment. Ils sont bien en cours de rédaction mais aucun n'est encore publié. Merci de repasser ultérieurement.</p>
20+
{% endif %}
1621
<section class="article-cards">
17-
{% for article in site.articles %}
18-
{% if article.category == "git" %}
22+
{% for article in articles %}
1923
<a href="{{ article.url }}" class="card">
2024
<header{% if article.background != "" %} style="--background-image: url('/assets/images/backgrounds/{{article.background}}');"{% endif %}>
2125
<h2>{{ article.title }}</h2>
2226
</header>
2327
<div>{{ article.excerpt }}</div>
2428
</a>
25-
{% endif %}
2629
{% endfor %}
2730
</section>
2831
</div>

‎assets/css/theme.css‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,27 @@ body {
112112
background-color: rgb(1, 4, 9);
113113
}
114114

115+
&:not(:has(header.home)) {
116+
--hexagon-background-color: #131316;
117+
--hexagon-border-color: #0f0f0f;
118+
--hexagon-radius: 30px;
119+
--hexagon-border-size: 5px;
120+
121+
--triangle-height: calc(var(--hexagon-radius) * sqrt(3)/2);
122+
--vertical-border-size: calc(var(--hexagon-border-size) * sqrt(3)/2);
123+
--background-width: calc(var(--triangle-height)*2 + var(--hexagon-border-size));
124+
--background-height: calc(var(--hexagon-radius)*3 + var(--vertical-border-size)*2);
125+
background:
126+
conic-gradient(from 180deg at calc(var(--background-width)/2 - var(--hexagon-border-size)/2) calc(var(--hexagon-radius)*2 + var(--vertical-border-size)*2), var(--hexagon-background-color) 0deg 120deg, #0000 120deg 360deg) calc(var(--hexagon-border-size)/2 + var(--triangle-height)) calc(0px - var(--vertical-border-size) - var(--hexagon-radius)*1.5),
127+
conic-gradient(from 60deg at calc(var(--background-width)/2 + var(--hexagon-border-size)/2) calc(var(--hexagon-radius)*2 + var(--vertical-border-size)*2), #0000, var(--hexagon-background-color) 0 120deg, #0000 120deg 360deg) calc(0px - var(--hexagon-border-size)/2 - var(--triangle-height)) calc(0px - var(--vertical-border-size) - var(--hexagon-radius)*1.5),
128+
conic-gradient(from 180deg at calc(var(--background-width)/2 - var(--hexagon-border-size)/2) calc(var(--hexagon-radius)*2 + var(--vertical-border-size)*2), #0000, var(--hexagon-background-color) 0 120deg, #0000 120deg 360deg),
129+
conic-gradient(from 60deg at calc(var(--background-width)/2 + var(--hexagon-border-size)/2) calc(var(--hexagon-radius)*2 + var(--vertical-border-size)*2), var(--hexagon-background-color) 0 120deg, #0000 120deg 360deg),
130+
conic-gradient(from -60deg at 50% calc(var(--hexagon-radius)/2), var(--hexagon-background-color) 0 120deg, #0000 120deg 360deg) 0 calc(var(--vertical-border-size) + var(--hexagon-radius)*1.5),
131+
conic-gradient(from -60deg at 50% calc(var(--hexagon-radius)/2), var(--hexagon-background-color) 0 120deg, #0000 120deg 360deg) calc(var(--background-width)/2) 0
132+
var(--hexagon-border-color);
133+
background-size: var(--background-width) var(--background-height);
134+
}
135+
115136
> .parallax > header {
116137
padding: 1rem;
117138
margin-bottom: 1rem;
@@ -554,6 +575,7 @@ section.category-cards {
554575
grid-template-columns: 1fr 1fr;
555576
gap: 1rem 1rem;
556577
margin-bottom: 1rem;
578+
user-select: none;
557579

558580
@media (min-width: 992px) {
559581
grid-template-columns: 1fr 1fr 1fr;
@@ -592,7 +614,7 @@ section.category-cards {
592614
transform: translateY(0);
593615
}
594616

595-
&::after {
617+
&::before {
596618
content: "";
597619
display: block;
598620
position: absolute;
@@ -606,8 +628,39 @@ section.category-cards {
606628
box-shadow: 0 1rem 1.5rem -.5rem rgba(0, 0, 0, 0.75);
607629
}
608630

609-
&:hover {
631+
&.no-articles {
632+
cursor: wait;
633+
610634
&::after {
635+
content: "Work in progress";
636+
display: block;
637+
position: absolute;
638+
top: 20%;
639+
transform: rotateZ(-10deg) skewX(-10deg);
640+
width: 102%;
641+
margin: .5rem 0;
642+
border-style: solid;
643+
border-width: .5rem 0;
644+
border-image: repeating-linear-gradient(45deg, #222, #222 10px, transparent 10px, transparent 25px) 10;
645+
background-image: linear-gradient(90deg, transparent, #ff0 10%, #ff0 90%, transparent);
646+
background-size: auto, auto 132px, auto;
647+
color: #222;
648+
font-size: 1rem;
649+
font-weight: bold;
650+
text-align: center;
651+
}
652+
653+
&::before {
654+
filter: grayscale(100%);
655+
}
656+
657+
& img {
658+
filter: sepia(100%);
659+
}
660+
}
661+
662+
&:not(.no-articles):hover {
663+
&::before {
611664
transform: perspective(1000px) rotateX(25deg);
612665
box-shadow: 2px 30px 30px -10px rgba(0, 0, 0, 0.95);
613666
}

‎projects.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@
77
---
88

99
<h1 class="text-center">Coming soon</h1>
10+
{% wip %}

0 commit comments

Comments
 (0)