change gitignore to include theme
This commit is contained in:
Valentin
parent
032e6d06f4
commit
1bea358e24
|
|
@ -25,6 +25,7 @@ user/plugins/*
|
|||
!user/plugins/.*
|
||||
user/themes/*
|
||||
!user/themes/.*
|
||||
!user/themes/ateliers-55
|
||||
user/**/config/security.yaml
|
||||
|
||||
# Environments
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
# v0.1.0
|
||||
## 03/05/2024
|
||||
|
||||
1. [](#new)
|
||||
* ChangeLog started...
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2024 Valentin Le Moign
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Ateliers 55 Theme
|
||||
|
||||
The **Ateliers 55** Theme is for [Grav CMS](http://github.com/getgrav/grav). This README.md file should be modified to describe the features, installation, configuration, and general usage of this theme.
|
||||
|
||||
## Description
|
||||
|
||||
Thème du blog des Ateliers 55
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<?php
|
||||
namespace Grav\Theme;
|
||||
|
||||
use Grav\Common\Theme;
|
||||
|
||||
class Ateliers55 extends Theme
|
||||
{
|
||||
// Access plugin events in this class
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
enabled: true
|
||||
dropdown:
|
||||
enabled: true
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
name: Ateliers 55
|
||||
slug: ateliers-55
|
||||
type: theme
|
||||
version: 0.1.0
|
||||
description: Thème du blog des Ateliers 55
|
||||
icon: rebel
|
||||
author:
|
||||
name: Valentin Le Moign
|
||||
email: valentin_le_moign@figureslibres.io
|
||||
homepage: https://github.com/valentin-le-moign/grav-theme-ateliers-55
|
||||
demo: http://demo.yoursite.com
|
||||
keywords: grav, theme, etc
|
||||
bugs: https://github.com/valentin-le-moign/grav-theme-ateliers-55/issues
|
||||
readme: https://github.com/valentin-le-moign/grav-theme-ateliers-55/blob/develop/README.md
|
||||
license: MIT
|
||||
|
||||
dependencies:
|
||||
- { name: grav, version: '>=1.6.0' }
|
||||
|
||||
form:
|
||||
validation: loose
|
||||
fields:
|
||||
dropdown.enabled:
|
||||
type: toggle
|
||||
label: Dropdown in Menu
|
||||
highlight: 1
|
||||
default: 1
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
type: bool
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
/* Core Stuff */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: #606d6e;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #454B4D;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1F8CD6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #175E91;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #F0F0F0;
|
||||
margin: 1rem 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 10px solid #eee;
|
||||
margin: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.wrapper {
|
||||
margin: 0 3rem;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Content Styling */
|
||||
.header .padding {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #1F8DD6;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.header a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
font-size: 1.7rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
/* Menu Settings */
|
||||
.main-nav ul {
|
||||
text-align: center;
|
||||
letter-spacing: -1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-nav ul li {
|
||||
display: inline-block;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.main-nav ul li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 45px;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main-nav > ul > li > a {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/*Active dropdown nav item */
|
||||
.main-nav ul li:hover > a {
|
||||
background-color: #175E91;
|
||||
}
|
||||
|
||||
/* Selected Dropdown nav item */
|
||||
.main-nav ul li.selected > a {
|
||||
background-color: #fff;
|
||||
color: #175E91;
|
||||
}
|
||||
|
||||
/* Dropdown CSS */
|
||||
.main-nav ul li {position: relative;}
|
||||
|
||||
.main-nav ul li ul {
|
||||
position: absolute;
|
||||
background-color: #1F8DD6;
|
||||
min-width: 100%;
|
||||
text-align: left;
|
||||
z-index: 999;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.main-nav ul li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Dropdown CSS */
|
||||
.main-nav ul li ul ul {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Active on Hover */
|
||||
.main-nav li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Child Indicator */
|
||||
.main-nav .has-children > a {
|
||||
padding-right: 30px;
|
||||
}
|
||||
.main-nav .has-children > a:after {
|
||||
font-family: FontAwesome;
|
||||
content: '\f107';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.main-nav .has-children .has-children > a:after {
|
||||
content: '\f105';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,403 @@
|
|||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-400-book-webfont.woff") format("woff"), url("../fonts/jost-400-book-webfont.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-300-lightitalic-webfont.woff") format("woff"), url("../fonts/jost-300-lightitalic-webfont.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-500-medium-webfont.woff") format("woff"), url("../fonts/jost-500-medium-webfont.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-500-mediumitalic-webfont.woff") format("woff"), url("../fonts/jost-500-mediumitalic-webfont.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-700-bold-webfont.woff") format("woff"), url("../fonts/jost-700-bold-webfont.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-700-bolditalic-webfont.woff") format("woff"), url("../fonts/jost-700-bolditalic-webfont.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
* {
|
||||
font-family: "Jost", sans-serif;
|
||||
}
|
||||
* a, * a:hover, * a:active, * a:focus, * a:visited {
|
||||
color: #0066ff;
|
||||
}
|
||||
* ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
max-height: 10vh;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px #444;
|
||||
}
|
||||
header #logo {
|
||||
width: 7.5vh;
|
||||
height: 7.5vh;
|
||||
padding: 1vh;
|
||||
}
|
||||
header #logo img {
|
||||
width: 100%;
|
||||
transform: scale(1.2) translateY(0.8rem);
|
||||
}
|
||||
header #main-title {
|
||||
align-self: flex-end;
|
||||
}
|
||||
header #main-title h1 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
header #hamburger {
|
||||
padding: 1.5rem 1rem;
|
||||
width: 7.5vh;
|
||||
height: 7.5vh;
|
||||
border-left: solid 1px #444;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
header #hamburger div {
|
||||
border-bottom: solid 1px #000;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-out, transform 0.4s ease-out;
|
||||
transform: none;
|
||||
}
|
||||
header #hamburger.open div:first-of-type {
|
||||
transform: translate(0rem, calc(3.75vh - 1.5rem)) rotate(-45deg);
|
||||
}
|
||||
header #hamburger.open div:nth-of-type(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
header #hamburger.open div:last-of-type {
|
||||
transform: translate(0rem, calc((3.75vh - 1.5rem) * -1)) rotate(45deg);
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #0066ff;
|
||||
max-height: 0vh;
|
||||
height: auto;
|
||||
transition: max-height 0.8s ease-out;
|
||||
}
|
||||
nav ul {
|
||||
padding: 1rem 0 1rem 7.5vh;
|
||||
margin: 0;
|
||||
}
|
||||
nav ul li a, nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:visited {
|
||||
padding-left: 0;
|
||||
transition: padding-left 0.3s ease-out;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
nav ul li a:hover {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
nav.open {
|
||||
max-height: 20vh;
|
||||
}
|
||||
|
||||
#about {
|
||||
color: #0066ff;
|
||||
line-height: 1.4;
|
||||
border-bottom: solid 1px #000;
|
||||
padding: 1rem 1.2rem 1rem 1.2rem;
|
||||
font-weight: 500;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
justify-items: center;
|
||||
}
|
||||
#about #about-hidden {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
max-height: 0vh;
|
||||
transition: max-height 1s ease-out;
|
||||
font-weight: normal;
|
||||
}
|
||||
#about #about-hidden.open {
|
||||
max-height: 50vh;
|
||||
}
|
||||
#about #about-arrow {
|
||||
width: 7.5vh;
|
||||
height: 3.75vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 1rem;
|
||||
transform: rotate(0deg) scale(0.5);
|
||||
transition: transform 0.5s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
#about #about-arrow div {
|
||||
width: 50%;
|
||||
border-bottom: solid 1px #000;
|
||||
}
|
||||
#about #about-arrow div:first-of-type {
|
||||
transform: translateX(50%) translateY(-1rem) rotate(45deg);
|
||||
}
|
||||
#about #about-arrow div:last-of-type {
|
||||
transform: translateX(-50%) translateY(-1rem) rotate(-45deg);
|
||||
}
|
||||
#about #about-arrow.open {
|
||||
transform: rotate(180deg) scale(0.5);
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
main .article-card {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
main .article-card .img-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
max-height: 40vh;
|
||||
position: relative;
|
||||
}
|
||||
main .article-card .img-cover .eye {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: opacity 0.3s ease-out;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
main .article-card .img-cover .eye .eye-picto {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
-webkit-mask: url(../images/eye.svg) no-repeat center;
|
||||
mask: url(../images/eye.svg) no-repeat center;
|
||||
mask-size: 100%;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: #0066ff;
|
||||
}
|
||||
main .article-card .img-cover > img {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
main .article-card .date {
|
||||
margin-top: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #0066ff;
|
||||
}
|
||||
main .article-card h3 {
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
main .article-card:hover .img-cover .eye {
|
||||
opacity: 1;
|
||||
}
|
||||
main .article-card:hover .img-cover > img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
article {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
article #article-wrapper {
|
||||
border: solid 1px #000;
|
||||
width: 95vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
article #article-wrapper .article-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
article #article-wrapper .article-header .article-siblings {
|
||||
width: 100%;
|
||||
padding: 0 7vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
article #article-wrapper .article-header .article-siblings a {
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
article #article-wrapper .article-header .article-siblings a i {
|
||||
font-size: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
article #article-wrapper .article-header .close-article {
|
||||
z-index: 11;
|
||||
display: block;
|
||||
padding-top: 0.75rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: -1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
article #article-wrapper .article-header .close-article div {
|
||||
width: 100%;
|
||||
border-bottom: solid 1px #000;
|
||||
}
|
||||
article #article-wrapper .article-header .close-article div:first-of-type {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
article #article-wrapper .article-header .close-article div:last-of-type {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
article #article-wrapper .swiper {
|
||||
max-height: 40vh;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-wrapper .swiper-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 7vw;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-wrapper .swiper-slide img {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next {
|
||||
color: #000;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-button-prev {
|
||||
left: 0;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-button-next {
|
||||
right: 0;
|
||||
}
|
||||
article .article-date {
|
||||
padding: 0 7vw;
|
||||
font-weight: 500;
|
||||
color: #0066ff;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
article .article-titre {
|
||||
padding: 0 7vw;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
article .article-content {
|
||||
padding: 0 7vw;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
header #logo {
|
||||
width: 15vw;
|
||||
}
|
||||
header #logo img {
|
||||
padding-left: 40%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
header #main-title {
|
||||
width: 100%;
|
||||
}
|
||||
header #main-title h1 {
|
||||
font-size: 2rem;
|
||||
padding-left: 2.5vw;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
nav ul {
|
||||
padding: 1rem 0 1rem 15vw;
|
||||
}
|
||||
#about {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
padding: 1rem 0 1rem 15vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
#about #about-summary {
|
||||
padding-right: calc(15vw - 7.5vh);
|
||||
}
|
||||
#about #about-hidden {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
padding-right: calc(15vw - 7.5vh);
|
||||
}
|
||||
#about #about-arrow {
|
||||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
align-self: center;
|
||||
}
|
||||
#about #about-hidden.open {
|
||||
max-height: 20vh;
|
||||
}
|
||||
main {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 2rem;
|
||||
}
|
||||
main .article-card .img-cover {
|
||||
max-height: 20vh;
|
||||
}
|
||||
article #article-wrapper {
|
||||
width: 60vw;
|
||||
}
|
||||
article #article-wrapper .swiper-button-prev {
|
||||
left: 1rem !important;
|
||||
}
|
||||
article #article-wrapper .swiper-button-next {
|
||||
right: 1rem !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
main {
|
||||
margin: 2rem 15vw;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OApCA;EAqCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA,kBApDA;EAqDA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBAtEU;EAuEV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAhFN;EAiFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAhGU;EAiGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBA3KN;;AA8KF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAxLE;;AA0LN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBA1NE;EA2NF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OA7OR;EA8OQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;AACA;EACI;EACA;;AAIZ;EACI,OA7RJ;EA8RI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAzSM;EA0SN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
data-name="Layer 50"
|
||||
viewBox="0 0 26.999512 21"
|
||||
x="0px"
|
||||
y="0px"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="noun-eye-6613305.svg"
|
||||
width="26.999512"
|
||||
height="21"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="16.808869"
|
||||
inkscape:cx="8.1802051"
|
||||
inkscape:cy="22.904574"
|
||||
inkscape:window-width="2160"
|
||||
inkscape:window-height="1440"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<path
|
||||
d="M 26.907959,10.210938 C 26.419678,9.523438 21.9021,3.5 13.499756,3.5 5.0974121,3.5 0.57983393,9.523438 0.09155273,10.210938 c -0.1220703,0.172851 -0.1220703,0.405273 0,0.578124 C 0.57983393,11.476562 5.0974121,17.5 13.499756,17.5 c 8.402344,0 12.919922,-6.023438 13.408203,-6.710938 0.12207,-0.172851 0.12207,-0.405273 0,-0.578124 z M 13.499756,16.5 c -7.1318361,0 -11.3789064,-4.750977 -12.3720705,-6 0.9931641,-1.249023 5.2402344,-6 12.3720705,-6 7.131836,0 11.378906,4.750977 12.37207,6 -0.993164,1.249023 -5.240234,6 -12.37207,6 z m 0,-11.5 c -3.032227,0 -5.5000002,2.467773 -5.5000002,5.5 0,3.032227 2.4677732,5.5 5.5000002,5.5 3.032227,0 5.5,-2.467773 5.5,-5.5 0,-3.032227 -2.467773,-5.5 -5.5,-5.5 z m 0,10 c -2.481445,0 -4.5000002,-2.018555 -4.5000002,-4.5 0,-2.481445 2.0185552,-4.5 4.5000002,-4.5 2.481445,0 4.5,2.018555 4.5,4.5 0,2.481445 -2.018555,4.5 -4.5,4.5 z m 0,-7.5 c -1.654297,0 -3,1.345703 -3,3 0,1.654297 1.345703,3 3,3 1.654297,0 3,-1.345703 3,-3 0,-1.654297 -1.345703,-3 -3,-3 z m 0,5 c -1.102539,0 -2,-0.897461 -2,-2 0,-1.102539 0.897461,-2 2,-2 1.102539,0 2,0.897461 2,2 0,1.102539 -0.897461,2 -2,2 z m -0.5,-11 v -1 c 0,-0.2763672 0.223633,-0.5 0.5,-0.5 0.276367,0 0.5,0.2236328 0.5,0.5 v 1 c 0,0.2763672 -0.223633,0.5 -0.5,0.5 -0.276367,0 -0.5,-0.2236328 -0.5,-0.5 z m 1,18 v 1 c 0,0.276367 -0.223633,0.5 -0.5,0.5 -0.276367,0 -0.5,-0.223633 -0.5,-0.5 v -1 c 0,-0.276367 0.223633,-0.5 0.5,-0.5 0.276367,0 0.5,0.223633 0.5,0.5 z M 6.6892089,3.1611328 C 6.5114745,2.9501953 6.5388183,2.6347656 6.7507323,2.4570312 6.9616698,2.2783203 7.2780761,2.305664 7.4548339,2.5185546 l 0.6425779,0.765625 c 0.177735,0.2109375 0.150391,0.5263672 -0.06152,0.7041016 -0.09375,0.079102 -0.208008,0.1171875 -0.321289,0.1171875 -0.142578,0 -0.28418,-0.060547 -0.3828128,-0.1787109 z M 20.310303,17.838867 c 0.177734,0.210938 0.15039,0.526367 -0.06152,0.704102 -0.09375,0.0791 -0.208007,0.117187 -0.321289,0.117187 -0.142578,0 -0.284179,-0.06055 -0.382812,-0.178711 L 18.9021,17.71582 c -0.177735,-0.210937 -0.150391,-0.526367 0.06152,-0.704101 0.210938,-0.179688 0.527344,-0.151367 0.704102,0.06152 z M 9.6101078,1.2744141 c -0.09473,-0.2597656 0.03906,-0.5458984 0.298828,-0.640625 0.2607422,-0.095703 0.5458982,0.039063 0.6406252,0.2988281 l 0.341797,0.9394531 c 0.09473,0.2597656 -0.03906,0.5458984 -0.298828,0.640625 -0.05664,0.020508 -0.114258,0.030273 -0.170899,0.030273 -0.204101,0 -0.395508,-0.1259766 -0.4697262,-0.3291016 z M 17.389404,19.725586 c 0.09473,0.259766 -0.03906,0.545898 -0.298828,0.640625 -0.05664,0.02051 -0.114257,0.03027 -0.170898,0.03027 -0.204102,0 -0.395508,-0.125976 -0.469727,-0.329101 l -0.341797,-0.93945 c -0.09473,-0.259766 0.03906,-0.545899 0.298829,-0.640625 0.260742,-0.09473 0.545898,0.03906 0.640625,0.298828 z M 18.963623,3.9882813 C 18.751709,3.8105469 18.724365,3.4951172 18.9021,3.2841797 l 0.642578,-0.765625 c 0.177734,-0.2119141 0.493164,-0.2392578 0.704102,-0.061523 0.211914,0.1777344 0.239257,0.4931641 0.06152,0.7041016 l -0.642578,0.765625 c -0.09863,0.1181641 -0.240234,0.1787109 -0.382813,0.1787109 -0.113281,0 -0.227539,-0.038086 -0.321289,-0.1171875 z M 8.0358888,17.011719 c 0.211914,0.177734 0.239258,0.493164 0.06152,0.704101 L 7.454831,18.481445 c -0.098633,0.118165 -0.2402344,0.178711 -0.3828125,0.178711 -0.1132812,0 -0.2275391,-0.03809 -0.3212891,-0.117187 -0.2119141,-0.177735 -0.2392578,-0.493164 -0.061523,-0.704102 l 0.6425781,-0.765625 c 0.1777347,-0.211914 0.4931637,-0.240234 0.7041017,-0.06152 z M 16.108154,1.8720704 16.449951,0.9326173 c 0.09473,-0.2597656 0.379883,-0.3935547 0.640625,-0.2988281 0.259766,0.094727 0.393555,0.3808594 0.298828,0.640625 l -0.341796,0.9394531 c -0.07422,0.203125 -0.265625,0.3291016 -0.469727,0.3291016 -0.05664,0 -0.114258,-0.00977 -0.170898,-0.030273 C 16.147217,2.4179689 16.013428,2.1318361 16.108154,1.8720704 Z M 10.891358,19.12793 10.549561,20.067383 c -0.07422,0.203125 -0.265625,0.329101 -0.469727,0.329101 -0.05664,0 -0.1142582,-0.0098 -0.1708982,-0.03027 -0.259766,-0.09473 -0.393555,-0.380859 -0.298828,-0.640625 l 0.341797,-0.939453 c 0.09473,-0.259766 0.3798822,-0.392578 0.6406252,-0.298828 0.259765,0.09473 0.393554,0.380859 0.298828,0.640625 z"
|
||||
id="path1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,98 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="65.470116mm"
|
||||
height="65.409111mm"
|
||||
viewBox="0 0 65.470116 65.409111"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="logo_ateliers55.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="4.0963296"
|
||||
inkscape:cx="141.22399"
|
||||
inkscape:cy="163.31694"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1080"
|
||||
inkscape:window-x="102"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1">
|
||||
<inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
width="65.470116"
|
||||
height="65.409111"
|
||||
id="page1"
|
||||
margin="0 0 0 0"
|
||||
bleed="0" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-66.485544,-88.593331)">
|
||||
<g
|
||||
id="g12132"
|
||||
transform="translate(-974.0636,-1344.7498)">
|
||||
<circle
|
||||
inkscape:export-ydpi="150"
|
||||
inkscape:export-xdpi="150"
|
||||
r="32.609894"
|
||||
cy="1465.9951"
|
||||
cx="1073.3485"
|
||||
id="path11600"
|
||||
style="opacity:1;fill:#0066ff;fill-opacity:1;stroke:none;stroke-width:0.217399" />
|
||||
<path
|
||||
inkscape:export-ydpi="150"
|
||||
inkscape:export-xdpi="150"
|
||||
d="m 1052.2103,1468.3248 c 0,5.6292 4.5864,10.2154 10.2154,10.2154 5.6287,0 10.215,-4.5862 10.215,-10.2154 0,-5.6285 -4.5863,-10.215 -10.215,-10.215 -0.9174,0 -1.793,0.1252 -2.6268,0.3339 l -1.3853,-4.0861 h 11.2993 v -5.8373 h -16.1776 l -0.2809,13.7595 6.0461,2.9604 c 0.792,-0.7926 1.9179,-1.2927 3.1272,-1.2927 2.418,0 4.3777,1.9597 4.3777,4.3777 0,2.4186 -1.9597,4.3783 -4.3777,4.3783 -2.4186,0 -4.3783,-1.9597 -4.3783,-4.3783 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.6129px;line-height:1.25;font-family:'Geometric Sans Serif v1';-inkscape-font-specification:'Geometric Sans Serif v1';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.04238"
|
||||
id="path11595"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cssscccccccssscc" />
|
||||
<path
|
||||
inkscape:export-ydpi="150"
|
||||
inkscape:export-xdpi="150"
|
||||
d="m 1075.2413,1474.1245 c 0,5.6292 4.5865,10.2154 10.215,10.2154 5.6292,0 10.2154,-4.5862 10.2154,-10.2154 0,-5.6285 -4.5862,-10.215 -10.2154,-10.215 -0.9173,0 -1.7925,0.1252 -2.6267,0.3339 l -1.3288,-4.0861 h 11.2993 v -5.8373 h -16.1777 l -0.3387,13.7595 6.0454,2.9604 c 0.7924,-0.7926 1.9179,-1.2927 3.1272,-1.2927 2.4186,0 4.3783,1.9597 4.3783,4.3777 0,2.4186 -1.9597,4.3783 -4.3783,4.3783 -2.4179,0 -4.3776,-1.9597 -4.3776,-4.3783 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.6129px;line-height:1.25;font-family:'Geometric Sans Serif v1';-inkscape-font-specification:'Geometric Sans Serif v1';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.04238"
|
||||
id="path11597"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cssscccccccssscc" />
|
||||
<text
|
||||
inkscape:export-ydpi="150"
|
||||
inkscape:export-xdpi="150"
|
||||
transform="rotate(-23.191875)"
|
||||
id="text11440-1-1-6-9"
|
||||
y="1773.3237"
|
||||
x="389.93906"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.5374px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.263435"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Jost*';-inkscape-font-specification:'Jost* Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.263435"
|
||||
y="1773.3237"
|
||||
x="389.93906"
|
||||
id="tspan11438-1-0-7-1"
|
||||
sodipodi:role="line">Ateliers</tspan><tspan
|
||||
id="tspan11442-3-0-2-1"
|
||||
y="1786.4955"
|
||||
x="389.93906"
|
||||
sodipodi:role="line" /></text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,75 @@
|
|||
function toggleMenu(el) {
|
||||
let nav = document.querySelector('nav');
|
||||
el.classList.toggle('open');
|
||||
nav.classList.toggle('open');
|
||||
}
|
||||
|
||||
function toggleAbout() {
|
||||
let arrow = document.querySelector('#about-arrow');
|
||||
let aboutContent = document.querySelector('#about-hidden');
|
||||
aboutContent.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
let body = document.querySelector('body');
|
||||
if (document.querySelector('.swiper')) {
|
||||
body.style.overflowY = "hidden";
|
||||
} else {
|
||||
body.style.overflowY = "auto";
|
||||
}
|
||||
let swiperEl = document.querySelector('.swiper');
|
||||
initSwiper();
|
||||
swiperEl.style.opacity = 1;
|
||||
resizeVerticalImages();
|
||||
barba.init({
|
||||
transitions: [{
|
||||
name: 'opacity-transition',
|
||||
leave(data) {
|
||||
return gsap.to(data.current.container, {
|
||||
opacity: 0
|
||||
})
|
||||
},
|
||||
enter(data) {
|
||||
return gsap.from(data.next.container, {
|
||||
opacity: 0
|
||||
})
|
||||
}
|
||||
}]
|
||||
});
|
||||
barba.hooks.before((data) => {
|
||||
swiperEl.style.opacity = 0;
|
||||
});
|
||||
barba.hooks.after((data) => {
|
||||
swiperEl = document.querySelector('.swiper');
|
||||
resizeVerticalImages();
|
||||
if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
|
||||
initSwiper();
|
||||
body.style.overflowY = "hidden";
|
||||
} else {
|
||||
body.style.overflowY = "auto";
|
||||
}
|
||||
swiperEl.style.opacity = 1;
|
||||
});
|
||||
})
|
||||
|
||||
function initSwiper() {
|
||||
let swiper = new Swiper('.swiper', {
|
||||
loop: true,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function resizeVerticalImages() {
|
||||
if (document.querySelector('.swiper')) {
|
||||
let verticalImages = document.querySelectorAll('.swiper-slide > img');
|
||||
for (let img of verticalImages) {
|
||||
if (img.clientHeight > img.clientWidth) {
|
||||
img.style.width = "50%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,434 @@
|
|||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-400-book-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-400-book-webfont.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-300-lightitalic-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-300-lightitalic-webfont.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-500-medium-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-500-medium-webfont.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-500-mediumitalic-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-500-mediumitalic-webfont.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-700-bold-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-700-bold-webfont.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("../fonts/jost-700-bolditalic-webfont.woff") format("woff"),
|
||||
url("../fonts/jost-700-bolditalic-webfont.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
$mainColor: #000;
|
||||
$lightColor: #444;
|
||||
$accentColor: #0066ff;
|
||||
$bgColor: #fff;
|
||||
|
||||
* {
|
||||
font-family: "Jost", sans-serif;
|
||||
a, a:hover, a:active, a:focus, a:visited {
|
||||
color: $accentColor;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
max-height: 10vh;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px $lightColor;
|
||||
#logo {
|
||||
width: 7.5vh;
|
||||
height: 7.5vh;
|
||||
padding: 1vh;
|
||||
img {
|
||||
width: 100%;
|
||||
transform: scale(1.2) translateY(0.8rem);
|
||||
}
|
||||
}
|
||||
#main-title {
|
||||
align-self: flex-end;
|
||||
h1 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
color: $mainColor;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
#hamburger {
|
||||
padding: 1.5rem 1rem;
|
||||
width: 7.5vh;
|
||||
height: 7.5vh;
|
||||
border-left: solid 1px $lightColor;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
div {
|
||||
border-bottom: solid 1px $mainColor;
|
||||
width: 100%;
|
||||
background-color: $mainColor;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-out, transform 0.4s ease-out;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
#hamburger.open {
|
||||
div:first-of-type {
|
||||
transform: translate(0rem, calc(7.5vh / 2 - 1.5rem)) rotate(-45deg);
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
div:last-of-type {
|
||||
transform: translate(0rem, calc((7.5vh / 2 - 1.5rem) * -1)) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: $accentColor;
|
||||
max-height: 0vh;
|
||||
height: auto;
|
||||
transition: max-height 0.8s ease-out;
|
||||
ul {
|
||||
padding: 1rem 0 1rem 7.5vh;
|
||||
margin: 0;
|
||||
li {
|
||||
a, a:hover, a:active, a:focus, a:visited {
|
||||
padding-left: 0;
|
||||
transition: padding-left 0.3s ease-out;
|
||||
color: $bgColor;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
li a:hover {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
nav.open {
|
||||
max-height: 20vh;
|
||||
}
|
||||
|
||||
#about {
|
||||
color: $accentColor;
|
||||
line-height: 1.4;
|
||||
border-bottom: solid 1px $mainColor;
|
||||
padding: 1rem 1.2rem 1rem 1.2rem;
|
||||
font-weight: 500;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
justify-items: center;
|
||||
#about-hidden {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
max-height: 0vh;
|
||||
transition: max-height 1s ease-out;
|
||||
font-weight: normal;
|
||||
}
|
||||
#about-hidden.open {
|
||||
max-height: 50vh;
|
||||
}
|
||||
#about-arrow {
|
||||
width: 7.5vh;
|
||||
height: 3.75vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 1rem;
|
||||
transform: rotate(0deg) scale(0.5);
|
||||
transition: transform 0.5s ease-out;
|
||||
cursor: pointer;
|
||||
div {
|
||||
width: 50%;
|
||||
border-bottom: solid 1px $mainColor;
|
||||
}
|
||||
div:first-of-type {
|
||||
transform: translateX(50%) translateY(-1rem) rotate(45deg);
|
||||
}
|
||||
div:last-of-type {
|
||||
transform: translateX(-50%) translateY(-1rem) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
#about-arrow.open {
|
||||
transform: rotate(180deg) scale(0.5);
|
||||
}
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
padding: 1.2rem;
|
||||
.article-card {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
.img-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
max-height: 40vh;
|
||||
position: relative;
|
||||
.eye {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: opacity 0.3s ease-out;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.eye-picto {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
-webkit-mask: url(../images/eye.svg) no-repeat center;
|
||||
mask: url(../images/eye.svg) no-repeat center;
|
||||
mask-size: 100%;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: $accentColor;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
margin-top: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: $accentColor;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.article-card:hover {
|
||||
.img-cover {
|
||||
.eye {
|
||||
opacity: 1;
|
||||
}
|
||||
> img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
article {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
#article-wrapper {
|
||||
border: solid 1px $mainColor;
|
||||
width: 95vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background-color: $bgColor;
|
||||
padding-bottom: 1.5rem;
|
||||
.article-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
.article-siblings {
|
||||
width: 100%;
|
||||
padding: 0 7vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
a {
|
||||
color: $mainColor;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
font-size: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-article {
|
||||
z-index: 11;
|
||||
display: block;
|
||||
padding-top: 0.75rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: -1.5rem;
|
||||
cursor: pointer;
|
||||
div {
|
||||
width: 100%;
|
||||
border-bottom: solid 1px $mainColor;
|
||||
}
|
||||
div:first-of-type {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
div:last-of-type {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
max-height: 40vh;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
.swiper-wrapper {
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 7vw;
|
||||
img {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
color: $mainColor;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-date {
|
||||
padding: 0 7vw;
|
||||
font-weight: 500;
|
||||
color: $accentColor;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.article-titre {
|
||||
padding: 0 7vw;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.article-content {
|
||||
padding: 0 7vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
header {
|
||||
#logo {
|
||||
width: 15vw;
|
||||
img {
|
||||
padding-left: 40%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
}
|
||||
#main-title {
|
||||
width: 100%;
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
padding-left: 2.5vw;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
ul {
|
||||
padding: 1rem 0 1rem 15vw;
|
||||
}
|
||||
}
|
||||
#about {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
padding: 1rem 0 1rem 15vw;
|
||||
cursor: pointer;
|
||||
#about-summary {
|
||||
padding-right: calc(15vw - 7.5vh);
|
||||
}
|
||||
#about-hidden {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
padding-right: calc(15vw - 7.5vh);
|
||||
}
|
||||
#about-arrow {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 2;
|
||||
align-self: center;
|
||||
}
|
||||
#about-hidden.open {
|
||||
max-height: 20vh;
|
||||
}
|
||||
}
|
||||
main {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 2rem;
|
||||
.article-card {
|
||||
.img-cover {
|
||||
max-height: 20vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
article {
|
||||
#article-wrapper {
|
||||
width: 60vw;
|
||||
.swiper-button-prev {
|
||||
left: 1rem !important;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 1rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
main {
|
||||
margin: 2rem 15vw;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,45 @@
|
|||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% if page.url == "/" %}
|
||||
{% else %}
|
||||
<article>
|
||||
<div id="article-wrapper">
|
||||
<div class="article-header">
|
||||
{% if page.parent.title == "Articles" %}
|
||||
<div class="article-siblings">
|
||||
{% if not page.isFirst %}
|
||||
<a href="{{ page.nextSibling.url }}"><i class="fa-solid fa-chevron-left"></i> Article suivant</a>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% if not page.isLast %}
|
||||
<a href="{{ page.prevSibling.url }}">Article précédent <i class="fa-solid fa-chevron-right"></i></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a href="{{ home_url }}" class="close-article">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper">
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-wrapper">
|
||||
{% for image in page.media.images %}
|
||||
<div class="swiper-slide">
|
||||
<img src="{{ image.url }}" alt="{{ page.title }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
{% if page.parent.title == "Articles" %}
|
||||
<p class="article-date">{{ page.date | date('d/m/Y') }}</p>
|
||||
{% endif %}
|
||||
<p class="article-titre">{{ page.title }}</p>
|
||||
<div class="article-content">{{ page.content|raw }}</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="lead text-center">
|
||||
<h1>Error!</h1>
|
||||
{{ page.content|raw }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div id="about" onClick="toggleAbout()">
|
||||
<div id="about-summary">
|
||||
{{ page.find('/').summary|raw }}
|
||||
</div>
|
||||
<div id="about-hidden">
|
||||
{{ page.find('/').content|slice(page.summary|length, page.content|length)|markdown(false) }}
|
||||
</div>
|
||||
<div id="about-arrow">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<main>
|
||||
{% for article in page.find('/articles').children.published.order('date', 'desc') %}
|
||||
<div class="article-card">
|
||||
<a href="{{ article.url }}" data-barba="link">
|
||||
<div class="img-cover">
|
||||
<div class="eye">
|
||||
<div class="eye-picto"></div>
|
||||
</div>
|
||||
<img src="{{ article.media.images|first.url }}" alt="{{ article.title }}" />
|
||||
</div>
|
||||
<div class="date">{{ article.date | date('d/m/Y') }}</div>
|
||||
<h3>{{ article.title }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</main>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ (grav.language.getActive ?: grav.config.site.default_lang)|e }}">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="utf-8" />
|
||||
<title>{% if header.title %}{{ header.title|e }} | {% endif %}{{ site.title|e }}</title>
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% include 'partials/metadata.html.twig' %}
|
||||
|
||||
<link rel="icon" type="image/png" href="{{ url('theme://images/logo.png')|e }}" />
|
||||
<link rel="canonical" href="{{ page.canonical(true)|e }}" />
|
||||
{% endblock head %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{% do assets.addCss('theme://css/pure.min.css', 100) %}
|
||||
{% do assets.addCss('theme://css/font-awesome.min.css', 99) %}
|
||||
{% do assets.addCss('theme://css/custom.css', 98) %}
|
||||
{% do assets.addCss('theme://css/swiper.bundle.css', 97) %}
|
||||
{% do assets.addCss('theme://css/styles.css', 96) %}
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{% do assets.addJs('theme://js/jquery.min.js', 100) %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<script src="https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js"></script>
|
||||
{% do assets.addJs('theme://js/swiper-bundle.min.js', 98) %}
|
||||
{% do assets.addJs('theme://js/script.js', 97) %}
|
||||
{% endblock %}
|
||||
|
||||
{% block assets deferred %}
|
||||
{{ assets.css()|raw }}
|
||||
{{ assets.js()|raw }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body id="top" class="{{ page.header.body_classes|e }}" data-barba="wrapper">
|
||||
|
||||
{% block header %}
|
||||
{% include 'partials/header.html.twig' %}
|
||||
{% include 'partials/nav.html.twig' %}
|
||||
{% include 'partials/about.html.twig' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% include 'partials/articles-list.html.twig' %}
|
||||
<div data-barba="container">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block bottom %}
|
||||
{{ assets.js('bottom')|raw }}
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<header>
|
||||
<a id="logo" href="{{ home_url }}">
|
||||
<img src="{{ url('theme://images/logo_ateliers55.svg') }}" alt="Logo Ateliers 55" />
|
||||
</a>
|
||||
<a id="main-title" href="{{ home_url }}">
|
||||
<h1>{{ page.find('/').title|e }}</h1>
|
||||
</a>
|
||||
<div id="hamburger" onClick="toggleMenu(this)">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onClick="toggleAbout()">à propos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ base_url }}/contact">contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ base_url }}/mentions-legales">mentions légales</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Loading…
Reference in New Issue