Added "basic" styling

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>
This commit is contained in:
Louis Vallat 2021-03-11 22:54:28 +01:00
parent eb7c79ef19
commit 375d510cc4
9 changed files with 157 additions and 14 deletions

View File

@ -1,5 +1,6 @@
</body> </body>
<!-- Toggle Dark and Light modes -->
<script> <script>
</script> </script>

View File

@ -12,29 +12,38 @@ PAGE CODED BY :
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8">
<link rel="icon" href="/assets/images/qr_code.png">
<!-- SEO --> <!-- SEO -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ceci est le blog de Louis Vallat."> <meta name="description" content="Ceci est le blog de Louis Vallat.">
<!--meta name="image" content="https://louis-vallat.xyz/assets/images/icon.jpg"--> <meta name="image" content="https://blog.louis-vallat.xyz/assets/images/qr_code.png">
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Le blog de Louis Vallat"> <meta name="twitter:title" content="Le blog de Louis Vallat">
<meta name="twitter:description" content="Ceci est le blog de Louis Vallat."> <meta name="twitter:description" content="Ceci est le blog de Louis Vallat.">
<meta name="twitter:site" content="@VallatLouis"> <meta name="twitter:site" content="@VallatLouis">
<meta name="twitter:creator" content="@VallatLouis"> <meta name="twitter:creator" content="@VallatLouis">
<!--meta name="twitter:image:src" content="https://louis-vallat.xyz/assets/images/icon.jpg"--> <meta name="twitter:image:src" content="https://blog.louis-vallat.xyz/assets/images/qr_code.png">
<meta name="og:title" content="Le blog de Louis Vallat"> <meta name="og:title" content="Le blog de Louis Vallat">
<meta name="og:description" content="Ceci est le blog de Louis Vallat."> <meta name="og:description" content="Ceci est le blog de Louis Vallat.">
<!--meta name="og:image" content="https://louis-vallat.xyz/assets/images/icon.jpg"--> <meta name="og:image" content="https://blog.louis-vallat.xyz/assets/images/qr_code.png">
<meta name="og:url" content="https://blog.louis-vallat.xyz/"> <meta name="og:url" content="https://blog.louis-vallat.xyz/">
<meta name="og:site_name" content="Le blog de Louis Vallat"> <meta name="og:site_name" content="Le blog de Louis Vallat">
<meta name="og:locale" content="fr_FR"> <meta name="og:locale" content="fr_FR">
<meta name="og:type" content="website"> <meta name="og:type" content="website">
<meta charset="UTF-8">
<!-- Reset CSS --> <!-- Reset CSS -->
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="/assets/css/reset.css">
<!-- Main CSS --> <!-- Main CSS -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="/assets/css/style.css">
<title></title> <title></title>
</head> </head>
<body> <body>
<nav>
<a href="/" id="home_link">accueil</a>
<div class="filler"></div>
<a href="mailto:contact@louis-vallat.xyz" target="_blank">contact</a>
<a href="https://gitlab.com/lovallat" target="_blank">gitlab</a>
<a href="https://louis-vallat.xyz" target="_blank">site</a>
<a href="https://twitter.com/VallatLouis" target="_blank">twitter</a>
</nav>

137
src/assets/css/style.css Normal file
View File

@ -0,0 +1,137 @@
@charset "utf-8";
/* Coded by Louis Vallat */
@font-face {
font-family: 'Rubik';
src: url("/assets/fonts/Rubik-Medium.ttf");
}
@font-face {
font-family: 'Open Sans';
src: url("/assets/fonts/OpenSans-Regular.ttf");
}
:root {
--bg: #2A2D34;
--fg: #fefefe;
--link: #009DDC;
--link_h: #009B72;
--link_v: #ACACDE;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--bg);
color: var(--fg);
margin-right: 27vw;
margin-left: 27vw;
text-align: justify;
text-justify: auto;
font-size: 16px;
}
p {
margin-top: 10px;
line-height: 1.5em;
}
img {
margin-top: 15px;
margin-bottom: 5px;
width: 100%;
}
a {
color: var(--link);
}
a:visited {
color: var(--link_v);
}
a:hover {
color: var(--link_h);
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 10px;
}
.filler {
flex-grow: 2;
}
nav > a {
font-family: 'Open Sans', sans-serif;
padding: 10px;
}
nav > a:visited, nav > a:hover, nav > a {
color: var(--fg);
text-decoration: none;
}
nav > a:not(#home_link) {
margin-left: 25px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Rubik', sans-serif;
font-weight: bold;
margin-top: 10px;
margin-bottom: 5px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.85em;
}
h3 {
font-size: 1.65em;
}
h4 {
font-size: 1.45em;
}
h5 {
font-size: 1.35em;
}
h6 {
font-size: 1.25em;
}
b, strong {
font-weight: bold;
}
em, i {
font-style: italic;
}
.articles {
margin-left: 10px;
}
@media screen and (max-width: 992px) {
body {
margin-right: 10vw;
margin-left: 10vw;
}
}
@media screen and (max-width: 768px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 B

View File

@ -1,5 +1,4 @@
# Index #### Articles
Hello World
</article> </article>

View File

@ -1,3 +0,0 @@
body {
font-family: 'Open Sans', sans-serif;
}