Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/GDGToulouse/devfest-theme-hugo.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/src/styles/pages/_schedule.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles/pages/_schedule.scss')
-rw-r--r--src/styles/pages/_schedule.scss457
1 files changed, 457 insertions, 0 deletions
diff --git a/src/styles/pages/_schedule.scss b/src/styles/pages/_schedule.scss
new file mode 100644
index 0000000..7c6bd7c
--- /dev/null
+++ b/src/styles/pages/_schedule.scss
@@ -0,0 +1,457 @@
+.section.schedule {
+
+ .hero {
+ .description {
+ display: flex;
+
+ p + p {
+ margin-left: 1em;
+ }
+ }
+ }
+
+ nav.day-tabs {
+ font-size: 2em;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-self: center;
+ padding: var(--space-3) var(--container-margin);
+
+ a {
+ flex-grow: 1;
+ margin: var(--space-2) var(--space-4);
+ border-radius: var(--space-3);
+ text-align: center;
+
+ color: var(--primary);
+ background-color: var(--primary-txt);
+
+ &.active {
+ background-color: var(--primary);
+ color: var(--primary-txt);
+ }
+ }
+ }
+
+ main > section.schedule {
+ margin: 1rem 2rem 2rem;
+ padding: var(--space-3) var(--container-margin);
+
+
+ .day {
+ display: none;
+
+ &:target {
+ display: block;
+ }
+ }
+ }
+
+ h2 {
+ display: none;
+ }
+
+ .room {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ color: var(--primary);
+ background-color: var(--primary-txt);
+ margin: .125em;
+
+ h3 {
+ border: medium solid currentColor;
+ border-radius: var(--space-3);
+ background-color: var(--primary-txt);
+
+ font-size: 1.25em;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: var(--space-3);
+ height: 3em;
+ font-weight: bold;
+
+ small {
+ font-size: .75em;
+ font-weight: normal;
+ }
+ }
+ }
+
+ .start, .slot {
+ font-size: 2em;
+ color: var(--base-secondary-text);
+
+ .mm {
+ font-size: 50%;
+ }
+ }
+
+ .start {
+ position: absolute;
+ top: 0;
+ left: -3.5ch;
+ }
+
+ .slot {
+ display: none;
+ }
+
+
+ .session {
+ position: relative;
+ margin: 1rem 1rem 1rem 5ch;
+ border-radius: var(--space-2);
+
+ &.tag-open, &.tag-pause, &.tag-lunch, &.tag-party {
+ background-position: center center;
+ background-size: cover;
+ pointer-events: none;
+
+ & > a {
+ box-shadow: none;
+ }
+
+ h4 {
+ color: white;
+ text-shadow: 2px 1px 1px black;
+ }
+ }
+
+ &.tag-open, &.tag-pause, &.tag-lunch, &.tag-party, &.tag-office-hours {
+ .tags {
+ display: none;
+ }
+ }
+
+ .slot {
+ display: none;
+ }
+
+ & > a {
+ border: thin solid var(--darken-1);
+ box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2);
+ transition: box-shadow var(--animation);
+ border-radius: var(--space-2);
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: inherit;
+ height: 100%;
+
+ &:hover, &:focus {
+ box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3);
+ }
+
+ h4, .info {
+ padding: var(--space-2);
+ }
+
+ h4 {
+ text-shadow: 2px 1px 1px white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ hr {
+ width: calc(100% - var(--space-3));
+ margin: 0 auto;
+ }
+
+ .info {
+ flex-grow: 1;
+
+
+ .complexity, .video, .presentation {
+ float: left;
+ clear: left;
+ display: inline;
+ max-height: 1.5em;
+
+ svg {
+ height: 1.5em;
+ max-width: 1.5em;
+ }
+ }
+ .tags {
+ float: right;
+ }
+ }
+
+ .speakers {
+ border: thin solid transparent;
+ border-top: thin solid var(--darken-1);
+ border-radius: var(--space-2);
+ background: var(--base);
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+
+ .speaker {
+ display: flex;
+ align-items: center;
+ padding: var(--space-1) var(--space-3);
+
+ .speaker-img {
+ --img-size: 2rem;
+ height: var(--img-size, 3rem);
+ min-width: var(--img-size, 3rem);
+ border-radius: 100%;
+ background-size: cover;
+ margin-right: var(--space-4);
+ }
+
+ .info {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .speaker-company {
+ flex-grow: 1;
+ text-align: right;
+ margin-left: var(--space-3);
+ }
+
+ p {
+ max-width: 320px;
+ }
+ }
+ }
+ }
+}
+
+@supports (grid-template-columns: repeat(calc(var(--rooms) + 1), 1fr)) {
+ .section.schedule main > section.schedule .day {
+
+ grid-template-columns: auto repeat(var(--rooms), 1fr);
+ --dayStart: 60 * var(--dayStartH) + var(--dayStartM);
+ --dayEnd: 60 * var(--dayEndH) + var(--dayEndM);
+ grid-template-rows: 4em repeat(calc(var(--end) - 1), var(--base-grid-height, 6em));
+ grid-gap: .125em .25em;
+
+ &:target {
+ display: grid;
+ }
+
+ .slot {
+ display: block;
+ grid-column: 1 / 2;
+ --start: calc(1 + var(--row-start));
+ --end: calc(1 + var(--row-end));
+ grid-row: var(--start) / var(--end);
+
+ background-color: var(--color-hero);
+ }
+
+ .room {
+ grid-column: calc(var(--room) + 2);
+ grid-row: 1 / -1;
+
+ &.even {
+ background-color: var(--color-hero);
+ }
+ }
+
+ .session {
+ margin: .125em;
+ z-index: 2;
+
+ --start: calc(1 + var(--row-start));
+ --end: calc(1 + var(--row-end));
+
+ grid-column: calc(var(--room) + 2);
+ grid-row: var(--start) / var(--end);
+
+ &.tag-pause {
+ z-index: 0;
+ grid-column: 2 / -1;
+ }
+
+ &.tag-open, &.tag-lunch, &.tag-party {
+ h4 {
+ font-size: 2em;
+ }
+ }
+
+ &.tag-open, &.tag-lunch, &.tag-party {
+ grid-column: 2 / -1;
+ z-index: 1;
+ }
+
+ &.tag-office-hours {
+ margin: var(--space-3);
+
+ .speakers.multi {
+ padding-top: .125em;
+ flex-wrap: wrap;
+ }
+ }
+
+ .start {
+ display: none;
+ }
+
+ .speakers.multi {
+ display: flex;
+ justify-content: space-evenly;
+
+ .speaker {
+ position: relative;
+ border-top: none;
+
+ .speaker-img {
+ margin-right: var(--space-1);
+ }
+
+ .speaker-name {
+ background: var(--base);
+ z-index: 100;
+ border-radius: var(--space-2);
+ border: thin solid var(--darken-1);
+ box-shadow: 1px 1px var(--space-1) var(--darken-1);
+ padding: var(--space-1);
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translateX(50%) translateY(-75%);
+ display: none;
+ }
+
+ &:focus, &:hover {
+ .speaker-name {
+ display: block;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .section.schedule main > section.schedule.horizontal .day {
+ overflow: auto;
+
+ grid-template-rows: auto repeat(var(--rooms), 1fr);
+ --dayStart: 60 * var(--dayStartH) + var(--dayStartM);
+ --dayEnd: 60 * var(--dayEndH) + var(--dayEndM);
+ grid-template-columns: 7em repeat(calc(var(--end) - 1), var(--base-grid-height, 6em));
+ grid-auto-flow: dense;
+
+ .slot {
+ display: block;
+ grid-row: 1 / 2;
+ --start: calc(1 + var(--row-start));
+ --end: calc(1 + var(--row-end));
+ grid-column: var(--start) / var(--end);
+
+ background-color: var(--color-hero);
+ }
+
+ .room {
+ grid-row: calc(var(--room) + 2);
+ grid-column: 1 / -1;
+ justify-content: flex-start;
+
+ h3 {
+ padding: .25em;
+ height: 100%;
+ width: 5.5em;
+ max-width: 5.5em;
+ text-align: center;
+ text-orientation: upright;
+ }
+ }
+
+ .session {
+ --start: calc(1 + var(--row-start));
+ --end: calc(1 + var(--row-end));
+
+ grid-row: calc(var(--room) + 2);
+ grid-column: var(--start) / var(--end);
+
+ &.tag-open, &.tag-pause, &.tag-lunch, &.tag-party {
+ grid-row: 2 / -1;
+ }
+
+ h4 {
+ overflow: hidden;
+ }
+ }
+ }
+
+}
+
+
+@include mq($until: xxl) {
+ .section.schedule main > section.schedule {
+ --container-margin: 0em;
+ }
+}
+
+@include mq($until: lg) {
+ .section.schedule {
+ main > section.schedule .day .session {
+ --container-margin: 0em;
+ margin: 1rem .5rem 2rem 2.25em;
+
+ .start {
+ display: block;
+ }
+ }
+ }
+
+ @supports (grid-template-columns: repeat(calc(var(--rooms) + 1), 1fr)) {
+ .section.schedule main > section.schedule .day {
+
+ &:target {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .slot {
+ display: none;
+ }
+
+ .room {
+ align-items: flex-start;
+ margin-top: 1em;
+ }
+ }
+ }
+}
+
+@media print {
+ .section.schedule main section.schedule .session {
+ font-size: 24px;
+
+ &.format-quickie {
+ font-size: 18px;
+ }
+
+ a, h4 {
+ background: inherit;
+ text-shadow: none;
+ box-shadow: none;
+ }
+ }
+
+ .section.schedule main > section.schedule .day .session .speakers.multi {
+ display: block;
+
+ .speaker {
+ .speaker-name {
+ position: relative;
+ transform: none;
+ border: none;
+ display: block;
+ box-shadow: none;
+ }
+ }
+ }
+
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-29 10:12:29 +0300