Style rework #35

Merged
Anri merged 70 commits from rework into main 2023-10-15 20:58:23 +02:00
4 changed files with 196 additions and 78 deletions
Showing only changes of commit 5389291e14 - Show all commits

View file

@ -23,12 +23,8 @@ async fn page(req: HttpRequest, config: web::Data<Config>) -> impl Responder {
#[derive(Content, Debug)]
struct PortfolioTemplate<'a> {
navbar: NavBar,
bots_app: Option<Vec<File>>,
bots_loc: Option<String>,
persos_app: Option<Vec<File>>,
persos_loc: Option<String>,
univ_content: Option<String>,
univ_loc: Option<String>,
location_apps: Option<&'a str>,
apps: Option<Vec<File>>,
err_msg: &'a str,
}
@ -37,37 +33,16 @@ fn build_page(config: Config, url: String) -> String {
let projects_dir = "data/projects";
let ext = ".md";
// Get bots apps
let bots_apps_loc = format!("{projects_dir}/bots");
let bots_apps = glob(&format!("{bots_apps_loc}/*{ext}"))
// Get apps
let apps = glob(&format!("{projects_dir}/*{ext}"))
.unwrap()
.map(|e| read_file(&e.unwrap().to_string_lossy()).unwrap())
.collect::<Vec<File>>();
// Get perso apps
let perso_apps_loc = format!("{projects_dir}/perso");
let perso_apps = glob(&format!("{perso_apps_loc}/*{ext}"))
.unwrap()
.map(|e| read_file(&e.unwrap().to_string_lossy()).unwrap())
.collect::<Vec<File>>();
let univ_loc = format!("{projects_dir}/univ{ext}");
let (bots_app, bots_loc) = if bots_apps.is_empty() {
(None, Some(bots_apps_loc))
let bots_app = if apps.is_empty() {
(None, Some(projects_dir))
} else {
(Some(bots_apps), None)
};
let (persos_app, persos_loc) = if perso_apps.is_empty() {
(None, Some(perso_apps_loc))
} else {
(Some(perso_apps), None)
};
let (univ_content, univ_loc) = match read_file(&univ_loc) {
Some(data) => (Some(data.content), None),
_ => (None, Some(univ_loc)),
(Some(apps), None)
};
config.tmpl.render(
@ -77,12 +52,8 @@ fn build_page(config: Config, url: String) -> String {
portfolio: true,
..NavBar::default()
},
bots_app,
bots_loc,
persos_app,
persos_loc,
univ_content,
univ_loc,
apps: bots_app.0,
location_apps: bots_app.1,
err_msg: "is empty",
},
Infos {

71
static/css/langages.css Normal file
View file

@ -0,0 +1,71 @@
:root {
--lang-size-dot: 0.8em;
--lang-margin-text: 3px;
--lang-font-size: calc(var(--font-size) * 0.65);
}
/* Dot */
p[data-lang]::before {
content: "";
height: var(--lang-size-dot);
width: var(--lang-size-dot);
border-radius: 50%;
display: inline-block;
}
/* Text */
p[data-lang]::after {
margin-left: var(--lang-margin-text);
font-size: var(--lang-font-size);
}
/* Langages definition */
p[data-lang="ts"]::before {
background-color: #3178c6;
}
p[data-lang="ts"]::after {
content: "TypeScript";
}
p[data-lang="rust"]::before {
background-color: #dea584;
}
p[data-lang="rust"]::after {
content: "Rust";
}
p[data-lang="py"]::before {
background-color: #3572a5;
}
p[data-lang="py"]::after {
content: "Python";
}
p[data-lang="ocaml"]::before {
background-color: #ef7a08;
}
p[data-lang="ocaml"]::after {
content: "OCaml";
}
p[data-lang="js"]::before {
background-color: #e3d357;
}
p[data-lang="js"]::after {
content: "JavaScript";
}
p[data-lang="c"]::before {
background-color: #555555;
}
p[data-lang="c"]::after {
content: "C";
}

84
static/css/portfolio.css Normal file
View file

@ -0,0 +1,84 @@
@media (prefers-color-scheme: light) {
:root {
--extreme: white;
--card-hover: #bbbbbb;
}
}
@media (prefers-color-scheme: dark) {
:root {
--extreme: black;
--card-hover: #0c1014;
}
}
:root {
--border-color: #6e6e6f;
--font-size-card: calc(var(--font-size) * 0.8);
}
/* List */
main ul {
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* breakpoint */
@media only screen and (max-width: 640px) {
main ul {
grid-template-columns: none;
}
}
/* Card */
main li {
display: flex;
position: relative;
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background: color-mix(in srgb, var(--background) 90%, var(--extreme));
border: 1px solid
color-mix(in srgb, var(--background) 50%, var(--border-color));
transition: all 0.3s;
padding: 10px;
margin-block: 10px;
margin-inline: 5px;
}
/* Hover Card */
main li:hover {
background-color: color-mix(in srgb, var(--background) 40%, var(--extreme));
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Element */
div {
display: flex;
flex-direction: column;
}
/* Element title */
div h3 {
margin-block: 0;
}
/* Element description */
span {
margin: auto;
}
/* Element text */
div p,
div a {
font-size: var(--font-size-card);
}
/* Element langage */
p[data-lang] {
margin: 0;
}

View file

@ -2,52 +2,44 @@
<html class="index" lang="fr">
<head dir="ltr">
{{>head.html}}
<link rel="stylesheet" href="/css/portfolio.css" />
<link rel="stylesheet" href="/css/langages.css" />
</head>
<body>
<header>{{>navbar.html}}</header>
{{#data}}
<main>
<h1 id="title">Projets qui me tiennent à coeur</h1>
<div id="content">
<h2 class="subtitle">Bots</h2>
<div class="subcontent">
{{#bots_app}} {{#metadata}} {{#info}}
<h3 class="subsubtitle">
<a target="_blank" href="{{link}} ">{{title}}</a>
</h3>
{{/info}} {{/metadata}}
<div class="subcontent">{{&content}}</div>
{{/bots_app}} {{^bots_app}}
<p>{{bots_loc}} {{err_msg}}</p>
{{/bots_app}}
<br />
</div>
<h2 class="subtitle">
<a target="_blank" href="https://git.mylloon.fr/Paris8"
>Projet de l'université</a
>
</h2>
<div class="subcontent">
{{&univ_content}} {{^univ_content}}
<p>{{univ_loc}} {{err_msg}}</p>
{{/univ_content}}
</div>
{{#data}}
<h1>Portfolio</h1>
<p>
Je programme depuis 2018 et j'ai appris une multitude de langages
depuis. Étant passionné de logiciels libres depuis ma licence
d'informatique à Paris 8, je publie tout sur des forges publiques.
</p>
<h2 class="subtitle">Projets perso</h2>
<div class="subcontent">
{{#persos_app}} {{#metadata}} {{#info}}
<h3 class="subsubtitle">
<a target="_blank" href="{{link}} ">{{title}}</a>
</h3>
{{#location_apps}}
<!-- Error message -->
<p>{{location_apps}} {{err_msg}}</p>
{{/location_apps}} {{^location_apps}}
<h2>Projets</h2>
<ul>
{{#apps}}
<li>
{{#metadata}} {{#info}}
<div
onclick="window.open('{{link}}', '_blank', 'noreferrer');"
title="{{title}} "
>
<h3>{{title}}</h3>
<span>{{&content}}</span> {{#language}}
<p data-lang="{{language}}"></p>
{{/language}}
</div>
{{/info}} {{/metadata}}
<div class="subcontent">{{&content}}</div>
{{/persos_app}} {{^persos_app}}
<p>{{persos_loc}} {{err_msg}}</p>
{{/persos_app}}
<br />
</div>
</div>
</li>
{{/apps}}
</ul>
{{/location_apps}} {{/data}}
</main>
{{/data}} {{>footer.html}}
</body>
</html>