Skip to content

page offres + partners/ anim home #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gericci wants to merge 1 commit into
base: master
Choose a base branch
from
Open

page offres + partners/ anim home #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 114 additions & 63 deletions public/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,12 +245,14 @@ picture img {
vertical-align: bottom;
}

summary {cursor: pointer;}

/* ----------------------------------------------------------------- */
/* -------------------------- STRUCTURE ---------------------------- */

header {
padding: calc(1rem + 2vw) 0 0.65rem calc(1rem + 2vw);
margin-bottom: calc(2rem + 2vw);
margin-bottom: calc(1rem + 1vw);
transition: all 0.3s;
}

Expand Down Expand Up @@ -552,6 +554,7 @@ nav a[aria-current="page"] {
/* ----------------------------------------------------------------- */
/* -------------------------- HOME ---------------------------- */


div.hero {
position: relative;
background-image: linear-gradient(
Expand Down Expand Up @@ -652,6 +655,17 @@ section.news article + article {
border-top: 1px dotted var(--text-high);
}


@keyframes venue-photo-1 {
0% {opacity: 0; transform: scale(0.5) rotate(0);}
100% {opacity: 1; transform: scale(1) rotate(15deg);}
}

@keyframes venue-photo-2 {
0% {opacity: 0; transform: scale(0.5) rotate(0);}
100% {opacity: 1; transform: scale(1) rotate(-13deg);}
}

div.venue {
position: relative;
margin: 10vw 0;
Expand Down Expand Up @@ -736,7 +750,8 @@ div.sponsors {
div.sponsors h3 {
font-variation-settings: "wght" 800;
color: var(--hot-color);
margin-bottom: 1rem;
padding-top: 0.5em;
margin-bottom: 1.5rem;
border-top: 5px dotted var(--hot-color);
}
div.sponsors.platinium h3 {
Expand Down Expand Up @@ -786,13 +801,36 @@ div.sponsor-sheet {
}
& p {
box-sizing: border-box;
align-self: start;
align-self: stretch;
background-color: var(--text-high);
padding: 0.5rem;
margin: 0;
display: flex;
justify-content: center;
}

& div.with-contact ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style-type: none;
margin: 0.5rem 0 0;
}

& div.with-contact li + li {
margin-top: 0;
}

& div.with-contact a {
display: flex;
overflow: hidden;
gap: 3rem;
width: 24px;
height: 24px;
white-space: nowrap;
}

& svg {fill: currentColor;}
}

.sponsor p.dark {
Expand Down Expand Up @@ -883,91 +921,45 @@ div.stats li {
text-align: center;
color: var(--body-bg);
margin: auto;
transform: rotate(0);
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
box-shadow: 0 0 8px 2px rgba(0,0,0, 0.5);
}

div.stats li:nth-child(1) {
background-color: var(--main-light);
animation-name: slideStats1;
animation-delay: 4.9s;
}
div.stats li:nth-child(2) {
background-color: var(--hot-light);
transform: rotate(-1deg);
animation-name: slideStats2;
animation-delay: 5s;
}
div.stats li:nth-child(3) {
background-color: var(--light-cold);
transform: rotate(-6deg);
animation-name: slideStats3;
animation-delay: 5.1s;
}
div.stats li:nth-child(4) {
background-color: var(--light-hot);
transform: rotate(1deg);
animation-name: slideStats4;
animation-delay: 5.2s;
}

@keyframes slideStats1 {
0% {
transform: rotate(0);
}
50% {
transform: rotate(2deg);
}
70% {
transform: rotate(1deg);
}
100% {
transform: rotate(2deg);
}
0% {transform: rotate(0);}
40% {transform: rotate(-3deg);}
80% {transform: rotate(2deg);}
100% {transform: rotate(-3deg);}
}
@keyframes slideStats2 {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-2deg);
}
70% {
transform: rotate(1deg);
}
100% {
transform: rotate(-1deg);
}
0% {transform: translateX(-22vw) rotate(0);}
80% {transform: translateX(0) rotate(-3deg);}
100% {transform: translateX(0) rotate(4deg);}
}
@keyframes slideStats3 {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-6deg);
}
70% {
transform: rotate(-2deg);
}
100% {
transform: rotate(-6deg);
}
0% {transform: translateX(-44vw) rotate(0);}
80% {transform: translateX(0) rotate(3deg);}
100% {transform: translateX(0) rotate(-6deg);}
}
@keyframes slideStats4 {
0% {
transform: rotate(0);
}
50% {
transform: rotate(2deg);
}
70% {
transform: rotate(1deg);
}
100% {
transform: rotate(1deg);
}
0% {transform: translateX(-66vw) rotate(0);}
80% {transform: translateX(0) rotate(-3deg);}
100% {transform: translateX(0) rotate(3deg);}
}

div.fixed {
Expand Down Expand Up @@ -1445,6 +1437,10 @@ div.online {
& ul {
margin: 0 1em 1em 1.8em;
}

& a {
overflow-wrap: break-word;
}
}

div.talk h4,
Expand Down Expand Up @@ -1550,6 +1546,61 @@ p.openfb {
border-top: 3px dotted currentColor;
}


/* ----------------------------------------------------------------- */
/* -------------------------- JPB OFFERS ---------------------------- */

.job-offers {
& summary {
font-size: calc(0.95em + 0.5vw);
font-variation-settings: "wght" 700;
list-style: none;
color: var(--n-dark);
background-color: var(--hot-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.52rem;
background-position: 0.45em 40%, center right 8px;
padding: 0.5em 2rem 0.6em 2.5rem;
}

& div.content {
background-color: color-mix(in srgb, var(--hot-light), #000 75%);
padding: calc(1rem + 1vw) calc(1.5rem + 1vw) calc(1.5rem + 1vw) 2.5rem;
}

& dl + dl {margin-top: 1.5rem;}

& dt {
font-size: calc(0.9em + 0.5vw);
margin-bottom: 0.5em;
}
& dd {
font-size: calc(0.8em + 0.5vw);
padding-bottom: 0.25em;
padding-left: 1em;
margin-left: 1em;
border-left: 1px solid currentColor;
}

& .p-action {
font-variation-settings: "wght" 700;
}
}

details.job-offers[open] summary {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 8L18 14H6L12 8Z'%3E%3C/path%3E%3C/svg%3E");
}

div.job-offers dl {
background-color: color-mix(in srgb, #FFF 10%, var(--body-bg-dark) 5%);
padding: calc(1rem + 1vw) calc(1.5rem + 1vw);
}



/* ----------------------------------------------------------------- */
/* -------------------------- AGENDA ---------------------------- */

Expand Down
76 changes: 56 additions & 20 deletions public/css/queries.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,29 +186,65 @@
transform: rotate(-10deg);
}
}

/* div.venue::before, div.venue::after {
display: block;
position: absolute;
content: "";
background-color: rgb(255,255,255,0.1);
}
div.venue::before {
width: 90vw;
height: 80%;
left: 5vw;
}
div.venue::after {
width: 10vw;
height: 10vw;
top: 0;
right: 16vw;
transform: rotate(10deg);
z-index: 2;
} */
}


@media screen and (min-width: 850px) and (prefers-reduced-motion: no-preference) {
div.stats.active {
& ul {position: relative;}
& li:nth-child(2), & li:nth-child(3), & li:nth-child(4) {
transform: rotate(0);
}
& li:nth-child(1) {
animation-delay: 0.95;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: slideStats1;
}
& li:nth-child(2) {
transform: translateX(-22vw);
animation-delay: 0.85;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: slideStats2;
}
& li:nth-child(3) {
transform: translateX(-44vw);
animation-delay: 0.65;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: slideStats3;
}
& li:nth-child(4) {
transform: translateX(-66vw);
animation-delay: 0;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: slideStats4;
}
}

div.venue.active p.illustration {
animation-delay: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: venue-photo-1;
}
div.venue.active p.illustration.secondary {
display: block;
animation-delay: 0;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-name: venue-photo-2;
}
}

@media screen and (min-width: 800px) and (max-width: 1299px) {
div.decor {
display: grid;
Expand Down
12 changes: 12 additions & 0 deletions public/img/sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading