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

Style rework #35

Merged
Anri merged 70 commits from rework into main 2023-10-15 20:58:23 +02:00
Conversation 0 Commits 70 Files changed 49 +133 -1
6 changed files with 133 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 56711e4ee7 - Show all commits

6
src/routes/index.rs
View file

@ -19,6 +19,7 @@ pub async fn page(req: HttpRequest, config: web::Data<Config>) -> impl Responder
#[derive(Content, Debug)]
struct IndexTemplate {
navbar: NavBar,
fullname: String,
}
#[once(time = 60)]
@ -30,6 +31,11 @@ pub fn build_page(config: Config, url: String) -> String {
index: true,
..NavBar::default()
},
fullname: config
.fc
.fullname
.to_owned()
.unwrap_or("Fullname".to_owned()),
},
Infos {
page_title: config.fc.fullname,

22
static/css/constants.css Normal file
View file

@ -0,0 +1,22 @@
/* Parameters light */
@media (prefers-color-scheme: light) {
:root {
--background: #ffffff;
--font-color: #18181b;
--link-hover-color: #df5a9c;
}
}
/* Parameters dark */
@media (prefers-color-scheme: dark) {
:root {
--background: #171e26;
--font-color: #bcbcc5;
--link-hover-color: #ff80bf;
}
}
/* Global parameters */
:root {
--font-size: 17px;
}

51
static/css/index.css Normal file
View file

@ -0,0 +1,51 @@
/* Parameters light */
@media (prefers-color-scheme: light) {
:root {
--name-color: #e61515;
--pronouns-color: #646062;
}
}
/* Parameters dark */
@media (prefers-color-scheme: dark) {
:root {
--name-color: #ee9cc5;
--pronouns-color: #7c7579;
}
}
/* Page theme */
main {
color: var(--font-color);
font-size: var(--font-size);
margin-inline: 25%;
padding: 2em 1em;
}
/* Name header */
.name {
font-size: 2.2rem;
color: var(--name-color);
}
.subname {
margin-top: 0;
font-size: large;
}
.pronouns {
font-size: smaller;
color: var(--pronouns-color);
}
.avatar {
width: 65px;
border-radius: 50%;
float: right;
}
/* Description */
h1 {
font-weight: 600;
}

29
static/css/style.css
View file

@ -1,7 +1,25 @@
/* Theme of the pages */
html {
background-color: var(--background);
font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
}
p,
a {
color: var(--font-color);
font-size: var(--font-size);
}
/* Navigation bar across all of the pages */
.navbar {
text-align: center;
}
.navbar li {
display: inline-block;
}
/* Maybe do this only with 'large' screens */
.navbar p::after {
content: "·";
padding: 10px;
@ -11,6 +29,17 @@
content: "";
}
.navbar a {
text-decoration: none;
color: var(--link-hover-color);
}
.navbar a:hover {
text-decoration: underline;
opacity: 0.6;
transition: opacity 0.2s;
}
.bold {
font-weight: bold;
}

1
templates/head.html
View file

@ -6,4 +6,5 @@
{{>icons.html}} {{>metadata.html}}
<link rel="stylesheet" href="/css/constants.css" />
<link rel="stylesheet" href="/css/style.css" />

25
templates/index.html
View file

@ -2,8 +2,31 @@
<html lang="fr">
<head dir="ltr">
{{>head.html}}
<link rel="stylesheet" href="/css/index.css" />
</head>
<body>
{{>navbar.html}}
<header>{{>navbar.html}}</header>
<main>
{{#data}}
<div>
<span class="name">{{fullname}}</span>
<span class="pronouns">(il/lui, he/him)</span>
<img
class="avatar"
src="/icons/apple-touch-icon.png"
alt="Mon avatar"
loading="lazy"
/>
</div>
<p class="subname">Etudiant qui va rater son master</p>
<article>
<h1>Bienvenue !</h1>
<p>Content de vous voir ici !</p>
</article>
{{/data}}
</main>
</body>
</html>