From 998abbc34631206746c59a0dd2f17be9bc8184ff Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Thu, 10 Feb 2022 19:04:54 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Splitted=20CSS=20files,=20?= =?UTF-8?q?added=20media=20attributes=20on=20s?= 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, 280 insertions(+), 283 deletions(-) create mode 100644 stylesheet-essentials-large_screen.css create mode 100644 stylesheet-essentials.css diff --git a/index.html b/index.html index 616d57d..2c6d7cf 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,10 @@ - + + diff --git a/script.js b/script.js index 9448465..e867b10 100644 --- a/script.js +++ b/script.js @@ -15,19 +15,21 @@ 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"; - const stylesheet = document.createElement('link'); - stylesheet.href = 'stylesheet-imgs.css'; - stylesheet.rel = 'stylesheet'; - stylesheet.type = 'text/css'; - document.querySelector('head').appendChild(stylesheet); + stylesheets.forEach(function (stylesheet) { + const link = document.createElement('link'); + link.href = stylesheet; + link.rel = 'stylesheet'; + link.type = 'text/css'; + document.querySelector('head').appendChild(link); + }); } -loadCSS(); - function toAddClass(toClass, inClass) { "use strict"; @@ -176,3 +178,5 @@ 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 new file mode 100644 index 0000000..069ca43 --- /dev/null +++ b/stylesheet-essentials-large_screen.css @@ -0,0 +1,61 @@ +#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 new file mode 100644 index 0000000..f980651 --- /dev/null +++ b/stylesheet-essentials.css @@ -0,0 +1,205 @@ +* { + 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 78d2303..66ce664 100644 --- a/stylesheet-main.css +++ b/stylesheet-main.css @@ -10,95 +10,6 @@ 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; @@ -135,120 +46,6 @@ 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%; } @@ -540,75 +337,3 @@ a { 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