Anri/mylloon.fr
1
0
Fork 0
Code Issues 21 Pull requests 2 Releases Packages 1 Activity Actions

index blog css done!
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
Details

Browse source
This commit is contained in:
Mylloon 2023-04-24 19:11:00 +02:00
parent 76a79bf192
commit 4da4bb2e58
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 52 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
static/css/blog/index.css
View file

@ -19,40 +19,68 @@
--point: #515f70; --point: #515f70;
--bg-hover: #071f2a; --bg-hover: #071f2a;
--point-hover: #ff00ff; --point-hover: #ff00ff;
--font-color: #ffffff; --font-color: #a1a1aa;
--title-color: #a25add; --title-color: #a25add;
--font-size: 20px;
} }
} }
* { html {
/* padding: 0px; */ background-color: var(--bg);
margin: 0px;
box-sizing: border-box;
font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji", font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
"Segoe UI Symbol"; "Segoe UI Symbol";
/* perspective: 800px; */
} }
body { /* Title of page */
background-color: var(--bg); h1 {
/* width: 100%; */ color: var(--font-color);
/* min-height: 100vh; */ text-transform: uppercase;
display: flex; letter-spacing: 0.3cap;
justify-content: center; }
/* align-items: center; */
h2,
p {
margin: 0px;
}
h1,
footer {
text-align: center;
font-size: calc(var(--font-size) * 2);
}
footer > * {
color: var(--font-color);
font-weight: bold;
text-decoration: none;
font-size: calc(var(--font-size) / 1.5);
text-transform: uppercase;
opacity: 0.7;
letter-spacing: 0.15rem;
}
footer > *::before {
content: "> ";
}
a:hover {
color: var(--title-color);
} }
.timeline { .timeline {
box-sizing: border-box;
width: 800px; width: 800px;
color: var(--font-color); color: var(--font-color);
padding: 30px 20px; padding: 30px 20px;
display: flex;
width: 100%;
justify-content: center;
} }
/* Barre */ /* Barre */
.timeline ul { .timeline ul {
list-style-type: none; list-style-type: none;
border-left: 2px solid var(--line); border-left: 2px solid var(--line);
padding: 10px 5px; padding: 0px 5px;
} }
/* Card */ /* Card */
@ -68,15 +96,15 @@ body {
display: inline-block; display: inline-block;
background-color: var(--date); background-color: var(--date);
border-radius: 25px; border-radius: 25px;
padding: 2px 5px; padding: 2px 8px;
font-size: 15px; font-size: calc(var(--font-size) - 2px);
/* text-align: center; */ /* text-align: center; */
} }
/* Titles */ /* Titles */
.timeline ul li .content h3 > a { .timeline ul li .content h2 > a {
color: var(--title-color); color: var(--title-color);
font-size: 17px; font-size: var(--font-size);
padding-top: 5px; padding-top: 5px;
text-decoration: none; text-decoration: none;
} }
@ -84,7 +112,7 @@ body {
/* Descriptions */ /* Descriptions */
.timeline ul li .content p { .timeline ul li .content p {
padding: 5px 0px 15px 0px; padding: 5px 0px 15px 0px;
font-size: 15px; font-size: calc(var(--font-size) - 2px);
} }
/* Points côté */ /* Points côté */
@ -96,7 +124,7 @@ body {
background-color: var(--point); background-color: var(--point);
border-radius: 50%; border-radius: 50%;
left: -11px; left: -11px;
top: 28px; top: 59px;
transition: 0.2s; transition: 0.2s;
} }
@ -116,8 +144,8 @@ body {
/* width: 100%; */ /* width: 100%; */
padding: 30px 5px 30px 10px; padding: 30px 5px 30px 10px;
} }
.timeline ul li .content h3 > a { .timeline ul li .content h2 > a {
color: var(--title-color); color: var(--title-color);
font-size: 15px; font-size: calc(var(--font-size) - 2px);
} }
} }

4
templates/blog/index.html
View file

@ -7,7 +7,7 @@
<body class="index"> <body class="index">
{{#data}} {{#data}}
<h1 id="title">Blog</h1> <h1>Blog</h1>
{{#no_posts}} {{#no_posts}}
<h2 class="subtitle">Aucun posts</h2> <h2 class="subtitle">Aucun posts</h2>
{{/no_posts}} {{^no_posts}} {{/no_posts}} {{^no_posts}}
@ -33,7 +33,7 @@
{{/date}}</span {{/date}}</span
> >
<div class="content"> <div class="content">
<h3><a href="/blog/{{url}}">{{title}}</a></h3> <h2><a href="/blog/{{url}}">{{title}}</a></h3>
{{#desc}} {{#desc}}
<p>{{desc}}</p> <p>{{desc}}</p>
{{/desc}} {{/desc}}