diff --git a/static/css/style.css b/static/css/style.css index 45f0a20..d4cda74 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; } diff --git a/templates/index.html b/templates/index.html index b86b402..4d4d99e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,14 +1,9 @@ - + {{>head.html}} - -
-

Blog

-

Portfolio

-

Réseaux

-

Contributions

-

Cours (external)

+ + {{>navbar.html}} diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..81640ba --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,19 @@ +