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

Different calendar style for mobile

main
Bob Mottram 2020-11-11 12:46:33 +00:00
parent cadd0de15c
commit 9565f7b45c
1 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
epicyon-calendar.css
View File

@ -17,7 +17,8 @@
--calendar-horizontal-padding: 0; --calendar-horizontal-padding: 0;
--font-size-calendar-header: 3rem; --font-size-calendar-header: 3rem;
--font-size-calendar-day: 1rem; --font-size-calendar-day: 1rem;
--font-size-calendar-cell: 4rem; --font-size-calendar-cell: 2rem;
--font-size-calendar-cell-mobile: 4rem;
} }
@font-face { @font-face {
@ -55,12 +56,6 @@ main {
flex-basis: 980px; flex-basis: 980px;
} }
.calendar {
table-display: fixed;
width: 100%;
padding: 0 var(--calendar-horizontal-padding);
}
a:visited{ a:visited{
color: var(--day-number); color: var(--day-number);
text-decoration: none; text-decoration: none;
@ -123,11 +118,6 @@ a:focus {
text-transform: uppercase; text-transform: uppercase;
} }
.calendar__day__cell {
font-size: var(--font-size-calendar-cell);
position: relative;
}
.year { .year {
font-size: 30px; font-size: 30px;
} }
@ -210,3 +200,29 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
-ms-transform: translateY(30%) scaleX(-1); -ms-transform: translateY(30%) scaleX(-1);
transform: translateY(30%) scaleX(-1); transform: translateY(30%) scaleX(-1);
} }
@media screen and (min-width: 400px) {
.calendar {
table-display: fixed;
margin: 0 20%;
width: 60%;
padding: 0 var(--calendar-horizontal-padding);
}
.calendar__day__cell {
font-size: var(--font-size-calendar-cell);
position: relative;
}
}
@media screen and (max-width: 1000px) {
.calendar {
table-display: fixed;
margin: 0 0;
width: 100%;
padding: 0 var(--calendar-horizontal-padding);
}
.calendar__day__cell {
font-size: var(--font-size-calendar-cell-mobile);
position: relative;
}
}