diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index dfe0770..0000000 --- a/.gitattributes +++ /dev/null @@ -1,2 +0,0 @@ -# Auto detect text files and perform LF normalization -* text=auto diff --git a/css/calendar.css b/css/calendar.css new file mode 100644 index 0000000..886b803 --- /dev/null +++ b/css/calendar.css @@ -0,0 +1,350 @@ +/* Calendar */ + +#cal-container { + position: relative; + + width: 100%; + /* height: 1200px; */ + padding: 0; + + font-size: 0.8rem; + line-height: 100%; +} + +#cal-container, +#cal-container * { + box-sizing: border-box; +} + + + +/* Time slots */ + +#cal-container .cal-time-slot-container { + display: grid; + /* grid-template-columns: repeat(24, 1fr); */ + grid-template-rows: 30px auto; + + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(100% + 30px); + padding: 0; + border-bottom: 2px solid #928c79; + z-index: 10; +} + +#cal-container .cal-time-slot { + border-right: 1px solid #928c79; + background-color: rgba(255, 223, 165, 0.08); +} + +/* #cal-container .cal-time-slot:hover { + background-color: red; +} */ + +#cal-container .cal-time-slot:nth-child(even) { + background-color: rgba(255, 223, 165, 0.05); +} + +/* #cal-container .cal-time-slot:nth-child(even):hover { + background-color: #D9D9D9; +} */ + +#cal-container .cal-time-slot:last-child { + border-right: 0; +} + +#cal-container .cal-time-slot-hour { + padding: 0 0 0 calc(100% - 0.9rem + 7px); + background-color: none; /* rgba(255, 223, 165, 0.08); */ + border-bottom: 2px solid #928c79; + font-size: 0.9rem; +} + +#cal-container .cal-time-slot-hour:nth-child(even) { + background-color: none;/* rgba(255, 223, 165, 0.05);*/ +} + +#cal-container .cal-time-slot-hour:first-child { + color: transparent; + border-right: 0; +} + +#cal-container .cal-time-slot-hour.cal-last-hour { + padding: 0; + color: transparent; +} + +#cal-container .cal-time-slot.cal-last-hour, +#cal-container .cal-time-slot-hour.cal-last-hour { + border-right: 1px solid #928c79; +} + +#cal-container .cal-time-slot.cal-first-hour, +#cal-container .cal-time-slot-hour.cal-first-hour { + border-left: 1px solid #928c79; +} + +/* Events */ + +#cal-container .cal-event-container { + display: grid; + /* grid-template-columns: repeat(24, 1fr); */ + /* grid-template-rows: repeat(12, auto); */ + + position: absolute; + top: 40px; + left: 0; + width: 100%; + /* height: 100%; */ + padding: 0; + z-index: 100; +} + +#cal-container .cal-event { + position: relative; + height: 42px; + margin: 2px 0; + padding: 5px; + /* background-color: #EFEFEF; */ + border-radius: 3px; + /* border: 1px solid #CCC; */ + border-width: 1px; + border-style: solid; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* z-index: 500; */ + transition: 50ms ease-in; +} + +#cal-container .cal-event > * { + display: none; + margin: 5px; + overflow: hidden; +} + +#cal-container .cal-event > .cal-event-name, +#cal-container .cal-event > .cal-event-location, +#cal-container .cal-event > .cal-event-perm-count { + display: block; + margin: 0; +} + +#cal-container .cal-event > .cal-event-name { + font-weight: 700; +} + +#cal-container .cal-event > .cal-event-location { + font-weight: 300; + font-style: italic; +} + +/*#cal-container .cal-event > .cal-event-location::before { + content: " · "; +}*/ + +#cal-container .cal-event > .cal-event-perm-count { + position: absolute; + bottom: 0; + right: 0; +} + +#cal-container .cal-event:not(.cal-event-subscribed) > .cal-event-perm-count.cal-perms-missing { + width: calc(100% - 10px); + right: auto; + margin: 5px; + padding: 5px; + background-color: #FFF; + border: 2px solid #E44; + color: #E44; + font-weight: bold; + border-radius: 3px; + overflow: hidden; +} + +#cal-container .cal-event.cal-event-subscribed { + border-width: 3px; + border-color: #000; +} + +#cal-container .cal-event.cal-event-subscribed::after { + content: "✔"; + position: absolute; + left: 0; + bottom: 0; + width: 16px; + height: 16px; + padding: 1px; + color: #fff; + background-color: #000; + border-top-right-radius: 3px; +} + + +/* Event details popup */ + +#cal-container .cal-event-details { + position: absolute; + min-height: 100px; + /* min-width: 40%; */ + max-width: 80%; + padding: 20px; + background-color: #333; + color: #FFF; + border-radius: 4px; + box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); + z-index: 1000; +} + +#cal-container .cal-event-details:after { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: #333; + border-width: 20px; + margin-left: -20px; +} + +#cal-container .cal-event-details.above-event:after { + top: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-top-color: #333; + border-width: 20px; + margin-left: -20px; +} + +#cal-container .cal-event-details * { + z-index: 1000; +} + +#cal-container .cal-event-details .cal-detail-close-button { + width: 35px; + height: 35px; + position: absolute; + top: 10px; + right: 10px; + margin: 0; + padding: 5px; + background: transparent; + border: none; + border-radius: 50%; + font-size: 1.2rem; + color: #BBB; + transition: 100ms ease-out; +} + +#cal-container .cal-event-details .cal-detail-close-button:hover { + background-color: #484848; + color: #EFEFEF; +} + +#cal-container .cal-event-details a, +#cal-container .cal-event-details a:hover { + color: #FFF; + text-decoration: none; +} + +#cal-container .cal-event-details .cal-detail-name { + padding: 10px; + border-radius: 4px; + font-size: 1rem; + color: #FFF; + text-transform: uppercase; + text-align: center; +} + +#cal-container .cal-event-details .cal-detail-name h3 { + margin: 0 20px 20px 20px; +} + +#cal-container .cal-event-details table { + margin: 0 auto; +} + +#cal-container .cal-event-details td.cal-detail-label { + padding: 0 10px 10px 0; + font-weight: bold; + text-align: right; +} + +#cal-container .cal-event-details td.cal-detail-value { + padding: 0 0 10px 10px; + text-align: left; +} + +#cal-container .cal-event-details .cal-detail-perm-area { + margin: 10px 0; + padding: 10px; + background-color: #DFDFDF; + color: #333; + text-align: center; + border-radius: 4px; +} + +#cal-container .cal-event-details .cal-detail-perm-title { + margin: 0 0 10px 0; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count { + margin: 0 10px 0 0; + font-size: 1.7rem; + vertical-align: middle; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-missing { + color: #E44; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-full { + color: #393; +} + + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-subscription-switch { + margin: 0 0 0 10px; + padding: 10px; + font-size: 1.35rem; + vertical-align: middle; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-nb-missing-perms { + margin: 20px 0 0 0; + padding: 5px; + background-color: #FFF; + border-radius: 4px; + text-align: center; + font-size: 1.1rem; + color: #E44; + font-weight: bold; +} + +#cal-container .cal-event-details .cal-detail-description { + margin: 20px 0 0 0; + color: #DDD; + font-size: 0.9rem; + font-style: italic; + text-align: justify; + line-height: 130%; +} + +#cal-container .cal-event-details .cal-detail-tag { + display: inline-block; + margin: 5px; + padding: 5px; + border: 1px solid #DDD; +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..dae6490 --- /dev/null +++ b/css/style.css @@ -0,0 +1,660 @@ +/*--------------------------------------------------------*/ +/* FONTS +/*--------------------------------------------------------*/ + +/* roboto-300 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), + url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-300.woff') format('woff'); +} + +/* roboto-regular - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), + url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-regular.woff') format('woff'); +} + +/* roboto-italic - latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + src: local('Roboto Italic'), local('Roboto-Italic'), + url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-italic.woff') format('woff'); +} + +/* roboto-700 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), + url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-700.woff') format('woff'); +} + + + + + + +/*--------------------------------------------------------*/ +/* GENERAL RULES +/*--------------------------------------------------------*/ + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, body { + font-family: "Roboto", serif; + font-weight: 300; + line-height: 180%; + color: #FFFBEA; + font-size: 18px; +} + +body { + background-color: #132B46; +} + +a, +a:hover, +a:active, +a:visited { + color: #FFFBEA; + text-decoration: none; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + html { + font-size: 16px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* HEADER +/*--------------------------------------------------------*/ + +#main-header { + height: 720px; + + position: relative; + + background: #6d93bb; + background: linear-gradient(to bottom, #134189 0%, #6d93bb 99%, #132B46 100%); +} + +#main-header-title { + height: 45%; + width: 45%; + + position: absolute; + top: 60px; + left: 5%; + + z-index: 1000; +} + +#main-header-moon { + height: 25%; + width: 25%; + + position: absolute; + top: 80px; + right: 0px; + + z-index: 100; +} + +#main-header-clouds { + width: 100%; + + position: absolute; + bottom: 15%; + object-fit: cover; + + mix-blend-mode: lighten; + + z-index: 200; +} + +#main-header-background-city { + width: 100%; + + position: absolute; + bottom: 0; + object-fit: cover; + + z-index: 500; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 1200px) { + #main-header { + height: 650px; + } + + #main-header-moon { + height: 20%; + width: 20%; + + right: 50px; + } + + #main-header-clouds { + bottom: 12%; + } +} + +@media only screen and (max-width: 880px) { + #main-header { + height: 500px; + } + + #main-header-title { + height: 60%; + width: 60%; + + left: 20%; + top: 20px; + } + + #main-header-moon { + display: none; + } + + #main-header-clouds { + bottom: 10%; + } +} + + +@media only screen and (max-width: 480px) { + #main-header { + height: 350px; + } +/* + #main-header-title { + height: 75%; + width: 75%; + }*/ +} + +@media only screen and (max-width: 360px) { + #main-header { + height: 300px; + } + + #main-header-title { + height: 70%; + width: 70%; + + left: 15%; + top: 5%; + } +} + + + + + +/*--------------------------------------------------------*/ +/* CONTENT +/*--------------------------------------------------------*/ + +section { + max-width: 960px; + + margin: 0 0 100px calc(50% - 480px); + padding: 0 60px; + + text-align: justify; +} + +section h2 { + margin: 0 0 25px 0; + padding: 0 0 15px 0; + + background: radial-gradient(ellipse at bottom, rgba(255, 223, 165, 0.1) 0%, transparent 70%); + + border: none; + border-bottom: 2px solid rgba(255, 223, 165, 0.5); + border-image-source: linear-gradient(to right, transparent 0%, rgba(255, 223, 165, 0.7) 50%, transparent 100%); + border-image-slice: 1; + + color: rgb(255, 223, 165); + font-size: 2.1rem; + font-weight: 300; + text-transform: uppercase; + text-align: center; + word-wrap: break-word; + hyphens: auto; +} + +section p { + padding: 0 0 20px 0; + font-size: 1rem; +} + +section p.stand-out { + font-style: italic; + text-align: center; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 880px) { + section { + width: 100%; + + margin: 0 auto 100px auto; + padding: 0 60px; + } +} + +@media only screen and (max-width: 480px) { + section { + padding: 0 30px; + } + + section h2 { + font-size: 1.8rem; + } +} + + + + + +/*--------------------------------------------------------*/ +/* BUTTONS +/*--------------------------------------------------------*/ + +.button { + display: block; + width: 80%; + + margin: 20px auto 0 auto; + padding: 15px 20px; + + background-color: rgba(255, 223, 165, 0.1); + + border: 2px solid rgba(255, 223, 165, 0.7); + + color: rgb(255, 223, 165); + font-size: 1.4rem; + font-weight: 400; + text-transform: uppercase; + text-align: center; + + line-height: 32px; + vertical-align: middle; +} + +.button:hover { + background-color: rgba(255, 223, 165, 0.2); +} + +.button img { + height: 32px; + width: 32px; + + margin: 0 5px; +} + +.button > * { + vertical-align: middle; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + .button { + width: 100%; + + padding: 10px 15px; + + font-size: 1.1rem; + + line-height: 24px; + } + + .button img { + height: 24px; + width: 24px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* PRICE TABLE +/*--------------------------------------------------------*/ + +table.prices { + max-width: 460px; + width: 100%; + + margin: 20px auto; + + border-collapse: collapse; +} + +table.prices th, +table.prices td { + padding: 8px 0; + + font-size: 1.3rem; + text-align: center; + vertical-align: middle; +} + +table.prices th { + color: rgb(255, 223, 165); +} + +table.prices td { + background-color: rgba(255, 223, 165, 0.05); + + border-top: 2px solid rgba(255, 223, 165, 0.5); + border-bottom: 2px solid rgba(255, 223, 165, 0.5); +} + +table.prices tr:nth-child(odd) td { + background-color: rgba(255, 223, 165, 0.08); +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + table.prices th, + table.prices td { + padding: 5px 0; + + font-size: 1.1rem; + } +} + + + + +/*--------------------------------------------------------*/ +/* LOCATION +/*--------------------------------------------------------*/ + +#mailing-address { + font-size: 1.5rem; + text-align: center; +} + +#mailing-address img { + width: 32px; + height: 32px; + + vertical-align: bottom; +} + + +#interactive-map { + width: 100%; + + margin: 0 0 20px 0; + + border: none; + border-radius: 10px; +} + + +#public-transport-info { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + + margin: 0 0 0 -100px; + + font-size: 1.5rem; + font-weight: 300; + + line-height: 48px; + vertical-align: middle; + white-space: nowrap; +} + +#public-transport-info > * { + margin: 5px; + + justify-self: left; +} + +#public-transport-info img { + width: 48px; + height: 48px; + + margin: 0 5px 0 0; + + vertical-align: bottom; +} + +#transport-metro-icon, +#transport-metro-stop, +#transport-bus-icon, +#transport-bus-stop { + grid-row: 1; +} + +#transport-rer-icon, +#transport-rer-stop, +#transport-noctilien-icon, +#transport-noctilien-stop { + grid-row: 2; +} + +#transport-metro-icon, +#transport-rer-icon { + grid-column: 1; + justify-self: end; + +} + +#transport-metro-stop, +#transport-rer-stop { + grid-column: 2; +} + +#transport-bus-icon, +#transport-noctilien-icon { + grid-column: 3; + justify-self: end; + +} + +#transport-bus-stop, +#transport-noctilien-stop { + grid-column: 4; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 880px) { + #public-transport-info { + display: grid; + grid-template-columns: 4fr 6fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + align-items: center; + + margin: 0; + + line-height: 48px; + } + + #transport-metro-icon, + #transport-metro-stop { + grid-row: 1; + } + + #transport-bus-icon, + #transport-bus-stop { + grid-row: 2; + } + + #transport-rer-icon, + #transport-rer-stop { + grid-row: 3; + } + + #transport-noctilien-icon, + #transport-noctilien-stop { + grid-row: 4; + } + + #transport-metro-icon, + #transport-rer-icon, + #transport-bus-icon, + #transport-noctilien-icon { + grid-column: 1; + justify-self: end; + + } + + #transport-metro-stop, + #transport-rer-stop, + #transport-bus-stop, + #transport-noctilien-stop { + grid-column: 2; + } +} + +@media only screen and (max-width: 580px) { + #public-transport-info { + line-height: 32px; + } +} + +@media only screen and (max-width: 480px) { + #mailing-address { + font-size: 1.1rem; + } + + #public-transport-info { + font-size: 1.1rem; + } + + #public-transport-info img { + width: 32px; + height: 32px; + } +} + +@media only screen and (max-width: 320px) { + #public-transport-info img { + display: block; + } +} + + + + + +/*--------------------------------------------------------*/ +/* SPONSORS +/*--------------------------------------------------------*/ + +#sponsors { + text-align: center; +} + +#sponsors img { + height: 100px; + object-fit: cover; + + margin: 20px; +} + +#sponsors img.sponsor-disc { + height: 155px; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + #sponsors img { + height: 40px; + + margin: 5px; + } + + #sponsors img.sponsor-disc { + height: 60px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* CONTACT +/*--------------------------------------------------------*/ + +#contact-email { + font-family: monospace; + font-size: 1.5rem; + text-align: center; + word-wrap: break-word; +} + +#contact-email img { + width: 32px; + height: 32px; + + vertical-align: bottom; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + #contact-email { + font-size: 0.9rem; + } + + #contact-email img { + display: none; + } +} diff --git a/css/tipso.css b/css/tipso.css new file mode 100644 index 0000000..bdac6df --- /dev/null +++ b/css/tipso.css @@ -0,0 +1,109 @@ +/* Tipso Bubble Styles */ +.tipso_bubble, .tipso_bubble > .tipso_arrow{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.tipso_bubble { + position: absolute; + text-align: center; + border-radius: 6px; + z-index: 9999; +} +.tipso_style{ + /* cursor: help; */ + /* border-bottom: 1px dotted; */ +} +.tipso_title { + padding: 0; + border-radius: 6px 6px 0 0; + font-weight: 700; +} +.tipso_content { + word-wrap: break-word; + padding: 0; + font-style: italic; +} + +/* Tipso Bubble size classes - Similar to Foundation's syntax*/ +.tipso_bubble.tiny { + font-size: 0.6rem; +} +.tipso_bubble.small { + font-size: 0.8rem; +} +.tipso_bubble.default { + font-size: 1rem; +} +.tipso_bubble.large { + font-size: 1.2rem; + width: 100%; +} + +.tipso_bubble.cal_small { + font-size: 0.7rem; +} + +/* Tipso Bubble Div */ +.tipso_bubble > .tipso_arrow{ + position: absolute; + width: 0; height: 0; + border: 8px solid; + pointer-events: none; +} +.tipso_bubble.top > .tipso_arrow { + border-top-color: #000; + border-right-color: transparent; + border-left-color: transparent; + border-bottom-color: transparent; + top: 100%; + left: 50%; + margin-left: -8px; +} +.tipso_bubble.bottom > .tipso_arrow { + border-bottom-color: #000; + border-right-color: transparent; + border-left-color: transparent; + border-top-color: transparent; + bottom: 100%; + left: 50%; + margin-left: -8px; +} +.tipso_bubble.left > .tipso_arrow { + border-left-color: #000; + border-top-color: transparent; + border-bottom-color: transparent; + border-right-color: transparent; + top: 50%; + left: 100%; + margin-top: -8px; +} +.tipso_bubble.right > .tipso_arrow { + border-right-color: #000; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + top: 50%; + right: 100%; + margin-top: -8px; +} + +.tipso_bubble .top_right_corner, +.tipso_bubble.top_right_corner { + border-bottom-left-radius: 0; +} + +.tipso_bubble .bottom_right_corner, +.tipso_bubble.bottom_right_corner { + border-top-left-radius: 0; +} + +.tipso_bubble .top_left_corner, +.tipso_bubble.top_left_corner { + border-bottom-right-radius: 0; +} + +.tipso_bubble .bottom_left_corner, +.tipso_bubble.bottom_left_corner { + border-top-right-radius: 0; +} diff --git a/fonts/roboto-v18-latin-300.woff b/fonts/roboto-v18-latin-300.woff new file mode 100644 index 0000000..96663f0 Binary files /dev/null and b/fonts/roboto-v18-latin-300.woff differ diff --git a/fonts/roboto-v18-latin-300.woff2 b/fonts/roboto-v18-latin-300.woff2 new file mode 100644 index 0000000..52c5845 Binary files /dev/null and b/fonts/roboto-v18-latin-300.woff2 differ diff --git a/fonts/roboto-v18-latin-700.woff b/fonts/roboto-v18-latin-700.woff new file mode 100644 index 0000000..a0d2651 Binary files /dev/null and b/fonts/roboto-v18-latin-700.woff differ diff --git a/fonts/roboto-v18-latin-700.woff2 b/fonts/roboto-v18-latin-700.woff2 new file mode 100644 index 0000000..e327dc9 Binary files /dev/null and b/fonts/roboto-v18-latin-700.woff2 differ diff --git a/fonts/roboto-v18-latin-italic.woff b/fonts/roboto-v18-latin-italic.woff new file mode 100644 index 0000000..27c34da Binary files /dev/null and b/fonts/roboto-v18-latin-italic.woff differ diff --git a/fonts/roboto-v18-latin-italic.woff2 b/fonts/roboto-v18-latin-italic.woff2 new file mode 100644 index 0000000..3791c88 Binary files /dev/null and b/fonts/roboto-v18-latin-italic.woff2 differ diff --git a/fonts/roboto-v18-latin-regular.woff b/fonts/roboto-v18-latin-regular.woff new file mode 100644 index 0000000..92dfacc Binary files /dev/null and b/fonts/roboto-v18-latin-regular.woff differ diff --git a/fonts/roboto-v18-latin-regular.woff2 b/fonts/roboto-v18-latin-regular.woff2 new file mode 100644 index 0000000..7e854e6 Binary files /dev/null and b/fonts/roboto-v18-latin-regular.woff2 differ diff --git a/img/header/background-city.svg b/img/header/background-city.svg new file mode 100644 index 0000000..590f4dc --- /dev/null +++ b/img/header/background-city.svg @@ -0,0 +1,392 @@ + + + + diff --git a/img/header/clouds.svg b/img/header/clouds.svg new file mode 100644 index 0000000..9388a93 --- /dev/null +++ b/img/header/clouds.svg @@ -0,0 +1,498 @@ + + + + diff --git a/img/header/clouds2.svg b/img/header/clouds2.svg new file mode 100644 index 0000000..1ed14ef --- /dev/null +++ b/img/header/clouds2.svg @@ -0,0 +1,706 @@ + + + + diff --git a/img/header/moon.svg b/img/header/moon.svg new file mode 100644 index 0000000..517a6b4 --- /dev/null +++ b/img/header/moon.svg @@ -0,0 +1,116 @@ + + + + diff --git a/img/header/moon2.svg b/img/header/moon2.svg new file mode 100644 index 0000000..3f37c74 --- /dev/null +++ b/img/header/moon2.svg @@ -0,0 +1,116 @@ + + + + diff --git a/img/header/title.svg b/img/header/title.svg new file mode 100644 index 0000000..8c8845e --- /dev/null +++ b/img/header/title.svg @@ -0,0 +1,271 @@ + + + + diff --git a/img/icons/email.svg b/img/icons/email.svg new file mode 100644 index 0000000..1945779 --- /dev/null +++ b/img/icons/email.svg @@ -0,0 +1,10 @@ + + + + diff --git a/img/icons/facebook.svg b/img/icons/facebook.svg new file mode 100644 index 0000000..859e407 --- /dev/null +++ b/img/icons/facebook.svg @@ -0,0 +1,23 @@ + + + + diff --git a/img/icons/location.svg b/img/icons/location.svg new file mode 100644 index 0000000..97e1b22 --- /dev/null +++ b/img/icons/location.svg @@ -0,0 +1,10 @@ + + + + diff --git a/img/icons/ratp/bus-21.svg b/img/icons/ratp/bus-21.svg new file mode 100644 index 0000000..fa74f23 --- /dev/null +++ b/img/icons/ratp/bus-21.svg @@ -0,0 +1,17 @@ + + + + diff --git a/img/icons/ratp/bus-27.svg b/img/icons/ratp/bus-27.svg new file mode 100644 index 0000000..a370ec1 --- /dev/null +++ b/img/icons/ratp/bus-27.svg @@ -0,0 +1,17 @@ + + + + diff --git a/img/icons/ratp/metro-7.svg b/img/icons/ratp/metro-7.svg new file mode 100644 index 0000000..096cc62 --- /dev/null +++ b/img/icons/ratp/metro-7.svg @@ -0,0 +1,13 @@ + + + + diff --git a/img/icons/ratp/noctilien-122.svg b/img/icons/ratp/noctilien-122.svg new file mode 100644 index 0000000..a43cfd3 --- /dev/null +++ b/img/icons/ratp/noctilien-122.svg @@ -0,0 +1,25 @@ + + + + diff --git a/img/icons/ratp/noctilien-14.svg b/img/icons/ratp/noctilien-14.svg new file mode 100644 index 0000000..96f4486 --- /dev/null +++ b/img/icons/ratp/noctilien-14.svg @@ -0,0 +1,19 @@ + + + + diff --git a/img/icons/ratp/noctilien-21.svg b/img/icons/ratp/noctilien-21.svg new file mode 100644 index 0000000..5a4559f --- /dev/null +++ b/img/icons/ratp/noctilien-21.svg @@ -0,0 +1,20 @@ + + + + diff --git a/img/icons/ratp/rer-B.svg b/img/icons/ratp/rer-B.svg new file mode 100644 index 0000000..9085ccc --- /dev/null +++ b/img/icons/ratp/rer-B.svg @@ -0,0 +1,20 @@ + + + + diff --git a/img/icons/ticket.svg b/img/icons/ticket.svg new file mode 100644 index 0000000..37b5847 --- /dev/null +++ b/img/icons/ticket.svg @@ -0,0 +1,11 @@ + + + + diff --git a/img/sponsors/a-ulm.png b/img/sponsors/a-ulm.png new file mode 100644 index 0000000..b7b74b3 Binary files /dev/null and b/img/sponsors/a-ulm.png differ diff --git a/img/sponsors/cof.png b/img/sponsors/cof.png new file mode 100644 index 0000000..86d1981 Binary files /dev/null and b/img/sponsors/cof.png differ diff --git a/img/sponsors/ens.png b/img/sponsors/ens.png new file mode 100644 index 0000000..59bea14 Binary files /dev/null and b/img/sponsors/ens.png differ diff --git a/img/sponsors/mgen.jpg b/img/sponsors/mgen.jpg new file mode 100644 index 0000000..63a55ba Binary files /dev/null and b/img/sponsors/mgen.jpg differ diff --git a/img/sponsors/soge.svg b/img/sponsors/soge.svg new file mode 100644 index 0000000..86b8271 --- /dev/null +++ b/img/sponsors/soge.svg @@ -0,0 +1,140 @@ + + + + \ No newline at end of file diff --git a/img/sponsors/soge2.svg b/img/sponsors/soge2.svg new file mode 100644 index 0000000..4700dd7 --- /dev/null +++ b/img/sponsors/soge2.svg @@ -0,0 +1,46 @@ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a523941 --- /dev/null +++ b/index.html @@ -0,0 +1,530 @@ + + +
+ + + + + + +Le 1er décembre 2018, venez découvrir l'École Normale Supérieure sous un nouveau jour à l'occasion de son Gala traditionnel, la Nuit de la rue d'Ulm.
+ +Avec le thème « Entre Chien et Loup — À l’Orée de la Nuit », nous avons cette année choisi de vous faire découvrir une École aux multiples visages, entre ombre et lumière, pour une soirée exceptionnelle. La nuit tombée, l'École se pare de ses plus beaux atours et vous réserve bien des surprises. + +
Amateur·trice·s de musiques électroniques, de concerts, ou de danses, qu'il s'agisse de valse, de rock, de salsa ou de tango, vous trouverez votre bonheur entre sets de DJ et VJ, scènes présentant divers styles musicaux, et salles de danse libre et initiations.
+ +Du crépuscule à l'aube, du buffet aux dernières minutes de la soirée, la Nuit vous réservera bien des surprises, avec la performance d'un magicien, des expositions artistiques, et de nombreux spectacles : danses, comédie musicale, joutes oratoires, improvisation, fanfare, pompoms...
+ + + + +Le buffet commencera à 20h00 et la soirée à 21h00.
+Les préventes physiques seront disponibles dès le lundi 12 novembre en Aqua le midi et au Burô du COF. + Une billetterie en ligne est aussi ouverte.
+ ++ | COF | +Exté·e | +
---|---|---|
Soirée (prévente) | +18€ | +21€ | +
Soirée (sur place) | +25€ | +25€ | +
Soirée avec Buffet | +28€ | +33€ | +
Attention : les places sont limitées pour le buffet. Réservez rapidement !
+ + + + +
+
+ 45 rue d'Ulm 75005 Paris
+
+
+ responuit[arobase]ens[point]fr
+