diff --git a/index.html b/index.html
index 2c6d7cf..616d57d 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,8 @@
-
-
+
diff --git a/script.js b/script.js
index a196ac0..9448465 100644
--- a/script.js
+++ b/script.js
@@ -15,21 +15,19 @@ const projectsContentList = document.querySelectorAll('.article-content');
const projectsIDs = Array.from(projectsContentList)
.map((project) => project.id);
-const stylesheets = ['stylesheet-main.css', 'stylesheet-imgs.css'];
-
let lastScrollTop = window.scrollY;
function loadCSS() {
"use strict";
- stylesheets.forEach(function (stylesheet) {
- const link = document.createElement('link');
- link.href = stylesheet;
- link.rel = 'stylesheet';
- link.type = 'text/css';
- document.querySelector('head').appendChild(link);
- });
+ const stylesheet = document.createElement('link');
+ stylesheet.href = 'stylesheet-imgs.css';
+ stylesheet.rel = 'stylesheet';
+ stylesheet.type = 'text/css';
+ document.querySelector('head').appendChild(stylesheet);
}
+loadCSS();
+
function toAddClass(toClass, inClass) {
"use strict";
@@ -178,5 +176,3 @@ document.querySelectorAll('.projects-list article').forEach(function (a) {
switchArticle(document.getElementById(a.classList[0]));
};
});
-
-loadCSS(); // Loading non-essential CSS when everything else is loaded.
diff --git a/stylesheet-essentials-large_screen.css b/stylesheet-essentials-large_screen.css
deleted file mode 100644
index 069ca43..0000000
--- a/stylesheet-essentials-large_screen.css
+++ /dev/null
@@ -1,61 +0,0 @@
-#content > div {
- padding: 50px 20%;
-}
-
-.article-content {
- padding: 50px !important;
-}
-
-#about img {
- width: 225px;
- height: 225px;
-}
-
-.block {
- max-width: 900px;
- margin: 50px auto;
- flex-direction: row;
-}
-
-.block > p {
- margin: 25px 50px;
- padding: 0;
- font-size: larger;
-}
-
-header {
- transform: none;
- padding: 10px;
-}
-
-header:hover {
- opacity: 100% !important;
- transform: none;
-}
-
-.hamburger {
- display: none;
-}
-
-nav {
- width: 100%;
- gap: 25px;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- font-size: 1.2em;
-}
-
-nav a {
- opacity: 100%;
- transform: none;
-}
-
-nav a:hover {
- opacity: 100%;
- transform: none;
-}
-
-#education p + p, #experience p + p {
- font-size: medium;
-}
\ No newline at end of file
diff --git a/stylesheet-essentials.css b/stylesheet-essentials.css
deleted file mode 100644
index f980651..0000000
--- a/stylesheet-essentials.css
+++ /dev/null
@@ -1,205 +0,0 @@
-* {
- box-sizing: border-box;
- scroll-behavior: smooth;
-}
-
-body {
- width: 100%;
- height: 100%;
- margin: 0;
-
- color: #fff;
- font-family: Manrope, sans-serif;
- font-variation-settings: 'wght' 500;
-
- background-color: #121212;
-}
-
-header {
- position: fixed;
- z-index: 10;
- width: 100%;
- padding: 10px 10px 10px 110px;
- background-color: #253622;
- box-shadow: #0003 0 0 10px;
- transform: translateY(-100%);
- transition: transform 200ms ease-in-out, gap 200ms ease-in-out, opacity 200ms;
-}
-
-nav {
- display: inline-flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 10px;
-
- font-size: 1.6em;
- letter-spacing: 4px;
-}
-
-nav a:first-letter {
- font-weight: bolder;
- font-size: larger;
-}
-
-nav a {
- position: relative;
-
- font-family: Manrope, sans-serif;
-
- opacity: 0;
-
- transform: translateX(-100%);
- transition: transform 700ms, opacity 700ms;
-}
-
-nav a::after {
- content: '';
-
- position: absolute;
- left: 0;
- bottom: -3px;
-
- background: #3AC414;
-
- width: 0;
- height: 3px;
-
- transition: width 200ms ease-in-out;
-}
-
-nav a:hover::after {
- width: 100%;
-}
-
-nav a:nth-child(0n+2) {
- transition: transform 600ms, opacity 600ms;
-}
-nav a:nth-child(0n+3) {
- transition: transform 500ms, opacity 500ms;
-}
-nav a:nth-child(0n+4) {
- transition: transform 400ms, opacity 400ms;
-}
-nav a:nth-child(0n+5) {
- transition: transform 300ms, opacity 300ms;
-}
-nav a:nth-child(0n+6) {
- transition: transform 200ms, opacity 200ms;
-}
-
-a {
- text-decoration: none;
- color: #fff;
-}
-
-.slide-elements a {
- opacity: 100%;
- transform: translateX(0);
-}
-
-.hamburger {
- position: absolute;
-
- z-index: 15;
-
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- gap: 5px;
-
- cursor: pointer;
-
- top: 100%;
- left: 50px;
- width: 50px;
- height: 50px;
- background-color: #3AC414;
- border-radius: 0 0 0.5em 0.5em;
-}
-
-.hamburger::before {
- position: absolute;
- content: '';
-
- width: 100%;
- height: 100vh;
- bottom: 100%;
-
- background-color: #3AC414;
-}
-
-.hamburger > span {
- width: 35px;
- height: 5px;
- background: #CAEBC0;
- transition: transform 200ms ease-in-out, background 200ms ease-in-out;
-}
-
-.hamburger:hover > span {
- background: #D6FFC9;
-}
-
-.to-cross .hamburger {
- gap: 0;
-}
-
-.to-cross > .hamburger > span {
- transform: rotate(45deg) translateY(2px) translateX(1px);
-}
-
-.to-cross > .hamburger > span + span {
- transform: rotate(-45deg) translateY(-2px) translateX(1px);
-}
-
-.slide-in {
- transform: translateY(0) translateX(0) !important;
-}
-
-.main-title {
- display: flex;
- justify-content: center;
- align-items: center;
-
- overflow: hidden;
-
- top: 0;
- left: 0;
-
- width: 100%;
- height: 100vh;
-
- text-align: center;
-
- font-family: Manrope, sans-serif;
- font-variation-settings: 'wght' 500;
- font-size: 2em;
- letter-spacing: 0.1em;
- color: #fff;
-}
-
-.main-title h1 {
- cursor: pointer;
- transition: text-shadow 200ms, transform 200ms;
-}
-
-.main-title h1:hover {
- transform: translateX(-2.5px) translateY(-2.5px);
- text-shadow: #253622 5px 5px 0;
-}
-
-.to-fade {
- opacity: 0;
- transition: opacity 1000ms;
-}
-
-.fade-in {
- opacity: 100%;
-}
-
-/* Title fix */
-@media (min-width: 522px) {
- .main-title h1 {
- white-space: nowrap;
- }
-}
diff --git a/stylesheet-main.css b/stylesheet-main.css
index 66ce664..78d2303 100644
--- a/stylesheet-main.css
+++ b/stylesheet-main.css
@@ -10,6 +10,95 @@
font-display: swap;
}
+* {
+ box-sizing: border-box;
+ scroll-behavior: smooth;
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+
+ color: #fff;
+ font-family: Manrope, sans-serif;
+ font-variation-settings: 'wght' 500;
+
+ background-color: #121212;
+}
+
+header {
+ position: fixed;
+ z-index: 10;
+ width: 100%;
+ padding: 10px 10px 10px 110px;
+ background-color: #253622;
+ box-shadow: #0003 0 0 10px;
+ transform: translateY(-100%);
+ transition: transform 200ms ease-in-out, gap 200ms ease-in-out, opacity 200ms;
+}
+
+nav {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+
+ font-size: 1.6em;
+ letter-spacing: 4px;
+}
+
+nav a:first-letter {
+ font-weight: bolder;
+ font-size: larger;
+}
+
+nav a {
+ position: relative;
+
+ font-family: Manrope, sans-serif;
+
+ opacity: 0;
+
+ transform: translateX(-100%);
+ transition: transform 700ms, opacity 700ms;
+}
+
+nav a::after {
+ content: '';
+
+ position: absolute;
+ left: 0;
+ bottom: -3px;
+
+ background: #3AC414;
+
+ width: 0;
+ height: 3px;
+
+ transition: width 200ms ease-in-out;
+}
+
+nav a:hover::after {
+ width: 100%;
+}
+
+nav a:nth-child(0n+2) {
+ transition: transform 600ms, opacity 600ms;
+}
+nav a:nth-child(0n+3) {
+ transition: transform 500ms, opacity 500ms;
+}
+nav a:nth-child(0n+4) {
+ transition: transform 400ms, opacity 400ms;
+}
+nav a:nth-child(0n+5) {
+ transition: transform 300ms, opacity 300ms;
+}
+nav a:nth-child(0n+6) {
+ transition: transform 200ms, opacity 200ms;
+}
+
footer {
position: relative;
z-index: 2;
@@ -46,6 +135,120 @@ h2:first-letter, .article-content h3:first-letter {
font-variation-settings: 'wght' 600;
}
+a {
+ text-decoration: none;
+ color: #fff;
+}
+
+.slide-elements a {
+ opacity: 100%;
+ transform: translateX(0);
+}
+
+.hamburger {
+ position: absolute;
+
+ z-index: 15;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 5px;
+
+ cursor: pointer;
+
+ top: 100%;
+ left: 50px;
+ width: 50px;
+ height: 50px;
+ background-color: #3AC414;
+ border-radius: 0 0 0.5em 0.5em;
+}
+
+.hamburger::before {
+ position: absolute;
+ content: '';
+
+ width: 100%;
+ height: 100vh;
+ bottom: 100%;
+
+ background-color: #3AC414;
+}
+
+.hamburger > span {
+ width: 35px;
+ height: 5px;
+ background: #CAEBC0;
+ transition: transform 200ms ease-in-out, background 200ms ease-in-out;
+}
+
+.hamburger:hover > span {
+ background: #D6FFC9;
+}
+
+/*header:hover {
+ transform: translateY(calc(-100% + 25px));
+}*/
+
+.to-cross .hamburger {
+ gap: 0;
+}
+
+.to-cross > .hamburger > span {
+ transform: rotate(45deg) translateY(2px) translateX(1px);
+}
+
+.to-cross > .hamburger > span + span {
+ transform: rotate(-45deg) translateY(-2px) translateX(1px);
+}
+
+.slide-in {
+ transform: translateY(0) translateX(0) !important;
+}
+
+.main-title {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ overflow: hidden;
+
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100vh;
+
+ text-align: center;
+
+ font-family: Manrope, sans-serif;
+ font-variation-settings: 'wght' 500;
+ font-size: 2em;
+ letter-spacing: 0.1em;
+ color: #fff;
+}
+
+.main-title h1 {
+ cursor: pointer;
+ transition: text-shadow 200ms, transform 200ms;
+}
+
+.main-title h1:hover {
+ transform: translateX(-2.5px) translateY(-2.5px);
+ text-shadow: #253622 5px 5px 0;
+}
+
+.to-fade {
+ opacity: 0;
+ transition: opacity 1000ms;
+}
+
+.fade-in {
+ opacity: 100%;
+}
+
#content > div {
padding: 50px 10%;
}
@@ -337,3 +540,75 @@ h2:first-letter, .article-content h3:first-letter {
opacity: 100%;
transform: scale(1.05);
}
+
+/* Title fix */
+@media (min-width: 522px) {
+ .main-title h1 {
+ white-space: nowrap;
+ }
+}
+
+/* Large */
+@media (min-width: 992px) {
+ #content > div {
+ padding: 50px 20%;
+ }
+
+ .article-content {
+ padding: 50px !important;
+ }
+
+ #about img {
+ width: 225px;
+ height: 225px;
+ }
+
+ .block {
+ max-width: 900px;
+ margin: 50px auto;
+ flex-direction: row;
+ }
+
+ .block > p {
+ margin: 25px 50px;
+ padding: 0;
+ font-size: larger;
+ }
+
+ header {
+ transform: none;
+ padding: 10px;
+ }
+
+ header:hover {
+ opacity: 100% !important;
+ transform: none;
+ }
+
+ .hamburger {
+ display: none;
+ }
+
+ nav {
+ width: 100%;
+ gap: 25px;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.2em;
+ }
+
+ nav a {
+ opacity: 100%;
+ transform: none;
+ }
+
+ nav a:hover {
+ opacity: 100%;
+ transform: none;
+ }
+
+ #education p + p, #experience p + p {
+ font-size: medium;
+ }
+}
\ No newline at end of file