From 2efc7b4358e83bb57d9dc558983d111e9c1eb791 Mon Sep 17 00:00:00 2001 From: Chris Mann Date: Fri, 21 Jul 2023 15:40:14 +0200 Subject: [PATCH] Design --- static/css/lesgv/blog-post-card.css | 77 ++++++ static/css/lesgv/breadcrumbs.css | 25 ++ static/css/lesgv/burger.css | 235 ++++++++++++++++++ static/css/lesgv/faire-ma-home-page.css | 158 ++++++++++++ static/css/lesgv/faire-ma-page.css | 270 +++++++++++++++++++++ static/css/lesgv/gv-colors.css | 43 ++++ static/css/lesgv/lesgv-colors.css | 96 ++++++++ static/css/lesgv/themes/boule.css | 62 +++++ static/css/lesgv/themes/generique.css | 0 static/css/lesgv/themes/lesartsvoisins.css | 133 ++++++++++ static/javascript/burger.js | 20 ++ templates/layout.html | 4 + 12 files changed, 1123 insertions(+) create mode 100644 static/css/lesgv/blog-post-card.css create mode 100644 static/css/lesgv/breadcrumbs.css create mode 100644 static/css/lesgv/burger.css create mode 100644 static/css/lesgv/faire-ma-home-page.css create mode 100644 static/css/lesgv/faire-ma-page.css create mode 100644 static/css/lesgv/gv-colors.css create mode 100644 static/css/lesgv/lesgv-colors.css create mode 100644 static/css/lesgv/themes/boule.css create mode 100644 static/css/lesgv/themes/generique.css create mode 100644 static/css/lesgv/themes/lesartsvoisins.css create mode 100644 static/javascript/burger.js diff --git a/static/css/lesgv/blog-post-card.css b/static/css/lesgv/blog-post-card.css new file mode 100644 index 0000000..ac37660 --- /dev/null +++ b/static/css/lesgv/blog-post-card.css @@ -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; + } +} \ No newline at end of file diff --git a/static/css/lesgv/breadcrumbs.css b/static/css/lesgv/breadcrumbs.css new file mode 100644 index 0000000..2eddd70 --- /dev/null +++ b/static/css/lesgv/breadcrumbs.css @@ -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; +} \ No newline at end of file diff --git a/static/css/lesgv/burger.css b/static/css/lesgv/burger.css new file mode 100644 index 0000000..c6fb567 --- /dev/null +++ b/static/css/lesgv/burger.css @@ -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; + } +} \ No newline at end of file diff --git a/static/css/lesgv/faire-ma-home-page.css b/static/css/lesgv/faire-ma-home-page.css new file mode 100644 index 0000000..0bb0fd5 --- /dev/null +++ b/static/css/lesgv/faire-ma-home-page.css @@ -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; + } +} + diff --git a/static/css/lesgv/faire-ma-page.css b/static/css/lesgv/faire-ma-page.css new file mode 100644 index 0000000..ba7e267 --- /dev/null +++ b/static/css/lesgv/faire-ma-page.css @@ -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; + } +} + diff --git a/static/css/lesgv/gv-colors.css b/static/css/lesgv/gv-colors.css new file mode 100644 index 0000000..35611b3 --- /dev/null +++ b/static/css/lesgv/gv-colors.css @@ -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; +} \ No newline at end of file diff --git a/static/css/lesgv/lesgv-colors.css b/static/css/lesgv/lesgv-colors.css new file mode 100644 index 0000000..d68845b --- /dev/null +++ b/static/css/lesgv/lesgv-colors.css @@ -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 +*/ diff --git a/static/css/lesgv/themes/boule.css b/static/css/lesgv/themes/boule.css new file mode 100644 index 0000000..fafd225 --- /dev/null +++ b/static/css/lesgv/themes/boule.css @@ -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); +} \ No newline at end of file diff --git a/static/css/lesgv/themes/generique.css b/static/css/lesgv/themes/generique.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/lesgv/themes/lesartsvoisins.css b/static/css/lesgv/themes/lesartsvoisins.css new file mode 100644 index 0000000..854ff92 --- /dev/null +++ b/static/css/lesgv/themes/lesartsvoisins.css @@ -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); +} + diff --git a/static/javascript/burger.js b/static/javascript/burger.js new file mode 100644 index 0000000..8ae7d72 --- /dev/null +++ b/static/javascript/burger.js @@ -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; + } +} + diff --git a/templates/layout.html b/templates/layout.html index aa2fd50..df13346 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -3,11 +3,15 @@ + + + + {{template "title" .}} Guichet