From dfd396a8e30be4810d1a2c8e61908fa72bce8b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Tue, 21 May 2024 01:54:44 +0200 Subject: [PATCH] feat: use sass to build css (closes #5) --- README.md | 8 + assets/css/content.css | 161 ------------------ assets/css/nav.css | 119 ------------- noxfile.py | 4 + src/lib/content.scss | 10 ++ src/lib/nav.scss | 122 +++++++++++++ src/lib/section.scss | 47 +++++ assets/css/typo.css => src/lib/typo.scss | 1 + .../variables.css => src/lib/variables.scss | 1 + src/pages/index/_style.scss | 3 + src/pages/index/games.scss | 38 +++++ src/pages/index/news.scss | 33 ++++ src/pages/index/page.html | 6 +- src/pages/index/presentation.scss | 16 ++ src/style.scss | 6 + stylesheet.css | 9 - 16 files changed, 290 insertions(+), 294 deletions(-) delete mode 100644 assets/css/content.css delete mode 100644 assets/css/nav.css create mode 100644 src/lib/content.scss create mode 100644 src/lib/nav.scss create mode 100644 src/lib/section.scss rename assets/css/typo.css => src/lib/typo.scss (99%) rename assets/css/variables.css => src/lib/variables.scss (99%) create mode 100644 src/pages/index/_style.scss create mode 100644 src/pages/index/games.scss create mode 100644 src/pages/index/news.scss create mode 100644 src/pages/index/presentation.scss create mode 100644 src/style.scss delete mode 100644 stylesheet.css diff --git a/README.md b/README.md index 21f303b..3cd73b7 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,12 @@ nox -s build The website is generated in the build directory. +To iterate more rapidly, avoid rebuilding the virtualenv each time by running : + +```bash +nox -R -s build +``` + ## Editor Documentation The content of the website is stored in the "Content" directory. @@ -50,3 +56,5 @@ We use the BEM naming convention with the scheme ``` See https://getbem.com/naming/ for insigths on the BEM naming convention. + +We use SASS as a CSS extension language (https://sass-lang.com/). diff --git a/assets/css/content.css b/assets/css/content.css deleted file mode 100644 index 37d3a0c..0000000 --- a/assets/css/content.css +++ /dev/null @@ -1,161 +0,0 @@ -.content { - margin: -60px auto 0 auto; - padding: 0 var(--space-small); - max-width: 1100px; -} - -@media (max-width: 768px) { - .content { - margin-top: 0; - } -} - -/* Sections */ - -.section { - margin-bottom: var(--space-xlarge); - display: flex; - flex-direction: column; -} - -.section--title { - display: flex; - flex-direction: column; - align-items: center; -} - -.section--title::before { - width: 150px; - height: 150px; - background: center / contain no-repeat var(--image); - content: ""; -} - -.section--title:hover::before { - background-image: var(--hover-image); -} - -.section--content { - display: flex; - flex-direction: column; - align-items: center; -} - -@media (max-width: 768px) { - .section { - margin-bottom: var(--space-large); - } - - .section--title { - flex-direction: row; - justify-content: center; - } - - .section--title::before { - width: 50px; - height: 50px; - margin-right: var(--space-small); - } - - .section--content { - grid-area: 2 / 1 / 3 / 4; - } -} - -/* Members area */ - -.members { - display: flex; - justify-content: center; - gap: var(--space-medium); -} - -.member { - display: flex; - flex-direction: column; - align-items: center; -} - -@media (max-width: 768px) { - .members { - flex-direction: column; - } -} - -/* Games */ - -.game { - display: flex; - flex-direction: column; -} - -.game::after { - content: ""; - background: center / cover no-repeat url("/img/game-footer.png"); - height: 13px; -} - -.game--picture-wrapper { - display: flex; - justify-content: center; - overflow: hidden; -} - -.game--description { - padding: var(--space-large); - display: flex; - flex-direction: column; - align-items: center; - background: var(--primary-color); - color: var(--dark); -} - -.game--more-button { - background: var(--dark); - color: var(--primary-color); - padding: var(--space-small) var(--space-medium); - text-decoration: none; - font-family: Knewave; - font-size: var(--fz-4); -} - -.game--more-button:hover { - color: white; -} - -/* News */ -.news { - display: flex; - flex-direction: column; - margin-bottom: var(--space-medium); -} - -.news::after { - content: ""; - background: center / cover no-repeat url("/img/game-footer.png"); - height: 13px; -} - -.news--title { - display: grid; - grid-template-columns: 1fr auto; - background: var(--dark); - color: white; - padding: var(--space-small) var(--space-medium); -} - -.news--content { - padding: var(--space-large); - display: flex; - flex-direction: column; - align-items: center; - background: var(--primary-color); - color: var(--dark); -} - -@media (max-width: 768px) { - .news--title { - grid-template-columns: auto; - grid-template-rows: auto auto; - } -} diff --git a/assets/css/nav.css b/assets/css/nav.css deleted file mode 100644 index d3171d3..0000000 --- a/assets/css/nav.css +++ /dev/null @@ -1,119 +0,0 @@ -.nav { - --background: var(--dark); - - position: sticky; - top: 0; - overflow: hidden; - padding: 0 var(--space-small); -} - -.nav--content { - max-width: var(--width); - margin: 0 auto; - display: grid; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto auto; -} - -.nav--title { - grid-area: 1 / 1 / 3 / 2; - background: var(--background); - padding-top: var(--space-small); -} - -.nav--menu { - grid-area: 1 / 2 / 2 / 3; - overflow: hidden; - background: var(--background); - display: grid; - grid-template-columns: 1fr auto; - /* make the nav background full page width */ - margin: 0 -50vw; - padding: 0 50vw; -} - -.nav--menu-section { - display: flex; - flex-direction: row; - justify-content: space-around; - padding: 0; - margin: 0; -} - -.nav--menu-item { - list-style: none; - flex-grow: 1; - display: flex; -} - -.nav--menu-link { - flex-grow: 1; - padding: var(--space-large) var(--space-small); - - font-family: Knewave; - font-size: var(--fz-4); - color: var(--primary-color); - text-transform: uppercase; - text-align: center; - text-decoration: none; -} - -.nav--menu-link:hover { - background: var(--primary-color); - color: var(--on-primary); -} - -toggle-menu-button { - width: 34px; - height: 34px; - position: absolute; - top: 0; - right: 0; - display: none; - cursor: pointer; -} - -toggle-menu-button .bar { - display: block; - background-color: #777; - width: 20px; - height: 2px; - border-radius: 100px; - position: absolute; - top: 18px; - right: 7px; - transition: all 0.5s; -} - -toggle-menu-button .bar:first-child { - transform: translateY(-6px); -} - -.nav__open toggle-menu-button .bar { - transform: rotate(45deg); -} - -.nav__open toggle-menu-button .bar:first-child { - transform: rotate(-45deg); -} - -@media (max-width: 768px) { - .nav--menu { - max-height: 0; - display: flex; - flex-direction: column; - transition: all 0.2s ease-out; - } - - .nav--menu-section { - flex-direction: column; - } - - .nav--toggle-button { - display: block; - } - - .nav__open .nav--menu { - max-height: 100vh; - } -} diff --git a/noxfile.py b/noxfile.py index e321bce..3f627b1 100644 --- a/noxfile.py +++ b/noxfile.py @@ -22,10 +22,14 @@ def build(session: Session) -> None: """Run unit tests.""" session.install("nodeenv", "git+https://git.collectivit.org/collectivit/jean-website") session.run_install("nodeenv", "-p") + session.run_install("npm", "install", "-g", "sass") session.log("Building website...") session.run("jwebsite", "build") + session.log("Building css...") + session.run("npx", "sass", "src/style.scss", "build/style.css", "--style=compressed") + session.log("Copying static files to build directory...") copytree("assets", "build", dirs_exist_ok=True) diff --git a/src/lib/content.scss b/src/lib/content.scss new file mode 100644 index 0000000..e951948 --- /dev/null +++ b/src/lib/content.scss @@ -0,0 +1,10 @@ +.content { + margin: -60px auto 0 auto; + padding: 0 var(--space-small); + max-width: 1100px; + + @media (max-width: 768px) { + margin-top: 0; + } +} + diff --git a/src/lib/nav.scss b/src/lib/nav.scss new file mode 100644 index 0000000..ff39e49 --- /dev/null +++ b/src/lib/nav.scss @@ -0,0 +1,122 @@ +.nav { + --background: var(--dark); + + position: sticky; + top: 0; + overflow: hidden; + padding: 0 var(--space-small); + + &--title { + grid-area: 1 / 1 / 3 / 2; + background: var(--background); + padding-top: var(--space-small); + } + + &--content { + max-width: var(--width); + margin: 0 auto; + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto auto; + } + + &--menu { + grid-area: 1 / 2 / 2 / 3; + overflow: hidden; + background: var(--background); + display: grid; + grid-template-columns: 1fr auto; + /* make the nav background full page width */ + margin: 0 -50vw; + padding: 0 50vw; + + @media (max-width: 768px) { + max-height: 0; + display: flex; + flex-direction: column; + transition: all 0.2s ease-out; + } + } + + &--menu-section { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 0; + margin: 0; + @media (max-width: 768px) { + flex-direction: column; + } + } + + &--menu-item { + list-style: none; + flex-grow: 1; + display: flex; + } + + &--menu-link { + flex-grow: 1; + padding: var(--space-large) var(--space-small); + + font-family: Knewave; + font-size: var(--fz-4); + color: var(--primary-color); + text-transform: uppercase; + text-align: center; + text-decoration: none; + + &:hover { + background: var(--primary-color); + color: var(--on-primary); + } + } + + &--toggle-button { + @media (max-width: 768px) { + display: block; + } + } + + &__open &--menu { + @media (max-width: 768px) { + max-height: 100vh; + } + } +} + +toggle-menu-button { + width: 34px; + height: 34px; + position: absolute; + top: 0; + right: 0; + display: none; + cursor: pointer; + + .bar { + display: block; + background-color: #777; + width: 20px; + height: 2px; + border-radius: 100px; + position: absolute; + top: 18px; + right: 7px; + transition: all 0.5s; + + &:first-child { + transform: translateY(-6px); + } + } + + .nav__open & { + .bar { + transform: rotate(45deg); + + &:first-child { + transform: rotate(-45deg); + } + } + } +} diff --git a/src/lib/section.scss b/src/lib/section.scss new file mode 100644 index 0000000..aff9d33 --- /dev/null +++ b/src/lib/section.scss @@ -0,0 +1,47 @@ +.section { + margin-bottom: var(--space-xlarge); + display: flex; + flex-direction: column; + + @media (max-width: 768px) { + margin-bottom: var(--space-large); + } + + &--title { + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: 768px) { + flex-direction: row; + justify-content: center; + } + + &::before { + width: 150px; + height: 150px; + background: center / contain no-repeat var(--image); + content: ""; + + @media (max-width: 768px) { + width: 50px; + height: 50px; + margin-right: var(--space-small); + } + } + + &:hover::before { + background-image: var(--hover-image); + } + } + + &--content { + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: 768px) { + grid-area: 2 / 1 / 3 / 4; + } + } +} diff --git a/assets/css/typo.css b/src/lib/typo.scss similarity index 99% rename from assets/css/typo.css rename to src/lib/typo.scss index 73677e8..2d7db4b 100644 --- a/assets/css/typo.css +++ b/src/lib/typo.scss @@ -45,3 +45,4 @@ p { margin: 0 0 var(--space-small) 0; } } + diff --git a/assets/css/variables.css b/src/lib/variables.scss similarity index 99% rename from assets/css/variables.css rename to src/lib/variables.scss index 1a8812a..fbab2b5 100644 --- a/assets/css/variables.css +++ b/src/lib/variables.scss @@ -20,3 +20,4 @@ --fz-3: 1.5rem; --fz-4: 1.125rem; } + diff --git a/src/pages/index/_style.scss b/src/pages/index/_style.scss new file mode 100644 index 0000000..700d359 --- /dev/null +++ b/src/pages/index/_style.scss @@ -0,0 +1,3 @@ +@import 'games.scss'; +@import 'news.scss'; +@import 'presentation.scss'; diff --git a/src/pages/index/games.scss b/src/pages/index/games.scss new file mode 100644 index 0000000..c29285e --- /dev/null +++ b/src/pages/index/games.scss @@ -0,0 +1,38 @@ +.game { + display: flex; + flex-direction: column; + + &::after { + content: ""; + background: center / cover no-repeat url("/img/game-footer.png"); + height: 13px; + } + + &--picture-wrapper { + display: flex; + justify-content: center; + overflow: hidden; + } + + &--description { + padding: var(--space-large); + display: flex; + flex-direction: column; + align-items: center; + background: var(--primary-color); + color: var(--dark); + } + + &--more-button { + background: var(--dark); + color: var(--primary-color); + padding: var(--space-small) var(--space-medium); + text-decoration: none; + font-family: Knewave; + font-size: var(--fz-4); + + &:hover { + color: white; + } + } +} diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss new file mode 100644 index 0000000..4e909f9 --- /dev/null +++ b/src/pages/index/news.scss @@ -0,0 +1,33 @@ +.news { + display: flex; + flex-direction: column; + margin-bottom: var(--space-medium); + + &::after { + content: ""; + background: center / cover no-repeat url("/img/game-footer.png"); + height: 13px; + } + + &--title { + display: grid; + grid-template-columns: 1fr auto; + background: var(--dark); + color: white; + padding: var(--space-small) var(--space-medium); + @media (max-width: 768px) { + grid-template-columns: auto; + grid-template-rows: auto auto; + } + + } + + &--content { + padding: var(--space-large); + display: flex; + flex-direction: column; + align-items: center; + background: var(--primary-color); + color: var(--dark); + } +} diff --git a/src/pages/index/page.html b/src/pages/index/page.html index 9221182..c56761e 100644 --- a/src/pages/index/page.html +++ b/src/pages/index/page.html @@ -8,11 +8,7 @@ - - - - - + diff --git a/src/pages/index/presentation.scss b/src/pages/index/presentation.scss new file mode 100644 index 0000000..4c94788 --- /dev/null +++ b/src/pages/index/presentation.scss @@ -0,0 +1,16 @@ +.members { + display: flex; + justify-content: center; + gap: var(--space-medium); + @media (max-width: 768px) { + flex-direction: column; + } +} + +.member { + display: flex; + flex-direction: column; + align-items: center; +} + + diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..e59391c --- /dev/null +++ b/src/style.scss @@ -0,0 +1,6 @@ +@import 'lib/variables.scss'; +@import 'lib/typo.scss'; +@import 'lib/nav.scss'; +@import 'lib/section.scss'; +@import 'lib/content.scss'; +@import 'pages/index/_style.scss'; diff --git a/stylesheet.css b/stylesheet.css deleted file mode 100644 index 7eba5b5..0000000 --- a/stylesheet.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - background-image: url(img/background.jpg); - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - text-align: justify; - line-height: 25px; - color: var(--color); -} -