Laurent/personal-website-old
Archived
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: changed layouts and css

Browse source
This commit is contained in:
Laureηt 2021-10-07 23:32:26 +02:00
parent cdf0cc574a
commit 7d116b681d
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
7 changed files with 163 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/_includes/layout.njk
View file

@ -4,25 +4,29 @@ username: Laureηt
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title> <title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/main.css' | url }}"> <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}"> <link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
</head> </head>
<body> <body>
<header> <header role="banner">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span> <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<span class="blink" style="display:inline;">_</span> <i class="blink">_</i>
</header> </header>
{{ content | safe }} <main role="main">
{{ content | safe }}
</main>
<footer> <footer role="contentinfo">
&copy; {% year %} &copy; {% year %}
{{ username }} {{ username }}
</footer> </footer>
@ -52,6 +56,7 @@ username: Laureηt
}, 10000) }, 10000)
}); });
</script> </script>
</body> </body>
</html> </html>

37
src/_includes/layout_eportfolio.njk
View file

@ -4,35 +4,41 @@ username: Laureηt
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title> <title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/main.css' | url }}"> <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}"> <link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}">
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
</head> </head>
<body> <body>
<header style="margin-bottom: 0;"> <header role="banner">
<div style="height: 30px;"> <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span> <i class="blink" style="display:inline;">_</i>
<span class="blink" style="display:inline;">_</span>
</div>
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
</header> </header>
<hr style="margin-top: .5em;"> <nav id="11ty-nav" role="navigation">
{{ content | safe }} {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
<hr>
</nav>
<div class="btn-back"> <main role="main">
<span>&laquo;</span> {{ content | safe }}
</main>
<nav id="btn-back" role="navigation">
<i>&laquo;</i>
<a href="{{ '/' | url }}">Go back</a> <a href="{{ '/' | url }}">Go back</a>
</div> </nav>
<footer> <footer role="contentinfo">
&copy; {% year %} &copy; {% year %}
{{ username }} {{ username }}
</footer> </footer>
@ -61,6 +67,7 @@ username: Laureηt
}, 10000) }, 10000)
}); });
</script> </script>
</body> </body>
</html> </html>

4
src/resume/resume.njk
View file

@ -15,9 +15,9 @@ permalink: "resume/{{ resume.locale }}/index.html"
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title> <title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/main.css' | url }}"> <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
<link rel="stylesheet" href="{{ '/css/resume.css' | url }}"> <link rel="stylesheet" href="{{ '/css/resume.css' | url }}">
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}"> <link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">

14
src/scss/blink.scss → src/scss/anim.scss
View file

@ -17,9 +17,11 @@
0% { 0% {
opacity: 1.0; opacity: 1.0;
} }
50% { 50% {
opacity: 0.0; opacity: 0.0;
} }
100% { 100% {
opacity: 1.0; opacity: 1.0;
} }
@ -29,9 +31,11 @@
0% { 0% {
opacity: 1.0; opacity: 1.0;
} }
50% { 50% {
opacity: 0.0; opacity: 0.0;
} }
100% { 100% {
opacity: 1.0; opacity: 1.0;
} }
@ -41,3 +45,13 @@
animation: blink 1s step-start 0s infinite; animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1.5s step-start 0s infinite; -webkit-animation: blink 1.5s step-start 0s infinite;
} }
@keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

16
src/scss/eportfolio.scss Normal file
View file

@ -0,0 +1,16 @@
hr {
visibility: hidden;
margin: 1rem 0;
}
nav {
hr {
visibility: visible;
}
}
#btn-back {
display: flex;
justify-content: center;
gap: .2rem;
}

128
src/scss/main.scss
View file

@ -1,128 +0,0 @@
* {
scrollbar-color: #202324 #454a4d;
}
html,
body {
background-color: #232830;
}
body {
font-family: 'Lora', serif;
font-size: 26px;
text-rendering: optimizeLegibility;
max-width: 40em;
margin: 0 auto;
padding: 1em;
animation: intro .3s both;
animation-delay: .15s;
}
body,
a {
color: #c0c5ce;
}
a {
text-decoration: underline;
text-decoration-color: #283593;
text-decoration-thickness: 2px;
}
a:hover {
text-decoration: underline;
text-decoration-color: #5f5fc4;
text-decoration-thickness: 2px;
}
p {
margin-bottom: .7em;
text-align: justify;
}
h1 {
font-size: 2em;
margin-bottom: .7em;
}
ol,
ul {
margin: .7em 0 0 1.4em;
}
li {
margin-bottom: 0.4em;
}
hr {
border: 0;
border-top: 1px dashed #c0c5ce;
height: 0;
margin: 1.7em 0;
}
header {
margin: 1.2em 0 2em;
}
footer {
color: #8e8e8e;
font-size: .7em;
text-align: center;
margin: 5em 0 2em;
}
.blink {
margin-left: -5px;
}
.btn-back {
text-align: center;
margin: 3em 0 3em;
}
.btn-back span {
display: inline-block;
transform: scale(2.5);
translate: -.2em -.1em;
}
@media screen and (max-width: 700px) {
body {
font-size: 17px;
}
ol,
ul {
padding-left: 17px;
}
}
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
header>ul {
list-style: none;
padding: 0;
margin: 1em 0 0 0;
}
header>ul>li {
display: inline;
margin-right: .5em;
}
@keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

98
src/scss/style.scss Executable file
View file

@ -0,0 +1,98 @@
$background: #232830;
$foreground-text: #c0c5ce;
* {
margin: 0;
padding: 0;
scrollbar-color: #202324 #454a4d;
}
body {
background-color: $background;
color: $foreground-text;
font-family: 'Lora', serif;
text-rendering: optimizeLegibility;
font-size: 1.5rem;
width: 60rem;
margin: auto;
animation: intro .3s both;
animation-delay: .15s;
}
a {
color: $foreground-text;
text-decoration: underline;
text-decoration-color: #283593;
&:hover {
text-decoration-color: #5f5fc4;
}
}
header {
margin: 2rem 0;
}
footer {
color: #8e8e8e;
font-size: 1rem;
text-align: center;
margin: 3rem 0;
}
hr {
border: 0;
height: 0;
border-top: 1px dashed #c0c5ce;
margin: 2rem 0;
}
h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
p {
text-align: justify;
}
ol,
ul {
margin: 1rem 0 0 3rem;
li {
margin-bottom: 1rem;
}
}
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
nav {
ul {
list-style: none;
padding: 0;
margin: 1em 0 0 0;
li {
display: inline;
margin-right: .5em;
}
}
hr {
margin: 0.5rem 0 2rem 0;
}
}