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>
|
||||
|
||||
<!-- Toggle Dark and Light modes -->
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -12,29 +12,38 @@ PAGE CODED BY :
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/assets/images/qr_code.png">
|
||||
<!-- SEO -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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:title" content="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: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: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:site_name" content="Le blog de Louis Vallat">
|
||||
<meta name="og:locale" content="fr_FR">
|
||||
<meta name="og:type" content="website">
|
||||
<meta charset="UTF-8">
|
||||
<!-- Reset CSS -->
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||
<!-- Main CSS -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<title></title>
|
||||
</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
|
||||
|
||||
Hello World
|
||||
#### Articles
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user