page headers, various fixes, responsive
This commit is contained in:
bkfox
@ -7,10 +7,13 @@
|
|||||||
--heading-bg-color: var(--highlight-color);
|
--heading-bg-color: var(--highlight-color);
|
||||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||||
--heading-font-family: default;
|
--heading-font-family: default;
|
||||||
|
--preview-title-sz: 1.6rem;
|
||||||
|
--preview-subtitle-sz: 1.4rem;
|
||||||
--preview-cover-size: 24rem;
|
--preview-cover-size: 24rem;
|
||||||
--preview-cover-small-size: 10rem;
|
--preview-cover-small-size: 10rem;
|
||||||
--preview-cover-tiny-size: 4rem;
|
--preview-cover-tiny-size: 4rem;
|
||||||
--header-height: 30rem;
|
--preview-wide-content-sz: 1.6rem;
|
||||||
|
--header-height: var(--preview-cover-size);
|
||||||
--a-carousel-pb: 1.4rem;
|
--a-carousel-pb: 1.4rem;
|
||||||
--a-carousel-gap: 1.2rem;
|
--a-carousel-gap: 1.2rem;
|
||||||
--a-carousel-nav-x: -0.6em;
|
--a-carousel-nav-x: -0.6em;
|
||||||
@ -38,6 +41,37 @@
|
|||||||
--button-active-bg: var(--highlight-color-2);
|
--button-active-bg: var(--highlight-color-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1380px) {
|
||||||
|
:root {
|
||||||
|
--section-content-sz: 1rem;
|
||||||
|
--preview-title-sz: 1rem;
|
||||||
|
--preview-subtitle-sz: 1rem;
|
||||||
|
--preview-cover-size: 14rem;
|
||||||
|
--preview-cover-small-size: 10rem;
|
||||||
|
--preview-cover-tiny-size: 4rem;
|
||||||
|
--preview-wide-content-sz: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title.is-1 {
|
||||||
|
font-size: var(--title-1-sz);
|
||||||
|
}
|
||||||
|
.title.is-2 {
|
||||||
|
font-size: var(--title-2-sz);
|
||||||
|
}
|
||||||
|
.title.is-3 {
|
||||||
|
font-size: var(--title-3-sz);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle.is-1 {
|
||||||
|
font-size: var(--title-1-sz);
|
||||||
|
}
|
||||||
|
.subtitle.is-2 {
|
||||||
|
font-size: var(--title-2-sz);
|
||||||
|
}
|
||||||
|
.subtitle.is-3 {
|
||||||
|
font-size: var(--title-3-sz);
|
||||||
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -72,12 +106,12 @@
|
|||||||
}
|
}
|
||||||
.preview .title, .preview .title:not(:last-child) {
|
.preview .title, .preview .title:not(:last-child) {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-title-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
.preview .subtitle {
|
.preview .subtitle {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-subtitle-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
.preview .headings {
|
.preview .headings {
|
||||||
@ -101,11 +135,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1380px) {
|
|
||||||
:root {
|
|
||||||
--preview-cover-size: 18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.preview-cover {
|
.preview-cover {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
@ -145,13 +174,6 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview.comment .title {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
.preview.comment .subtitle {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -203,11 +225,12 @@
|
|||||||
margin-right: 1.2rem;
|
margin-right: 1.2rem;
|
||||||
}
|
}
|
||||||
.preview-wide .content {
|
.preview-wide .content {
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-wide-content-sz);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-card {
|
.preview-card {
|
||||||
|
padding: 0rem !important;
|
||||||
height: var(--preview-cover-size);
|
height: var(--preview-cover-size);
|
||||||
width: var(--preview-cover-size);
|
width: var(--preview-cover-size);
|
||||||
}
|
}
|
||||||
@ -226,30 +249,31 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-card-headings {
|
.card-headings, .preview-card-headings {
|
||||||
padding-top: 0.6rem;
|
padding-top: 0.6rem;
|
||||||
}
|
}
|
||||||
.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
|
.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
|
||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
preview-header:not(.no-cover) .preview-card-headings .heading {
|
preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading {
|
||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.preview-header {
|
.header.preview-header {
|
||||||
display: flex;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
padding-top: 0.6rem !important;
|
padding-top: 0.6rem !important;
|
||||||
}
|
}
|
||||||
.header.preview-header .headings {
|
.header .headings {
|
||||||
|
width: unset;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.header img {
|
.header.has-cover {
|
||||||
height: var(--preview-cover-size);
|
min-height: calc(var(--header-height) / 2);
|
||||||
max-width: calc(var(--preview-cover-size) * 2);
|
|
||||||
}
|
}
|
||||||
.header .title {
|
.header .title {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-cover:not(:only-child) {
|
||||||
|
float: right;
|
||||||
|
height: var(--header-height);
|
||||||
|
max-width: calc(var(--header-height) * 2);
|
||||||
|
margin: 0 0 1.2rem 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover:only-child {
|
||||||
|
with: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.container.header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container.header .headings {
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.container.header .header-cover {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
height: unset;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
.card-grid {
|
.card-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|||||||
@ -304,7 +304,7 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: hsl(0deg, 0%, 29%);
|
color: #000;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -6820,7 +6820,7 @@ a.tag:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: hsl(0deg, 0%, 21%);
|
color: #000;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.125;
|
line-height: 1.125;
|
||||||
@ -6899,6 +6899,18 @@ a.tag:hover {
|
|||||||
justify-content: right;
|
justify-content: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear-left {
|
||||||
|
clear: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-right {
|
||||||
|
clear: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-both {
|
||||||
|
clear: both !important;
|
||||||
|
}
|
||||||
|
|
||||||
.d-inline {
|
.d-inline {
|
||||||
display: inline !important;
|
display: inline !important;
|
||||||
}
|
}
|
||||||
@ -6911,8 +6923,12 @@ a.tag:hover {
|
|||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-push-right {
|
.push-right, .flex-push-right {
|
||||||
margin-left: auto;
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-bottom {
|
||||||
|
margin-top: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-grow-0 {
|
.flex-grow-0 {
|
||||||
@ -7028,459 +7044,6 @@ a.tag:hover {
|
|||||||
border-color: #b00 !important;
|
border-color: #b00 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--heading-height: 30rem;
|
|
||||||
--heading-title-bg-color: rgba(255, 255, 0, 1);
|
|
||||||
--heading-bg-color: var(--highlight-color);
|
|
||||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
|
||||||
--heading-font-family: default;
|
|
||||||
--preview-cover-size: 24rem;
|
|
||||||
--preview-cover-small-size: 10rem;
|
|
||||||
--preview-cover-tiny-size: 4rem;
|
|
||||||
--header-height: 30rem;
|
|
||||||
--a-carousel-pb: 1.4rem;
|
|
||||||
--a-carousel-gap: 1.2rem;
|
|
||||||
--a-carousel-nav-x: -0.6em;
|
|
||||||
--a-progress-bg: transparent;
|
|
||||||
--a-progress-bar-bg: var(--highlight-color-2);
|
|
||||||
--a-progress-bar-color: var(--highlight-color);
|
|
||||||
--a-progress-bar-pd: 0.4rem;
|
|
||||||
--a-playlist-title-sz: 1rem;
|
|
||||||
--a-playlist-title-pd: 0.6rem;
|
|
||||||
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
|
|
||||||
--a-sound-bg: var(--highlight-color-alpha);
|
|
||||||
--a-sound-hv-bg: var(--highlight-color);
|
|
||||||
--a-sound-playing-fg: var(--highlight-color-alpha);
|
|
||||||
--a-sound-hv-fg: var(--highlight-color-2);
|
|
||||||
--a-sound-title-sz: 1.4rem;
|
|
||||||
--a-player-url-fg: var(--highlight-color-2);
|
|
||||||
--a-player-panel-bg: var(--highlight-color);
|
|
||||||
--a-player-bar-bg: var(--highlight-color);
|
|
||||||
--a-player-bar-title-alone-sz: 1.6rem;
|
|
||||||
--button-fg: var(--text-color);
|
|
||||||
--button-bg: var(--highlight-color);
|
|
||||||
--button-hg-fg: var(--highlight-color-2);
|
|
||||||
--button-hg-bg: var(--highlight-color);
|
|
||||||
--button-active-fg: var(--highlight-color);
|
|
||||||
--button-active-bg: var(--highlight-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heading:not(:empty) {
|
|
||||||
background-color: var(--heading-bg-color);
|
|
||||||
padding: 0.4rem;
|
|
||||||
margin-top: 0em !important;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.heading:not(:empty).highlight, .heading:not(:empty).active, .preview.active .heading:not(:empty) {
|
|
||||||
background-color: var(--heading-bg-highlight-color);
|
|
||||||
color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
.heading.title {
|
|
||||||
background-color: var(--heading-title-bg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
|
||||||
position: relative;
|
|
||||||
background-size: cover;
|
|
||||||
margin-bottom: 2rem !important;
|
|
||||||
}
|
|
||||||
.preview.preview-item {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.preview.columns, .preview .headings.columns {
|
|
||||||
margin-left: 0em;
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
.preview.columns .column, .preview .headings.columns .column {
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
.preview .title, .preview .title:not(:last-child) {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
margin-bottom: unset;
|
|
||||||
}
|
|
||||||
.preview .subtitle {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
margin-bottom: unset;
|
|
||||||
}
|
|
||||||
.preview .headings {
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
.preview .headings > * {
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
.preview .headings .column {
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
.preview .headings a {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
.preview.tiny .content {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.preview .content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1380px) {
|
|
||||||
:root {
|
|
||||||
--preview-cover-size: 18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.preview-cover {
|
|
||||||
background-size: cover;
|
|
||||||
background-color: transparent !important;
|
|
||||||
height: var(--preview-cover-size);
|
|
||||||
width: var(--preview-cover-size);
|
|
||||||
min-width: var(--preview-cover-size);
|
|
||||||
}
|
|
||||||
.preview-cover.small, .preview.small .preview-cover {
|
|
||||||
min-width: unset;
|
|
||||||
height: var(--preview-cover-small-size);
|
|
||||||
width: var(--preview-cover-small-size) !important;
|
|
||||||
min-width: var(--preview-cover-small-size);
|
|
||||||
}
|
|
||||||
.preview-cover.tiny, .preview.tiny .preview-cover {
|
|
||||||
min-width: unset;
|
|
||||||
height: var(--preview-cover-tiny-size);
|
|
||||||
width: var(--preview-cover-tiny-size) !important;
|
|
||||||
min-width: var(--preview-cover-tiny-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.preview-header:not(.no-cover) {
|
|
||||||
min-height: var(--header-height);
|
|
||||||
}
|
|
||||||
.preview-header.no-cover {
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
.preview-header .headings {
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
.preview-header .headings, .preview-header > .container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.preview-header > .container {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview.comment .title {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
.preview.comment .subtitle {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.list-item:not(:first-child) {
|
|
||||||
margin-top: 0.6rem;
|
|
||||||
}
|
|
||||||
.list-item .headings {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding-top: 0em;
|
|
||||||
margin-bottom: 1.2rem !important;
|
|
||||||
}
|
|
||||||
.list-item .headings .title {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
.list-item .subtitle {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.list-item .media-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.list-item:not(.no-cover) .list-item .media-content {
|
|
||||||
min-height: var(--preview-cover-small-size);
|
|
||||||
}
|
|
||||||
.list-item .media-content .content {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: auto;
|
|
||||||
}
|
|
||||||
.list-item .media-content .actions {
|
|
||||||
flex-grow: unset;
|
|
||||||
text-align: right;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-wide {
|
|
||||||
height: var(--preview-cover-size);
|
|
||||||
}
|
|
||||||
.preview-wide .headings {
|
|
||||||
height: var(--preview-cover-size);
|
|
||||||
}
|
|
||||||
.preview-wide:not(.header) .headings {
|
|
||||||
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.preview-wide .headings {
|
|
||||||
width: var(--preview-cover-size);
|
|
||||||
min-width: var(--preview-cover-size);
|
|
||||||
flex-grow: 0;
|
|
||||||
margin-right: 1.2rem;
|
|
||||||
}
|
|
||||||
.preview-wide .content {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-card {
|
|
||||||
height: var(--preview-cover-size);
|
|
||||||
width: var(--preview-cover-size);
|
|
||||||
}
|
|
||||||
.preview-card:not(.header) {
|
|
||||||
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.card-grid .preview-card {
|
|
||||||
min-width: unset;
|
|
||||||
}
|
|
||||||
.preview-card .actions {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0.6rem;
|
|
||||||
right: 0.6rem;
|
|
||||||
}
|
|
||||||
.preview-card .actions label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-card-headings {
|
|
||||||
padding-top: 0.6rem;
|
|
||||||
}
|
|
||||||
.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
preview-header:not(.no-cover) .preview-card-headings .heading {
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header.preview-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: start;
|
|
||||||
gap: 0.6rem;
|
|
||||||
min-height: unset;
|
|
||||||
padding-top: 0.6rem !important;
|
|
||||||
}
|
|
||||||
.header.preview-header .headings {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
.header img {
|
|
||||||
height: var(--preview-cover-size);
|
|
||||||
max-width: calc(var(--preview-cover-size) * 2);
|
|
||||||
}
|
|
||||||
.header .title {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
.header .subtitle {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
gap: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-carousel {
|
|
||||||
padding-bottom: var(--a-carousel-pb);
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-carousel-container {
|
|
||||||
width: 100%;
|
|
||||||
gap: var(--a-carousel-gap);
|
|
||||||
transition: margin-left 1s;
|
|
||||||
}
|
|
||||||
.a-carousel-container > * {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-carousel-button-container button, .a-carousel-button-container .button {
|
|
||||||
z-index: 1000;
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
.a-carousel-button-container button.prev, .a-carousel-button-container .button.prev {
|
|
||||||
left: var(--a-carousel-nav-x);
|
|
||||||
}
|
|
||||||
.a-carousel-button-container button.next, .a-carousel-button-container .button.next {
|
|
||||||
right: var(--a-carousel-nav-x);
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-progress {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 0em;
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
.a-progress:hover {
|
|
||||||
background-color: var(--a-progress-bg);
|
|
||||||
}
|
|
||||||
.a-progress .a-progress-bar-container {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
.a-progress > time, .a-progress .a-progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
padding: var(--a-progress-bar-pd);
|
|
||||||
}
|
|
||||||
.a-progress .a-progress-bar {
|
|
||||||
background-color: var(--a-progress-bar-bg);
|
|
||||||
color: var(--a-progress-bar-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist .header, .a-playlist .header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.playlist .title, .a-playlist .title {
|
|
||||||
font-size: var(--a-playlist-title-sz);
|
|
||||||
margin: 0;
|
|
||||||
padding: var(--a-playlist-title-pd);
|
|
||||||
}
|
|
||||||
.playlist li, .a-playlist li {
|
|
||||||
list-style: none;
|
|
||||||
border-bottom: var(--a-playlist-item-border);
|
|
||||||
}
|
|
||||||
.playlist li:last-child, .a-playlist li:last-child {
|
|
||||||
border-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-sound-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: var(--a-sound-bg);
|
|
||||||
}
|
|
||||||
.a-sound-item.playing, .a-sound-item.playing .title {
|
|
||||||
color: var(--a-sound-playing-fg) !important;
|
|
||||||
}
|
|
||||||
.a-sound-item:hover {
|
|
||||||
background-color: var(--a-sound-hv-bg);
|
|
||||||
}
|
|
||||||
.a-sound-item:hover .title {
|
|
||||||
color: var(--a-sound-hv-fg) !important;
|
|
||||||
}
|
|
||||||
.a-sound-item .title:hover::before, .a-sound-item.playing .title::before {
|
|
||||||
content: "\f04b";
|
|
||||||
font-family: "Font Awesome 6 Free";
|
|
||||||
margin-right: 0.6em;
|
|
||||||
}
|
|
||||||
.a-sound-item.playing .title:hover::before {
|
|
||||||
content: "";
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.a-sound-item .title {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0em;
|
|
||||||
padding: 0.6em;
|
|
||||||
font-size: var(--a-sound-title-sz);
|
|
||||||
}
|
|
||||||
.a-sound-item .title .icon {
|
|
||||||
padding: 0em 0.6rem;
|
|
||||||
}
|
|
||||||
.a-sound-item .button {
|
|
||||||
width: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-container {
|
|
||||||
z-index: 1000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player {
|
|
||||||
box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.a-player a {
|
|
||||||
color: var(--a-player-url-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-panels {
|
|
||||||
background: var(--a-player-panel-bg);
|
|
||||||
height: 0%;
|
|
||||||
transition: height 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-panels.is-open {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-panel {
|
|
||||||
padding-bottom: 0.6rem;
|
|
||||||
max-height: 80%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.a-player-panel .a-sound-item:not(:hover) {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-progress {
|
|
||||||
height: 0.4em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.a-player-progress time {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.a-player-progress:hover, .a-player-panels.is-open + .a-player-progress {
|
|
||||||
background: var(--a-player-bar-bg);
|
|
||||||
height: 2em;
|
|
||||||
}
|
|
||||||
.a-player-progress:hover time, .a-player-panels.is-open + .a-player-progress time {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
height: 3.75em !important;
|
|
||||||
border-top: 1px #ddd solid;
|
|
||||||
background: var(--a-player-bar-bg);
|
|
||||||
}
|
|
||||||
.a-player-bar > * {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.a-player-bar .cover {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.a-player-bar .title {
|
|
||||||
font-size: 1rem;
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
.a-player-bar .title:last-child {
|
|
||||||
font-size: var(--a-player-bar-title-alone-sz);
|
|
||||||
}
|
|
||||||
.a-player-bar .button {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
height: 100%;
|
|
||||||
padding: auto 0.2em !important;
|
|
||||||
min-width: 3em;
|
|
||||||
border-radius: 0px;
|
|
||||||
transition: background-color 0.5s;
|
|
||||||
}
|
|
||||||
.a-player-bar .button.open {
|
|
||||||
background-color: var(--highlight-color-2-alpha);
|
|
||||||
color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-player-bar-content {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding-top: 0.6rem;
|
|
||||||
padding-left: 0.6rem;
|
|
||||||
padding-right: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.half-field:not(:active):not(:hover) {
|
input.half-field:not(:active):not(:hover) {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
|||||||
@ -7,10 +7,13 @@
|
|||||||
--heading-bg-color: var(--highlight-color);
|
--heading-bg-color: var(--highlight-color);
|
||||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||||
--heading-font-family: default;
|
--heading-font-family: default;
|
||||||
|
--preview-title-sz: 1.6rem;
|
||||||
|
--preview-subtitle-sz: 1.4rem;
|
||||||
--preview-cover-size: 24rem;
|
--preview-cover-size: 24rem;
|
||||||
--preview-cover-small-size: 10rem;
|
--preview-cover-small-size: 10rem;
|
||||||
--preview-cover-tiny-size: 4rem;
|
--preview-cover-tiny-size: 4rem;
|
||||||
--header-height: 30rem;
|
--preview-wide-content-sz: 1.6rem;
|
||||||
|
--header-height: var(--preview-cover-size);
|
||||||
--a-carousel-pb: 1.4rem;
|
--a-carousel-pb: 1.4rem;
|
||||||
--a-carousel-gap: 1.2rem;
|
--a-carousel-gap: 1.2rem;
|
||||||
--a-carousel-nav-x: -0.6em;
|
--a-carousel-nav-x: -0.6em;
|
||||||
@ -38,6 +41,37 @@
|
|||||||
--button-active-bg: var(--highlight-color-2);
|
--button-active-bg: var(--highlight-color-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1380px) {
|
||||||
|
:root {
|
||||||
|
--section-content-sz: 1rem;
|
||||||
|
--preview-title-sz: 1rem;
|
||||||
|
--preview-subtitle-sz: 1rem;
|
||||||
|
--preview-cover-size: 14rem;
|
||||||
|
--preview-cover-small-size: 10rem;
|
||||||
|
--preview-cover-tiny-size: 4rem;
|
||||||
|
--preview-wide-content-sz: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title.is-1 {
|
||||||
|
font-size: var(--title-1-sz);
|
||||||
|
}
|
||||||
|
.title.is-2 {
|
||||||
|
font-size: var(--title-2-sz);
|
||||||
|
}
|
||||||
|
.title.is-3 {
|
||||||
|
font-size: var(--title-3-sz);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle.is-1 {
|
||||||
|
font-size: var(--title-1-sz);
|
||||||
|
}
|
||||||
|
.subtitle.is-2 {
|
||||||
|
font-size: var(--title-2-sz);
|
||||||
|
}
|
||||||
|
.subtitle.is-3 {
|
||||||
|
font-size: var(--title-3-sz);
|
||||||
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -72,12 +106,12 @@
|
|||||||
}
|
}
|
||||||
.preview .title, .preview .title:not(:last-child) {
|
.preview .title, .preview .title:not(:last-child) {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-title-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
.preview .subtitle {
|
.preview .subtitle {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-subtitle-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
.preview .headings {
|
.preview .headings {
|
||||||
@ -101,11 +135,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1380px) {
|
|
||||||
:root {
|
|
||||||
--preview-cover-size: 18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.preview-cover {
|
.preview-cover {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
@ -145,13 +174,6 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview.comment .title {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
.preview.comment .subtitle {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -203,11 +225,12 @@
|
|||||||
margin-right: 1.2rem;
|
margin-right: 1.2rem;
|
||||||
}
|
}
|
||||||
.preview-wide .content {
|
.preview-wide .content {
|
||||||
font-size: 1.6rem;
|
font-size: var(--preview-wide-content-sz);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-card {
|
.preview-card {
|
||||||
|
padding: 0rem !important;
|
||||||
height: var(--preview-cover-size);
|
height: var(--preview-cover-size);
|
||||||
width: var(--preview-cover-size);
|
width: var(--preview-cover-size);
|
||||||
}
|
}
|
||||||
@ -226,30 +249,31 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-card-headings {
|
.card-headings, .preview-card-headings {
|
||||||
padding-top: 0.6rem;
|
padding-top: 0.6rem;
|
||||||
}
|
}
|
||||||
.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
|
.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
|
||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
preview-header:not(.no-cover) .preview-card-headings .heading {
|
preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading {
|
||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.preview-header {
|
.header.preview-header {
|
||||||
display: flex;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
padding-top: 0.6rem !important;
|
padding-top: 0.6rem !important;
|
||||||
}
|
}
|
||||||
.header.preview-header .headings {
|
.header .headings {
|
||||||
|
width: unset;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.header img {
|
.header.has-cover {
|
||||||
height: var(--preview-cover-size);
|
min-height: calc(var(--header-height) / 2);
|
||||||
max-width: calc(var(--preview-cover-size) * 2);
|
|
||||||
}
|
}
|
||||||
.header .title {
|
.header .title {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-cover:not(:only-child) {
|
||||||
|
float: right;
|
||||||
|
height: var(--header-height);
|
||||||
|
max-width: calc(var(--header-height) * 2);
|
||||||
|
margin: 0 0 1.2rem 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover:only-child {
|
||||||
|
with: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.container.header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container.header .headings {
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.container.header .header-cover {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
height: unset;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
.card-grid {
|
.card-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
@ -735,7 +787,7 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: hsl(0deg, 0%, 29%);
|
color: #000;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -7251,7 +7303,7 @@ a.tag:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: hsl(0deg, 0%, 21%);
|
color: #000;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.125;
|
line-height: 1.125;
|
||||||
@ -7351,12 +7403,14 @@ a.tag:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.schedules {
|
.schedules {
|
||||||
margin: 0;
|
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
margin-bottom: -0.6rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.schedule {
|
.schedule {
|
||||||
margin-bottom: 0.4rem;
|
display: inline-block;
|
||||||
|
margin: 0.6rem;
|
||||||
|
margin-left: 0rem;
|
||||||
}
|
}
|
||||||
.schedule .day {
|
.schedule .day {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -7591,7 +7645,6 @@ nav li a, nav li .button {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: 0.6rem;
|
margin-top: 0.6rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
}
|
||||||
.nav-urls > a:only-child {
|
.nav-urls > a:only-child {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -7618,18 +7671,80 @@ nav li a, nav li .button {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header.preview-header {
|
||||||
|
align-items: start;
|
||||||
|
gap: 0.6rem;
|
||||||
|
min-height: unset;
|
||||||
|
padding-top: 0.6rem !important;
|
||||||
|
}
|
||||||
|
.header .headings {
|
||||||
|
width: unset;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.header.has-cover {
|
||||||
|
min-height: calc(var(--header-height) / 2);
|
||||||
|
}
|
||||||
|
.header .title {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.header .subtitle {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover:not(:only-child) {
|
||||||
|
float: right;
|
||||||
|
height: var(--header-height);
|
||||||
|
max-width: calc(var(--header-height) * 2);
|
||||||
|
margin: 0 0 1.2rem 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover:only-child {
|
||||||
|
with: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.page-content:not(:last-child) {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
body {
|
||||||
.container.header {
|
font-size: 1.4em;
|
||||||
margin-right: 0 !important;
|
}
|
||||||
margin-left: 0 !important;
|
|
||||||
|
@media screen and (max-width: 1380px) {
|
||||||
|
body {
|
||||||
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
.page .container {
|
.page .container {
|
||||||
margin-left: 1.2rem;
|
margin-left: 1.2rem;
|
||||||
margin-right: 1.2rem;
|
margin-right: 1.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.page .container {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
}
|
||||||
|
.container.header {
|
||||||
|
width: calc(100% - 0.4rem);
|
||||||
|
}
|
||||||
|
.container.header .headings {
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.container.header .header-cover {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
height: unset;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -82,35 +82,48 @@ Usefull context:
|
|||||||
{% block main-container %}
|
{% block main-container %}
|
||||||
<main class="page">
|
<main class="page">
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
{% block header-container %}
|
||||||
<header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
|
<header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<div class="headings preview-card-headings">
|
{% if cover %}
|
||||||
|
<img src="{{ cover }}" class="header-cover">
|
||||||
|
{% endif %}
|
||||||
|
<div class="headings preview-card-headings">
|
||||||
{% block headings %}
|
{% block headings %}
|
||||||
<div>
|
<div>
|
||||||
<h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
|
<h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="heading subtitle is-3">
|
{% spaceless %}
|
||||||
{% block subtitle %}
|
<span class="heading subtitle is-3">
|
||||||
{% if subtitle %}
|
{% block subtitle %}
|
||||||
{{ subtitle }}
|
{% if subtitle %}
|
||||||
{% elif parent and parent.is_published %}
|
{{ subtitle }}
|
||||||
<a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
|
{% elif parent and parent.is_published %}
|
||||||
<span class="icon">
|
<a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
|
||||||
<i class="fa fa-angles-right"></i>
|
<span class="icon">
|
||||||
</span>
|
<i class="fa fa-angles-right"></i>
|
||||||
{{ parent.title }}
|
</span>
|
||||||
</a>
|
{{ parent.title }}
|
||||||
{% endif %}
|
</a>
|
||||||
</span>
|
{% elif page and page.category %}
|
||||||
{% endblock %}
|
<a href="{% url "page-list" %}?category__id={{ page.category.id }}">
|
||||||
</span>
|
<span class="icon">
|
||||||
</div>
|
<i class="fa fa-angles-right"></i>
|
||||||
|
</span>
|
||||||
|
{{ page.category.title }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
</span>
|
||||||
|
{% endspaceless %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
<img src="{{ cover }}">
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content-container %}
|
{% block content-container %}
|
||||||
<div class="container content">
|
<div class="container content">
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
{% block content-container %}
|
{% block content-container %}
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|
||||||
<div class="container">
|
<div class="container clear-both">
|
||||||
|
|
||||||
{% block before_list %}{% endblock %}
|
{% block before_list %}{% endblock %}
|
||||||
|
|
||||||
|
|||||||
@ -10,13 +10,6 @@ Context:
|
|||||||
- related_url: url to the full list of related_objects
|
- related_url: url to the full list of related_objects
|
||||||
{% endcomment %}
|
{% endcomment %}
|
||||||
|
|
||||||
{% block header_crumbs %}
|
|
||||||
{{ block.super }}
|
|
||||||
{% if page.category %}
|
|
||||||
{% if parent %} / {% endif %} {{ page.category.title }}
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block top-nav-tools %}
|
{% block top-nav-tools %}
|
||||||
{% has_perm page "change" as can_edit %}
|
{% has_perm page "change" as can_edit %}
|
||||||
{% if can_edit %}
|
{% if can_edit %}
|
||||||
|
|||||||
@ -4,12 +4,10 @@
|
|||||||
|
|
||||||
{% include "aircox/program_sidebar.html" %}
|
{% include "aircox/program_sidebar.html" %}
|
||||||
|
|
||||||
{% block headings %}
|
{% block content-container %}
|
||||||
|
|
||||||
{% with schedules=program.schedule_set.all %}
|
{% with schedules=program.schedule_set.all %}
|
||||||
{{ block.super }}
|
|
||||||
{% if schedules %}
|
{% if schedules %}
|
||||||
<section class="schedules">
|
<section class="container schedules">
|
||||||
{% for schedule in schedules %}
|
{% for schedule in schedules %}
|
||||||
<div class="schedule">
|
<div class="schedule">
|
||||||
<div class="heading">
|
<div class="heading">
|
||||||
@ -36,9 +34,6 @@
|
|||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content-container %}
|
|
||||||
|
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
|
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block inner %}
|
{% block inner %}
|
||||||
{% block headings-container %}
|
{% block headings-container %}
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|||||||
@ -11,13 +11,14 @@ Styling related context:
|
|||||||
- is_active: add "active" css class
|
- is_active: add "active" css class
|
||||||
- is_small: add "small" css class
|
- is_small: add "small" css class
|
||||||
- is_tiny: add "tiny" css class
|
- is_tiny: add "tiny" css class
|
||||||
|
- tag
|
||||||
- tag_class: css class to set to main tag
|
- tag_class: css class to set to main tag
|
||||||
- tag_extra: extra tag attributes
|
- tag_extra: extra tag attributes
|
||||||
|
|
||||||
{% endcomment %}
|
{% endcomment %}
|
||||||
|
|
||||||
{% block outer %}
|
{% block outer %}
|
||||||
<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}active {% endif %}{% block tag-class %}{{ tag_class|default:"" }} {% endblock %}" {% block tag-extra %}{% endblock %}>
|
<{{ tag|default:"article" }} class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}active {% endif %}{% block tag-class %}{{ tag_class|default:"" }} {% endblock %}" {% block tag-extra %}{% endblock %}>
|
||||||
{% block inner %}
|
{% block inner %}
|
||||||
{% block headings-container %}
|
{% block headings-container %}
|
||||||
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
|
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
|
||||||
@ -50,5 +51,5 @@ Styling related context:
|
|||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</article>
|
</{{ tag|default:"article" }}>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@ -25,6 +25,9 @@ def do_page_widget(context, widget, object, dir="aircox/widgets", **ctx):
|
|||||||
ctx["request"] = context["request"]
|
ctx["request"] = context["request"]
|
||||||
ctx["object"] = object
|
ctx["object"] = object
|
||||||
ctx["widget"] = widget
|
ctx["widget"] = widget
|
||||||
|
if object.pk and not ctx.get("tag_id"):
|
||||||
|
model = type(object)._meta.model_name
|
||||||
|
ctx["tag_id"] = f"{widget}_{model}_{object.pk}"
|
||||||
ctx["widget_template"] = f"{dir}/{widget}.html"
|
ctx["widget_template"] = f"{dir}/{widget}.html"
|
||||||
return render_to_string(object.get_template_name(widget), ctx)
|
return render_to_string(object.get_template_name(widget), ctx)
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
@use "./vars" as v;
|
@use "./vars" as v;
|
||||||
@import "./vendor";
|
@import "./vendor";
|
||||||
@import "./helpers";
|
@import "./helpers";
|
||||||
@import "./components";
|
|
||||||
|
|
||||||
//-- helpers/modifiers
|
//-- helpers/modifiers
|
||||||
//-- forms
|
//-- forms
|
||||||
|
|||||||
@ -7,10 +7,13 @@
|
|||||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||||
--heading-font-family: default;
|
--heading-font-family: default;
|
||||||
|
|
||||||
|
--preview-title-sz: #{v.$text-size-bigger};
|
||||||
|
--preview-subtitle-sz: #{v.$text-size-medium};
|
||||||
--preview-cover-size: 24rem;
|
--preview-cover-size: 24rem;
|
||||||
--preview-cover-small-size: 10rem;
|
--preview-cover-small-size: 10rem;
|
||||||
--preview-cover-tiny-size: 4rem;
|
--preview-cover-tiny-size: 4rem;
|
||||||
--header-height: 30rem;
|
--preview-wide-content-sz: #{v.$text-size-bigger};
|
||||||
|
--header-height: var(--preview-cover-size);
|
||||||
|
|
||||||
--a-carousel-pb: #{v.$text-size-medium};
|
--a-carousel-pb: #{v.$text-size-medium};
|
||||||
--a-carousel-gap: #{v.$mp-4};
|
--a-carousel-gap: #{v.$mp-4};
|
||||||
@ -45,8 +48,33 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: v.$screen-wide) {
|
||||||
|
:root {
|
||||||
|
--section-content-sz: 1rem;
|
||||||
|
|
||||||
|
--preview-title-sz: #{v.$text-size};
|
||||||
|
--preview-subtitle-sz: #{v.$text-size};
|
||||||
|
--preview-cover-size: 14rem;
|
||||||
|
--preview-cover-small-size: 10rem;
|
||||||
|
--preview-cover-tiny-size: 4rem;
|
||||||
|
--preview-wide-content-sz: #{v.$text-size};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ---- ---- Preview & items
|
// ---- ---- Preview & items
|
||||||
// ---- heading
|
// ---- headings
|
||||||
|
.title {
|
||||||
|
&.is-1 { font-size: var(--title-1-sz); }
|
||||||
|
&.is-2 { font-size: var(--title-2-sz); }
|
||||||
|
&.is-3 { font-size: var(--title-3-sz); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
&.is-1 { font-size: var(--title-1-sz); }
|
||||||
|
&.is-2 { font-size: var(--title-2-sz); }
|
||||||
|
&.is-3 { font-size: var(--title-3-sz); }
|
||||||
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
@ -162,12 +190,12 @@
|
|||||||
.title, .title:not(:last-child) {
|
.title, .title:not(:last-child) {
|
||||||
// second is bulma reset
|
// second is bulma reset
|
||||||
font-weight: v.$weight-bold;
|
font-weight: v.$weight-bold;
|
||||||
font-size: v.$text-size-bigger;
|
font-size: var(--preview-title-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-weight: v.$weight-bolder;
|
font-weight: v.$weight-bolder;
|
||||||
font-size: v.$text-size-bigger;
|
font-size: var(--preview-subtitle-sz);
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
//.content, .actions {
|
//.content, .actions {
|
||||||
@ -193,18 +221,13 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: v.$screen-small) {
|
@media screen and (max-width: v.$screen-small) {
|
||||||
.preview .content {
|
.preview .content {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: v.$screen-wide) {
|
|
||||||
:root {
|
|
||||||
--preview-cover-size: 18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.preview-cover {
|
.preview-cover {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -253,13 +276,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ---- specific
|
|
||||||
.preview.comment {
|
|
||||||
.title { font-size: v.$text-size-bigger; }
|
|
||||||
.subtitle { font-size: v.$text-size; }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// ---- list
|
// ---- list
|
||||||
.list-item {
|
.list-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -325,14 +341,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .content {
|
& .content {
|
||||||
font-size: v.$text-size-bigger;
|
font-size: var(--preview-wide-content-sz);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ---- card
|
// ---- card
|
||||||
|
|
||||||
.preview-card {
|
.preview-card {
|
||||||
|
padding: 0rem !important;
|
||||||
|
|
||||||
height: var(--preview-cover-size);
|
height: var(--preview-cover-size);
|
||||||
width: var(--preview-cover-size);
|
width: var(--preview-cover-size);
|
||||||
|
|
||||||
@ -356,7 +375,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.preview-card-headings {
|
.card-headings, .preview-card-headings {
|
||||||
padding-top: v.$mp-3;
|
padding-top: v.$mp-3;
|
||||||
|
|
||||||
& > div:not(:last-child),
|
& > div:not(:last-child),
|
||||||
@ -373,21 +392,25 @@
|
|||||||
// ---- page header
|
// ---- page header
|
||||||
.header {
|
.header {
|
||||||
&.preview-header {
|
&.preview-header {
|
||||||
display: flex;
|
//display: flex;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: v.$mp-3;
|
gap: v.$mp-3;
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
padding-top: v.$mp-3 !important;
|
padding-top: v.$mp-3 !important;
|
||||||
|
|
||||||
.headings {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
img {
|
|
||||||
height: var(--preview-cover-size);
|
.headings {
|
||||||
max-width: calc(var(--preview-cover-size) * 2);
|
width: unset;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-cover {
|
||||||
|
min-height: calc( var(--header-height) / 2 );
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@ -399,6 +422,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header-cover:not(:only-child) {
|
||||||
|
float: right;
|
||||||
|
height: var(--header-height);
|
||||||
|
max-width: calc(var(--header-height) * 2);
|
||||||
|
margin: 0 0 v.$mp-4 v.$mp-4;
|
||||||
|
}
|
||||||
|
.header-cover:only-child {
|
||||||
|
with: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: v.$screen-small) {
|
||||||
|
.container.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.headings {
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
height: unset;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// ---- card grid
|
// ---- card grid
|
||||||
.card-grid {
|
.card-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@ -3,11 +3,16 @@
|
|||||||
.align-left { text-align: left; justify-content: left; }
|
.align-left { text-align: left; justify-content: left; }
|
||||||
.align-right { text-align: right; justify-content: right; }
|
.align-right { text-align: right; justify-content: right; }
|
||||||
|
|
||||||
|
.clear-left { clear: left !important }
|
||||||
|
.clear-right { clear: right !important }
|
||||||
|
.clear-both { clear: both !important }
|
||||||
|
|
||||||
.d-inline { display: inline !important; }
|
.d-inline { display: inline !important; }
|
||||||
.d-block { display: block !important; }
|
.d-block { display: block !important; }
|
||||||
.d-inline-block { display: inline-block !important; }
|
.d-inline-block { display: inline-block !important; }
|
||||||
|
|
||||||
.flex-push-right { margin-left: auto; }
|
.push-right, .flex-push-right { margin-left: auto !important; }
|
||||||
|
.push-bottom { margin-top: auto !important; }
|
||||||
.flex-grow-0 { flex-grow: 0 !important; }
|
.flex-grow-0 { flex-grow: 0 !important; }
|
||||||
|
|
||||||
.float-right { float: right }
|
.float-right { float: right }
|
||||||
|
|||||||
@ -44,12 +44,14 @@
|
|||||||
|
|
||||||
|
|
||||||
.schedules {
|
.schedules {
|
||||||
margin: 0;
|
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
margin-bottom: calc(0rem - v.$mp-3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.schedule {
|
.schedule {
|
||||||
margin-bottom: v.$mp-2;
|
display: inline-block;
|
||||||
|
margin: v.$mp-3;
|
||||||
|
margin-left: 0rem;
|
||||||
|
|
||||||
.day {
|
.day {
|
||||||
font-weight: v.$weight-bold;
|
font-weight: v.$weight-bold;
|
||||||
@ -268,7 +270,6 @@ nav li {
|
|||||||
|
|
||||||
margin-top: v.$mp-3;
|
margin-top: v.$mp-3;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: v.$text-size-medium;
|
|
||||||
|
|
||||||
> a:only-child {
|
> a:only-child {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -302,19 +303,66 @@ nav li {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---- page header
|
||||||
|
.header {
|
||||||
|
&.preview-header {
|
||||||
|
//display: flex;
|
||||||
|
align-items: start;
|
||||||
|
gap: v.$mp-3;
|
||||||
|
min-height: unset;
|
||||||
|
padding-top: v.$mp-3 !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.headings {
|
||||||
|
width: unset;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-cover {
|
||||||
|
min-height: calc( var(--header-height) / 2 );
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: v.$h1-size;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: v.$h2-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header-cover:not(:only-child) {
|
||||||
|
float: right;
|
||||||
|
height: var(--header-height);
|
||||||
|
max-width: calc(var(--header-height) * 2);
|
||||||
|
margin: 0 0 v.$mp-4 v.$mp-4;
|
||||||
|
}
|
||||||
|
.header-cover:only-child {
|
||||||
|
with: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
// ---- ---- detail
|
// ---- ---- detail
|
||||||
.page-content {
|
.page-content {
|
||||||
margin-top: v.$mp-6;
|
margin-top: v.$mp-6;
|
||||||
margin-bottom: v.$mp-6;
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: v.$mp-6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- responsive
|
// ---- responsive
|
||||||
@media screen and (max-width: v.$screen-normal) {
|
body { font-size: 1.4em; }
|
||||||
.container.header {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@media screen and (max-width: v.$screen-wide) {
|
||||||
|
body { font-size: 1em; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: v.$screen-normal) {
|
||||||
.page .container {
|
.page .container {
|
||||||
margin-left: v.$mp-4;
|
margin-left: v.$mp-4;
|
||||||
margin-right: v.$mp-4;
|
margin-right: v.$mp-4;
|
||||||
@ -322,4 +370,27 @@ nav li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: v.$screen-small) {
|
@media screen and (max-width: v.$screen-small) {
|
||||||
|
.page .container {
|
||||||
|
margin-left: v.$mp-2;
|
||||||
|
margin-right: v.$mp-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.header {
|
||||||
|
width: calc( 100% - v.$mp-2 );
|
||||||
|
|
||||||
|
.headings {
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cover {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
height: unset;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,12 @@
|
|||||||
@import 'v-calendar/style.css';
|
@import 'v-calendar/style.css';
|
||||||
|
|
||||||
|
// ---- bulma
|
||||||
|
$body-color: #000;
|
||||||
|
$title-color: #000;
|
||||||
|
|
||||||
|
|
||||||
@import "~bulma/sass/utilities/_all.sass";
|
@import "~bulma/sass/utilities/_all.sass";
|
||||||
|
|
||||||
$menu-item-hover-background-color: #dfdfdf;
|
|
||||||
$menu-item-active-background-color: #d2d2d2;
|
|
||||||
|
|
||||||
@import "~bulma/sass/base/_all";
|
@import "~bulma/sass/base/_all";
|
||||||
@import "~bulma/sass/components/dropdown";
|
@import "~bulma/sass/components/dropdown";
|
||||||
|
|||||||
15
notes.md
15
notes.md
@ -1,3 +1,18 @@
|
|||||||
|
# TODO
|
||||||
|
- card: url
|
||||||
|
- page header:
|
||||||
|
- content inline
|
||||||
|
- responsive
|
||||||
|
|
||||||
|
|
||||||
|
# Proposals
|
||||||
|
- diffusion list view for a program + link on program page view
|
||||||
|
- add podcast list to playlist
|
||||||
|
- pause on "space" key
|
||||||
|
|
||||||
|
|
||||||
|
##############
|
||||||
|
|
||||||
This file is used as a reminder, can be used as crappy documentation too.
|
This file is used as a reminder, can be used as crappy documentation too.
|
||||||
|
|
||||||
- player
|
- player
|
||||||
|
|||||||
Reference in New Issue
Block a user