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

Compare commits

base: 34mdh:d99c90c00793f5c984be300c602aafe6f4be1f6e
Branches Tags
34mdh:master
jakub:master
..
compare: 34mdh:6b221f66f5ab9fda41322ef2e84de4e98c86efb3
Branches Tags
34mdh:master
jakub:master

No commits in common. "d99c90c00793f5c984be300c602aafe6f4be1f6e" and "6b221f66f5ab9fda41322ef2e84de4e98c86efb3" have entirely different histories.
d99c90c007 ... 6b221f66f5

5 changed files with 189 additions and 185 deletions
Show Stats Expand all files Collapse all files

5
layouts/shortcodes/cal_layout.html
View File

@ -12,6 +12,7 @@
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
<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}}
@ -71,6 +72,7 @@
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
<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}}
@ -129,6 +131,7 @@
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
<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}}
@ -186,7 +189,7 @@
{{ range sort (where .Site.RegularPages "Section" "events") "Params.start_date" "asc" }}
{{ $eventDate := time.AsTime .Params.start_date }}
{{ if and ( or ($eventDate.After $startDate) ($eventDate.Equal $startDate)) ($eventDate.Before $endDate) }}
<li>{{$eventDate | time.Format ":date_medium" }} - <a href="{{ .RelPermalink }}">{{.Title}}</a></li>
<li>{{$eventDate.Format "Jan 2, 2006" }} - <a href="{{ .RelPermalink }}">{{.Title}}</a></li>
{{ end }}
{{ end }}
</ul>

1
layouts/shortcodes/calendar.html
View File

@ -16,6 +16,7 @@
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
<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}}

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

@ -0,0 +1,184 @@
: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);
pointer-events: none;
}
.days {
width: calc(100% - 10 px) ;
padding: 5px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.weekdays {
display: block;
width: 100%;
margin: 0;
padding: 0;
pointer-events: none;
}
.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: 8vh;
pointer-events: none;
}
.day:has(>.event) .day-num {
font-size: 4vh;
}
.event, .event a {
font-size: 1.5vh;
color: var(--cal-event-fg);
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;
}
}

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

@ -13,27 +13,6 @@
--lang-btn-bg: black;
--langs-bg: black;
--langs-bg-hov: gray;
--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) ;
}
@media (prefers-color-scheme: dark) {

163
static/css/style.css
View File

@ -435,166 +435,3 @@ blockquote.location p { padding: inherit; }
}
/* Calendar TODO Mix in for clean stylesheet */
.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);
pointer-events: none;
}
.days {
width: calc(100% - 10 px) ;
padding: 5px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.weekdays {
display: block;
width: 100%;
margin: 0;
padding: 0;
pointer-events: none;
}
.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: 8vh;
pointer-events: none;
}
.day:has(>.event) .day-num {
font-size: 4vh;
}
.event, .event a {
font-size: 1.5vh;
color: var(--cal-event-fg);
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;
}
}