Added "basic" styling
Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>
This commit is contained in:
parent
eb7c79ef19
commit
375d510cc4
@ -1,7 +1,8 @@
|
|||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<!-- Toggle Dark and Light modes -->
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
@ -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
137
src/assets/css/style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
BIN
src/assets/fonts/OpenSans-Regular.ttf
Normal file
BIN
src/assets/fonts/OpenSans-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Rubik-Medium.ttf
Normal file
BIN
src/assets/fonts/Rubik-Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/images/qr_code.png
Normal file
BIN
src/assets/images/qr_code.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 154 B |
@ -1,5 +1,4 @@
|
|||||||
# Index
|
#### Articles
|
||||||
|
|
||||||
Hello World
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user