Style rework #35
3 changed files with 29 additions and 192 deletions
|
|
@ -1,189 +1,12 @@
|
|||
/* Normal font */
|
||||
@font-face {
|
||||
font-family: "Luciole";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url(/css/fonts/Luciole-Regular.ttf);
|
||||
}
|
||||
|
||||
/* Italic font */
|
||||
@font-face {
|
||||
font-family: "Luciole";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
src: url(/css/fonts/Luciole-Regular-Italic.ttf);
|
||||
}
|
||||
|
||||
/* Bold fond */
|
||||
@font-face {
|
||||
font-family: "Luciole";
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: url(/css/fonts/Luciole-Bold.ttf);
|
||||
}
|
||||
|
||||
/* Bold italic font */
|
||||
@font-face {
|
||||
font-family: "Luciole";
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
src: url(/css/fonts/Luciole-Bold-Italic.ttf);
|
||||
}
|
||||
|
||||
/* Page bottom */
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* Regular tags */
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: 3em;
|
||||
min-height: 90%;
|
||||
background-color: rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
li,
|
||||
a {
|
||||
font-family: "Luciole", sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: rgb(255, 255, 255);
|
||||
background: rgba(124, 75, 173, 0.486);
|
||||
}
|
||||
|
||||
/* Frames */
|
||||
h1.subtitle {
|
||||
text-decoration: none;
|
||||
color: rgb(28, 118, 236);
|
||||
}
|
||||
|
||||
h1#title {
|
||||
text-align: center;
|
||||
color: rgb(28, 236, 174);
|
||||
}
|
||||
|
||||
h2.subtitle,
|
||||
h2.subtitle a {
|
||||
color: rgb(28, 118, 236) !important;
|
||||
}
|
||||
|
||||
h3.subsubtitle,
|
||||
#content h3.subsubtitle a {
|
||||
text-align: left;
|
||||
color: rgb(149, 87, 201);
|
||||
}
|
||||
|
||||
#content h3.subsubtitle a:hover {
|
||||
color: rgb(0, 181, 236);
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
div#content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2%;
|
||||
padding: 0.9% 0.9% 0.9% 0.9%;
|
||||
width: 42%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(170, 170, 170);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
/* Mobile display */
|
||||
div#content {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
#content a,
|
||||
#content a:visited,
|
||||
#content ul {
|
||||
text-decoration: none;
|
||||
color: rgb(201, 201, 201);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#content p {
|
||||
text-decoration: none;
|
||||
color: rgb(201, 201, 201);
|
||||
text-align: center;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
#content a:hover {
|
||||
color: rgb(0, 181, 236);
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
/* https://stackoverflow.com/a/40244401/15436737 */
|
||||
|
||||
#content a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
.navbar li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#content a:after {
|
||||
display: block;
|
||||
.navbar p::after {
|
||||
content: "·";
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navbar li:last-child p::after {
|
||||
content: "";
|
||||
border-bottom: solid 3px;
|
||||
transform: scaleX(0);
|
||||
transition: transform 250ms ease-in-out;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
|
||||
#content a:hover:after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
/* ------------------------------------------- */
|
||||
|
||||
div.subcontent {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 5%;
|
||||
padding: 1.2% 1.2% 1.2% 1.2%;
|
||||
width: 78%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(170, 170, 170);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#listecontent li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Back links going to the index */
|
||||
footer.backToIndexPage {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer.backToIndexPage a {
|
||||
color: rgb(114, 180, 76);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.backToIndexPage a:hover {
|
||||
color: rgb(152, 187, 132);
|
||||
}
|
||||
|
||||
/* Hide content */
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="index" lang="fr">
|
||||
<html lang="fr">
|
||||
<head dir="ltr">
|
||||
{{>head.html}}
|
||||
</head>
|
||||
<body class="index">
|
||||
<div id="content">
|
||||
<p style="font-weight: bold;"><a href="/blog">Blog</a></p>
|
||||
<p><a href="/portfolio">Portfolio</a></p>
|
||||
<p><a href="/networks">Réseaux</a></p>
|
||||
<p><a href="/contrib">Contributions</a></p>
|
||||
<p><a href="https://liv.mylloon.fr">Cours</a> (external)</p>
|
||||
<body>
|
||||
{{>navbar.html}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
19
templates/navbar.html
Normal file
19
templates/navbar.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<nav class="navbar">
|
||||
<ul>
|
||||
<li>
|
||||
<p><a href="/blog">Blog</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="/portfolio">Portfolio</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="/networks">Réseaux</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="/contrib">Contributions</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="https://liv.mylloon.fr">Cours</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Loading…
Reference in a new issue