page headers, various fixes, responsive
This commit is contained in:
bkfox
parent
a3c21c64ed
commit
eaa1e2412a
|
|
@ -7,10 +7,13 @@
|
|||
--heading-bg-color: var(--highlight-color);
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
--heading-font-family: default;
|
||||
--preview-title-sz: 1.6rem;
|
||||
--preview-subtitle-sz: 1.4rem;
|
||||
--preview-cover-size: 24rem;
|
||||
--preview-cover-small-size: 10rem;
|
||||
--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-gap: 1.2rem;
|
||||
--a-carousel-nav-x: -0.6em;
|
||||
|
|
@ -38,6 +41,37 @@
|
|||
--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 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -72,12 +106,12 @@
|
|||
}
|
||||
.preview .title, .preview .title:not(:last-child) {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-title-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.preview .subtitle {
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-subtitle-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.preview .headings {
|
||||
|
|
@ -101,11 +135,6 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1380px) {
|
||||
:root {
|
||||
--preview-cover-size: 18em;
|
||||
}
|
||||
}
|
||||
.preview-cover {
|
||||
background-size: cover;
|
||||
background-color: transparent !important;
|
||||
|
|
@ -145,13 +174,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.preview.comment .title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.preview.comment .subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -203,11 +225,12 @@
|
|||
margin-right: 1.2rem;
|
||||
}
|
||||
.preview-wide .content {
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-wide-content-sz);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
padding: 0rem !important;
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
}
|
||||
|
|
@ -226,30 +249,31 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.preview-card-headings {
|
||||
.card-headings, .preview-card-headings {
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
.header.preview-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.6rem;
|
||||
min-height: unset;
|
||||
padding-top: 0.6rem !important;
|
||||
}
|
||||
.header.preview-header .headings {
|
||||
.header .headings {
|
||||
width: unset;
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header img {
|
||||
height: var(--preview-cover-size);
|
||||
max-width: calc(var(--preview-cover-size) * 2);
|
||||
.header.has-cover {
|
||||
min-height: calc(var(--header-height) / 2);
|
||||
}
|
||||
.header .title {
|
||||
font-size: 40px;
|
||||
|
|
@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@ pre {
|
|||
}
|
||||
|
||||
body {
|
||||
color: hsl(0deg, 0%, 29%);
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
|
@ -6820,7 +6820,7 @@ a.tag:hover {
|
|||
}
|
||||
|
||||
.title {
|
||||
color: hsl(0deg, 0%, 21%);
|
||||
color: #000;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.125;
|
||||
|
|
@ -6899,6 +6899,18 @@ a.tag:hover {
|
|||
justify-content: right;
|
||||
}
|
||||
|
||||
.clear-left {
|
||||
clear: left !important;
|
||||
}
|
||||
|
||||
.clear-right {
|
||||
clear: right !important;
|
||||
}
|
||||
|
||||
.clear-both {
|
||||
clear: both !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
|
@ -6911,8 +6923,12 @@ a.tag:hover {
|
|||
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 {
|
||||
|
|
@ -7028,459 +7044,6 @@ a.tag:hover {
|
|||
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) {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@
|
|||
--heading-bg-color: var(--highlight-color);
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
--heading-font-family: default;
|
||||
--preview-title-sz: 1.6rem;
|
||||
--preview-subtitle-sz: 1.4rem;
|
||||
--preview-cover-size: 24rem;
|
||||
--preview-cover-small-size: 10rem;
|
||||
--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-gap: 1.2rem;
|
||||
--a-carousel-nav-x: -0.6em;
|
||||
|
|
@ -38,6 +41,37 @@
|
|||
--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 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -72,12 +106,12 @@
|
|||
}
|
||||
.preview .title, .preview .title:not(:last-child) {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-title-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.preview .subtitle {
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-subtitle-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.preview .headings {
|
||||
|
|
@ -101,11 +135,6 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1380px) {
|
||||
:root {
|
||||
--preview-cover-size: 18em;
|
||||
}
|
||||
}
|
||||
.preview-cover {
|
||||
background-size: cover;
|
||||
background-color: transparent !important;
|
||||
|
|
@ -145,13 +174,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.preview.comment .title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.preview.comment .subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -203,11 +225,12 @@
|
|||
margin-right: 1.2rem;
|
||||
}
|
||||
.preview-wide .content {
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--preview-wide-content-sz);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
padding: 0rem !important;
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
}
|
||||
|
|
@ -226,30 +249,31 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.preview-card-headings {
|
||||
.card-headings, .preview-card-headings {
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
.header.preview-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.6rem;
|
||||
min-height: unset;
|
||||
padding-top: 0.6rem !important;
|
||||
}
|
||||
.header.preview-header .headings {
|
||||
.header .headings {
|
||||
width: unset;
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header img {
|
||||
height: var(--preview-cover-size);
|
||||
max-width: calc(var(--preview-cover-size) * 2);
|
||||
.header.has-cover {
|
||||
min-height: calc(var(--header-height) / 2);
|
||||
}
|
||||
.header .title {
|
||||
font-size: 40px;
|
||||
|
|
@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
|
@ -735,7 +787,7 @@ pre {
|
|||
}
|
||||
|
||||
body {
|
||||
color: hsl(0deg, 0%, 29%);
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
|
@ -7251,7 +7303,7 @@ a.tag:hover {
|
|||
}
|
||||
|
||||
.title {
|
||||
color: hsl(0deg, 0%, 21%);
|
||||
color: #000;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.125;
|
||||
|
|
@ -7351,12 +7403,14 @@ a.tag:hover {
|
|||
}
|
||||
|
||||
.schedules {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: -0.6rem !important;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
margin-bottom: 0.4rem;
|
||||
display: inline-block;
|
||||
margin: 0.6rem;
|
||||
margin-left: 0rem;
|
||||
}
|
||||
.schedule .day {
|
||||
font-weight: 700;
|
||||
|
|
@ -7591,7 +7645,6 @@ nav li a, nav li .button {
|
|||
flex-direction: row;
|
||||
margin-top: 0.6rem;
|
||||
text-align: right;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.nav-urls > a:only-child {
|
||||
margin-left: auto;
|
||||
|
|
@ -7618,18 +7671,80 @@ nav li a, nav li .button {
|
|||
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 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.page-content:not(:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container.header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
body {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1380px) {
|
||||
body {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.page .container {
|
||||
margin-left: 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 %}
|
||||
<main class="page">
|
||||
{% block main %}
|
||||
{% block header-container %}
|
||||
<header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
|
||||
{% block header %}
|
||||
<div class="headings preview-card-headings">
|
||||
{% block header %}
|
||||
{% if cover %}
|
||||
<img src="{{ cover }}" class="header-cover">
|
||||
{% endif %}
|
||||
<div class="headings preview-card-headings">
|
||||
{% block headings %}
|
||||
<div>
|
||||
<h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<span class="heading subtitle is-3">
|
||||
{% block subtitle %}
|
||||
{% if subtitle %}
|
||||
{{ subtitle }}
|
||||
{% elif parent and parent.is_published %}
|
||||
<a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angles-right"></i>
|
||||
</span>
|
||||
{{ parent.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endblock %}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
|
||||
</div>
|
||||
<div>
|
||||
{% spaceless %}
|
||||
<span class="heading subtitle is-3">
|
||||
{% block subtitle %}
|
||||
{% if subtitle %}
|
||||
{{ subtitle }}
|
||||
{% elif parent and parent.is_published %}
|
||||
<a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angles-right"></i>
|
||||
</span>
|
||||
{{ parent.title }}
|
||||
</a>
|
||||
{% elif page and page.category %}
|
||||
<a href="{% url "page-list" %}?category__id={{ page.category.id }}">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angles-right"></i>
|
||||
</span>
|
||||
{{ page.category.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</span>
|
||||
{% endspaceless %}
|
||||
</span>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<img src="{{ cover }}">
|
||||
{% endblock %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block content-container %}
|
||||
<div class="container content">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
{% block content-container %}
|
||||
{{ block.super }}
|
||||
|
||||
<div class="container">
|
||||
<div class="container clear-both">
|
||||
|
||||
{% block before_list %}{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,6 @@ Context:
|
|||
- related_url: url to the full list of related_objects
|
||||
{% endcomment %}
|
||||
|
||||
{% block header_crumbs %}
|
||||
{{ block.super }}
|
||||
{% if page.category %}
|
||||
{% if parent %} / {% endif %} {{ page.category.title }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block top-nav-tools %}
|
||||
{% has_perm page "change" as can_edit %}
|
||||
{% if can_edit %}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,10 @@
|
|||
|
||||
{% include "aircox/program_sidebar.html" %}
|
||||
|
||||
{% block headings %}
|
||||
|
||||
{% block content-container %}
|
||||
{% with schedules=program.schedule_set.all %}
|
||||
{{ block.super }}
|
||||
{% if schedules %}
|
||||
<section class="schedules">
|
||||
<section class="container schedules">
|
||||
{% for schedule in schedules %}
|
||||
<div class="schedule">
|
||||
<div class="heading">
|
||||
|
|
@ -36,9 +34,6 @@
|
|||
</section>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content-container %}
|
||||
|
||||
{{ block.super }}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
{% endblock %}
|
||||
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
|
||||
|
||||
|
||||
{% block inner %}
|
||||
{% block headings-container %}
|
||||
{{ block.super }}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,14 @@ Styling related context:
|
|||
- is_active: add "active" css class
|
||||
- is_small: add "small" css class
|
||||
- is_tiny: add "tiny" css class
|
||||
- tag
|
||||
- tag_class: css class to set to main tag
|
||||
- tag_extra: extra tag attributes
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
{% 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 headings-container %}
|
||||
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
|
||||
|
|
@ -50,5 +51,5 @@ Styling related context:
|
|||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</article>
|
||||
</{{ tag|default:"article" }}>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,9 @@ def do_page_widget(context, widget, object, dir="aircox/widgets", **ctx):
|
|||
ctx["request"] = context["request"]
|
||||
ctx["object"] = object
|
||||
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"
|
||||
return render_to_string(object.get_template_name(widget), ctx)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@use "./vars" as v;
|
||||
@import "./vendor";
|
||||
@import "./helpers";
|
||||
@import "./components";
|
||||
|
||||
//-- helpers/modifiers
|
||||
//-- forms
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@
|
|||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
--heading-font-family: default;
|
||||
|
||||
--preview-title-sz: #{v.$text-size-bigger};
|
||||
--preview-subtitle-sz: #{v.$text-size-medium};
|
||||
--preview-cover-size: 24rem;
|
||||
--preview-cover-small-size: 10rem;
|
||||
--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-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
|
||||
// ---- 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 {
|
||||
display: inline-block;
|
||||
|
||||
|
|
@ -162,12 +190,12 @@
|
|||
.title, .title:not(:last-child) {
|
||||
// second is bulma reset
|
||||
font-weight: v.$weight-bold;
|
||||
font-size: v.$text-size-bigger;
|
||||
font-size: var(--preview-title-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: v.$weight-bolder;
|
||||
font-size: v.$text-size-bigger;
|
||||
font-size: var(--preview-subtitle-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
//.content, .actions {
|
||||
|
|
@ -193,18 +221,13 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.preview .content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-wide) {
|
||||
:root {
|
||||
--preview-cover-size: 18em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preview-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-item {
|
||||
width: 100%;
|
||||
|
|
@ -325,14 +341,17 @@
|
|||
}
|
||||
|
||||
& .content {
|
||||
font-size: v.$text-size-bigger;
|
||||
font-size: var(--preview-wide-content-sz);
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- card
|
||||
|
||||
.preview-card {
|
||||
padding: 0rem !important;
|
||||
|
||||
height: 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;
|
||||
|
||||
& > div:not(:last-child),
|
||||
|
|
@ -373,21 +392,25 @@
|
|||
// ---- page header
|
||||
.header {
|
||||
&.preview-header {
|
||||
display: flex;
|
||||
//display: flex;
|
||||
align-items: start;
|
||||
gap: v.$mp-3;
|
||||
min-height: unset;
|
||||
padding-top: v.$mp-3 !important;
|
||||
|
||||
.headings {
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
img {
|
||||
height: var(--preview-cover-size);
|
||||
max-width: calc(var(--preview-cover-size) * 2);
|
||||
|
||||
.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 {
|
||||
|
|
@ -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 {
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,16 @@
|
|||
.align-left { text-align: left; justify-content: left; }
|
||||
.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-block { display: 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; }
|
||||
|
||||
.float-right { float: right }
|
||||
|
|
|
|||
|
|
@ -44,12 +44,14 @@
|
|||
|
||||
|
||||
.schedules {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: calc(0rem - v.$mp-3) !important;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
margin-bottom: v.$mp-2;
|
||||
display: inline-block;
|
||||
margin: v.$mp-3;
|
||||
margin-left: 0rem;
|
||||
|
||||
.day {
|
||||
font-weight: v.$weight-bold;
|
||||
|
|
@ -268,7 +270,6 @@ nav li {
|
|||
|
||||
margin-top: v.$mp-3;
|
||||
text-align: right;
|
||||
font-size: v.$text-size-medium;
|
||||
|
||||
> a:only-child {
|
||||
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
|
||||
.page-content {
|
||||
margin-top: v.$mp-6;
|
||||
margin-bottom: v.$mp-6;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: v.$mp-6;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- responsive
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.container.header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
body { font-size: 1.4em; }
|
||||
|
||||
@media screen and (max-width: v.$screen-wide) {
|
||||
body { font-size: 1em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.page .container {
|
||||
margin-left: v.$mp-4;
|
||||
margin-right: v.$mp-4;
|
||||
|
|
@ -322,4 +370,27 @@ nav li {
|
|||
}
|
||||
|
||||
@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';
|
||||
|
||||
// ---- bulma
|
||||
$body-color: #000;
|
||||
$title-color: #000;
|
||||
|
||||
|
||||
@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/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.
|
||||
|
||||
- player
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user