Update the style to match 2022's theme

This commit is contained in:
Daru13 2022-04-30 22:16:44 +02:00
parent d7234d8232
commit 2a9fe02db1
14 changed files with 118 additions and 130 deletions

View file

@ -30,13 +30,13 @@
width: 100%; width: 100%;
height: calc(100% + 30px); height: calc(100% + 30px);
padding: 0; padding: 0;
border-bottom: 2px solid #928c79; border-bottom: 2px solid rgba(71, 19, 43, 0.25);
z-index: 10; z-index: 10;
} }
#cal-container .cal-time-slot { #cal-container .cal-time-slot {
border-right: 1px solid #928c79; /* border-right: 1px solid #928c79; */
background-color: rgba(255, 223, 165, 0.08); background-color: rgba(71, 19, 43, 0.15);
} }
/* #cal-container .cal-time-slot:hover { /* #cal-container .cal-time-slot:hover {
@ -44,7 +44,7 @@
} */ } */
#cal-container .cal-time-slot:nth-child(even) { #cal-container .cal-time-slot:nth-child(even) {
background-color: rgba(255, 223, 165, 0.05); background-color: rgba(71, 19, 43, 0.1);
} }
/* #cal-container .cal-time-slot:nth-child(even):hover { /* #cal-container .cal-time-slot:nth-child(even):hover {
@ -58,7 +58,7 @@
#cal-container .cal-time-slot-hour { #cal-container .cal-time-slot-hour {
padding: 0 0 0 calc(100% - 0.9rem + 7px); padding: 0 0 0 calc(100% - 0.9rem + 7px);
background-color: none; /* rgba(255, 223, 165, 0.08); */ background-color: none; /* rgba(255, 223, 165, 0.08); */
border-bottom: 2px solid #928c79; border-bottom: 2px solid rgba(71, 19, 43, 0.25);
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -78,12 +78,12 @@
#cal-container .cal-time-slot.cal-last-hour, #cal-container .cal-time-slot.cal-last-hour,
#cal-container .cal-time-slot-hour.cal-last-hour { #cal-container .cal-time-slot-hour.cal-last-hour {
border-right: 1px solid #928c79; border-right: 1px solid rgba(71, 19, 43, 0.25);
} }
#cal-container .cal-time-slot.cal-first-hour, #cal-container .cal-time-slot.cal-first-hour,
#cal-container .cal-time-slot-hour.cal-first-hour { #cal-container .cal-time-slot-hour.cal-first-hour {
border-left: 1px solid #928c79; border-left: 1px solid rgba(71, 19, 43, 0.25);
} }
/* Events */ /* Events */

View file

