diff --git a/www/css/style.css b/www/css/style.css index 90b7dde..634ba1a 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -4,92 +4,85 @@ /* fira-sans-regular - latin */ @font-face { - font-family: "Fira Sans"; - font-style: normal; - font-weight: 400; - src: - local("Fira Sans Regular"), - local("FiraSans-Regular"), - url("../fonts/fira-sans-v10-latin-regular.woff2") format("woff2"), - url("../fonts/fira-sans-v10-latin-regular.woff") format("woff"); + font-family: "Fira Sans"; + font-style: normal; + font-weight: 400; + src: local("Fira Sans Regular"), local("FiraSans-Regular"), + url("../fonts/fira-sans-v10-latin-regular.woff2") format("woff2"), + url("../fonts/fira-sans-v10-latin-regular.woff") format("woff"); } /* fira-sans-700 - latin */ @font-face { - font-family: "Fira Sans"; - font-style: normal; - font-weight: 700; - src: - local("Fira Sans Bold"), - local("FiraSans-Bold"), - url("../fonts/fira-sans-v10-latin-700.woff2") format("woff2"), - url("../fonts/fira-sans-v10-latin-700.woff") format("woff"); + font-family: "Fira Sans"; + font-style: normal; + font-weight: 700; + src: local("Fira Sans Bold"), local("FiraSans-Bold"), + url("../fonts/fira-sans-v10-latin-700.woff2") format("woff2"), + url("../fonts/fira-sans-v10-latin-700.woff") format("woff"); } - + /* fira-mono-regular - latin */ @font-face { - font-family: "Fira Mono"; - font-style: normal; - font-weight: 400; - src: - local("Fira Mono Regular"), - local("FiraMono-Regular"), - url("../fonts/fira-mono-v8-latin-regular.woff2") format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("../fonts/fira-mono-v8-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} + font-family: 'Fira Mono'; + font-style: normal; + font-weight: 400; + src: local('Fira Mono Regular'), local('FiraMono-Regular'), + url('../fonts/fira-mono-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/fira-mono-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} /* permanent-marker-regular - latin */ @font-face { - font-family: "Permanent Marker"; - font-style: normal; - font-weight: 400; - src: - local("Permanent Marker Regular"), - local("PermanentMarker-Regular"), - url("../fonts/permanent-marker-v9-latin-regular.woff2") format("woff2"), - url("../fonts/permanent-marker-v9-latin-regular.woff") format("woff"); + font-family: "Permanent Marker"; + font-style: normal; + font-weight: 400; + src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"), + url("../fonts/permanent-marker-v9-latin-regular.woff2") format("woff2"), + url("../fonts/permanent-marker-v9-latin-regular.woff") format("woff"); } + + /*--------------------------------------------------------*/ /* GENERAL RULES /*--------------------------------------------------------*/ * { - box-sizing: border-box; - padding: 0; - margin: 0; + box-sizing: border-box; + padding: 0; + margin: 0; } -html, -body { - font-family: "Fira Sans", sans-serif; - font-weight: 400; - line-height: 180%; - color: #000000; - font-size: 18px; +html, body { + font-family: "Fira Sans", sans-serif; + font-weight: 400; + line-height: 180%; + color: #000000; + font-size: 18px; } body { - background-color: #fbfbfb; + background-color: #fbfbfb; + } a, a:hover, a:active, a:visited { - color: #000000; - text-decoration: none; + color: #000000; + text-decoration: none; } /*--------------------------------------------------------*/ + @media only screen and (max-width: 480px) { - html, - body { - font-size: 16px; - line-height: 160%; - } + html, body { + font-size: 16px; + line-height: 160%; + } } /*--------------------------------------------------------*/ @@ -97,285 +90,281 @@ a:visited { /*--------------------------------------------------------*/ #main-header { - position: relative; - height: 750px; - margin-bottom: 40px; - background-color: #fbfbfb; - background-image: url("../img/header/text_header.svg"), - url("../img/header/fond.svg"); - background-position: - top center, - top center; - background-size: cover; - background-repeat: no-repeat; + position: relative; + height: 750px; + margin-bottom: 40px; + background-color: #fbfbfb; + background-image: url("../img/header/text_header.svg"), url("../img/header/fond.svg") ; + background-position: top center, top center; + background-size: cover; + background-repeat: no-repeat; } + /*--------------------------------------------------------*/ + @media only screen and (max-width: 1200px) { - #main-header { - height: 600px; - /* margin-bottom: 30px; */ - } + #main-header { + height: 600px; + /* margin-bottom: 30px; */ + } } @media only screen and (max-width: 1100px) { - #main-header { - height: 440px; - /* margin-bottom: 30px; */ - } + #main-header { + height: 440px; + /* margin-bottom: 30px; */ + } } @media only screen and (max-width: 880px) { - #main-header { - height: 400px; - /* margin-bottom: 20px; */ - } + #main-header { + height: 400px; + /* margin-bottom: 20px; */ + } } @media only screen and (max-width: 640px) { - #main-header { - height: 300px; - margin-bottom: 20px; - } + #main-header { + height: 300px; + margin-bottom: 20px; + } } @media only screen and (max-width: 480px) { - #main-header { - height: 220px; - /* margin-bottom: 20px; */ - } + #main-header { + height: 220px; + /* margin-bottom: 20px; */ + } } @media only screen and (max-width: 320px) { - #main-header { - height: 120px; - /* margin-bottom: 15px; */ - } + #main-header { + height: 120px; + /* margin-bottom: 15px; */ + } } @media only screen and (max-width: 220px) { - #main-header { - height: 100px; - /* margin-bottom: 15px; */ - } + #main-header { + height: 100px; + /* margin-bottom: 15px; */ + } } + /*--------------------------------------------------------*/ /* CONTENT /*--------------------------------------------------------*/ section { - padding: 0 0 200px 0; + padding: 0 0 200px 0; - background-repeat: no-repeat; - background-position: bottom center; + background-repeat: no-repeat; + background-position: bottom center; - text-align: justify; + text-align: justify; } section > * { - max-width: 960px; + max-width: 960px; - margin-left: calc(50% - 480px); - padding-left: 60px; - padding-right: 60px; + margin-left: calc(50% - 480px); + padding-left: 60px; + padding-right: 60px; } section h2 { - margin-bottom: 25px; - padding: 40px 60px 30px 60px; + margin-bottom: 25px; + padding: 40px 60px 30px 60px; - color: #000000; - font-family: "Permanent Marker"; - font-size: 3.2rem; - text-align: center; - word-wrap: break-word; - hyphens: auto; + color: #000000; + font-family: "Permanent Marker"; + font-size: 3.2rem; + text-align: center; + word-wrap: break-word; + hyphens: auto; } section:nth-child(2) { - background-color: #fbfbfb; - background-image: url(../img/theme/paint/paint-yellow.svg), - url(../img/theme/elements/chenille.svg); - background-repeat: no-repeat; - background-position: - 0% 100%, - 0% 0%; + background-color: #fbfbfb; + background-image: url(../img/theme/paint/paint-yellow.svg) , url(../img/theme/elements/chenille.svg); + background-repeat: no-repeat; + background-position: 0% 100%, 0% 0%; + } section:nth-child(3) { - background-color: #fbfbfb; - background-image: - url(../img/theme/paint/paint-orange.svg), - url(../img/theme/elements/cocon.svg) - /*url(../img/theme/elements/bouche.svg)*/; - background-repeat: no-repeat; - background-position: - 0% 100%, - top right; + background-color: #fbfbfb; + background-image: url(../img/theme/paint/paint-orange.svg), url(../img/theme/elements/cocon.svg) /*url(../img/theme/elements/bouche.svg)*/; + background-repeat: no-repeat; + background-position: 0% 100%, top right; } section:nth-child(4) { - background-color: #fbfbfb; - background-image: url(../img/theme/paint/paint-magenta.svg), - url(../img/theme/elements/cocon_sortie.svg); - background-repeat: no-repeat; - background-position: - 0% 100%, - center left; -} + background-color: #fbfbfb; + background-image: url(../img/theme/paint/paint-magenta.svg), url(../img/theme/elements/cocon_sortie.svg); + background-repeat: no-repeat; + background-position: 0% 100%, center left; +} + section:nth-child(5) { - background-color: #fbfbfb; - background-image: url(../img/theme/paint/paint-violet.svg), - url(../img/theme/elements/early_papillon.svg); - background-repeat: no-repeat; - background-position: - 0% 100%, - center right; -} + background-color: #fbfbfb; + background-image: url(../img/theme/paint/paint-violet.svg), url(../img/theme/elements/early_papillon.svg); + background-repeat: no-repeat; + background-position: 0% 100%, center right; +} section:nth-child(6) { - background-color: #fbfbfb; - background-image: url(../img/theme/elements/papillon.svg); - background-repeat: no-repeat; - background-position: top left; -} + background-color: #fbfbfb; + background-image: url(../img/theme/elements/papillon.svg); + background-repeat: no-repeat; + background-position: top left; +} section p { - padding-bottom: 20px; - font-size: 1.2rem; + padding-bottom: 20px; + font-size: 1.2rem; } section p.stand-out { - /* font-weight: 700; */ - text-align: center; + /* font-weight: 700; */ + text-align: center; } section p a, section p a:visited { - padding: 0px 2px; - color: #000000; - /* text-decoration: underline; */ - border-bottom: 3px solid #000; + padding: 0px 2px; + color: #000000; + /* text-decoration: underline; */ + border-bottom: 3px solid #000; } section p a:hover, section p a:active { - background-color: #000000; - color: #ffffff; - text-decoration: none; + background-color: #000000; + color: #FFFFFF; + text-decoration: none; } + /*--------------------------------------------------------*/ + @media only screen and (max-width: 880px) { - section > * { - max-width: 960px; + section > * { + max-width: 960px; + + margin-left: auto; + margin-right: auto; + padding-left: 40px; + padding-right: 40px; + } - margin-left: auto; - margin-right: auto; - padding-left: 40px; - padding-right: 40px; - } - - section h2 { - font-size: 2.6rem; - } + section h2 { + font-size: 2.6rem; + } } @media only screen and (max-width: 580px) { - section h2 { - padding: 40px 40px 30px 40px; - font-size: 2.4rem; - } + section h2 { + padding: 40px 40px 30px 40px; + font-size: 2.4rem; + } - section { - background-image: none; - } + section { + background-image: none + } } @media only screen and (max-width: 380px) { - section > * { - padding-left: 20px; - padding-right: 20px; - } + section > * { + padding-left: 20px; + padding-right: 20px; + } - section h2 { - padding: 40px 20px 30px 20px; - font-size: 2.4rem; - } + section h2 { + padding: 40px 20px 30px 20px; + font-size: 2.4rem; + } + + } @media only screen and (max-width: 320px) { - section h2 { - padding: 30px 20px 20px 20px; - font-size: 2rem; - } + section h2 { + padding: 30px 20px 20px 20px; + font-size: 2rem; + } } + + /*--------------------------------------------------------*/ /* BUTTONS /*--------------------------------------------------------*/ .button { - display: block; - /* width: 80%; */ + display: block; + /* width: 80%; */ - margin: 20px auto 0 auto; - padding: 15px 20px; + margin: 20px auto 0 auto; + padding: 15px 20px; - background-color: transparent; + background-color: transparent; - border: 3px solid #000000; + border: 3px solid #000000; - color: #000000; - font-size: 1.4rem; - font-weight: 400; - text-transform: uppercase; - text-align: center; + color: #000000; + font-size: 1.4rem; + font-weight: 400; + text-transform: uppercase; + text-align: center; } .button:hover { - background-color: #000000; - color: #ffffff; + background-color: #000000; + color: #FFFFFF; } #instagram-button > span::before { - content: " "; - display: inline-block; - background-image: url("../img/icons/instagram.svg"); - background-size: 32px 32px; - height: 32px; - width: 32px; - margin: 0 5px; + content: " "; + display: inline-block; + background-image: url("../img/icons/instagram.svg"); + background-size: 32px 32px; + height: 32px; + width: 32px; + margin: 0 5px; } #instagram-button:hover > span::before { - background-image: url("../img/icons/instagram-white.svg"); - background-color: #000000; + background-image: url("../img/icons/instagram-white.svg"); + background-color: #000000; } .button > span { - line-height: 32px; - vertical-align: middle; + line-height: 32px; + vertical-align: middle; } + /*--------------------------------------------------------*/ + @media only screen and (max-width: 320px) { - .button { - width: 100%; - padding: 10px 15px; + .button { + width: 100%; + padding: 10px 15px; - font-size: 1.1rem; - line-height: 24px; - } + font-size: 1.1rem; + line-height: 24px; + } - .button img { - height: 24px; - width: 24px; - } + .button img { + height: 24px; + width: 24px; + } } /*--------------------------------------------------------*/ @@ -383,230 +372,287 @@ section p a:active { /*--------------------------------------------------------*/ .interq2016 img { - text-align: center; + text-align: center; } /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { - .interq2016 img { - width: 60%; - height: 60%; - } + .interq2016 img { + width: 60%; + height: 60%; + } } + +/*--------------------------------------------------------*/ +/* Cartes +/*--------------------------------------------------------*/ + +.cartes img { + text-align: center; +} + +/*--------------------------------------------------------*/ + +@media only screen and (max-width: 880px) { + .cartes img { + width: 80%; + height: 80%; + } +} + + +/*--------------------------------------------------------*/ +/* TARIFS +/*--------------------------------------------------------*/ + +/* Styles pour la table tarifs */ +.tarifs { + width: 100%; + max-width: 600px; /* Taille maximale de la table pour éviter le débordement */ + margin: auto; /* Centre la table horizontalement */ +} + +/* Styles pour les éléments de la table */ +.tarifs th, +.tarifs td { + padding: 8px; +} + +/* Média query pour les écrans de petite taille */ +@media screen and (max-width: 600px) { + /* Réduire la taille de la police pour la lisibilité sur de petits écrans */ + .tarifs th, + .tarifs td { + font-size: 12px; + } +} + + /*--------------------------------------------------------*/ /* PRICE TABLE /*--------------------------------------------------------*/ #calendar { - width: 100%; - max-width: 100%; - margin: 0; - padding: 0; + width: 100%; + max-width: 100%; + margin: 0; + padding: 0; } + /*--------------------------------------------------------*/ -@media only screen and (max-width: 880px) { - #calendar { - overflow-x: scroll; - } - #cal-container { - min-width: 1800px; - margin: 0 0 40px 0; /* Fix the weird y-overflow of the calendar root */ - } +@media only screen and (max-width: 880px) { + #calendar { + overflow-x: scroll; + } + + #cal-container { + min-width: 1800px; + margin: 0 0 40px 0; /* Fix the weird y-overflow of the calendar root */ + } } + + + + /*--------------------------------------------------------*/ /* LOCATION /*--------------------------------------------------------*/ #mailing-address { - margin: 0 0 20px 0; + margin: 0 0 20px 0; - font-size: 1.5rem; - font-weight: 700; - text-align: center; - line-height: 32px; - vertical-align: middle; + font-size: 1.5rem; + font-weight: 700; + text-align: center; + line-height: 32px; + vertical-align: middle; } #mailing-address > span::before { - content: " "; - display: inline-block; - background-image: url("../img/icons/location.svg"); - background-size: 32px 32px; - height: 32px; - width: 32px; - margin: 0 5px; + content: " "; + display: inline-block; + background-image: url("../img/icons/location.svg"); + background-size: 32px 32px; + height: 32px; + width: 32px; + margin: 0 5px; } #interactive-map { - width: 100%; + width: 100%; - margin: 20px 0; + margin: 20px 0; - border: none; - border-radius: 10px; + border: none; + border-radius: 10px; } + #public-transport-info { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; - margin-left: calc(50% - 480px - 50px); + margin-left: calc(50% - 480px - 50px); + + font-size: 1.5rem; - font-size: 1.5rem; - - line-height: 48px; - vertical-align: middle; - white-space: nowrap; + line-height: 48px; + vertical-align: middle; + white-space: nowrap; } #public-transport-info > * { - margin: 5px; + margin: 5px; - justify-self: left; + justify-self: left; } #public-transport-info img { - width: 48px; - height: 48px; + width: 48px; + height: 48px; - margin: 0 5px 0 0; + margin: 0 5px 0 0; - vertical-align: bottom; + vertical-align: bottom; } #transport-metro-icon, #transport-metro-stop, #transport-bus-1-icon, #transport-bus-1-stop { - grid-row: 1; + grid-row: 1; } #transport-rer-icon, #transport-rer-stop, #transport-bus-2-icon, #transport-bus-2-stop { - grid-row: 2; + grid-row: 2; } #transport-noctilien-icon, #transport-noctilien-stop { - grid-row: 3; + grid-row: 3; } #transport-metro-icon, #transport-rer-icon { - grid-column: 1; - justify-self: end; + grid-column: 1; + justify-self: end; + } #transport-metro-stop, #transport-rer-stop { - grid-column: 2; + grid-column: 2; } #transport-bus-1-icon, #transport-bus-2-icon, #transport-noctilien-icon { - grid-column: 3; - justify-self: end; + grid-column: 3; + justify-self: end; + } #transport-bus-1-stop, #transport-bus-2-stop, #transport-noctilien-stop { - grid-column: 4; + grid-column: 4; } /*--------------------------------------------------------*/ + @media only screen and (max-width: 880px) { - #public-transport-info { - display: grid; - grid-template-columns: auto auto; - grid-template-rows: auto auto auto auto auto; - align-items: center; + #public-transport-info { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto auto auto auto; + align-items: center; - margin: 0; + margin: 0; - line-height: 48px; - } + line-height: 48px; + } - #transport-metro-icon, - #transport-metro-stop { - grid-row: 1; - } + #transport-metro-icon, + #transport-metro-stop { + grid-row: 1; + } - #transport-rer-icon, - #transport-rer-stop { - grid-row: 2; - } + #transport-rer-icon, + #transport-rer-stop { + grid-row: 2; + } - #transport-bus-1-icon, - #transport-bus-1-stop { - grid-row: 3; - } + #transport-bus-1-icon, + #transport-bus-1-stop { + grid-row: 3; + } - #transport-bus-2-icon, - #transport-bus-2-stop { - grid-row: 4; - } + #transport-bus-2-icon, + #transport-bus-2-stop { + grid-row: 4; + } - #transport-noctilien-icon, - #transport-noctilien-stop { - grid-row: 5; - } + #transport-noctilien-icon, + #transport-noctilien-stop { + grid-row: 5; + } - #transport-metro-icon, - #transport-rer-icon, - #transport-bus-1-icon, - #transport-bus-2-icon, - #transport-noctilien-icon { - grid-column: 1; - justify-self: end; - } + #transport-metro-icon, + #transport-rer-icon, + #transport-bus-1-icon, + #transport-bus-2-icon, + #transport-noctilien-icon { + grid-column: 1; + justify-self: end; - #transport-metro-stop, - #transport-rer-stop, - #transport-bus-1-stop, - #transport-bus-2-stop, - #transport-noctilien-stop { - grid-column: 2; - } + } + + #transport-metro-stop, + #transport-rer-stop, + #transport-bus-1-stop, + #transport-bus-2-stop, + #transport-noctilien-stop { + grid-column: 2; + } } @media only screen and (max-width: 580px) { - #mailing-address { - font-size: 1.2rem; - } + #mailing-address { + font-size: 1.2rem; + } - #public-transport-info { - grid-template-columns: 4fr 6fr; + #public-transport-info { + grid-template-columns: 4fr 6fr; - line-height: 32px; - font-size: 1.1rem; - } + line-height: 32px; + font-size: 1.1rem; + } - #public-transport-info img { - width: 32px; - height: 32px; - } + #public-transport-info img { + width: 32px; + height: 32px; + } } @media only screen and (max-width: 380px) { - #public-transport-info { - row-gap: 16px; - } - - #public-transport-info img { - display: block; - } + #public-transport-info { + row-gap: 16px; + } + + #public-transport-info img { + display: block; + } } /*--------------------------------------------------------*/ @@ -614,138 +660,151 @@ section p a:active { /*--------------------------------------------------------*/ #sponsors { - text-align: center; + text-align: center; } #sponsors img { - height: 100px; - object-fit: cover; + height: 100px; + object-fit: cover; - margin: 20px; + margin: 20px; } #sponsors img.sponsor-disc { - height: 155px; - border-radius: 78px; - transition: 100ms ease-in; + height: 155px; + border-radius: 78px; + transition: 100ms ease-in; } #sponsors img.sponsor-disc:hover { - border: 5px solid #884578ff; + border: 5px solid #884578ff } /*--------------------------------------------------------*/ -@media only screen and (max-width: 480px) { - #sponsors img { - height: 60px; - margin: 5px; - } - #sponsors img.sponsor-disc { - height: 80px; - } +@media only screen and (max-width: 480px) { + #sponsors img { + height: 60px; + margin: 5px; + } + + #sponsors img.sponsor-disc { + height: 80px; + } } + + /*--------------------------------------------------------*/ /* CONTACT /*--------------------------------------------------------*/ #contact-email { - font-family: "Fira Mono"; - font-size: 1.5rem; - text-align: center; - word-wrap: break-word; + font-family: "Fira Mono"; + font-size: 1.5rem; + text-align: center; + word-wrap: break-word; } #contact-email > span::before { - content: " "; - display: inline-block; - background-image: url("../img/icons/email.svg"); - background-size: 32px 32px; - height: 32px; - width: 32px; - margin: 0 5px; + content: " "; + display: inline-block; + background-image: url("../img/icons/email.svg"); + background-size: 32px 32px; + height: 32px; + width: 32px; + margin: 0 5px; } + + /*--------------------------------------------------------*/ -@media only screen and (max-width: 480px) { - #contact-email { - font-size: 1.2rem; - } - #contact-email > span::before { - content: ""; - height: 0; - width: 0; - background: none; - } +@media only screen and (max-width: 480px) { + #contact-email { + font-size: 1.2rem; + } + + #contact-email > span::before { + content: ""; + height: 0; + width: 0; + background: none; + } } + + /*--------------------------------------------------------*/ /* EQUIPE INTERQ /*--------------------------------------------------------*/ #team h3 { - margin: 0 0 10px 0; - font-weight: bold; - text-align: center; + margin: 0 0 10px 0; + font-weight: bold; + text-align: center; } .team-group { - display: flex; - justify-content: center; - margin: 20px 0; + display: flex; + justify-content: center; + margin: 20px 0; } .team-group figure { - margin: 0 20px; + margin: 0 20px; } .team-group figure img { - width: 260px; + width: 260px; } .team-group figcaption { - text-align: center; + text-align: center; } + + /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { - .team-group { - flex-direction: column; - } + .team-group { + flex-direction: column; + } - .team-group figure { - text-align: center; - } + .team-group figure { + text-align: center; + } } @media only screen and (max-width: 320px) { - .team-group figure img { - width: 80%; - height: 80%; - } + + .team-group figure img { + width: 80%; + height: 80%; + } } + /*--------------------------------------------------------*/ /* SIGNATURE /*--------------------------------------------------------*/ #signature { - text-align: right; + text-align: right; + } /* Tableau */ -td, -th { - border: 1px solid #333; - padding: 15px; -} - -table { - border-collapse: collapse; - margin: auto; -} +td, th { + border: 1px solid #333; + padding: 15px; + } + + table { + + border-collapse: collapse; + margin: auto; + } \ No newline at end of file