commit 8f04a81a78d8c398e40de2d19b4ef212431a3d9b Author: nounix Date: Wed Aug 9 13:01:16 2023 +0200 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/bootstrap.min.part.css b/assets/css/bootstrap.min.part.css new file mode 100644 index 0000000..f9b230b --- /dev/null +++ b/assets/css/bootstrap.min.part.css @@ -0,0 +1,51 @@ +html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} +a{background-color:transparent}a:active,a:hover{outline:0} +b,strong{font-weight:700} +h1{margin:.67em 0;font-size:2em} +svg:not(:root){overflow:hidden} +hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} +button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} +*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline} +hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee} +.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit} +.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px} +.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px} +.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px} +p{margin:0 0 10px} +.text-center{text-align:center} +ol,ul{margin-top:0;margin-bottom:10px} +.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} +.container{width:750px} +.container{width:970px} +.container{width:1170px} +.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px} +.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left} +.col-sm-6{width:50%} +.col-sm-4{width:33.33333333%} +.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left} +.col-md-4{width:33.33333333%} +.col-md-offset-2{margin-left:16.66666667%} +.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%} +.col-lg-3{width:25%} +.col-lg-offset-3{margin-left:25%} +.collapse{display:none} +.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee} +.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent} +.navbar{border-radius:4px} +.navbar-header{float:left} +.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} +.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important} +.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px} +.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0} +.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px} +.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px} +.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px} +.navbar-toggle{display:none} +.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px} +.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px} +.navbar-right{float:right!important;margin-right:-15px} +.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777} +.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7} +.navbar-default .navbar-toggle{border-color:#ddd} +.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7} +.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both} diff --git a/assets/css/modal.css b/assets/css/modal.css new file mode 100644 index 0000000..24e3cbc --- /dev/null +++ b/assets/css/modal.css @@ -0,0 +1,55 @@ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 10; + max-height: 100%; + min-width: 300px; + } + +.modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30%; + height: 70%; + max-height: 100%; + min-width: 300px; + } + +.close-button { + display: block; + width: 300px; + height: 40px; + background-color: #6d4c41; + color: white; + font-size: 20px; + text-align: center; + line-height: 40px; + cursor: pointer; + bottom: 0; + position: absolute; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + transition: all 0.3s ease; + margin-bottom: 60px; + left: 50%; + transform: translateX(-50%); +} + +.close-button:hover { + background-color: grey; + box-shadow: 0 8px 16px rgba(0,0,0,0.4); +} + +@media screen and (max-height: 800px) { + + .close-button { + margin-bottom: 10px; + } +} diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..14c042b --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,302 @@ +@font-face { + font-family: "LuziFer", lato; + src: url("https://tohubohu.ti-nuage.fr/fonts/LuziFer.ttf") format("truetype"); + font-display: swap; +} + + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + +html { + font-size: 10px; +} + + +.header { + position: relative; + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} + + .fade { + position: absolute; + font-family: sans-serif; + font-size: 1vw; + font-style: italic; + color: #B56308; + text-align: center; + width: 100%; + margin: auto; + left: 0; + opacity: 0; + animation-name: textFader; + animation-duration: 20s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +.fade:first-of-type { animation-delay: 0.5s} +.fade:nth-of-type(2) { + animation-delay: calc(20s / 8 + 0.5s); +} +.fade:nth-of-type(3) { + animation-delay: calc(20s / 8 * 2 + 0.5s); +} +.fade:nth-of-type(4) { + animation-delay: calc(20s / 8 * 3 + 0.5s); +} +.fade:nth-of-type(5) { + animation-delay: calc(20s / 8 * 4 + 0.5s); +} +.fade:nth-of-type(6) { + animation-delay: calc(20s / 8 * 5 + 0.5s); +} +.fade:nth-of-type(7) { + animation-delay: calc(20s / 8 * 6 + 0.5s); +} +.fade:nth-of-type(8) { + animation-delay: calc(20s / 8 * 7 + 0.5s); +} +@keyframes textFader { + 0% { + opacity: 0; + } /* fade-in */ + 1.25% { + opacity: 1; + } /* show */ + 11.25% { + opacity: 1; + } /* fade-out */ + 12.5% { + opacity: 0; + } /* waiting for the finish animation of other blocks */ + 100% { + opacity: 0; + } +} + +hr { + display: block; + unicode-bidi: isolate; + margin-block-start: 0.5em; + margin-block-end: 0.5em; + margin-inline-start: auto; + margin-inline-end: auto; + overflow: hidden; + border-style: inset; + border-width: 1px; + width: 10%; + margin-top: 60px; + margin-bottom: 60px; +} + h1 { + font-family: "LuziFer"; + color: #B56308; + line-height: 1.5; + font-weight: bold; + font-size: 4vw; +/* margin-top: 30%; */ + margin-bottom: 10%; +} + + + + +@media (min-width: 600px) { +.fade { + font-size: 2vw; + } + h1 { + font-size: 6vw; + } +} + +@media (min-width: 800px) { +.fade { + font-size: 2vw; + } + h1 { + font-size: 4vw; + } +} + +@media (min-width: 1200px) { +.fade { + font-size: 1vw; + } + h1 { + font-size: 3vw; + } +} + + h2 { + font-family: sans-serif; + font-size: 3.25rem; + color: #B56308; + text-align: center; + } + + p { + font-family: sans-serif; + font-weight: normal; + color: #B56308; + font-size: 1.75rem; + text-align: center; + } + .timetext { + color: #B56308 + font-family: sans-serif; + font-size: 2rem; + font-weight: bold; + text-align: center; + } + .timetextcontent { + color: #B56308 + font-family: sans-serif; + font-size: 1.65rem; + font-weight: normal; + text-align: center; + } +/* .body1 { + font-family: montserrat400; + color: #B56308; + font-size: 2rem; + text-align: center; + text-align-last: center; + margin-bottom: 40px; + } +*/ + + a { + text-decoration: underline; + color: #B56308; + } + + span:first-of-type { + top: 50%; + } + +.container { + max-width: min(800px, calc(100% - 40px)); + text-align: center; + margin: auto; + align-items: center; +} + +.image { + width: 90%; + height: auto; + margin-top: 5vw; +} + +#bandeau { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 60px; + z-index :10; + background-color: rgba(0, 0, 0, 0.7); +} + + + +.item { + display: inline-block; + vertical-align: top; + width: 33%; + padding: 10px; +} + +@media (max-width: 600px) { +.fade { + font-size: 3vw; + } + h1 { + font-size: 8vw; + } + + .item { + display: block; + width: 100%; + } +} + + +/* colonnes */ + +.row { + display: flex; + flex-wrap: wrap; + background-color: #37474F; + font-size: 1.5rem; + align-items: center; + justify-content: center; + text-align: center; + margin-top: 60px; +} + +.row a { + color: white; +} +.column { + flex: 33.33%; + padding: 20px; + color: white; +} +.footer { + bottom: 0; + left: 0; + right: 0; + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.footer p { + margin: 0; +} + + +/* Arrow */ +} + a.arrow { + position: absolute; + bottom: 10%; + border-bottom: 0; + display: inline-block; + width: 6rem; + height: 4rem; + left: 50%; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + animation: bounce 3s infinite; + } + + + a.arrow .label { + display: none; + } + + a.arrow:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z' fill='%23B56308' /%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: inline-block; + height: 100%; + position: relative; + width: 3rem; + } + + @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } + + diff --git a/assets/css/timeline.css b/assets/css/timeline.css new file mode 100644 index 0000000..50dcd6f --- /dev/null +++ b/assets/css/timeline.css @@ -0,0 +1,183 @@ +/* La timeline verticale */ +.timeline { + font-family: montserrat400; + position: relative; + max-width: 800px; + margin: 0 auto; + justify-content: space-evenly; +} + +/* La timeline verticale (la règle) */ +.timeline::after { + content: ''; + position: absolute; + width: 6px; + background-color: #B56308; + top: 25px; + bottom: 0; + left: 50%; + margin-left: -3px; +/* background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 50%, #B56308 50%, #B56308 100%); */ + background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 25%, #B56308 25%, #B56308 100%); + + +} +/* Le cercle du 1er point */ +.timeline > .boxt:nth-child(1)::after { + background: #ccd1d1; +} +/* 1ere fleche de gauche */ +.left:nth-child(1)::before { + border-color: transparent transparent transparent #ccd1d1; +} +/* Le cercle du 2ème point */ +.timeline > .boxt:nth-child(2)::after { + background: #ccd1d1; +} +/* 1ere fleche de droite +.right:nth-child(2)::before { + border-color: transparent #ccd1d1 transparent transparent; +} +*/ +/* Le cercle plus grand autour du 3ème point */ +.timeline > .boxt:nth-child(2)::after { + position: absolute; + background: #B56308; + border-color: #B56308; + border: 0 solid #B56308; + width: 35px; + height: 35px; + border-radius :20%; +} + +/* Le conteneur autour du contenu */ +.boxt { + padding: 10px 40px; + position: relative; + width: 50%; +} + +/* Les cercles sur la timeline */ +.boxt::after { + content: ''; + position: absolute; + width: 25px; + height: 25px; + right: -17px; + background-color :#B56308; + border :4px solid white; + top :15px; + border-radius :50%; + z-index :1; + } + +/* Placez le conteneur à gauche */ +.left { +left :0; } + +/* Placez le conteneur à droite */ +.right { +left :50%; } + +/* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */ +.left::before { + content :" "; + height :0; + position :absolute; + top :22px; + width :0; + z-index :1; + right :30px; + border :medium solid white; + border-width :10px 0 10px 10px; + border-color :transparent transparent transparent #B56308; + } + +/* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */ +.right::before { + content :" "; + height :0; + position :absolute; + top :22px; + width :0; + z-index :1; + left :30px; + border :medium solid white; + border-width :10px 10px 10px 0; + border-color :transparent #B56308 transparent transparent; + } + +/* Corrigez le cercle pour les conteneurs du côté droit */ +.right::after { + left:-16px; + } + +/* Le contenu réel */ +.content { + padding :20px + 30px; + background-color :white; + position :relative; + border-radius :6px; + box-shadow: -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.1); + transition: transform .3s ease-in-out; +} + +/* Augmentez l'échelle du contenu au survol */ +.content:hover { + transform: scale(1.05); + } + + +/* Pour les écrans de moins de 600px de large */ +@media only screen and (max-width: 600px) { + + /* La timeline verticale */ + .timeline::after { + left: 10%; + } + + /* Le conteneur autour du contenu */ + .boxt { + width: 80%; + margin-left: 10%; + } + + /* Les cercles sur la timeline */ + .boxt::after { + left: -16px; + } + + /* correction pour la fleche du 1er boxt */ + .left:nth-child(1)::before { + border: 10px solid #ccd1d1; + border-color: transparent transparent transparent #ccd1d1; + transform: rotate(180deg); + left: 50px; + } + + /* Placez le conteneur à gauche */ + .left { + left: 0%; + } + + /* Placez le conteneur à droite */ + .right { + left: 0%; + } + + /* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */ + .left::before { + left: 60px; + border-width: 10px 10px 10px 0; + border-color: transparent #B56308 transparent transparent; + } + + /* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */ + .right::before { + left: 60px; + border-width: 10px 10px 10px 0; + border-color: transparent #B56308 transparent transparent; + } +} + diff --git a/assets/js/modal.js b/assets/js/modal.js new file mode 100644 index 0000000..67ee42c --- /dev/null +++ b/assets/js/modal.js @@ -0,0 +1,28 @@ +// Get the elements +var link = document.getElementById("link"); +var modal = document.getElementById("modal"); +var modalContent = document.getElementById("modal-content"); +var closeButton = document.getElementById("close-button"); + +// Open the modal when the link is clicked +link.onclick = function(event) { + // Prevent the default action of opening the link + event.preventDefault(); + // Get the href attribute of the link + var href = this.getAttribute("href"); + // Set the src attribute of the iframe to the href + modalContent.src = href; + // Display the modal + modal.style.display = "block"; +} + +// Close the modal when the user clicks outside the modal on the close button +window.onclick = function(event) { + if (event.target == modal || event.target == closeButton) { + // Hide the modal + modal.style.display = "none"; + // Clear the src attribute of the iframe + modalContent.src = ""; + } +} + diff --git a/data/Recyclerie tohu-bohu.png b/data/Recyclerie tohu-bohu.png new file mode 100644 index 0000000..46fcb77 Binary files /dev/null and b/data/Recyclerie tohu-bohu.png differ diff --git a/data/Statuts-tohu-bohu.pdf b/data/Statuts-tohu-bohu.pdf new file mode 100644 index 0000000..c606fdc Binary files /dev/null and b/data/Statuts-tohu-bohu.pdf differ diff --git a/fonts/LuziFer.ttf b/fonts/LuziFer.ttf new file mode 100644 index 0000000..be8c06b Binary files /dev/null and b/fonts/LuziFer.ttf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3985663 --- /dev/null +++ b/index.html @@ -0,0 +1,99 @@ + + + + + + Recyclerie - Tohu Bohu - + + + + + + + + +
+
+ +
+
+
+

Recyclerie
Tohu-Bohu

+
Un lieu de partage
+
Des trésors se cachent partout
+
Fait battre les coeurs
+
Un projet solidaire
+
Où l'on donne et reçoit
+
Une seconde chance de retrouver sens
+
Résonne comme un joyeux bazar
+
Unisson dans la création
+
+
+

Une initiative citoyenne



+

La recyclerie tohu-bohu est une association collégiale à but non lucratif qui à pour but de contribuer, dans le cadre de l'économie sociale et solidaire, au développement durable et au respect de l'environnement. Elle place au cœur de son action participative la gestion d'une recyclerie et l'animation d'ateliers de réparation des objets du quotidien.

+

+

Très bientôt, nous pourrons commencer à collecter tout ce dont vous ne voulez plus, ou presque : petit mobilier, vaisselle, jouets, textile, livres, bibelots, outillage, électroménager...

+recyclerie tohu-bohu - comment ça marche? + +
+ +

Où en est-on ?

+

+
+
+
+

Juillet - Août

+

Inauguration de la boutique : ouverture des portes

+
+
+
+
+

Juin - Juillet

+

Réunion publique, organisation et aménagement du local, début de la collecte d'objets

+
+
+
+
+

Avril - Mai - Juin

+

Rencontre des élus de différentes communes : recherche de soutiens et d'un local

+
+
+
+
+

Mars

+

Constitution de l'association collégiale, dépôt des Statuts

+
+
+
+
+

Le projet vous intéresse ou vous souhaitez participer :

+

Restez informés, inscrivez-vous à la newsletter

+

Suivez-nous sur Mastodon : https://bzh.social/@tohubohu

+ +
+ +
+
Association tohu-bohu
Mairie - 11 place aux Chevaux
22420 Le Vieux Marché +
+
Statuts de l'Association
Devenir adhérent.e +
+
tohu-bohu@ti-nuage.fr
07.83.85.59.26 +
+
+ + + + + + + + + +