@ -59,21 +59,22 @@
html, body { html, body {
font-family: "Roboto", serif; font-family: "Roboto", serif;
font-weight: 300; font-weight: 400;
line-height: 180%; line-height: 180%;
color: #ebecf2; /* color: #47132B; */
font-size: 18px; color: #000;
font-size: 22px;
} }
body { body {
background-color: #110e05; /*#1a223e;*/ background-color: #E1A07E;
} }
a, a,
a:hover, a:hover,
a:active, a:active,
a:visited { a:visited {
color: #ebecf2; color: #47132B;
text-decoration: none; text-decoration: none;
} }
@ -99,98 +100,56 @@ a:visited {
#main-header { #main-header {
margin: 0 auto; margin: 0 auto;
max-width: 100vw; max-width: 100vw;
height: calc(100vw * 2686 / 3893); /*750px;*/ height: calc(100vh / 1.5);
position: relative; position: relative;
/*background: #1a223e; background-image: url("../img/ui/header-48h-des-arts-2022-test.svg");
background: radial-gradient(closest-side ellipse at center, #283e65 0%, #1a223e 100%)*/
background-image: radial-gradient(closest-side ellipse at 27.8% 65.7%, #e5c791c0 0%, #c89c2fa1 30%, #18171201 80%, #1817120f 100%),
/*Personne dans l'equipe 2021 n'a voulu de mes beaux projecteurs violets, snif :"(*/
/*radial-gradient(farthest-side ellipse at 0% 0%, #7f00ffb0 0%, #7f00ff00 45%),
radial-gradient(farthest-side ellipse at 100% 0%, #7f00ffa0 0%, #7f00ff00 50%),*/
linear-gradient(to bottom, #ffffff00 0%, #ffffff00 90%, #73716500 90%, #110e05ff 100%),
url("../img/header/newheader.jpg");
/*background-image: url("../img/header/newheader.jpg");*/
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; background-size: auto calc(100vh / 1.5);
background-position: center bottom; background-position: center bottom;
} }
/*For mobile & tablet devices (this overrides the previous #main-header)*/ @media only screen and (max-width: 1200px) {
@media only screen and (max-width: 800px) {
#main-header { #main-header {
margin: 0 auto; height: calc(100vh / 2);
max-width: 100vw; background-size: auto calc(100vh / 2);
height: calc(100vw * 3434 / 3894);
position: relative;
/*background: #1a223e;
background: radial-gradient(closest-side ellipse at center, #283e65 0%, #1a223e 100%)*/
background-image: linear-gradient(to bottom, #ffffff00 0%, #ffffff00 70%, #73716500 70%, #110e05ff 100%),
url("../img/header/initial-newheader.jpg");
background-repeat: no-repeat;
background-position: center bottom;
display: block;
} }
} }
/*#main-header-title { @media only screen and (max-width: 900px) {
width: 661px; #main-header {
height: 478px; height: calc(100vh / 2.5);
object-fit: cover; background-size: auto calc(100vh / 2.5);
}
}
position: absolute; @media only screen and (max-width: 600px) {
top: 50px; #main-header {
left: calc(50% - 331px); height: calc(100vh / 3);
background-size: auto calc(100vh / 3);
}
}
z-index: 1000; @media only screen and (max-width: 500px) {
}*/ #main-header {
height: calc(100vh / 5);
background-size: auto calc(100vh / 5);
}
}
/*#main-header-subtitle { @media only screen and (max-width: 300px) {
width: 550px; #main-header {
height: 77px; height: calc(100vh / 7);
object-fit: cover; background-size: auto calc(100vh / 7);
}
}
position: absolute; @media only screen and (max-width: 200px) {
top: 550px; #main-header {
left: calc(50% - 275px); height: calc(100vh / 8);
background-size: auto calc(100vh / 8);
z-index: 800; }
}*/
/*#main-header-hands {
width: 381px;
height: 600px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 500;
}*/
/*#main-header-stars {
width: 100%;
height: 100%;
z-index: 0;
}*/
#main-header-leaves {
width: 100%;
height: auto;
z-index: 0;
} }
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
@ -221,16 +180,11 @@ section h2 {
margin-bottom: 25px; margin-bottom: 25px;
padding: 100px 60px 15px 60px; padding: 100px 60px 15px 60px;
background: radial-gradient(ellipse at bottom, rgba(255, 223, 165, 0.1) 0%, transparent 70%); color: #000000;
text-shadow: 3px 2px 1px #FFC62D, 2px 3px 1px #FFC62D;
border: none;
border-bottom: 2px solid rgba(255, 223, 165, 0.5);
border-image-source: linear-gradient(to right, transparent 0%, rgba(255, 223, 165, 0.7) 50%, transparent 100%);
border-image-slice: 1;
color: #f2dab6;
font-size: 2.1rem; font-size: 2.1rem;
font-weight: 300; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
@ -297,27 +251,41 @@ section p.stand-out {
.button { .button {
display: block; display: block;
width: 80%; width: 60%;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 15px 20px; padding: 15px 25px;
background-color: rgba(255, 223, 165, 0.1); /* background-image: url("../img/ui/button-background-darkgreen.svg"); */
/* background-image: url("../img/ui/button-background-darkbrown.svg"); */
/* background-image: url("../img/ui/button-background-lightbrown.svg"); */
background-image: url("../img/ui/button-background-black.svg");
background-repeat: no-repeat;
background-size: 100%;
border: 2px solid rgba(255, 223, 165, 0.7); /* color: #A6D0B2; */
/* color: #AA473C; */
/* color: #47132B; */
/* color: #000000; */
color: #FFFFFF;
color: #f2dab6;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
line-height: 32px; line-height: 32px;
vertical-align: middle;
} }
.button:hover { .button:hover {
background-color: rgba(255, 223, 165, 0.2); /* background-image: url("../img/ui/button-background-lightgreen.svg"); */
/* background-image: url("../img/ui/button-background-lightbrown.svg"); */
/* background-image: url("../img/ui/button-background-darkbrown.svg"); */
background-image: url("../img/ui/button-background-yellow.svg");
/* color: #00787E; */
/* color: #47132B; */
/* color: #AA473C; */
color: #000000;
} }
.button img { .button img {
@ -338,15 +306,11 @@ section p.stand-out {
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
@media only screen and (max-width: 800px) {
@media only screen and (max-width: 480px) {
.button { .button {
width: 100%; width: 75%;
padding: 10px 15px; padding: 10px 15px;
font-size: 1.2rem;
font-size: 1.1rem;
line-height: 24px; line-height: 24px;
} }
@ -356,12 +320,29 @@ section p.stand-out {
} }
} }
@media only screen and (max-width: 480px) {
.button {
width: 100%;
padding: 10px 10px;
font-size: 1.1rem;
line-height: 24px;
}
}
@media only screen and (max-width: 350px) {
.button {
padding: 0 5px;
font-size: 0.9rem;
line-height: 24px;
}
}
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
/* PRICE TABLE /* CALENDAR
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
#calendar { #calendar {
@ -369,6 +350,8 @@ section p.stand-out {
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
/* background-color: rgba(71, 19, 43, 0.05) ; */
} }
@ -412,18 +395,18 @@ table.prices td {
} }
table.prices th { table.prices th {
color: #f2dab6; color: #47132B;
} }
table.prices td { table.prices td {
background-color: rgba(255, 223, 165, 0.05); /* background-color: rgba(71, 19, 43, 0.03); */
border-top: 2px solid rgba(255, 223, 165, 0.5); border-top: 2px solid rgba(71, 19, 43, 0.2);
border-bottom: 2px solid rgba(255, 223, 165, 0.5); border-bottom: 2px solid rgba(71, 19, 43, 0.2);
} }
table.prices tr:nth-child(odd) td { table.prices tr:nth-child(odd) td {
background-color: rgba(255, 223, 165, 0.08); /* background-color: rgba(71, 19, 43, 0.05); */
} }

View file

@ -4,10 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,">
<meta name="description" content="La Nuit &mdash; Gala de l'ENS"> <meta name="description" content="Les 48h des Arts">
<meta name="keywords" content="ENS Gala Nuit 2021 Ulm Ecole Normale Supérieure"> <meta name="keywords" content="ENS Ulm 48h Arts 2022 Ecole Normale Supérieure">
<title>La Nuit &mdash; The ENS Gala</title> <title>Les 48h des Arts</title>
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
@ -26,9 +26,8 @@
<section> <section>
<div> <div>
<a href="OLD_index.html" target="_blank"> <a href="index.html" target="_blank">
<div class="button"> <div class="button">
<img src="img/icons/french_flag.svg" class="fix-alignement" alt="Version française">
Version française Version française
</div> </div>
</a> </a>

BIN
www/img/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 172 KiB

View file

@ -4,10 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,">
<meta name="description" content="La Nuit &mdash; Gala de l'ENS"> <meta name="description" content="Les 48h des Arts">
<meta name="keywords" content="ENS Gala Nuit 2021 Ulm Ecole Normale Supérieure"> <meta name="keywords" content="ENS Ulm 48h Arts 2022 Ecole Normale Supérieure">
<title>La Nuit &mdash; Gala de l'ENS</title> <title>Les 48h des Arts</title>
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
@ -26,9 +26,8 @@
<section> <section>
<div> <div>
<a href="OLD_english_index.html" target="_blank"> <a href="english_index.html" target="_blank">
<div class="button"> <div class="button">
<img src="img/icons/english_flag.svg" class="fix-alignement" alt="English version">
English version English version
</div> </div>
</a> </a>