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

merge calendar.css to main stylesheet

Browse Source
This commit is contained in:
Jakub 2024-02-27 20:44:58 -05:00
parent 758ccf59f5
commit d99c90c007
5 changed files with 184 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layouts/shortcodes/cal_layout.html
View File

@ -12,7 +12,6 @@
{{ $daysInMonth := div $daysInMonth 24 }} {{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar"> <div class="calendar">
<link rel="stylesheet" href="/css/calendar.css" type="text/css">
{{ if eq .Site.Language.Lang "pl" }} {{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }} {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}} {{ $month := sub $month 1}}
@ -72,7 +71,6 @@
{{ $daysInMonth := div $daysInMonth 24 }} {{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar"> <div class="calendar">
<link rel="stylesheet" href="/css/calendar.css" type="text/css">
{{ if eq .Site.Language.Lang "pl" }} {{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }} {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}} {{ $month := sub $month 1}}
@ -131,7 +129,6 @@
{{ $daysInMonth := div $daysInMonth 24 }} {{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar"> <div class="calendar">
<link rel="stylesheet" href="/css/calendar.css" type="text/css">
{{ if eq .Site.Language.Lang "pl" }} {{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }} {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}} {{ $month := sub $month 1}}

1
layouts/shortcodes/calendar.html
View File

@ -16,7 +16,6 @@
{{ $daysInMonth := div $daysInMonth 24 }} {{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar"> <div class="calendar">
<link rel="stylesheet" href="/css/calendar.css" type="text/css">
{{ if eq .Site.Language.Lang "pl" }} {{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }} {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}} {{ $month := sub $month 1}}

184
static/css/calendar.css
View File

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

163
static/css/style.css
View File

@ -435,3 +435,166 @@ 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;
}
}