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

(mostly) finish calendar. needs some stylework but its fully func

Browse Source
This commit is contained in:
worktop 2024-02-16 15:06:37 -05:00
parent 48823310da
commit 4fc62ade48
3 changed files with 157 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
i18n/en.toml Normal file
View File

@ -0,0 +1,8 @@
[days]
sun = "Sunday"
mon = "Monday"
tues = "Tuesday"
wend = "Wednesday"
thurs = "Thursday"
fri = "Friday"
sat = "Saturday"

108
layouts/shortcodes/calendar.html
View File

@ -15,101 +15,47 @@
{{ $daysInMonth := $daysInMonth.Hours }}
{{ $daysInMonth := div $daysInMonth 24 }}
{{ $padding := $t1.Weekday | int }}
<div class="calendar">
<a class="month">{{ if eq .Site.Language.Lang "pl" }}{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}{{ $month := sub $month 1}}{{ $label := index $polish_month_names $month }}{{ printf "%s %d" $label $year }}{{ else }}{{ time.Format "January 2006" $t1 }}{{ end }}</a>
<link rel="stylesheet" href="/css/calendar.css" type="text/css">
{{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}}
{{ $label := index $polish_month_names $month }}
<a class="month">{{ printf "%s %d" $label $year }}</a>
{{ else }}
<a class="month">{{ time.Format "January 2006" $t1 }}</a>
{{ end }}
<div class="weekdays" >
{{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
{{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
</div>
<div class="days">
{{ $padding := $t1.Weekday | int }}
{{ if gt $padding 0 }}
{{ range seq 1 $padding }}
<div class="pad-day"></div>
{{ end }}
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">
{{ $startDate := printf "%4d-%02d-%02dT00:00:00" $year $month . }}
{{ $startDate := time.AsTime $startDate }}
{{ $endDate := printf "%4d-%02d-%02dT23:59:59" $year $month . }}
{{ $endDate := time.AsTime $endDate }}
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>
{{ . }}
`
{{ range where $.Site.RegularPages "Section" "eq" "events" }}
{{ $eventStart := time.AsTime .Params.start_date | int }}
{{ if after $eventStart $startDate }}
<h2>{{ .Title }}</h2>
{{ $eventStart := time.AsTime .Params.start_date }}
{{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
<div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a>
</div>
{{ end }}
{{ end }}
</div>
{{ end }}
{{ range where .Site.Pages "Type" "event" }}
{{ if (and (gt .Params.start_date $.Date) (lt .Params.end_date $.Date)) }}
<h2>{{ .Title }}</h2>
</div>
{{ end }}
{{ end }}
</div>
</div>
<style>
.calendar {
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding: 0;
background-color: darkslategray;
}
a.month {
display: block;
padding: 15px 0;
margin: 0;
text-align: center;
width: 100%;
background-color: black;
}
.days {
width: calc(100% - 10px) ;
padding: 5px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.pad-day, .day {
width: calc(14.28% - 3px) ;
margin: 1.5px;
aspect-ratio: 1;
}
.day {
background-color: gray;
transition: 400ms;
}
.day:hover {
transform: scale(1.2);
background-color: black;
}
</style>

113
static/css/calendar.css Normal file
View File

@ -0,0 +1,113 @@
:root {
--cal-bg: darkslategray;
--cal-fg: white;
--cal-month-bg: black;
--cal-month-fg: cyan;
--cal-weekdays-bg: gray ;
--cal-weekdays-fg: black;
--cal-day-empty-fg: #888;
--cal-day-empty-bg: #555;
--cal-day-busy-fg: #555;
--cal-day-busy-bg: #888;
--cal-day-hover-fg: #555;
--cal-day-hover-bg: black;
--cal-event-fg: white;
--cal-event-bg: var(--acc-1) ;
}
.calendar {
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding: 0;
background-color: var(--cal-bg);
color: var(--cal-fg);
}
a.month {
display: block;
width: 100%;
padding: 15px 0;
text-align: center;
background-color: var(--cal-month-bg);
color: var(--cal-month-fg);
}
.days {
width: calc(100% - 10 px) ;
padding: 5px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.weekdays {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.weekdays p {
display: inline-block;
width: calc(14.28%);
background-color: var(--cal-weekdays-bg);
color: var(--cal-weekdays-fg);
margin: 0;
padding: 0;
text-align: center;
/* border: 0px solid var(--bg); */
/* border-collapse: collapse; */
}
.pad-day, .day {
width: calc(14.28% - 3px - 10px);
padding: 0 5px;
margin: 1.5px;
aspect-ratio: 1;
}
.day {
background-color: var(--cal-day-empty-bg);
color: var(--cal-day-empty-fg);
transition: 400ms;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.day:has(>.event) {
display: block;
color: var(--cal-day-busy-fg);
background-color: var(--cal-day-busy-bg);
}
.day:has(>.event):hover {
transform: scale(1.2);
background-color: var(--cal-day-hover-bg);
color: var(--cal-day-hover-fg);
}
.day-num {
font-size: 48px;
}
.day:has(>.event) .day-num {
font-size: 32px;
}
.event, .event a {
color: var(--cal-event-fg);
background-color: var(--cal-event-bg);
}