feteducourt-static/public/static/events/main.css
Adrian Amaglio 8567b548fd moved
2023-10-09 10:32:02 +02:00

312 lines
4.5 KiB
CSS

html {
background-color: #111111;
color: white;
height:99%;
}
body {
font-family: sans-serif;
margin: 0;
height:99%;
}
h1 {
padding: 1.34rem;
margin: 0;
background-color: #ffe751;
color: #111111;
}
h2 {
color: #111111;
}
header {
text-align: center;
}
h4{
color: #ffe751;
}
li:nth-child(6n+2) h4, li:nth-child(6n+1) h4, li:nth-child(6n+6) h4, li:nth-child(6n+5) h4{
color: #111111;
}
nav {
width: 15%;
display: inline-block;
border: 1px solid #666;
border-left: 0;
position: absolute;
background-color: #222;
z-index: 1;
}
nav h3 {
margin: 10px 0 10px 5px;
}
main {
overflow: hidden;
min-height: 70%;
}
#main {
width: calc(85% - 20px);
display: inline-block;
margin-left: calc(15% + 20px);
}
h2 {
text-align: center;
}
ul {
list-style: none;
}
a, a:visited {
color: #333333;
text-decoration: underline;
cursor: pointer;
}
ul.event_program li {
background-color:#000;
}
li a, li a:visited {
color: white;
}
ul.event_program li.incontournable{
background-color: #3dbfb9;
}
ul.event_program li.jeune-public{
background-color: #ee1d23;
}
ul.event_program li.ami-du-court{
background-color: #71bf44;
}
ul.event_program li.mouvement{
background-color: #6f4d9f;
}
ul.event_program li.unitaire{
background-color: #ea148b;
}
ul.event_program li.talents{
background-color: #ffe751;
}
li.talents > a{
color: #111111;
}
.event_program > li > span {
text-decoration: none;
padding: 7px 10px;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
display: inline-block;
width: calc(100% - 20px);
}
.event_program {
display: flex;
flex-direction: column;
}
.event_program > li {
position: relative;
min-height: 30px;
}
.event_program, .event_program ul{
padding: 0;
margin-bottom: 5px;
margin-top: 0;
}
.event_program ul {
display: none;
position: absolute;
background-color: #111111;
border: 1px solid #666;
top: 0;
left: 100%;
width: 75%;
}
.event_program > li:hover ul, .event_program > li:focus ul, .event_program > li:active ul {
display: block;
}
.event_program > li:hover ul li, .event_program > li:focus ul li, .event_program > li:active ul li{
border-bottom: 1px solid #666;
padding: 7px 5px;
}
.event_list{
display: flex;
padding: 0;
flex-wrap: wrap;
}
.event_item{
flex: 0 0 20%;
max-width: 20%;
border: 1px solid #363636;
box-shadow: 0 6px 8px -5px rgba(255,255,255, .15);
margin: 10px 5px;
padding: 10px;
border-radius: 5px;
background: linear-gradient(#222222, #333);
}
.event_item a {
display: block;
width: 100%;
height: 100%;
}
.event_item .title {
font-size: 1.2em;
display: block;
text-align: center;
margin-bottom: 5px;
}
.event_item .author {
font-size: 0.8em;
display: block;
text-align: right;
margin-top: 3px;
}
.event_item .location {
}
.event_item .start {
}
footer {
font-size: 0.65rem;
margin-top: 10px;
text-align: right;
margin-right: 5px;
}
footer span {
display: block;
}
footer a, footer a:visited {
text-decoration: underline;
color: #ffe751;
}
main .day_list .day_item:nth-child(6n+1)::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -70px;
right: 0;
background-color: #ffffff;
transform-origin: 0 0;
transform: skewY(-5deg);
height: 500%;
width: 100vw;
}
main .day_list .day_item:nth-child(6n+3)::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -70px;
right: 0;
background-color: #111111;
transform-origin: 0 0;
transform: skewY(-5deg);
height: 500%;
width: 100vw;
}
main .day_list .day_item:nth-child(6n+5)::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -90px;
right: 0;
background-color: #ffe751;
transform-origin: 0 0;
transform: skewY(3deg);
height: 500%;
width: 100vw;
}
.day_list li{
position: relative;
}
@media screen and (max-width: 640px) {
nav {
width: 100%;
position: relative;
}
#main {
margin: 0;
width: 100%;
}
main ul {
margin: 0;
padding: 0;
}
main ul .day_item {
padding: 0 10px;
}
.event_list {
display: block;
}
.event_item {
margin: 10px auto;
max-width: 100%;
}
.event_program ul {
position: relative;
width: 100%;
margin: 0;
border-bottom: 0;
left: 0;
}
}
.logo-bdc, .logo-fdc {
width:150px;
display:inline-block;
}
#logos {
text-align:left;
}