Style rework #35
6 changed files with 133 additions and 1 deletions
|
|
@ -19,6 +19,7 @@ pub async fn page(req: HttpRequest, config: web::Data<Config>) -> impl Responder
|
||||||
#[derive(Content, Debug)]
|
#[derive(Content, Debug)]
|
||||||
struct IndexTemplate {
|
struct IndexTemplate {
|
||||||
navbar: NavBar,
|
navbar: NavBar,
|
||||||
|
fullname: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[once(time = 60)]
|
#[once(time = 60)]
|
||||||
|
|
@ -30,6 +31,11 @@ pub fn build_page(config: Config, url: String) -> String {
|
||||||
index: true,
|
index: true,
|
||||||
..NavBar::default()
|
..NavBar::default()
|
||||||
},
|
},
|
||||||
|
fullname: config
|
||||||
|
.fc
|
||||||
|
.fullname
|
||||||
|
.to_owned()
|
||||||
|
.unwrap_or("Fullname".to_owned()),
|
||||||
},
|
},
|
||||||
Infos {
|
Infos {
|
||||||
page_title: config.fc.fullname,
|
page_title: config.fc.fullname,
|
||||||
|
|
|
||||||
22
static/css/constants.css
Normal file
22
static/css/constants.css
Normal 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
51
static/css/index.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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 {
|
.navbar li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Maybe do this only with 'large' screens */
|
||||||
.navbar p::after {
|
.navbar p::after {
|
||||||
content: "·";
|
content: "·";
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -11,6 +29,17 @@
|
||||||
content: "";
|
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 {
|
.bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,5 @@
|
||||||
|
|
||||||
{{>icons.html}} {{>metadata.html}}
|
{{>icons.html}} {{>metadata.html}}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/constants.css" />
|
||||||
<link rel="stylesheet" href="/css/style.css" />
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,31 @@
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head dir="ltr">
|
<head dir="ltr">
|
||||||
{{>head.html}}
|
{{>head.html}}
|
||||||
|
<link rel="stylesheet" href="/css/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue