From cf5af43fd2e7ec0514fc3fc2d8b8bf86344d66ff Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Thu, 10 Feb 2022 19:27:55 +0100 Subject: [PATCH] =?UTF-8?q?=E2=8F=AA=EF=B8=8F=20Rollback=20before=20"perfo?= =?UTF-8?q?rmance"=20"improvement"=20because=20bad=20user=20experience?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- script.js | 18 +- stylesheet-essentials-large_screen.css | 61 ------ stylesheet-essentials.css | 205 ------------------ stylesheet-main.css | 275 +++++++++++++++++++++++++ 5 files changed, 283 insertions(+), 280 deletions(-) delete mode 100644 stylesheet-essentials-large_screen.css delete mode 100644 stylesheet-essentials.css 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