frog-collective/frog-website
frog-collective
/
frog-website
5
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

feat: use sass to build css (closes #5)

This commit is contained in:
Corentin 2024-05-21 01:54:44 +02:00
parent e438103906
commit dfd396a8e3
16 changed files with 290 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -12,6 +12,12 @@ nox -s build
The website is generated in the build directory. 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 ## Editor Documentation
The content of the website is stored in the "Content" directory. 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. See https://getbem.com/naming/ for insigths on the BEM naming convention.
We use SASS as a CSS extension language (https://sass-lang.com/).

161
assets/css/content.css
View File

@ -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;
}
}

119
assets/css/nav.css
View File

@ -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;
}
}

4
noxfile.py
View File

@ -22,10 +22,14 @@ def build(session: Session) -> None:
"""Run unit tests.""" """Run unit tests."""
session.install("nodeenv", "git+https://git.collectivit.org/collectivit/jean-website") session.install("nodeenv", "git+https://git.collectivit.org/collectivit/jean-website")
session.run_install("nodeenv", "-p") session.run_install("nodeenv", "-p")
session.run_install("npm", "install", "-g", "sass")
session.log("Building website...") session.log("Building website...")
session.run("jwebsite", "build") 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...") session.log("Copying static files to build directory...")
copytree("assets", "build", dirs_exist_ok=True) copytree("assets", "build", dirs_exist_ok=True)

10
src/lib/content.scss Normal file
View File

@ -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;
}
}

122
src/lib/nav.scss Normal file
View File

@ -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);
}
}
}
}

47
src/lib/section.scss Normal file
View File

@ -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;
}
}
}

1
assets/css/typo.css → src/lib/typo.scss
View File

@ -45,3 +45,4 @@ p {
margin: 0 0 var(--space-small) 0; margin: 0 0 var(--space-small) 0;
} }
} }

1
assets/css/variables.css → src/lib/variables.scss
View File

@ -20,3 +20,4 @@
--fz-3: 1.5rem; --fz-3: 1.5rem;
--fz-4: 1.125rem; --fz-4: 1.125rem;
} }

3
src/pages/index/_style.scss Normal file
View File

@ -0,0 +1,3 @@
@import 'games.scss';
@import 'news.scss';
@import 'presentation.scss';

38
src/pages/index/games.scss Normal file
View File

@ -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;
}
}
}

33
src/pages/index/news.scss Normal file
View File

@ -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);
}
}

6
src/pages/index/page.html
View File

@ -8,11 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300"> <link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
<link rel="stylesheet" href="stylesheet.css"/> <link rel="stylesheet" href="/style.css"/>
<link rel="stylesheet" href="css/variables.css"/>
<link rel="stylesheet" href="css/typo.css"/>
<link rel="stylesheet" href="css/nav.css"/>
<link rel="stylesheet" href="css/content.css"/>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>
</head> </head>
<body> <body>

16
src/pages/index/presentation.scss Normal file
View File

@ -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;
}

6
src/style.scss Normal file
View File

@ -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';

9
stylesheet.css
View File

@ -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);
}