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;
--font-size-calendar-header: 3rem;
--font-size-calendar-day: 1rem;
--font-size-calendar-cell: 4rem;
--font-size-calendar-cell: 2rem;
--font-size-calendar-cell-mobile: 4rem;
}
@font-face {
@ -55,12 +56,6 @@ main {
flex-basis: 980px;
}
.calendar {
table-display: fixed;
width: 100%;
padding: 0 var(--calendar-horizontal-padding);
}
a:visited{
color: var(--day-number);
text-decoration: none;
@ -123,11 +118,6 @@ a:focus {
text-transform: uppercase;
}
.calendar__day__cell {
font-size: var(--font-size-calendar-cell);
position: relative;
}
.year {
font-size: 30px;
}
@ -210,3 +200,29 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
-ms-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;
}
}