feat: use sass to build css (closes #5)
This commit is contained in:
parent
e438103906
commit
dfd396a8e3
|
|
@ -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/).
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,3 +45,4 @@ p {
|
|||
margin: 0 0 var(--space-small) 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -20,3 +20,4 @@
|
|||
--fz-3: 1.5rem;
|
||||
--fz-4: 1.125rem;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import 'games.scss';
|
||||
@import 'news.scss';
|
||||
@import 'presentation.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 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="stylesheet.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"/>
|
||||
<link rel="stylesheet" href="/style.css"/>
|
||||
<script type="module" src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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';
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue