public/website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add event schedule CSS

Browse source
This commit is contained in:
Michael Boelen 2024-11-19 09:13:33 +00:00
parent 041178f95d
commit 3ccf27ff10
1 changed files with 126 additions and 0 deletions

126
themes/nluug/assets/scss/styles_eventschedule.scss Normal file
View file

@ -0,0 +1,126 @@
.prog-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 0 auto 0 auto;
grid-template-columns: auto auto auto;
gap: 1px 0;
background-color: $midnight-blue-dark;
}
.prog-container > div {
background-color: white;
text-align: left;
font-size: 18px;
}
.prog-container .prog-item {
padding: 10px;
}
.prog-container .prog-desk {
display: none;
}
.prog-container .prog-mob {
display: block;
}
.prog-container .prog-tijd {
//-ms-grid-row-span: 3;
grid-row: span 3;
}
.prog-container .prog-zaal {
display: inline-block;
width: 20px;
text-align: center;
background: $midnight-blue-dark;
border-radius: 100%;
}
@media (min-width: 768px) {
.prog-container {
//-ms-grid-columns: auto auto auto auto;
grid-template-columns: auto auto auto auto;
}
.prog-container .prog-desk {
display: block;
}
.prog-container .prog-mob {
display: none;
}
.prog-container .prog-tijd {
//-ms-grid-row-span: 1;
grid-row: span 1;
}
}
.prog-container .prog-header {
background: $midnight-blue-dark;
}
.prog-container {
display: grid;
grid-template-columns: auto auto auto;
> div {
//background-color: yellow;
text-align: left;
font-size: 18px;
}
.prog-item {
padding: 10px;
}
.prog-desk {
display: none;
}
.prog-mob {
display: block;
}
.prog-tijd {
grid-row: span 3;
}
.prog-zaal {
display: inline-block;
width: 20px;
text-align: center;
background: $midnight-blue-dark;
border-radius: 100%;
color: $color-text-inverse;
}
@media (min-width: 768px) {
grid-template-columns: auto auto auto auto;
.prog-desk {
display: block;
}
.prog-mob {
display: none;
}
.prog-tijd {
grid-row: span 1;
}
}
gap: 1px 0;
background-color: $midnight-blue-dark;
.prog-header {
background: $midnight-blue-dark;
color: $color-text-inverse;
}
}