butiran

code-3 calendar-card dark-scheme

· 4 mins read · edit

notes

  • It an attemp to fix a shortcode card/calendar using knowledge obtained in previous notes 26a02 and 26a01 .
  • There is problem with text with hyperlink when the shortcude is in used at the same page.

calendar.html

Location /layouts/shortcodes/card/

new version

{{/* 
Usage:
{{< card/calendar "sun-07.09.25" "/my-post/" >}}
*/}}

{{ $input := .Get 0 }}
{{ $link := .Get 1 }}
{{ $bgcolor := .Get 2 | default "none" }}

{{/* split dayname and date part */}}
{{ $parts := split $input "-" }}
{{ $dayname := upper (index $parts 0) }}
{{ $datepart := index $parts 1 }}

{{/* split dd.mm.yy */}}
{{ $dparts := split $datepart "." }}
{{ $day := index $dparts 0 }}

{{/* month string, strip leading zeros safely */}}
{{ $monthNumStr := index $dparts 1 }}


{{/* strip all leading zeros safely */}}
{{ $monthNumClean := replaceRE "^0+" "" $monthNumStr }}
{{ if eq $monthNumClean "" }}
  {{ $monthNumClean = "0" }}
{{ end }}
{{ $monthNum := int $monthNumClean }}


{{ $yearShort := index $dparts 2 }}
{{ $year := printf "20%s" $yearShort }}

{{/* month abbreviation (index is zero-based, monthNum is 1-based) */}}
{{ $months := slice "Jan" "Feb" "Mar" "Apr" "May" "Jun" "Jul" "Aug" "Sep" "Oct" "Nov" "Dec" }}
{{ $monthName := "" }}
{{ if and (ge $monthNum 1) (le $monthNum 12) }}
  {{ $monthName = index $months (sub $monthNum 1) }}
{{ end }}

<div class="calendar-card">
<a href="/butiran/{{- $link -}}/">
  <div class="calendar-card-content" style="border: 0.5px solid {{- $bgcolor -}};">
    <div class="calendar-day">{{ $dayname }}</div>
    <div class="calendar-date">{{ $day }}</div>
    <div class="calendar-monthyear">{{ $monthName }} {{ $year }}</div>
  </div>
</a>
</div>

<style>
.calendar-card, a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 2px;
  margin-right: 2px;
}

.calendar-card-content {
  border-radius: 8px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.15)*/;
  box-shadow: 0 2px 4px var(--muted-border);
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5rem;
  background: none;
}

.calendar-card:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 6px 12px rgba(0,0,0,0.25); */
  box-shadow: 0 6px 12px var(--muted-border);
}

.calendar-day {
  font-size: 0.6rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #555;
}

.calendar-date {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.calendar-monthyear {
  font-size: 0.55rem;
  color: #777;
}
</style>

old version

{{/* 
Usage:
{{< card/calendar "sun-07.09.25" "/my-post/" >}}
*/}}

{{ $input := .Get 0 }}
{{ $link := .Get 1 }}
{{ $bgcolor := .Get 2 | default "#ffffff" }}

{{/* split dayname and date part */}}
{{ $parts := split $input "-" }}
{{ $dayname := upper (index $parts 0) }}
{{ $datepart := index $parts 1 }}

{{/* split dd.mm.yy */}}
{{ $dparts := split $datepart "." }}
{{ $day := index $dparts 0 }}

{{/* month string, strip leading zeros safely */}}
{{ $monthNumStr := index $dparts 1 }}


{{/* strip all leading zeros safely */}}
{{ $monthNumClean := replaceRE "^0+" "" $monthNumStr }}
{{ if eq $monthNumClean "" }}
  {{ $monthNumClean = "0" }}
{{ end }}
{{ $monthNum := int $monthNumClean }}


{{ $yearShort := index $dparts 2 }}
{{ $year := printf "20%s" $yearShort }}

{{/* month abbreviation (index is zero-based, monthNum is 1-based) */}}
{{ $months := slice "Jan" "Feb" "Mar" "Apr" "May" "Jun" "Jul" "Aug" "Sep" "Oct" "Nov" "Dec" }}
{{ $monthName := "" }}
{{ if and (ge $monthNum 1) (le $monthNum 12) }}
  {{ $monthName = index $months (sub $monthNum 1) }}
{{ end }}

<div class="calendar-card">
<a href="/butiran/{{- $link -}}/">
  <div class="calendar-card-content" style="background: {{- $bgcolor -}};">
    <div class="calendar-day">{{ $dayname }}</div>
    <div class="calendar-date">{{ $day }}</div>
    <div class="calendar-monthyear">{{ $monthName }} {{ $year }}</div>
  </div>
</a>
</div>

<style>
.calendar-card, a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 2px;
  margin-right: 2px;
}

.calendar-card-content {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5rem;
}

.calendar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.calendar-day {
  font-size: 0.6rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #555;
}

.calendar-date {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.calendar-monthyear {
  font-size: 0.55rem;
  color: #777;
}
</style>

s