Design
This commit is contained in:
parent
fdc7244c68
commit
2efc7b4358
12 changed files with 1123 additions and 0 deletions
77
static/css/lesgv/blog-post-card.css
Normal file
77
static/css/lesgv/blog-post-card.css
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
.card {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-width: 20rem;
|
||||
}
|
||||
.card-header img {
|
||||
width: 100%;
|
||||
height: 14rem;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 250px;
|
||||
height: --webkit-fill-available;
|
||||
|
||||
}
|
||||
|
||||
.card-body {
|
||||
text-align: left;
|
||||
}
|
||||
.article h3 {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
float:right;
|
||||
}
|
||||
.tag {
|
||||
background: var(--color-text);
|
||||
border-radius: 0.25em;
|
||||
margin: 0;
|
||||
color: var(--color-background);
|
||||
padding: 2px 10px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-teal {
|
||||
background-color: #47bcd4;
|
||||
}
|
||||
.tag-purple {
|
||||
background-color: #5e76bf;
|
||||
}
|
||||
.tag-pink {
|
||||
background-color: #cd5b9f;
|
||||
}
|
||||
|
||||
.author img {
|
||||
border-radius: 50%;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
/* margin-right: 2rem; */
|
||||
}
|
||||
.user-info p {
|
||||
margin: 0;
|
||||
}
|
||||
.user-info p small {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
div.author {
|
||||
text-align: right;
|
||||
}
|
||||
div.tags {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.card {
|
||||
min-width: 14rem;
|
||||
}
|
||||
}
|
||||
25
static/css/lesgv/breadcrumbs.css
Normal file
25
static/css/lesgv/breadcrumbs.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
ul.breadcrumb {
|
||||
padding: 10px 16px;
|
||||
list-style: none;
|
||||
/* background-color: #d8d0c2; */
|
||||
background-color: var(--color-text);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--color-background);
|
||||
font-weight: bold;
|
||||
}
|
||||
ul.breadcrumb li {
|
||||
display: inline;
|
||||
}
|
||||
ul.breadcrumb li+li:before {
|
||||
padding: 8px;
|
||||
color: var(--color-link-inverted);
|
||||
content: "/\00a0";
|
||||
}
|
||||
ul.breadcrumb li a {
|
||||
color: var(--color-link-inverted);
|
||||
text-decoration: none;
|
||||
}
|
||||
ul.breadcrumb li a:hover {
|
||||
color: var(--color-background);
|
||||
text-decoration: underline;
|
||||
}
|
||||
235
static/css/lesgv/burger.css
Normal file
235
static/css/lesgv/burger.css
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
#menuToggle
|
||||
{
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* top: 50px;
|
||||
left: 50px; */
|
||||
float: left;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
|
||||
z-index: 600;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menuToggle a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
#menuToggle a:hover
|
||||
{
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
#menu ul.submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
float: left;
|
||||
background: var(--color-background);
|
||||
list-style-type: none;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
#menu ul.submenu li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#menu li:hover ul.submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#menuToggle input
|
||||
{
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
/* top: -7px;
|
||||
left: -5px; */
|
||||
right: 3rem;
|
||||
top: 1.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0; /* hide this */
|
||||
z-index: 800; /* and place it over the hamburger */
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
#menuToggle div.burger {
|
||||
float: right;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Just a quick hamburger
|
||||
*/
|
||||
#menuToggle div.burger span
|
||||
{
|
||||
display: block;
|
||||
width: 2rem;
|
||||
height: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
position: relative;
|
||||
background: var(--color-text);
|
||||
border-radius: 0.2rem;
|
||||
z-index: 1;
|
||||
/* transform-origin: -4px 0px; */
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
/* display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
background: var(--color-text);
|
||||
border-radius: 3px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
transform-origin: 4px 0px;
|
||||
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
opacity 0.55s ease; */
|
||||
}
|
||||
|
||||
#menuToggle div.burger span:first-child
|
||||
{
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
#menuToggle div.burger span:nth-last-child(2)
|
||||
{
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Transform all the slices of hamburger
|
||||
* into a crossmark.
|
||||
*/
|
||||
#menuToggle input:checked ~ div.burger span
|
||||
{
|
||||
opacity: 1;
|
||||
transform: rotate(-45deg) translate(-0.05rem, -0.1rem);
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* body.darkmode #menuToggle input:checked ~ span {
|
||||
background: var(--color-secondary-dark);
|
||||
} */
|
||||
|
||||
/*
|
||||
* But let's hide the middle one.
|
||||
*/
|
||||
#menuToggle input:checked ~ div.burger span:nth-last-child(3)
|
||||
{
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) scale(0.2, 0.2);
|
||||
}
|
||||
|
||||
/*
|
||||
* Ohyeah and the last one should go the other direction
|
||||
*/
|
||||
#menuToggle input:checked ~ div.burger span:nth-last-child(2)
|
||||
{
|
||||
transform: rotate(45deg) translate(-0.1rem, -0.2rem);
|
||||
}
|
||||
|
||||
/*
|
||||
* Make this absolute positioned
|
||||
* at the top left of the screen
|
||||
*/
|
||||
#menu
|
||||
{
|
||||
/* position: absolute; */
|
||||
justify-content: space-between;
|
||||
visibility: hidden;
|
||||
/* width: 300px;
|
||||
margin: -100px 0 0 -50px;
|
||||
padding: 50px;
|
||||
padding-top: 125px; */
|
||||
|
||||
margin: 0.5rem 1rem 0 1rem;
|
||||
background: var(--color-background);
|
||||
opacity: 0.9;
|
||||
border: 1px solid;
|
||||
border-radius: 1em;
|
||||
list-style-type: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* to stop flickering of text in safari */
|
||||
|
||||
|
||||
/* transform-origin: 0% 0%;
|
||||
transform: translate(-120%, 0); */
|
||||
transform: visibility 1s linear;
|
||||
transition-property: visibility;
|
||||
|
||||
|
||||
/* transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); */
|
||||
padding-left: 0;
|
||||
padding: 1rem;
|
||||
/* left: 3rem; */
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
top: -1rem;
|
||||
display: flex;
|
||||
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
|
||||
column-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#menu li
|
||||
{
|
||||
padding: 0 0 0.5rem 0;
|
||||
font-size-adjust: 130%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* And let's slide it in from the left
|
||||
*/
|
||||
#menuToggle input:checked ~ ul
|
||||
{
|
||||
visibility: visible;
|
||||
opacity: 0.9;
|
||||
transition: visibility 0s linear 0s, opacity 300ms;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#menu
|
||||
{
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#menu
|
||||
{
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#menu
|
||||
{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
158
static/css/lesgv/faire-ma-home-page.css
Normal file
158
static/css/lesgv/faire-ma-home-page.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
div.container,
|
||||
div.posts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin: 1rem 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1rem auto;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
div.lesgv-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
div.agenda-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agenda-item img {
|
||||
width: 100%;
|
||||
max-height: 14rem;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.agenda-item a.left img {
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.agenda-item a.right img {
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
.agenda-item p {
|
||||
margin-block-end: 0.25rem;
|
||||
}
|
||||
|
||||
ul.agenda-item-date-lieu {
|
||||
padding-left: 0;
|
||||
padding-top:0;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
ul.agenda-item-date-lieu li {
|
||||
padding: 0 1rem 0 0;
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
}
|
||||
.apropos {
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
|
||||
}
|
||||
.agenda {
|
||||
grid-area: 1 / 2 / 3 / 4;
|
||||
border: var(--color-text);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 0 0.5rem;
|
||||
border-top: unset;
|
||||
border-bottom: unset;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.agenda h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.posts div.card:nth-child(3) {
|
||||
grid-area: 2 / 1 / 4 / 2;
|
||||
}
|
||||
div.posts div.card:nth-child(4) {
|
||||
grid-area: 3 / 2 / 4 / 4;
|
||||
}
|
||||
div.posts div.card:nth-child(6) {
|
||||
grid-area: 4 / 2 / 5 / 4;
|
||||
}
|
||||
div.posts div.card:nth-child(4) div.card-body{
|
||||
flex-direction: row;
|
||||
}
|
||||
div.posts div.card:nth-child(6) div.card-body {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
div.posts div.card:nth-child(4) img,
|
||||
div.posts div.card:nth-child(6) img {
|
||||
width: 14rem;
|
||||
padding: 0 0 0 0;
|
||||
margin: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
div.posts {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.agenda {
|
||||
grid-area: 1 / 2 / 3 / 3;
|
||||
}
|
||||
div.lesgv-footer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
div.posts div.card:nth-child(3) {
|
||||
grid-area: unset;
|
||||
}
|
||||
div.posts div.card:nth-child(4) {
|
||||
grid-area: unset;
|
||||
}
|
||||
div.posts div.card:nth-child(6) {
|
||||
grid-area: unset;
|
||||
}
|
||||
div.posts div.card:nth-child(4) div.card-body{
|
||||
flex-direction: column;
|
||||
}
|
||||
div.posts div.card:nth-child(6) div.card-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
div.posts div.card:nth-child(4) img,
|
||||
div.posts div.card:nth-child(6) img {
|
||||
width: unset;
|
||||
padding: unset;
|
||||
}
|
||||
.agenda-item a.right img,
|
||||
.agenda-item a.left img {
|
||||
width: 100%;
|
||||
float: unset;
|
||||
padding: 0 0 0 0;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
div.posts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.apropos {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
.agenda {
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
border: var(--color-text);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
270
static/css/lesgv/faire-ma-page.css
Normal file
270
static/css/lesgv/faire-ma-page.css
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 1300px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: left;
|
||||
}
|
||||
div.enclosing-grid {
|
||||
display: grid;
|
||||
}
|
||||
div.enclosing-grid img {
|
||||
scale: 90%;
|
||||
}
|
||||
.TL {
|
||||
grid-area: 1 / 1 / 2 / 4;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
.TL img {
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.TR {
|
||||
grid-area: 1 / 3 / 2 / 8;
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
.TR img {
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.HH {
|
||||
grid-area: 2 / 1 / 3 / 7 ;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.HH a {
|
||||
align-self: center;
|
||||
}
|
||||
.HH a img {
|
||||
max-width: 100vw;
|
||||
height: auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.ML {
|
||||
grid-area: 2 / 1 / 6 / 2;
|
||||
z-index: 20;
|
||||
}
|
||||
.ML img {
|
||||
margin-top: -75%;
|
||||
}
|
||||
.CT {
|
||||
grid-area: 3 / 2 / 6 / 5;
|
||||
z-index: 36;
|
||||
max-width: 86vw;
|
||||
background-color: var(--color-background);
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1rem 1rem 0 1rem;
|
||||
}
|
||||
.MR {
|
||||
grid-area: 2 / 5 / 10 / 8;
|
||||
/* grid-area: 2 / 6 / 10 / 9; */
|
||||
z-index: 17;
|
||||
}
|
||||
.FL {
|
||||
grid-area: 6 / 2 / 8 / 4;
|
||||
z-index: 28;
|
||||
margin-left: 4rem;
|
||||
border-radius: 0 0 0 1rem;
|
||||
}
|
||||
.FR {
|
||||
grid-area: 6 / 4 / 8 / 5;
|
||||
z-index: 29;
|
||||
border-radius: 0 0 1rem 0;
|
||||
|
||||
}
|
||||
.FR, .FL {
|
||||
margin-bottom: 4rem;
|
||||
background-color: var(--color-background);
|
||||
padding: 1rem;
|
||||
max-width: 86vw;
|
||||
}
|
||||
.BL {
|
||||
grid-area: 5 / 1 / 9 / 4;
|
||||
z-index: 12;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.BL a {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.BC {
|
||||
grid-area: 7 / 1 / 9 / 6;
|
||||
z-index: 14;
|
||||
margin-top: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
.BR {
|
||||
grid-area: 7 / 1 / 9 / 8;
|
||||
z-index: 13;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.BR img {
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.darkmode div.cadre img,
|
||||
.darkmode div.HH img {
|
||||
filter: sepia(0.25) brightness(1.25) contrast(0.75);
|
||||
}
|
||||
div.block-ghost_index_blog {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
body.fait_ma_page_home iframe,
|
||||
div.lesgv-footer iframe,
|
||||
div.enclosing-grid iframe {
|
||||
height: 14rem;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.CT {
|
||||
grid-area: 3 / 2 / 6 / 6;
|
||||
}
|
||||
|
||||
.FL {
|
||||
grid-area: 6 / 2 / 7 / 6;
|
||||
margin-left: unset;
|
||||
height: 100%;
|
||||
}
|
||||
.FR {
|
||||
grid-area: 7 / 3 / 8 / 6;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
.MR {
|
||||
grid-area: 2 / 6 / 10 / 8;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
div.block-ghost_index_blog{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
body.fait_ma_page_home iframe,
|
||||
div.lesgv-footer iframe,
|
||||
div.enclosing-grid iframe {
|
||||
padding-right: unset;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
div.enclosing-grid div {
|
||||
scale: 60%;
|
||||
}
|
||||
div.enclosing-grid div.CT,
|
||||
div.enclosing-grid div.HH,
|
||||
div.enclosing-grid div.CT div,
|
||||
div.enclosing-grid div.FL,
|
||||
div.enclosing-grid div.FR{
|
||||
scale: unset;
|
||||
}
|
||||
.HH {
|
||||
grid-area: 2 / 1 / 4 / 8;
|
||||
padding-right: revert;
|
||||
}
|
||||
.CT {
|
||||
grid-area: 4 / 1 / 5 / 8;
|
||||
}
|
||||
.FL {
|
||||
grid-area: 5 / 1 / 6 / 8;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
.FR {
|
||||
grid-area: 6 / 1 / 7 / 8;
|
||||
}
|
||||
.MR {
|
||||
grid-area: 2 / 3 / 7 / 8;
|
||||
}
|
||||
.BR {
|
||||
grid-area: 5 / 1 / 8 / 8;
|
||||
}
|
||||
.BC {
|
||||
grid-area: 7 / 1 / 8 / 4;
|
||||
}
|
||||
.CT, .FL, .FR {
|
||||
max-width: 83vw;
|
||||
margin: 0 3vw;
|
||||
}
|
||||
div.TL img {
|
||||
position:fixed;
|
||||
left: -12rem;
|
||||
}
|
||||
div.TR img {
|
||||
position:fixed;
|
||||
right: -15rem;
|
||||
}
|
||||
div.ML img {
|
||||
position:fixed;
|
||||
left: -10rem;
|
||||
}
|
||||
div.BC img {
|
||||
position:fixed;
|
||||
bottom: -15rem;
|
||||
}
|
||||
div.MR img {
|
||||
position:absolute;
|
||||
right: -15rem;
|
||||
}
|
||||
div.BL img {
|
||||
position:fixed;
|
||||
left: -10rem;
|
||||
bottom: -22rem;
|
||||
}
|
||||
div.BR img {
|
||||
position:fixed;
|
||||
right: -22rem;
|
||||
bottom: -22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
div.enclosing-grid {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
img {
|
||||
left: unset;
|
||||
right: unset;
|
||||
}
|
||||
body {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
.CT {
|
||||
grid-area: 4 / 3 / 5 / 7;
|
||||
}
|
||||
.FL {
|
||||
grid-area: 5 / 2 / 6 / 7;
|
||||
margin-left: unset;
|
||||
}
|
||||
.FR {
|
||||
grid-area: 6 / 3 / 7 / 7;
|
||||
}
|
||||
.BC {
|
||||
grid-area: 7 / 4 / 9 / 5;
|
||||
}
|
||||
}
|
||||
|
||||
43
static/css/lesgv/gv-colors.css
Normal file
43
static/css/lesgv/gv-colors.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
:root {
|
||||
/* --color-1: #74b9ff;
|
||||
--color-1: #e84393;
|
||||
--color-1: #6c5ce7;
|
||||
--color-1: #00b894;
|
||||
--color-1: #fdcb6e;
|
||||
--color-1: #006266;
|
||||
--color-1: #1B1464; */
|
||||
--slate-blue: #6c5ce7ff;
|
||||
--mountain-meadow: #00b894ff;
|
||||
--rose-bonbon: #e84393ff;
|
||||
--maximum-yellow-red: #fdcb6eff;
|
||||
--midnight-blue: #1b1464ff;
|
||||
--french-sky-blue: #74b9ff;
|
||||
--skobeloff: #006266;
|
||||
--white: white;
|
||||
--black: black;
|
||||
--gradient-top: linear-gradient(0deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-right: linear-gradient(90deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom: linear-gradient(180deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-left: linear-gradient(270deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-right: linear-gradient(45deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-right: linear-gradient(135deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-left: linear-gradient(225deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-left: linear-gradient(315deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-radial: radial-gradient(#6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--color-primary: var(--slate-blue);
|
||||
--color-primary-light: var(--french-sky-blue);
|
||||
--color-primary-dark: var(--midnight-blue);
|
||||
--color-secondary-light: var(--mountain-meadow);
|
||||
--color-secondary-dark: var(--black);
|
||||
--color-secondary: var(--skobeloff);
|
||||
--color-tertiary-light: var(--white);
|
||||
--color-tertiary: var(--maximum-yellow-red);
|
||||
--color-tertiary-dark: var(--rose-bonbon);
|
||||
--color-background: var(--white);
|
||||
--color-text: var(--black);
|
||||
--color-text-inverted: var(--white);
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-inverted: var(--color-primary-light);
|
||||
--gv-highlight-color: var(--color-primary-light);
|
||||
--gv-background-opacity: 0.9;
|
||||
}
|
||||
96
static/css/lesgv/lesgv-colors.css
Normal file
96
static/css/lesgv/lesgv-colors.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
:root {
|
||||
/* --color-1: #74b9ff;
|
||||
--color-1: #e84393;
|
||||
--color-1: #6c5ce7;
|
||||
--color-1: #00b894;
|
||||
--color-1: #fdcb6e;
|
||||
--color-1: #006266;
|
||||
--color-1: #1B1464; */
|
||||
--slate-blue: #6c5ce7ff;
|
||||
--mountain-meadow: #00b894ff;
|
||||
--rose-bonbon: #e84393ff;
|
||||
--maximum-yellow-red: #fdcb6eff;
|
||||
--midnight-blue: #1b1464ff;
|
||||
--french-sky-blue: #74b9ff;
|
||||
--skobeloff: #006266;
|
||||
--white: white;
|
||||
--color-whiteish: #eee;
|
||||
--color-blackish: #222;
|
||||
--gradient-top: linear-gradient(0deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-right: linear-gradient(90deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom: linear-gradient(180deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-left: linear-gradient(270deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-right: linear-gradient(45deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-right: linear-gradient(135deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-left: linear-gradient(225deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-left: linear-gradient(315deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-radial: radial-gradient(#6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--color-primary: var(--slate-blue);
|
||||
--color-primary-light: var(--french-sky-blue);
|
||||
--color-primary-dark: var(--midnight-blue);
|
||||
--color-secondary-light: var(--maximum-yellow-red);
|
||||
--color-secondary-dark: var(--maximum-yellow-red);
|
||||
--color-secondary: var(--maximum-yellow-red);
|
||||
--color-tertiary-light: var(--mountain-meadow);
|
||||
--color-tertiary: var(--mountain-meadow);
|
||||
--color-tertiary-dark: var(--skobeloff);
|
||||
--color-background: var(--color-whiteish);
|
||||
--color-background-inverted: var(--color-primary-dark);
|
||||
--color-text: var(--midnight-blue);
|
||||
--color-text-inverted: var(--color-whiteish);
|
||||
--color-link: var(--midnight-blue);
|
||||
--color-link-inverted: var(--rose-bonbon);
|
||||
--gv-highlight-color: var(--color-tertiary);
|
||||
--color-highlight: var(--color-tertiary);
|
||||
--gv-background-opacity: 0.9;
|
||||
--color-link-hover: var(--rose-bonbon);
|
||||
--color-link-hover-inverted: var(--maximum-yellow-red);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--color-primary-dark);
|
||||
--color-text: var(--white);
|
||||
--color-text-inverted: var(--black);
|
||||
--color-link: var(--color-primary-light);
|
||||
--color-link-inverted: var(--color-primary-dark);
|
||||
|
||||
--gv-highlight-color: var(--color-primary-dark);
|
||||
--gv-background-opacity: 0.9;
|
||||
}
|
||||
} */
|
||||
|
||||
.darkmode {
|
||||
--color-background: var(--color-primary-dark);
|
||||
--color-text: var(--color-whiteish);
|
||||
--color-text-inverted: var(--color-primary-dark);
|
||||
--color-link: var(--color-link-inverted);
|
||||
--color-link-inverted: var(--color-primary-light);
|
||||
--color-link-hover: var(--maximum-yellow-red);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
:root {
|
||||
--title-font-family: serif;
|
||||
--body-font-family: sans-serif;
|
||||
--body-width: 80%;
|
||||
--body-background: lightgrey;
|
||||
--content-background: white;
|
||||
--menu-background: blue;
|
||||
--menu-foreground: white;
|
||||
}
|
||||
F7F5F6
|
||||
91ADEF
|
||||
E3435F
|
||||
987F8F
|
||||
263C6A
|
||||
|
||||
F0F3F3
|
||||
879BB6
|
||||
F5BA18
|
||||
B33E54
|
||||
272534
|
||||
*/
|
||||
62
static/css/lesgv/themes/boule.css
Normal file
62
static/css/lesgv/themes/boule.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
:root {
|
||||
--color-primary: var(--mountain-meadow);
|
||||
--color-primary-light: var(--maximum-yellow-red);
|
||||
--color-primary-dark: var(--skobeloff);
|
||||
--color-secondary-light: var(--color-whiteish);
|
||||
--color-secondary-dark: var(--color-blackish);
|
||||
--color-secondary: var(--rose-bonbon);
|
||||
--color-tertiary-light: var(--french-sky-blue);
|
||||
--color-tertiary: var(--slate-blue);
|
||||
--color-tertiary-dark: var(--midnight-blue);
|
||||
--color-background: var(--color-whiteish);
|
||||
--color-background-inverted: var(--color-primary-dark);
|
||||
--color-text: var(--color-blackish);
|
||||
--color-text-inverted: var(--color-whiteish);
|
||||
--color-link: var(--color-primary-dark);
|
||||
--color-link-inverted: var(--color-primary-light);
|
||||
--gv-highlight-color: var(--color-seccondary);
|
||||
--color-highlight: var(--color-secondary);
|
||||
--gv-background-opacity: 0.9;
|
||||
--color-link-hover: var(--color-secondary);
|
||||
--color-link-hover-inverted: var(--color-primary-light);
|
||||
}
|
||||
.darkmode {
|
||||
--color-background: var(--color-blackish);
|
||||
--color-text: var(--color-whiteish);
|
||||
--color-text-inverted: var(--color-primary-dark);
|
||||
--color-link: var(--color-primary-light);
|
||||
--color-link-inverted: var(--color-primary-dark);
|
||||
--color-link-hover: var(--color-secondary);
|
||||
}
|
||||
div.CT, div.FL, div.FR, div.HH {
|
||||
--color-background: var(--color-blackish);
|
||||
--color-text: var(--color-whiteish);
|
||||
--color-text-inverted: var(--color-primary-dark);
|
||||
--color-link: var(--color-primary-light);
|
||||
--color-link-inverted: var(--color-primary-dark);
|
||||
--color-link-hover: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.CT a, .FL a, .FR a, .HH a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
.CT a:hover, .FL a:hover, .FR a:hover, .HH a:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
body.darkmode div.CT,
|
||||
body.darkmode div.FL,
|
||||
body.darkmode div.FR,
|
||||
body.darkmode div.HH {
|
||||
--color-background: var(--color-whiteish);
|
||||
--color-background-inverted: var(--color-primary-dark);
|
||||
--color-text: var(--color-blackish);
|
||||
--color-text-inverted: var(--color-whiteish);
|
||||
--color-link: var(--color-primary-dark);
|
||||
--color-link-inverted: var(--color-primary-light);
|
||||
--gv-highlight-color: var(--color-secondary);
|
||||
--color-highlight: var(--color-secondary);
|
||||
--gv-background-opacity: 0.9;
|
||||
--color-link-hover: var(--color-secondary);
|
||||
--color-link-hover-inverted: var(--color-primary-light);
|
||||
}
|
||||
0
static/css/lesgv/themes/generique.css
Normal file
0
static/css/lesgv/themes/generique.css
Normal file
133
static/css/lesgv/themes/lesartsvoisins.css
Normal file
133
static/css/lesgv/themes/lesartsvoisins.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
:root {
|
||||
--primary-50: #fee8f3;
|
||||
--primary-100: #fdc6e2;
|
||||
--primary-200: #fca1cf;
|
||||
--primary-300: #fb7bbb;
|
||||
--primary-400: #fa5ead;
|
||||
--primary-500: #f9429e;
|
||||
--primary-600: #f83c96;
|
||||
--primary-700: #f7338c;
|
||||
--primary-800: #f62b82;
|
||||
--primary-900: #f51d70;
|
||||
--primary-A100: #ffffff;
|
||||
--primary-A200: #fff6f9;
|
||||
--primary-A400: #ffc3d9;
|
||||
--primary-A700: #ffaac8;
|
||||
--secondary-50: #fffbee;
|
||||
--secondary-100: #fef4d4;
|
||||
--secondary-200: #feedb7;
|
||||
--secondary-300: #fde69a;
|
||||
--secondary-400: #fce084;
|
||||
--secondary-500: #fcdb6e;
|
||||
--secondary-600: #fcd766;
|
||||
--secondary-700: #fbd25b;
|
||||
--secondary-800: #fbcd51;
|
||||
--secondary-900: #fac43f;
|
||||
--secondary-A100: #ffffff;
|
||||
--secondary-A200: #ffffff;
|
||||
--secondary-A400: #fff6e2;
|
||||
--secondary-A700: #ffefc9;
|
||||
|
||||
--whiteish: #eee;
|
||||
--blackish: #222;
|
||||
|
||||
|
||||
/* --color-1: #74b9ff;
|
||||
--color-1: #e84393;
|
||||
--color-1: #6c5ce7;
|
||||
--color-1: #00b894;
|
||||
--color-1: #fdcb6e;
|
||||
--color-1: #006266;
|
||||
--color-1: #1B1464; */
|
||||
--slate-blue: #6c5ce7ff;
|
||||
--mountain-meadow: #00b894ff;
|
||||
--rose-bonbon: #e84393ff;
|
||||
--maximum-yellow-red: #fdcb6eff;
|
||||
--midnight-blue: #1b1464ff;
|
||||
--french-sky-blue: #74b9ff;
|
||||
--skobeloff: #006266;
|
||||
--white: white;
|
||||
--black: black;
|
||||
--gradient-top: linear-gradient(0deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-right: linear-gradient(90deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom: linear-gradient(180deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-left: linear-gradient(270deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-right: linear-gradient(45deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-right: linear-gradient(135deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-top-left: linear-gradient(225deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-bottom-left: linear-gradient(315deg, #6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--gradient-radial: radial-gradient(#6c5ce7ff, #00b894ff, #e84393ff, #fdcb6eff, #1b1464ff);
|
||||
--color-primary: var(--slate-blue);
|
||||
--color-primary-light: var(--french-sky-blue);
|
||||
--color-primary-dark: var(--midnight-blue);
|
||||
--color-secondary-light: var(--mountain-meadow);
|
||||
--color-secondary-dark: var(--black);
|
||||
--color-secondary: var(--skobeloff);
|
||||
--color-tertiary-light: var(--white);
|
||||
--color-tertiary: var(--maximum-yellow-red);
|
||||
--color-tertiary-dark: var(--rose-bonbon);
|
||||
--color-background: var(--whiteish);
|
||||
--color-text: var(--blackish);
|
||||
--color-text-inverted: var(--whiteish);
|
||||
--color-link: var(--primary-900);
|
||||
--color-link-inverted: var(--primary-100);
|
||||
--color-link-hover: var(--primary-600);
|
||||
--gv-highlight-color: var(--primary-100);
|
||||
--gv-background-opacity: 0.9;
|
||||
}
|
||||
/* :root {
|
||||
--color-primary: var(--mountain-meadow);
|
||||
--color-primary-light: var(--maximum-yellow-red);
|
||||
--color-primary-dark: var(--skobeloff);
|
||||
--color-secondary-light: var(--color-whiteish);
|
||||
--color-secondary-dark: var(--color-blackish);
|
||||
--color-secondary: var(--rose-bonbon);
|
||||
--color-tertiary-light: var(--french-sky-blue);
|
||||
--color-tertiary: var(--slate-blue);
|
||||
--color-tertiary-dark: var(--midnight-blue);
|
||||
--color-background: var(--color-whiteish);
|
||||
--color-background-inverted: var(--color-primary-dark);
|
||||
--color-text: var(--color-blackish);
|
||||
--color-text-inverted: var(--color-whiteish);
|
||||
--color-link: var(--color-primary-dark);
|
||||
--color-link-inverted: var(--color-primary-light);
|
||||
--gv-highlight-color: var(--color-seccondary);
|
||||
--color-highlight: var(--color-secondary);
|
||||
--gv-background-opacity: 0.9;
|
||||
--color-link-hover: var(--color-secondary);
|
||||
--color-link-hover-inverted: var(--color-primary-light);
|
||||
} */
|
||||
div.CT, div.FL, div.FR, div.HH {
|
||||
--color-background: var(--whiteish);
|
||||
--color-text: var(--blackish);
|
||||
--color-text-inverted: var(--whiteish);
|
||||
--color-link: var(--primary-900);
|
||||
--color-link-inverted: var(--primary-100);
|
||||
--gv-highlight-color: var(--primary-100);
|
||||
--gv-background-opacity: 0.9;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
--color-link-hover: var(--primary-500);
|
||||
}
|
||||
.darkmode {
|
||||
--color-background: var(--secondary-200);
|
||||
--color-text: var(--black);
|
||||
--color-text-inverted: var(--blackish);
|
||||
--color-link: var(--primary-600);
|
||||
--color-link-inverted: var(--primary-900);
|
||||
--color-link-hover: var(--primary-400);
|
||||
}
|
||||
body.darkmode div.CT,
|
||||
body.darkmode div.FL,
|
||||
body.darkmode div.FR,
|
||||
body.darkmode div.HH {
|
||||
--color-background: var(--whiteish);
|
||||
--color-text: var(--blackish);
|
||||
--color-text-inverted: var(--whiteish);
|
||||
--color-link: var(--primary-900);
|
||||
--color-link-inverted: var(--primary-100);
|
||||
--gv-highlight-color: var(--primary-100);
|
||||
--gv-background-opacity: 0.9;
|
||||
--color-link-hover: var(--primary-500);
|
||||
}
|
||||
|
||||
20
static/javascript/burger.js
Normal file
20
static/javascript/burger.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
window.addEventListener(
|
||||
"pagehide",
|
||||
(event) => {
|
||||
if (document.getElementById('menu-checkbox')) {
|
||||
if (document.getElementById('menu-checkbox').checked) {
|
||||
localStorage.setItem('menuopen', true);
|
||||
} else {
|
||||
localStorage.removeItem('menuopen');
|
||||
}
|
||||
}
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
if (document.getElementById('menu-checkbox')) {
|
||||
if (localStorage.getItem('menuopen')) {
|
||||
document.getElementById('menu-checkbox').checked=true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3,11 +3,15 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/static/fonts/lack/stylesheet.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/fonts/fengardoneue/font.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/lesgv/faire-ma-page.css" />
|
||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/lesgv/burger.css" />
|
||||
<link rel="stylesheet" href="/static/css/lesgv-colors.css">
|
||||
<link rel="stylesheet" href="/static/css/lesgv.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/lesgv/faire-ma-home-page.css" />
|
||||
|
||||
<title>{{template "title" .}} Guichet</title>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue