refactor: changed layouts and css
This commit is contained in:
Laureηt
parent
cdf0cc574a
commit
7d116b681d
|
|
@ -4,25 +4,29 @@ username: Laureηt
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ username }}</title>
|
||||
<link rel="stylesheet" href="{{ '/css/main.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
|
||||
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<header role="banner">
|
||||
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
|
||||
<span class="blink" style="display:inline;">_</span>
|
||||
<i class="blink">_</i>
|
||||
</header>
|
||||
|
||||
{{ content | safe }}
|
||||
<main role="main">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer role="contentinfo">
|
||||
© {% year %}
|
||||
{{ username }}
|
||||
</footer>
|
||||
|
|
@ -52,6 +56,7 @@ username: Laureηt
|
|||
}, 10000)
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,35 +4,41 @@ username: Laureηt
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ username }}</title>
|
||||
<link rel="stylesheet" href="{{ '/css/main.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/style.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 }}">
|
||||
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header style="margin-bottom: 0;">
|
||||
<div style="height: 30px;">
|
||||
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
|
||||
<span class="blink" style="display:inline;">_</span>
|
||||
</div>
|
||||
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
|
||||
<header role="banner">
|
||||
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
|
||||
<i class="blink" style="display:inline;">_</i>
|
||||
</header>
|
||||
|
||||
<hr style="margin-top: .5em;">
|
||||
{{ content | safe }}
|
||||
<nav id="11ty-nav" role="navigation">
|
||||
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
|
||||
<hr>
|
||||
</nav>
|
||||
|
||||
<div class="btn-back">
|
||||
<span>«</span>
|
||||
<main role="main">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
<nav id="btn-back" role="navigation">
|
||||
<i>«</i>
|
||||
<a href="{{ '/' | url }}">Go back</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<footer>
|
||||
© {% year %}
|
||||
<footer role="contentinfo">
|
||||
© {% year %}
|
||||
{{ username }}
|
||||
</footer>
|
||||
|
||||
|
|
@ -61,6 +67,7 @@ username: Laureηt
|
|||
}, 10000)
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ permalink: "resume/{{ resume.locale }}/index.html"
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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/blink.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@
|
|||
0% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
|
@ -29,9 +31,11 @@
|
|||
0% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
|
@ -41,3 +45,13 @@
|
|||
animation: blink 1s 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
16
src/scss/eportfolio.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
hr {
|
||||
visibility: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
hr {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#btn-back {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: .2rem;
|
||||
}
|
||||
|
|
@ -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
98
src/scss/style.scss
Executable 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;
|
||||
}
|
||||
}
|
||||
Reference in a new issue