indymedia
/
epicyon
mirror of https://gitlab.com/bashrc2/epicyon
7
4
Fork 1
Code Issues 14 Releases Wiki Activity

Calendar style

main2
Bob Mottram 2019-10-10 20:19:47 +01:00
parent 5a04f407d3
commit 7e50140f71
1 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
epicyon-calendar.css
View File

@ -1,117 +1,123 @@
:root {
--main-bg-color: #282c37;
--lines-color: darkgray;
--day-number: lightgray;
}
body { body {
background-color: #e66053; background-color: var(--main-bg-color);
color: #4E4F4A; color: gray;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
font-family: 'Montserrat'; font-family: 'Montserrat';
font-weight: 700; font-weight: 700;
min-height: 100vh; min-height: 100vh;
} }
main { main {
background-color: #F6E9DC; background-color: #F6E9DC;
-ms-flex-preferred-size: 980px; -ms-flex-preferred-size: 980px;
flex-basis: 980px; flex-basis: 980px;
} }
.calendar { .calendar {
table-display: fixed; table-display: fixed;
width: 100%; width: 100%;
} }
.calendar__day__header, .calendar__day__header,
.calendar__day__cell { .calendar__day__cell {
border: 2px solid #e66053; border: 2px solid var(--lines-color);
text-align: center; text-align: center;
width: 100% / 7; width: 100% / 7;
vertical-align: middle; vertical-align: middle;
} }
.calendar__day__header:first-child, .calendar__day__header:first-child,
.calendar__day__cell:first-child { .calendar__day__cell:first-child {
border-left: none; border-left: none;
} }
.calendar__day__header:last-child, .calendar__day__header:last-child,
.calendar__day__cell:last-child { .calendar__day__cell:last-child {
border-right: none; border-right: none;
} }
.calendar__day__header, .calendar__day__header,
.calendar__day__cell { .calendar__day__cell {
padding: .75rem 0 1.5rem; padding: .75rem 0 1.5rem;
} }
.calendar__banner--month { .calendar__banner--month {
text-align: center; text-align: center;
padding: .75rem; padding: .75rem;
} }
.calendar__banner--month h1 { .calendar__banner--month h1 {
background-color: #4E4F4A; background-color: #4E4F4A;
color: #F6E9DC; color: #F6E9DC;
display: inline-block; display: inline-block;
font-size: 3rem; font-size: 3rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.1em; letter-spacing: 0.1em;
padding: .5rem 2rem; padding: .5rem 2rem;
text-transform: uppercase; text-transform: uppercase;
} }
.calendar__day__header { .calendar__day__header {
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
} }
.calendar__day__cell { .calendar__day__cell {
font-size: 4rem; font-size: 4rem;
position: relative; position: relative;
} }
tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) { tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) {
color: #e66053; color: var(--day-number);
} }
tr:nth-child(even) > .calendar__day__cell:nth-child(even) { tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
color: #e66053; color: var(--day-number);
} }
.calendar__day__cell[data-event] { .calendar__day__cell[data-event] {
background-color: #e66053; background-color: blue;
color: #4E4F4A; color: blue;
} }
.calendar__day__cell[data-event]:after { .calendar__day__cell[data-event]:after {
content: attr(data-event); content: attr(data-event);
color: #F6E9DC; color: #F6E9DC;
display: block; display: block;
font-weight: 400; font-weight: 400;
font-size: .75rem; font-size: .75rem;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 1rem; height: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }
.calendar__day__cell[data-today] { .calendar__day__cell[data-today] {
background-color: #4E4F4A; background-color: #4E4F4A;
border-color: #4E4F4A; border-color: #4E4F4A;
color: #F6E9DC; color: #F6E9DC;
} }
.calendar__day__cell[data-today]:after { .calendar__day__cell[data-today]:after {
content: attr(data-today); content: attr(data-today);
color: #F6E9DC; color: #F6E9DC;
display: block; display: block;
font-size: .75rem; font-size: .75rem;
font-weight: 400; font-weight: 400;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 1rem; height: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }