start program page
This commit is contained in:
parent
f75d7b390e
commit
3694b55357
10 changed files with 150 additions and 52 deletions
|
|
@ -5,6 +5,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.calendar-strip__selector {
|
||||
|
|
@ -21,10 +22,25 @@
|
|||
}
|
||||
|
||||
.calendar-strip__day {
|
||||
font-size: var(--font-size-s);
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.calendar-strip__day.active {
|
||||
.calendar-strip__day button {
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-strip__day button.today {
|
||||
color: var(--color-salmon);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.calendar-strip__day button span {
|
||||
display: block;
|
||||
}
|
||||
.calendar-strip__day span:nth-child(1) {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.calendar-strip__day.active span:nth-child(2) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -41,7 +57,6 @@
|
|||
top: 100%;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
padding: 0 calc(var(--space-m));
|
||||
background-color: #fff;
|
||||
z-index: 0;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
|
|
@ -51,14 +66,23 @@
|
|||
max-height: 20rem;
|
||||
}
|
||||
|
||||
.calendar-strip__sessions {
|
||||
padding: var(--padding-vertical) 0;
|
||||
.calendar-strip__session:first-child > a {
|
||||
border-top: var(--border) !important;
|
||||
}
|
||||
.calendar-strip__session:not(:last-child) {
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.calendar-strip__session {
|
||||
.calendar-strip__session > a {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
padding: var(--padding-vertical) var(--space-m);
|
||||
}
|
||||
|
||||
.calendar-strip__session:hover {
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
.calendar-strip__session:not(:last-child) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ body.progress * {
|
|||
}
|
||||
|
||||
.grid {
|
||||
--column-gap: calc(var(--space-m) * 1.5);
|
||||
--column-gap: calc(var(--space-m) * 1.1);
|
||||
--row-gap: calc(var(--space-m) / 2);
|
||||
--row-length: calc(12 / var(--span));
|
||||
display: grid;
|
||||
|
|
@ -26,7 +26,7 @@ body.progress * {
|
|||
(var(--column-gap) * var(--column-gap-nbr)) + var(--space-m) * 2
|
||||
);
|
||||
--width: calc((100vw - var(--white-space)) / var(--row-length));
|
||||
height: calc(var(--width) / 1.4);
|
||||
height: calc(var(--width) / 1.2);
|
||||
}
|
||||
|
||||
.grid__item picture img {
|
||||
|
|
@ -36,7 +36,7 @@ body.progress * {
|
|||
.logo {
|
||||
font-weight: normal;
|
||||
font-size: var(--font-size-h2);
|
||||
transition: font-size 0.3s ease-in-out;
|
||||
transition: font-size 0.1s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ body.progress * {
|
|||
|
||||
.logo > *:not(:first-child) {
|
||||
margin-left: 2.27ch;
|
||||
transition: margin 0.3s ease-in-out;
|
||||
transition: margin 0.1s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
|
|
@ -103,3 +103,7 @@ body.progress * {
|
|||
.ticket-link > figure {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: var(--color-yellow);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
}
|
||||
/* Nav */
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
top: -34rem;
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
background-color: var(--color-brown-light);
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 8fr 1fr;
|
||||
|
|
|
|||
|
|
@ -36,25 +36,25 @@
|
|||
display: inline-flex;
|
||||
}
|
||||
|
||||
a:not([disabled]):hover .ticket svg,
|
||||
.ticket:hover svg {
|
||||
a:not([disabled]):hover > .ticket svg,
|
||||
.ticket:not(a[disabled] .ticket):hover svg {
|
||||
animation: vibrate 0.5s forwards;
|
||||
}
|
||||
|
||||
.ticket:hover svg path:not(.dot),
|
||||
a:not([disabled]):hover .ticket svg path:not(.dot) {
|
||||
.ticket:not(a[disabled] .ticket):hover svg path:not(.dot),
|
||||
a:not([disabled]):hover > .ticket svg path:not(.dot) {
|
||||
fill: var(--color-salmon);
|
||||
stroke: var(--color-salmon);
|
||||
}
|
||||
a.to-blank:hover .ticket svg path:not(.dot) {
|
||||
a.to-blank:hover > .ticket svg path:not(.dot) {
|
||||
fill: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.ticket:hover svg path.dot,
|
||||
a:not([disabled]):hover .ticket svg path.dot {
|
||||
.ticket:not(a[disabled] .ticket):hover svg path.dot,
|
||||
a:not([disabled]):hover > .ticket svg path.dot {
|
||||
fill: #fff;
|
||||
}
|
||||
a.to-blank:hover .ticket svg path.dot {
|
||||
a.to-blank:hover > .ticket svg path.dot {
|
||||
fill: var(--color-salmon);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue