Commit 9b7e9dc0 authored by Thomas Stone's avatar Thomas Stone
Browse files

Removed Old Files

parent fc4288a6
# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Python pycache:
__pycache__/
# Ignored by the build system
/setup.cfg
# Venv
venv/
\ No newline at end of file
runtime: python39
handlers:
- url: /static
static_dir: static
- url: /.*
script: auto
\ No newline at end of file
This diff is collapsed.
@import '../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'); // custom font
// --------------------------------
// Schedule Template - by CodyHouse.co
// --------------------------------
:root {
// colors
@include defineColorHSL(--cd-color-event-1, 199, 25%, 46%); // Smalt Blue
@include defineColorHSL(--cd-color-event-2, 271, 23%, 26%); // Martinique
@include defineColorHSL(--cd-color-event-3, 162, 14%, 68%); // Edward
@include defineColorHSL(--cd-color-event-4, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-5, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-6, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-7, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-8, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-9, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-10, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-11, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-12, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-13, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-14, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-15, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-16, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-17, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-18, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-19, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-20, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-event-21, 31, 89%, 68%); // Rajah
@include defineColorHSL(--cd-color-text, 0, 0%, 13%); // Black
@include defineColorHSL(--cd-color-border, 0, 0%, 92%); // Grey
// font
--font-primary: 'Source Sans Pro', sans-serif;
//schedule template
--schedule-rows-number: 19;
--schedule-rows-height: 50px;
}
body {
color: var(--cd-color-text);
}
a {
color: var(--cd-color-event-3);
}
.cd-schedule {
position: relative;
&::before { // never visible - this is used in js to check the current MQ
content: 'mobile';
display: none;
}
.js & {
@include breakpoint(md) {
width: calc(100% - 2*var(--component-padding));
margin-left: auto;
margin-right: auto;
max-width: var(--max-width-xl);
&::before {
content: 'desktop';
}
}
}
}
.cd-schedule__timeline { // events time
display: none;
.js & {
@include breakpoint(md) {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: var(--schedule-rows-height);
li {
position: relative;
height: var(--schedule-rows-height);
&::after { // this is used to create the table horizontal lines
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--cd-color-border);
}
&:last-of-type::after {
display: none;
}
span {
display: none;
}
}
}
@include breakpoint(lg) {
li {
&::after {
width: calc(100% - 60px);
left: 60px;
}
span {
display: inline-block;
transform: translateY(-50%);
font-size: var(--text-sm);
}
&:nth-of-type(2n) span {
display: none;
}
}
}
}
}
.cd-schedule__events {
position: relative;
z-index: 1;
.js & {
@include breakpoint(md) {
width: 100%;
> ul {
display: flex;
flex-wrap: nowrap;
}
> div {
display: flex;
flex-wrap: nowrap;
}
}
@include breakpoint(lg) {
width: calc(100% - 60px); // 60px is the .cd-schedule__timeline > li::after element left
margin-left: 60px;
}
}
}
.cd-schedule__group { // group of same day events
margin-bottom: var(--space-lg);
.js & {
@include breakpoint(md) {
flex-basis: 0;
flex-grow: 1;
border: 1px solid var(--cd-color-border);
margin-bottom: 0; // reset style
&:not(:first-of-type) {
border-left-width: 0;
}
}
}
}
.cd-schedule__group > ul {
position: relative;
padding: 0 var(--component-padding);
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::after { // never visible - used to add a right padding to .cd-schedule__group > ul
display: inline-block;
content: '-';
width: 1px;
height: 100%;
opacity: 0;
color: transparent;
}
.js & {
@include breakpoint(md) {
height: calc(var(--schedule-rows-height)*var(--schedule-rows-number));
overflow: visible;
padding: 0;
&::after { // reset style
display: none;
}
}
}
}
.cd-schedule__top-info { // day label
width: 100%;
padding: 0 var(--component-padding);
> span {
display: inline-block;
margin-bottom: var(--space-sm);
font-weight: bold;
}
.js & {
@include breakpoint(md) {
// vertically center its content
display: flex;
align-items: center;
justify-content: center;
height: var(--schedule-rows-height);
border-bottom: 1px solid var(--cd-color-border);
padding: 0; // reset style
> span {
font-weight: normal;
font-size: var(--text-sm);
margin-bottom: 0;
}
}
}
}
.cd-schedule__event {
flex-shrink: 0; // force them to stay on one line
float: left; // flex fallback
height: 150px;
width: 70%;
max-width: 300px;
margin-right: var(--space-md);
transition: opacity .2s, background .2s;
a {
display: flex;
flex-wrap: nowrap;
height: 100%;
padding: var(--space-sm);
box-shadow: inset 0 -3px 0 rgba(#000, .2);
text-decoration: none;
}
a::before { // event start/end date
content: attr(data-start)' - 'attr(data-end);
}
.js & {
@include breakpoint(sm) {
width: 40%;
}
@include breakpoint(md) {
position: absolute;
z-index: 3;
width: calc(100% + 2px); // top position and height will be set using js
left: -1px;
max-width: none; // reset style
margin-right: 0;
a {
padding: var(--space-sm);
box-shadow: 0 10px 20px rgba(#000, .1), inset 0 -3px 0 rgba(#000, .2);
}
}
}
}
.js {
@include breakpoint(md) {
.cd-schedule__event--selected { // classes added when an user select the event
visibility: hidden;
}
.cd-schedule--loading .cd-schedule__event {
// the class .cd-schedule--loading is added by default to the .cd-schedule element
// it is removed as soon as the single events are placed in the schedule plan (using javascript)
opacity: 0;
}
}
}
.cd-schedule__name, // event name in the schedule template
.cd-schedule__event a::before, // event date in the schedule template
.cd-schedule-modal__name, // event name in the modal element
.cd-schedule-modal__date { // event date in the modal element
display: block;
color: var(--color-white);
font-weight: bold;
@include fontSmooth;
}
.cd-schedule__name,
.cd-schedule-modal__name {
font-size: var(--text-lg);
@include breakpoint(md) {
font-size: calc(var(--text-sm)*1.2);
}
}
.cd-schedule-modal__date, // not included in the the HTML but added using JavScript
.cd-schedule__event a::before {
opacity: .7;
margin-bottom: var(--space-xxxs);
@include breakpoint(md) {
font-size: calc(var(--text-xs)*1.05);
margin-bottom: var(--space-xxxxs);
}
}
.cd-schedule__event [data-event="event-1"],
.cd-schedule-modal[data-event="event-1"] .cd-schedule-modal__header-bg {
// this is used to set a background color for the event and the modal window
background: var(--cd-color-event-1);
}
.cd-schedule__event [data-event="event-2"],
.cd-schedule-modal[data-event="event-2"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-2);
}
.cd-schedule__event [data-event="event-3"],
.cd-schedule-modal[data-event="event-3"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-3);
}
.cd-schedule__event [data-event="event-4"],
.cd-schedule-modal[data-event="event-4"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-4);
}
.cd-schedule__event [data-event="event-5"],
.cd-schedule-modal[data-event="event-5"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-5);
}
.cd-schedule__event [data-event="event-6"],
.cd-schedule-modal[data-event="event-6"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-6);
}
.cd-schedule__event [data-event="event-7"],
.cd-schedule-modal[data-event="event-7"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-7);
}
.cd-schedule__event [data-event="event-8"],
.cd-schedule-modal[data-event="event-8"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-8);
}
.cd-schedule__event [data-event="event-9"],
.cd-schedule-modal[data-event="event-9"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-9);
}
.cd-schedule__event [data-event="event-10"],
.cd-schedule-modal[data-event="event-10"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-10);
}
.cd-schedule__event [data-event="event-11"],
.cd-schedule-modal[data-event="event-11"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-11);
}
.cd-schedule__event [data-event="event-12"],
.cd-schedule-modal[data-event="event-12"] .cd-schedule-modal__header-bg {
background: var(--cd-color-event-12);
}
.cd-schedule-modal {
position: fixed;
z-index: 3;
top: 0;
right: 0;
height: 100%;
width: 100%;
visibility: hidden;
transform: translateZ(0); // Force Hardware acceleration
transform: translateX(100%);
transition: transform .4s, visibility .4s;
transition-timing-function: cubic-bezier(.5,0,.1,1);
@include breakpoint(md) {
// reset style
right: auto;
width: auto;
height: auto;
transform: translateX(0);
will-change: transform, width, height;
transition: height .4s, width .4s, transform .4s, visibility .4s;
transition-timing-function: cubic-bezier(.5,0,.1,1);
}
}
.cd-schedule-modal__header {
position: relative;
height: 70px;
display: flex;
align-content: center;
width: 100%;
@include breakpoint(md) {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
}
}
.cd-schedule-modal__content {
position: relative;
z-index: 3;
display: flex;
align-items: center;
padding: var(--space-sm) var(--component-padding);
@include breakpoint(md) {
// reset style
display: block;
padding: var(--space-sm);
}
}
.cd-schedule-modal__body {
position: relative;
width: 100%;
height: calc(100% - 70px); // 70px is the .cd-schedule-modal__header height
@include breakpoint(md) {
height: 100%;
width: auto;
}
}
.cd-schedule-modal__event-info {
position: relative;
z-index: 2;
line-height: var(--body-line-height);
height: 100%;
overflow: hidden;
font-size: calc(var(--text-sm) * 1.2);
> div {
overflow: auto;
height: 100%;
padding: var(--space-md) var(--component-padding);
}
@include breakpoint(md) {
opacity: 0;
font-size: var(--text-sm);
> div {
padding: calc(var(--space-md)*1.3) calc(var(--space-lg)*1.2) calc(var(--space-md)*1.3) calc(var(--space-md)*1.3);
}
}
}
.cd-schedule-modal__header-bg,
.cd-schedule-modal__body-bg { // these are the morphing backgrounds - visible on desktop only
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
@include breakpoint(md) {
// Force Hardware acceleration
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
}
.cd-schedule-modal__header-bg {
z-index: 2;
transform-origin: top center;
@include breakpoint(md) {
transition: transform .4s;
transition-timing-function: cubic-bezier(.5,0,.1,1);
}
}
.cd-schedule-modal__body-bg {
z-index: 1;
background: var(--color-white);
transform-origin: top left;
@include breakpoint(md) {
opacity: 0;
transform: none;
}
}
.cd-schedule-modal--no-transition {
transition: none;
.cd-schedule-modal__header-bg,
.cd-schedule-modal__body-bg {
transition: none !important;
}
}
.cd-schedule-modal__date {
display: none;
@include breakpoint(md) {
display: block;
}
}
.cd-schedule-modal__close { // close modal icon
position: absolute;
z-index: 3;
top: 0;
right: 0;
height: 70px;
width: 70px;
background: alpha(var(--color-black), .1);
&::before, &::after { // these are the two lines of the 'X' icon
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 22px;
background: var(--color-white);
backface-visibility: hidden;
}
&::before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
&::after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
@include breakpoint(md) {
width: 40px;
height: 40px;
background: transparent;
opacity: 0;
&::after, &::before {
background: var(--cd-color-text);
height: 16px;
}
}
}
.cd-schedule-modal--open { // this class is added as soon as an event is selected
transform: translateX(0);
visibility: visible;
.cd-schedule-modal__event-info > div { // smooth scroll on iOS touch deviceS
-webkit-overflow-scrolling: touch;
}