diff --git a/.gitignore b/.gitignore index 1c65597..2f75c30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ *.lock .env +.venv/ /content/ /public/ diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index c457077..2a556e1 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -41,85 +41,84 @@ body { font-family: ZenMaruGothic; color: maroon; } - - a { - color: #1B4C8A; - } + +a { + color: #1B4C8A; +} * { box-sizing: border-box; } #content { - margin: 2em auto; - max-width: 80%; - margin-bottom: 0; - } + margin: 2em auto; + max-width: 80%; + margin-bottom: 0; +} -.card{ +.card { + border: 2px solid var(--border-color); + box-shadow:1em 1em 0 #d2d1c8; + background-color: #fff09d; + max-width: 600px; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + +} - border: 2px solid var(--border-color); - box-shadow:1em 1em 0 #d2d1c8; - background-color: #fff09d; - max-width: 600px; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; +.card { + background-color: peachpuff; +} - } - - .card{ - background-color: peachpuff; - } - - .side-bar { - border: 2px solid var(--border-color); - max-width: 400px; - } +.side-bar { + border: 2px solid var(--border-color); + max-width: 400px; +} - .card:nth-child(even){ - transform: rotate(-1deg); - } +.card:nth-child(even) { + transform: rotate(-1deg); +} - .card:nth-child(odd){ - transform: rotate(1deg); - } +.card:nth-child(odd) { + transform: rotate(1deg); +} - .card:nth-child(5){ - transform: rotate(2deg); - } +.card:nth-child(5) { + transform: rotate(2deg); +} - .video.box{ - margin-top:3em; - } +.video.box { + margin-top:3em; +} - .bar{ - border: 2px solid var(--border-color); - box-shadow: 0.6em 0.6em 0 #d2d1c8; - margin-bottom: 2em; - margin-top:3em; - display: inline-block; - background-color: #fff09d; - } +.bar { + border: 2px solid var(--border-color); + box-shadow: 0.6em 0.6em 0 #d2d1c8; + margin-bottom: 2em; + margin-top:3em; + display: inline-block; + background-color: #fff09d; +} -.h-feed{ +.h-feed { display: flex; flex-flow: row wrap; width: 100%; - + } -.entries{ +.entries { padding-top: 10%; } /* base header & menu */ -#top-menu{ +#top-menu { position: fixed; left: 5%; transform: translate(-50%); @@ -153,10 +152,10 @@ body { border-top: 2px solid var(--border-color); margin: 0px; padding: 0px; - + } -.menu ul{ +.menu ul { list-style-type: none; margin: 0; padding: 0; @@ -176,7 +175,7 @@ body { justify-content: space-between; } -.h-entry header h2{ +.h-entry header h2 { padding: 0.2em; margin: 0; padding-right: 0.3em; @@ -185,9 +184,9 @@ body { flex-grow: 1; } -.h-entry header h2:hover{ - box-shadow: inset 4px 4px 0px tomato; - cursor: pointer; +.h-entry header h2:hover { + box-shadow: inset 4px 4px 0px tomato; + cursor: pointer; } .h-entry header h2 a { @@ -196,7 +195,7 @@ body { } -.h-entry header .header-metadata{ +.h-entry header .header-metadata { margin: 0; display: flex; flex-flow: column wrap; @@ -232,17 +231,17 @@ body { } .summary-image > img { -/* height: 100%; - object-fit: cover; - max-width: 100%;*/ - + /* height: 100%; + object-fit: cover; + max-width: 100%;*/ + } .summary-image > a { display: flex; } -.summary-image{ +.summary-image { border-right: 2px solid var(--border-color); } @@ -255,6 +254,7 @@ footer.post-footer { border-top: 2px solid var(--border-color); flex-grow: 1; } + .read-more { border-top: 2px solid var(--border-color); border-left: 2px solid var(--border-color); @@ -265,18 +265,17 @@ footer.post-footer { /* network cards */ -.card.network{ - - border: 2px solid darkcyan; - box-shadow:1em 1em 0 #d2d1c8; - background-color: lightgreen; - max-width: min-content; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: darkcyan; - } +.card.network { + border: 2px solid darkcyan; + box-shadow:1em 1em 0 #d2d1c8; + background-color: lightgreen; + max-width: min-content; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: darkcyan; +} .h-entry.network header { display: flex; @@ -284,15 +283,15 @@ footer.post-footer { flex-direction: row-reverse; } -.h-entry.network header h2{ +.h-entry.network header h2 { padding: 0.2em 0.5em 0.2em 0.5em; margin: 0; border: none; } -.h-entry.network header h2:hover{ - box-shadow: inset 4px 4px 0px darkcyan; - cursor: pointer; +.h-entry.network header h2:hover { + box-shadow: inset 4px 4px 0px darkcyan; + cursor: pointer; } .h-entry.network header h2 a { @@ -305,7 +304,7 @@ footer.post-footer { } .network .header-metadata .dt-published{ - + border-bottom: 2px solid darkcyan; } @@ -344,7 +343,7 @@ footer.post-footer { font-size: 18px; } -div.network-source{ +div.network-source { padding: 0.5em 1em 0.5em 1em; border-bottom: 2px solid darkcyan; font-size: 14px; @@ -357,12 +356,12 @@ div.network-source{ color: darkcyan; } -.network .footer-filler{ +.network .footer-filler { border-left: 2px solid darkcyan; border-top: none; } -.network footer.post-footer{ +.network footer.post-footer { border-top: 2px solid darkcyan; flex-flow: row; font-size: 0.9rem; @@ -380,32 +379,32 @@ div.network-source{ /* shouts cards */ -.card.shout{ - border-color: steelblue; - border: 2px solid; - box-shadow:1em 1em 0 #d2d1c8; - background-color: aliceblue; - max-width: min-content; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: steelblue; - } +.card.shout { + border-color: steelblue; + border: 2px solid; + box-shadow:1em 1em 0 #d2d1c8; + background-color: aliceblue; + max-width: min-content; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: steelblue; +} /* calendar cards */ .card.calendar { - border: 2px solid cornflowerblue; - box-shadow:1em 1em 0 #d2d1c8; - background-color: lightblue; - max-width: 360px; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: royalblue; - + border: 2px solid cornflowerblue; + box-shadow:1em 1em 0 #d2d1c8; + background-color: lightblue; + max-width: 360px; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: royalblue; + } .card.calendar.past { @@ -421,15 +420,15 @@ div.network-source{ border-bottom: 2px solid cornflowerblue; } -.h-event.calendar header h2{ +.h-event.calendar header h2 { padding: 0.2em 0.5em 0.2em 0.5em; margin: 0; border-right: none; } -.h-event.calendar header h2:hover{ - box-shadow: inset 4px 4px 0px royalblue; - cursor: pointer; +.h-event.calendar header h2:hover { + box-shadow: inset 4px 4px 0px royalblue; + cursor: pointer; } .h-event.calendar header h2 a { @@ -438,17 +437,17 @@ div.network-source{ } .header-filler { - min-width: 10%; + min-width: 10%; } -.calendar-location{ +.calendar-location { font-size: 0.8rem; min-width: 20%; padding: 0.5em 0.9em 0.5em 0.9em; border-left: 2px solid cornflowerblue; } -.calendar-duration{ +.calendar-duration { font-size: 0.8rem; border-right: 2px solid cornflowerblue; padding: 0.5em 0.9em 0.5em 0.9em; @@ -499,13 +498,13 @@ div.network-source{ } input + label +.calendar-location+.description{ - display: none; - } + display: none; +} input:checked + label +.calendar-location+.description { - display: block; - transition: ease .5s; - } + display: block; + transition: ease .5s; +} .metadata label { text-align: center; @@ -521,7 +520,7 @@ label:hover { box-shadow: inset 2px 2px 0px #95948c; } -.description{ +.description { padding: 0.5em 0.7em 0.7em 0.5em; overflow: hidden; flex-basis: 100%; @@ -535,59 +534,58 @@ label:hover { /* Paginator */ -nav.pagination{ +nav.pagination { width: 60%; margin: auto; margin-top: 2em; margin-bottom: 2em; } -ul.pagination{ +ul.pagination { display: flex; justify-content: space-evenly; /* align horizontal */ align-items: center; /* align vertical */ } -.page-item{ +.page-item { display: block; text-align: center; - vertical-align: middle; font-size: 38px; border: 2px solid #1B4C8A; box-shadow:0.4em 0.4em 0 #d2d1c8; - + } -li.page-item{ +li.page-item { background-color: lightblue; padding: 0.4em; } -li.page-item.active{ +li.page-item.active { background-color: peachpuff; border: 2px solid tomato; padding: 0.4em; } -li.page-item.disabled{ +li.page-item.disabled { display: none; } - li.page-item:nth-child(even){ - transform: rotate(-1deg); - } +li.page-item:nth-child(even) { + transform: rotate(-1deg); +} - li.page-item:nth-child(odd){ - transform: rotate(1deg); - } +li.page-item:nth-child(odd) { + transform: rotate(1deg); +} - li.page-item:nth-child(5){ - transform: rotate(2deg); - } +li.page-item:nth-child(5) { + transform: rotate(2deg); +} - li.page-item:nth-child(8){ - transform: rotate(-3deg); - } +li.page-item:nth-child(8) { + transform: rotate(-3deg); +} diff --git a/themes/lumbung-theme/static/css/video-box.css b/themes/lumbung-theme/static/css/video-box.css index 051cd70..fb6ac4a 100644 --- a/themes/lumbung-theme/static/css/video-box.css +++ b/themes/lumbung-theme/static/css/video-box.css @@ -2,122 +2,122 @@ --video-border-color: burlywood; --video-background-color: antiquewhite; } - .video-box { - border:2px solid var(--video-border-color); - max-width:560px; - margin:auto; - box-shadow:1em 1em 0 #d2d1c8; - margin-bottom: 2em; - color: chocolate; - } - - .video-box:nth-child(even){ - transform: rotate(-1deg); - } - - .video-box:nth-child(odd){ - transform: rotate(1deg); - } - - .video-box:nth-child(5){ - transform: rotate(3deg); - } - - - .video-box img { - max-width: 100%; - } - - .video-box iframe { - max-width: 100%; +.video-box { + border:2px solid var(--video-border-color); + max-width:560px; + margin:auto; + box-shadow:1em 1em 0 #d2d1c8; + margin-bottom: 2em; + color: chocolate; } - .video-box .media { - line-height: 0; - } +.video-box:nth-child(even){ + transform: rotate(-1deg); +} - .video { - background-color: var(--video-background-color); - } +.video-box:nth-child(odd){ + transform: rotate(1deg); +} - .video .metadata{ - font-size:0.9rem; - justify-content: space-between; - flex-wrap: wrap; - } +.video-box:nth-child(5){ + transform: rotate(3deg); +} - .metadata .title{ - margin-top:0; - border-top: 2px solid var(--video-border-color); - border-bottom: 2px solid var(--video-border-color); - padding:0.5em; - font-weight:700; - font-size:1.3rem; - flex-basis: 100%; - } - .video.channel{ - border-right: 2px solid var(--video-border-color); - padding: 0.5em 0.9em 0.5em 0.9em; - font-size: 0.8rem; - } +.video-box img { + max-width: 100%; +} - .video.date { - float:right; - border-left: 2px solid var(--video-border-color); - padding: 0.5em 0.9em 0.5em 0.9em; - font-size: 0.8rem; - } +.video-box iframe { + max-width: 100%; +} - .video.description { - border-top: 2px solid var(--video-border-color); - padding: 0.8em 0.8em 0.8em 0.8em; +.video-box .media { + line-height: 0; +} - } - .descr_button a { - color:inherit; - text-decoration: inherit; - } +.video { + background-color: var(--video-background-color); +} - input.descr_button { - display: none; - } +.video .metadata{ + font-size:0.9rem; + justify-content: space-between; + flex-wrap: wrap; +} - input + label + .video.date + .description{ - display: none; - } +.metadata .title{ + margin-top:0; + border-top: 2px solid var(--video-border-color); + border-bottom: 2px solid var(--video-border-color); + padding:0.5em; + font-weight:700; + font-size:1.3rem; + flex-basis: 100%; +} - input:checked + label + .video.date +.description { - display: block; - } +.video.channel{ + border-right: 2px solid var(--video-border-color); + padding: 0.5em 0.9em 0.5em 0.9em; + font-size: 0.8rem; +} - .play-icon { - width: 0; - height: 0; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%) scale(.5); - border-top: 13px solid transparent; - border-bottom: 13px solid transparent; - border-left: 18px solid hsla(0,0%,100%,.95); - } +.video.date { + float:right; + border-left: 2px solid var(--video-border-color); + padding: 0.5em 0.9em 0.5em 0.9em; + font-size: 0.8rem; +} + +.video.description { + border-top: 2px solid var(--video-border-color); + padding: 0.8em 0.8em 0.8em 0.8em; + +} +.descr_button a { + color:inherit; + text-decoration: inherit; +} + +input.descr_button { + display: none; +} + +input + label + .video.date + .description{ + display: none; +} + +input:checked + label + .video.date +.description { + display: block; +} + +.play-icon { + width: 0; + height: 0; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%) scale(.5); + border-top: 13px solid transparent; + border-bottom: 13px solid transparent; + border-left: 18px solid hsla(0,0%,100%,.95); +} + +.video-thumbnail { + position: absolute; + width: 100%; + height: 100%; + top: 0; +} +.video-thumbnail { + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + background-color: #ececec; + transition: filter .2s ease; +} - .video-thumbnail { - position: absolute; - width: 100%; - height: 100%; - top: 0; - } - .video-thumbnail { - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - background-color: #ececec; - transition: filter .2s ease; - } - .video-thumbnail-duration-overlay { display: inline-block; background-color: var(--video-background-color); @@ -130,26 +130,26 @@ right: 5px; bottom: 5px; border: 2px solid var(--video-border-color); - } +} - .play-overlay { - transition: all .2s ease; - position: absolute; - right: 0; - bottom: 0; - width: inherit; - height: inherit; - opacity: 0; - background-color: rgba(0,0,0,.3); - cursor: pointer; - } +.play-overlay { + transition: all .2s ease; + position: absolute; + right: 0; + bottom: 0; + width: inherit; + height: inherit; + opacity: 0; + background-color: rgba(0,0,0,.3); + cursor: pointer; +} .video-thumbnail:hover { - text-decoration:none!important + text-decoration:none !important; } .video-thumbnail:hover .play-overlay { -opacity:1 + opacity: 1; } .video-thumbnail:hover .play-overlay .play-icon { -transform:translate(-50%,-50%) scale(1) + transform:translate(-50%,-50%) scale(1); }