34mdh/hugo-theme
2
0
Fork 0
forked from jakub/jakubb-hugo
Code Pull Requests Activity

work on bobile layout for cal

Browse Source
This commit is contained in:
worktop 2024-02-21 16:06:15 -05:00
parent 889d3ef230
commit 9e5d95551b
3 changed files with 70 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/index.html
View File

@ -2,13 +2,5 @@
{{ partial "nav.html" . }} {{ partial "nav.html" . }}
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
<h2>Recent Posts</h2>
<ul>
{{ range first 5 (where site.RegularPages "Type" "in" site.Params.mainSections).ByTitle }}
<li><a href="{{ .RelPermalink }}">{{ .Title}}</a></li>
{{ end }}
</ul>
<h2>LOL</h2>
</div> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

1
layouts/shortcodes/calendar.html
View File

@ -44,6 +44,7 @@
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }} {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }} {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3> <h3 class="day-num">{{ . }}</h3>
<h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ range where $.Site.RegularPages "Section" "eq" "events" }} {{ range where $.Site.RegularPages "Section" "eq" "events" }}
{{ $eventStart := time.AsTime .Params.start_date }} {{ $eventStart := time.AsTime .Params.start_date }}

71
static/css/calendar.css
View File

@ -101,12 +101,12 @@
} }
.day-num { .day-num {
font-size: 8vw; font-size: 8vh;
pointer-events: none; pointer-events: none;
} }
.day:has(>.event) .day-num { .day:has(>.event) .day-num {
font-size: 4vw; font-size: 4vh;
} }
.event, .event a { .event, .event a {
@ -115,3 +115,70 @@
background-color: var(--cal-event-bg); background-color: var(--cal-event-bg);
} }
.mobile-date { display: none;}
/* mobile layout */
@media screen and (max-width: 755px) {
.day, .pad-day, .weekdays, a.month { display: none; }
.days {
padding: 0;
text-align: left;
}
.calendar{
background-color: inherit;
}
.day:has(>.event) {
display: block;
width: 100%;
aspect-ratio: auto;
text-align: left;
border-left-width: 5px;
border-left-style: solid;
margin-top: 10px;
background-color: var(--alt-bg);
border-left-color: var(--acc-1);
padding: 20px;
color: var(--alt-fg);
}
.day:has(>.event):hover {
background-color: var(--alt-bg);
transform: none;
color: var(--alt-fg);
}
.day-num { display: none; }
.mobile-date {
display: inline-block;
text-align: left;
font-size: 3vh;
width: auto;
}
.event {
float: right;
height: 100%;
display:flex;justify-content:flex-end;align-items:center;
}
.event, .event a {
background: none;
}
.event a {
color: var(--acc-1);
font-size: 2vh;
}
}