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

Compare commits

base: 34mdh:03ee9e48c2517e2b916279f4b7edae351cf74959
Branches Tags
34mdh:master
jakub:master
..
compare: 34mdh:0c04a1b0a05a9906b9c5d3e5407a524c528ac658
Branches Tags
34mdh:master
jakub:master

4 Commits
03ee9e48c2 ... 0c04a1b0a0

Author SHA1 Message Date
Worktop
0c04a1b0a0 comit 2024-03-08 16:01:23 -05:00
Worktop
90556d90b3 calendar imporvements 
- removed exessive margin from day numbers
- days with events now have JS click event that simulates clicking on
  the event
- event no longer has a seperate bg, cleaner look
 2024-03-08 13:01:24 -05:00
Worktop
d107e7c97a make emty table headers invisible 2024-03-08 11:54:11 -05:00
Jakub
777e53ef81 Rework colorscheme 2024-03-08 09:00:30 -05:00
4 changed files with 110 additions and 58 deletions
Show Stats Expand all files Collapse all files

30
layouts/shortcodes/cal_layout.html
View File

@ -35,27 +35,41 @@
{{ end }} {{ end }}
{{ range seq 1 $daysInMonth }} {{ range seq 1 $daysInMonth }}
<div class="day"> <div class="day" onclick="simulateLinkClick()" >
{{ $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> <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ $eventCount := 0 }}
{{ 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 }}
{{ $eventEnd := time.AsTime .Params.end_date }} {{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }} {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
{{ $eventCount = add $eventCount 1 }}
<div class="event" > <div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a> <a href="{{ .RelPermalink }}">{{.Title}}</a>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if gt $eventCount 1 }}
{{ errorf "Error: Multiple events per day currently unsuported"}}
{{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
</div> </div>
<script>
function simulateLinkClick() {
var link = document.querySelector('.div a');
if (link) {
link.click();
}
}
</script>
{{ $date := $date.AddDate 0 1 0 }} {{ $date := $date.AddDate 0 1 0 }}
@ -100,16 +114,22 @@
<h3 class="day-num">{{ . }}</h3> <h3 class="day-num">{{ . }}</h3>
<h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3> <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ $eventCount := 0 }}
{{ 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 }}
{{ $eventEnd := time.AsTime .Params.end_date }} {{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }} {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
{{ $eventCount = add $eventCount 1 }}
<div class="event" > <div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a> <a href="{{ .RelPermalink }}">{{.Title}}</a>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if gt $eventCount 1 }}
{{ errorf "Error: Multiple events per day currently unsuported"}}
{{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -152,22 +172,28 @@
{{ end }} {{ end }}
{{ range seq 1 $daysInMonth }} {{ range seq 1 $daysInMonth }}
<div class="day"> <div class="day" onclick="simulateLinkClick()" >
{{ $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> <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ $eventCount := 0 }}
{{ 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 }}
{{ $eventEnd := time.AsTime .Params.end_date }} {{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }} {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
{{ $eventCount = add $eventCount 1 }}
<div class="event" > <div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a> <a href="{{ .RelPermalink }}">{{.Title}}</a>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if gt $eventCount 1 }}
{{ errorf "Error: Multiple events per day currently unsuported"}}
{{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>

16
layouts/shortcodes/calendar.html
View File

@ -1,3 +1,12 @@
<script>
function simulateLinkClick() {
var link = document.querySelector('.day a');
if (link) {
link.click();
}
}
</script>
{{ $date:= .Get "date" }} {{ $date:= .Get "date" }}
{{ if not $date }} {{ if not $date }}
{{ errorf "Error: 'date' is a required parameter." }} {{ errorf "Error: 'date' is a required parameter." }}
@ -39,22 +48,27 @@
{{ end }} {{ end }}
{{ range seq 1 $daysInMonth }} {{ range seq 1 $daysInMonth }}
<div class="day"> <div class="day" onclick="simulateLinkClick()" >
{{ $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> <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ $eventCount := 0 }}
{{ 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 }}
{{ $eventEnd := time.AsTime .Params.end_date }} {{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }} {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
{{ $eventCount = add $eventCount 1 }}
<div class="event" > <div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a> <a href="{{ .RelPermalink }}">{{.Title}}</a>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if gt $eventCount 1 }}
{{ errorf "Error: Multiple events per day currently unsuported" }}
{{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>

107
static/css/colorschemes/colors.css
View File

@ -1,28 +1,30 @@
/* Mostly based off of gruvbox */ :root {
/* Colors */
:root {
--bg: #D4D8ED;
--fg: #06080E; --fg: #06080E;
--alt-fg: #F1F2F9; --alt-fg: #F1F2F9;
--bg: #D4D8ED;
--alt-bg: #C5CCE8;
--dark-alt-bg: #A9B2DB;
--acc: #3C5197; --acc: #3C5197;
--dark-acc: #12182B; --dark-acc: #12182B;
--light-acc: #5F75BF; --light-acc: #5F75BF;
--alt-bg: #C5CCE8;
--dark-alt-bg: #A9B2DB;
/* Color Sheme linking */ /* Color Sheme linking */
/* Body Colors */
--body-bg: var(--bg); --body-bg: var(--bg);
--body-fg: var(--fg); --body-fg: var(--fg);
--link-fg: var(--acc); --link-fg: var(--acc);
/* Navbar Colors */
--header-bg: var(--alt-bg); --header-bg: var(--alt-bg);
--header-bg-hov: var(--acc); --header-bg-hov: var(--acc);
--header-fg: var(--fg); --header-fg: var(--fg);
--header-fg-hov: var(--alt-fg); --header-fg-hov: var(--alt-fg);
--header-shadow: var(--dark-acc); --header-shadow: var(--dark-acc);
--header-shadow-hov: var(--header-shadow); --header-shadow-hov: var(--header-shadow);
--hamburger-fg: var(--fg); --hamburger-fg: var(--fg);
--hamburger-fg-checked: var(--hamburger-fg); --hamburger-fg-checked: var(--hamburger-fg);
@ -31,7 +33,8 @@
--langs-bg-hov: var(--header-bg-hov); --langs-bg-hov: var(--header-bg-hov);
--langs-fg-hov: var(--header-fg-hov); --langs-fg-hov: var(--header-fg-hov);
--blockquote-border: var(--alt-bg); /* Content Colors */
--blockquote-border: var(--alt-bg);
--table-bg: var(--dark-alt-bg); --table-bg: var(--dark-alt-bg);
--table-bg-alt: var(--alt-bg); --table-bg-alt: var(--alt-bg);
@ -43,57 +46,61 @@
--button-bg: var(--acc); --button-bg: var(--acc);
--button-fg: var(--alt-fg); --button-fg: var(--alt-fg);
/* Calendar Colors */
--cal-bg: var(--alt-bg);
--cal-fg: var(--fg);
--cal-month-bg: var(--alt-bg);
--cal-month-fg: var(--fg);
--cal-bg: var(--alt-bg); --cal-weekdays-bg: var(--light-acc);
--cal-fg: var(--fg); --cal-weekdays-fg: var(--alt-fg);
--cal-month-bg: var(--alt-bg); --cal-day-empty-fg: var(--alt-fg);
--cal-month-fg: var(--fg); --cal-day-empty-bg: var(--dark-alt-bg);
--cal-weekdays-bg: var(--light-acc); --cal-day-busy-fg: var(--alt-fg);
--cal-weekdays-fg: var(--alt-fg); --cal-day-busy-bg: var(--acc);
--cal-day-hover-fg: var(--cal-day-busy-fg);
--cal-day-hover-bg: var(--cal-day-busy-bg);
--cal-day-empty-fg: var(--alt-fg); --cal-event-fg: var(--alt-fg);
--cal-day-empty-bg: var(--dark-alt-bg); --cal-event-bg: var(--light-acc) ;
--cal-day-busy-fg: var(--alt-fg); --cal-mobile-bg: var(--alt-bg);
--cal-day-busy-bg: var(--acc); --cal-mobile-fg: var(--fg);
--cal-day-hover-fg: var(--cal-day-busy-fg); --cal-mobile-border: var(--acc);
--cal-day-hover-bg: var(--cal-day-busy-bg); --cal-mobile-link: var(--light-acc);
}
--cal-event-fg: var(--alt-fg); @media (prefers-color-scheme: dark) {
--cal-event-bg: var(--light-acc) ;
--cal-mobile-bg: var(--cal-day-busy-bg);
--cal-mobile-fg: var(--cal-fg);
--cal-mobile-border: var(--col-2);
--cal-mobile-link: var(--link-fg);
}
@media (prefers-color-scheme: dark) {
:root { :root {
/* Dark Mode Colors */
--bg: #06080E;
--fg: #F0F2F9;
--dark-acc: #0C101D;
--alt-bg: #18203A;
--dark-alt-bg: #12182B;
--bg: #06080E; /* Dark Mode Colorscheme Changes */
--fg: #F0F2F9; --link-fg: var(--light-acc);
--dark-acc: #0C101D;
--alt-bg: #18203A;
--dark-alt-bg: #12182B;
--link-fg: var(--light-acc); --table-bg: var(--dark-acc);
--table-bg: var(--dark-acc); --table-bg-alt: var(----alt-bg);
--table-bg-alt: var(----alt-bg);
--button-fg: var(--body-fg);
--cal-bg: var(--dark-acc);
--cal-weekdays-fg: var(--fg);
--cal-day-empty-fg: var(--dark-acc);
--cal-day-busy-fg: var(--acc);
--cal-day-busy-bg: var(--alt-bg);
--cal-event-fg: var(--fg);
--cal-event-bg: var(--acc) ;
--button-fg: var(--body-fg);
} --cal-bg: var(--dark-acc);
--cal-weekdays-fg: var(--fg);
--cal-day-empty-fg: var(--dark-acc);
--cal-day-busy-fg: var(--acc);
--cal-day-busy-bg: var(--alt-bg);
--cal-event-fg: var(--fg);
--cal-event-bg: var(--acc) ;
}
} }

15
static/css/style.css
View File

@ -229,7 +229,7 @@ table tr { background-color: var(--table-bg-alt); }
table tr:nth-child(2n) { background-color: var(--table-bg); } table tr:nth-child(2n) { background-color: var(--table-bg); }
table thead tr th:empty { display: none; }
/* Markdown Blockquote styles */ /* Markdown Blockquote styles */
@ -521,6 +521,7 @@ blockquote.location p { padding: inherit; }
transition: 400ms; transition: 400ms;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -528,7 +529,7 @@ blockquote.location p { padding: inherit; }
.day:has(>.event) { .day:has(>.event) {
display: block; /* display: block; */
color: var(--cal-day-busy-fg); color: var(--cal-day-busy-fg);
background-color: var(--cal-day-busy-bg); background-color: var(--cal-day-busy-bg);
} }
@ -537,21 +538,25 @@ blockquote.location p { padding: inherit; }
transform: scale(1.2); transform: scale(1.2);
background-color: var(--cal-day-hover-bg); background-color: var(--cal-day-hover-bg);
color: var(--cal-day-hover-fg); color: var(--cal-day-hover-fg);
cursor: pointer;
} }
.day-num { .day-num {
font-size: 8vh; font-size: 6.5vh;
line-height: 1;
pointer-events: none; pointer-events: none;
margin: 0;
} }
.day:has(>.event) .day-num { .day:has(>.event) .day-num {
font-size: 4vh; font-size: 3vh;
margin-bottom: 1vh;
} }
.event, .event a { .event, .event a {
font-size: 1.5vh; font-size: 1.5vh;
color: var(--cal-event-fg); color: var(--cal-event-fg);
background-color: var(--cal-event-bg); /* background-color: var(--cal-event-bg); */
} }
.mobile-date { display: none;} .mobile-date { display: none;}