start program page

This commit is contained in:
isUnknown 2024-08-28 19:11:58 +02:00
parent f75d7b390e
commit 3694b55357
10 changed files with 150 additions and 52 deletions

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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;

View file

@ -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);
}