player link; page rendering
This commit is contained in:
		@ -2,14 +2,19 @@
 | 
			
		||||
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/admin.scss ***!
 | 
			
		||||
  \*************************************************************************************************************************************************************************************************************************************/
 | 
			
		||||
:root {
 | 
			
		||||
  --heading-height: 30rem;
 | 
			
		||||
  --title-1-sz: 2rem;
 | 
			
		||||
  --title-2-sz: 1.6rem;
 | 
			
		||||
  --title-3-sz: 1.4rem;
 | 
			
		||||
  --subtitle-1-sz: 1.8rem;
 | 
			
		||||
  --subtitle-2-sz: 1.6rem;
 | 
			
		||||
  --subtitle-3-sz: 1.4rem;
 | 
			
		||||
  --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-title-sz: 1.6rem;
 | 
			
		||||
  --preview-subtitle-sz: 1.4rem;
 | 
			
		||||
  --preview-cover-size: 24rem;
 | 
			
		||||
  --preview-title-sz: 1.4rem;
 | 
			
		||||
  --preview-subtitle-sz: 1rem;
 | 
			
		||||
  --preview-cover-size: 14rem;
 | 
			
		||||
  --preview-cover-small-size: 10rem;
 | 
			
		||||
  --preview-cover-tiny-size: 4rem;
 | 
			
		||||
  --preview-wide-content-sz: 1.6rem;
 | 
			
		||||
@ -30,11 +35,11 @@
 | 
			
		||||
  --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-text-sz: 1.4rem;
 | 
			
		||||
  --a-sound-text-sz: 1rem;
 | 
			
		||||
  --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;
 | 
			
		||||
  --a-player-bar-title-alone-sz: 1.4rem;
 | 
			
		||||
  --button-fg: var(--highlight-color-2);
 | 
			
		||||
  --button-bg: var(--highlight-color);
 | 
			
		||||
  --button-sec-bg: var(--highlight-color-alpha);
 | 
			
		||||
@ -48,31 +53,31 @@
 | 
			
		||||
  :root {
 | 
			
		||||
    --section-content-sz: 1rem;
 | 
			
		||||
    --preview-title-sz: 1rem;
 | 
			
		||||
    --preview-subtitle-sz: 1rem;
 | 
			
		||||
    --preview-cover-size: 14rem;
 | 
			
		||||
    --preview-cover-small-size: 10rem;
 | 
			
		||||
    --preview-subtitle-sz: 0.8rem;
 | 
			
		||||
    --preview-cover-size: 10rem;
 | 
			
		||||
    --preview-cover-small-size: 6rem;
 | 
			
		||||
    --preview-cover-tiny-size: 4rem;
 | 
			
		||||
    --preview-wide-content-sz: 1rem;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.title.is-1 {
 | 
			
		||||
.title.is-1, .header.preview .title.is-1 {
 | 
			
		||||
  font-size: var(--title-1-sz);
 | 
			
		||||
}
 | 
			
		||||
.title.is-2 {
 | 
			
		||||
.title.is-2, .header.preview .title.is-2 {
 | 
			
		||||
  font-size: var(--title-2-sz);
 | 
			
		||||
}
 | 
			
		||||
.title.is-3 {
 | 
			
		||||
.title.is-3, .header.preview .title.is-3 {
 | 
			
		||||
  font-size: var(--title-3-sz);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtitle.is-1 {
 | 
			
		||||
  font-size: var(--title-1-sz);
 | 
			
		||||
.subtitle.is-1, .header.preview .subtitle.is-1 {
 | 
			
		||||
  font-size: var(--subtitle-1-sz);
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-2 {
 | 
			
		||||
  font-size: var(--title-2-sz);
 | 
			
		||||
.subtitle.is-2, .header.preview .subtitle.is-2 {
 | 
			
		||||
  font-size: var(--subtitle-2-sz);
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-3 {
 | 
			
		||||
  font-size: var(--title-3-sz);
 | 
			
		||||
.subtitle.is-3, .header.preview .subtitle.is-3 {
 | 
			
		||||
  font-size: var(--subtitle-3-sz);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.heading {
 | 
			
		||||
@ -192,6 +197,7 @@
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
}
 | 
			
		||||
.list-item .subtitle {
 | 
			
		||||
  font-size: var(--preview-title-sz);
 | 
			
		||||
  text-align: right;
 | 
			
		||||
}
 | 
			
		||||
.list-item .media-content {
 | 
			
		||||
@ -213,6 +219,7 @@
 | 
			
		||||
 | 
			
		||||
.preview-wide {
 | 
			
		||||
  height: var(--preview-cover-size);
 | 
			
		||||
  display: flex;
 | 
			
		||||
}
 | 
			
		||||
.preview-wide .headings {
 | 
			
		||||
  height: var(--preview-cover-size);
 | 
			
		||||
@ -247,6 +254,10 @@
 | 
			
		||||
.preview-card:not(.header) {
 | 
			
		||||
  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
 | 
			
		||||
}
 | 
			
		||||
.preview-card .title {
 | 
			
		||||
  max-height: calc(var(--preview-cover-size) / 2);
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
.card-grid .preview-card {
 | 
			
		||||
  min-width: unset;
 | 
			
		||||
}
 | 
			
		||||
@ -2691,11 +2702,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
 | 
			
		||||
 | 
			
		||||
#player .button, #player a.button, #player button.button, #player .nav-urls a, .ax .button, .ax a.button, .ax button.button, .ax .nav-urls a {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  padding: 0.4em;
 | 
			
		||||
  padding: 0.4rem;
 | 
			
		||||
  border: 1px var(--highlight-color-2-alpha) solid;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  font-size: 1.4rem;
 | 
			
		||||
  color: var(--button-fg);
 | 
			
		||||
  background-color: var(--button-bg);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -81,8 +81,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
 | 
			
		||||
  width: 0.625em;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title:not(:last-child),
 | 
			
		||||
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
 | 
			
		||||
.table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
 | 
			
		||||
  margin-bottom: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -6796,99 +6795,6 @@ a.tag:hover {
 | 
			
		||||
  text-decoration: underline;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title,
 | 
			
		||||
.subtitle {
 | 
			
		||||
  word-break: break-word;
 | 
			
		||||
}
 | 
			
		||||
.title em,
 | 
			
		||||
.title span,
 | 
			
		||||
.subtitle em,
 | 
			
		||||
.subtitle span {
 | 
			
		||||
  font-weight: inherit;
 | 
			
		||||
}
 | 
			
		||||
.title sub,
 | 
			
		||||
.subtitle sub {
 | 
			
		||||
  font-size: 0.75em;
 | 
			
		||||
}
 | 
			
		||||
.title sup,
 | 
			
		||||
.subtitle sup {
 | 
			
		||||
  font-size: 0.75em;
 | 
			
		||||
}
 | 
			
		||||
.title .tag,
 | 
			
		||||
.subtitle .tag {
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title {
 | 
			
		||||
  color: #000;
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
  line-height: 1.125;
 | 
			
		||||
}
 | 
			
		||||
.title strong {
 | 
			
		||||
  color: inherit;
 | 
			
		||||
  font-weight: inherit;
 | 
			
		||||
}
 | 
			
		||||
.title:not(.is-spaced) + .subtitle {
 | 
			
		||||
  margin-top: -1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-1 {
 | 
			
		||||
  font-size: 3rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-2 {
 | 
			
		||||
  font-size: 2.5rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-3 {
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-4 {
 | 
			
		||||
  font-size: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-5 {
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-6 {
 | 
			
		||||
  font-size: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-7 {
 | 
			
		||||
  font-size: 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtitle {
 | 
			
		||||
  color: hsl(0deg, 0%, 29%);
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
  font-weight: 400;
 | 
			
		||||
  line-height: 1.25;
 | 
			
		||||
}
 | 
			
		||||
.subtitle strong {
 | 
			
		||||
  color: hsl(0deg, 0%, 21%);
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
}
 | 
			
		||||
.subtitle:not(.is-spaced) + .title {
 | 
			
		||||
  margin-top: -1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-1 {
 | 
			
		||||
  font-size: 3rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-2 {
 | 
			
		||||
  font-size: 2.5rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-3 {
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-4 {
 | 
			
		||||
  font-size: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-5 {
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-6 {
 | 
			
		||||
  font-size: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-7 {
 | 
			
		||||
  font-size: 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.align-left {
 | 
			
		||||
  text-align: left;
 | 
			
		||||
  justify-content: left;
 | 
			
		||||
 | 
			
		||||
@ -2,14 +2,19 @@
 | 
			
		||||
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/public.scss ***!
 | 
			
		||||
  \**************************************************************************************************************************************************************************************************************************************/
 | 
			
		||||
:root {
 | 
			
		||||
  --heading-height: 30rem;
 | 
			
		||||
  --title-1-sz: 2rem;
 | 
			
		||||
  --title-2-sz: 1.6rem;
 | 
			
		||||
  --title-3-sz: 1.4rem;
 | 
			
		||||
  --subtitle-1-sz: 1.8rem;
 | 
			
		||||
  --subtitle-2-sz: 1.6rem;
 | 
			
		||||
  --subtitle-3-sz: 1.4rem;
 | 
			
		||||
  --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-title-sz: 1.6rem;
 | 
			
		||||
  --preview-subtitle-sz: 1.4rem;
 | 
			
		||||
  --preview-cover-size: 24rem;
 | 
			
		||||
  --preview-title-sz: 1.4rem;
 | 
			
		||||
  --preview-subtitle-sz: 1rem;
 | 
			
		||||
  --preview-cover-size: 14rem;
 | 
			
		||||
  --preview-cover-small-size: 10rem;
 | 
			
		||||
  --preview-cover-tiny-size: 4rem;
 | 
			
		||||
  --preview-wide-content-sz: 1.6rem;
 | 
			
		||||
@ -30,11 +35,11 @@
 | 
			
		||||
  --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-text-sz: 1.4rem;
 | 
			
		||||
  --a-sound-text-sz: 1rem;
 | 
			
		||||
  --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;
 | 
			
		||||
  --a-player-bar-title-alone-sz: 1.4rem;
 | 
			
		||||
  --button-fg: var(--highlight-color-2);
 | 
			
		||||
  --button-bg: var(--highlight-color);
 | 
			
		||||
  --button-sec-bg: var(--highlight-color-alpha);
 | 
			
		||||
@ -48,31 +53,31 @@
 | 
			
		||||
  :root {
 | 
			
		||||
    --section-content-sz: 1rem;
 | 
			
		||||
    --preview-title-sz: 1rem;
 | 
			
		||||
    --preview-subtitle-sz: 1rem;
 | 
			
		||||
    --preview-cover-size: 14rem;
 | 
			
		||||
    --preview-cover-small-size: 10rem;
 | 
			
		||||
    --preview-subtitle-sz: 0.8rem;
 | 
			
		||||
    --preview-cover-size: 10rem;
 | 
			
		||||
    --preview-cover-small-size: 6rem;
 | 
			
		||||
    --preview-cover-tiny-size: 4rem;
 | 
			
		||||
    --preview-wide-content-sz: 1rem;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.title.is-1 {
 | 
			
		||||
.title.is-1, .header.preview .title.is-1 {
 | 
			
		||||
  font-size: var(--title-1-sz);
 | 
			
		||||
}
 | 
			
		||||
.title.is-2 {
 | 
			
		||||
.title.is-2, .header.preview .title.is-2 {
 | 
			
		||||
  font-size: var(--title-2-sz);
 | 
			
		||||
}
 | 
			
		||||
.title.is-3 {
 | 
			
		||||
.title.is-3, .header.preview .title.is-3 {
 | 
			
		||||
  font-size: var(--title-3-sz);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtitle.is-1 {
 | 
			
		||||
  font-size: var(--title-1-sz);
 | 
			
		||||
.subtitle.is-1, .header.preview .subtitle.is-1 {
 | 
			
		||||
  font-size: var(--subtitle-1-sz);
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-2 {
 | 
			
		||||
  font-size: var(--title-2-sz);
 | 
			
		||||
.subtitle.is-2, .header.preview .subtitle.is-2 {
 | 
			
		||||
  font-size: var(--subtitle-2-sz);
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-3 {
 | 
			
		||||
  font-size: var(--title-3-sz);
 | 
			
		||||
.subtitle.is-3, .header.preview .subtitle.is-3 {
 | 
			
		||||
  font-size: var(--subtitle-3-sz);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.heading {
 | 
			
		||||
@ -192,6 +197,7 @@
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
}
 | 
			
		||||
.list-item .subtitle {
 | 
			
		||||
  font-size: var(--preview-title-sz);
 | 
			
		||||
  text-align: right;
 | 
			
		||||
}
 | 
			
		||||
.list-item .media-content {
 | 
			
		||||
@ -213,6 +219,7 @@
 | 
			
		||||
 | 
			
		||||
.preview-wide {
 | 
			
		||||
  height: var(--preview-cover-size);
 | 
			
		||||
  display: flex;
 | 
			
		||||
}
 | 
			
		||||
.preview-wide .headings {
 | 
			
		||||
  height: var(--preview-cover-size);
 | 
			
		||||
@ -247,6 +254,10 @@
 | 
			
		||||
.preview-card:not(.header) {
 | 
			
		||||
  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
 | 
			
		||||
}
 | 
			
		||||
.preview-card .title {
 | 
			
		||||
  max-height: calc(var(--preview-cover-size) / 2);
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
.card-grid .preview-card {
 | 
			
		||||
  min-width: unset;
 | 
			
		||||
}
 | 
			
		||||
@ -536,8 +547,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
 | 
			
		||||
  width: 0.625em;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title:not(:last-child),
 | 
			
		||||
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
 | 
			
		||||
.table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
 | 
			
		||||
  margin-bottom: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -7251,99 +7261,6 @@ a.tag:hover {
 | 
			
		||||
  text-decoration: underline;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title,
 | 
			
		||||
.subtitle {
 | 
			
		||||
  word-break: break-word;
 | 
			
		||||
}
 | 
			
		||||
.title em,
 | 
			
		||||
.title span,
 | 
			
		||||
.subtitle em,
 | 
			
		||||
.subtitle span {
 | 
			
		||||
  font-weight: inherit;
 | 
			
		||||
}
 | 
			
		||||
.title sub,
 | 
			
		||||
.subtitle sub {
 | 
			
		||||
  font-size: 0.75em;
 | 
			
		||||
}
 | 
			
		||||
.title sup,
 | 
			
		||||
.subtitle sup {
 | 
			
		||||
  font-size: 0.75em;
 | 
			
		||||
}
 | 
			
		||||
.title .tag,
 | 
			
		||||
.subtitle .tag {
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.title {
 | 
			
		||||
  color: #000;
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
  line-height: 1.125;
 | 
			
		||||
}
 | 
			
		||||
.title strong {
 | 
			
		||||
  color: inherit;
 | 
			
		||||
  font-weight: inherit;
 | 
			
		||||
}
 | 
			
		||||
.title:not(.is-spaced) + .subtitle {
 | 
			
		||||
  margin-top: -1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-1 {
 | 
			
		||||
  font-size: 3rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-2 {
 | 
			
		||||
  font-size: 2.5rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-3 {
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-4 {
 | 
			
		||||
  font-size: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-5 {
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-6 {
 | 
			
		||||
  font-size: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.title.is-7 {
 | 
			
		||||
  font-size: 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtitle {
 | 
			
		||||
  color: hsl(0deg, 0%, 29%);
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
  font-weight: 400;
 | 
			
		||||
  line-height: 1.25;
 | 
			
		||||
}
 | 
			
		||||
.subtitle strong {
 | 
			
		||||
  color: hsl(0deg, 0%, 21%);
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
}
 | 
			
		||||
.subtitle:not(.is-spaced) + .title {
 | 
			
		||||
  margin-top: -1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-1 {
 | 
			
		||||
  font-size: 3rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-2 {
 | 
			
		||||
  font-size: 2.5rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-3 {
 | 
			
		||||
  font-size: 2rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-4 {
 | 
			
		||||
  font-size: 1.5rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-5 {
 | 
			
		||||
  font-size: 1.25rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-6 {
 | 
			
		||||
  font-size: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.subtitle.is-7 {
 | 
			
		||||
  font-size: 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.page {
 | 
			
		||||
  padding-bottom: 5rem;
 | 
			
		||||
}
 | 
			
		||||
@ -7394,11 +7311,10 @@ a.tag:hover {
 | 
			
		||||
 | 
			
		||||
.button, a.button, button.button, .nav-urls a {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  padding: 0.4em;
 | 
			
		||||
  padding: 0.4rem;
 | 
			
		||||
  border: 1px var(--highlight-color-2-alpha) solid;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  font-size: 1.4rem;
 | 
			
		||||
  color: var(--button-fg);
 | 
			
		||||
  background-color: var(--button-bg);
 | 
			
		||||
}
 | 
			
		||||
@ -7478,9 +7394,14 @@ a.tag:hover {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.label, .textarea, .input, .select {
 | 
			
		||||
  font-size: 1.4rem;
 | 
			
		||||
  font-size: 1rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: 600px) {
 | 
			
		||||
  textarea {
 | 
			
		||||
    height: 10rem !important;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.navbar-item.active, .table tr.is-selected {
 | 
			
		||||
  color: var(--highlight-color-2);
 | 
			
		||||
  background-color: var(--highlight-color);
 | 
			
		||||
@ -7684,12 +7605,6 @@ nav li a, nav li .button {
 | 
			
		||||
.header.has-cover {
 | 
			
		||||
  min-height: calc(var(--header-height) / 3);
 | 
			
		||||
}
 | 
			
		||||
.header .title {
 | 
			
		||||
  font-size: 40px;
 | 
			
		||||
}
 | 
			
		||||
.header .subtitle {
 | 
			
		||||
  font-size: 32px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.header-cover:not(:only-child) {
 | 
			
		||||
  float: right;
 | 
			
		||||
 | 
			
		||||
@ -455,7 +455,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 | 
			
		||||
  \**************************/
 | 
			
		||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 | 
			
		||||
 | 
			
		||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": function() { return /* binding */ VueLoader; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n/* harmony import */ var _pageLoad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageLoad */ \"./src/pageLoad.js\");\n\n\n\n/**\n * Handles loading Vue js app on page load.\n */\nclass VueLoader {\n  constructor({\n    el = null,\n    props = {},\n    ...appConfig\n  } = {}, loaderOptions = {}) {\n    this.appConfig = appConfig;\n    this.appConfig.el = el;\n    this.props = props;\n    this.pageLoad = new _pageLoad__WEBPACK_IMPORTED_MODULE_1__[\"default\"](el, loaderOptions);\n    this.pageLoad.onPreMount = event => this.onPreMount(event);\n    this.pageLoad.onMount = event => this.onMount(event);\n  }\n  enable(hotReload = true) {\n    hotReload && this.pageLoad.enable();\n    this.mount();\n  }\n  mount() {\n    if (this.app) this.unmount();\n    const app = (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(this.appConfig, this.props);\n    app.config.globalProperties.window = window;\n    this.vm = app.mount(this.pageLoad.el);\n    this.app = app;\n  }\n  unmount() {\n    if (!this.app) return;\n    try {\n      this.app.unmount();\n    } catch (_) {\n      null;\n    }\n    this.app = null;\n    this.vm = null;\n    this.pageLoad.reset();\n  }\n  onPreMount() {\n    this.unmount();\n  }\n  onMount() {\n    this.mount();\n  }\n}\n\n//# sourceURL=webpack://aircox-assets/./src/vueLoader.js?");
 | 
			
		||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": function() { return /* binding */ VueLoader; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n/* harmony import */ var _pageLoad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageLoad */ \"./src/pageLoad.js\");\n\n\n\n/**\n * Handles loading Vue js app on page load.\n */\nclass VueLoader {\n  constructor({\n    el = null,\n    props = {},\n    ...appConfig\n  } = {}, loaderOptions = {}) {\n    this.appConfig = appConfig;\n    this.appConfig.el = el;\n    this.props = props;\n    this.pageLoad = new _pageLoad__WEBPACK_IMPORTED_MODULE_1__[\"default\"](el, loaderOptions);\n    this.pageLoad.onPreMount = event => this.onPreMount(event);\n    this.pageLoad.onMount = event => this.onMount(event);\n  }\n  enable(hotReload = true) {\n    hotReload && this.pageLoad.enable(document.body);\n    this.mount();\n  }\n  mount() {\n    if (this.app) this.unmount();\n    const app = (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(this.appConfig, this.props);\n    app.config.globalProperties.window = window;\n    this.vm = app.mount(this.pageLoad.el);\n    this.app = app;\n  }\n  unmount() {\n    if (!this.app) return;\n    try {\n      this.app.unmount();\n    } catch (_) {\n      null;\n    }\n    this.app = null;\n    this.vm = null;\n    this.pageLoad.reset();\n  }\n  onPreMount() {\n    this.unmount();\n  }\n  onMount() {\n    this.mount();\n  }\n}\n\n//# sourceURL=webpack://aircox-assets/./src/vueLoader.js?");
 | 
			
		||||
 | 
			
		||||
/***/ }),
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -100,11 +100,11 @@ Usefull context:
 | 
			
		||||
                    <div class="headings preview-card-headings">
 | 
			
		||||
                    {% block headings %}
 | 
			
		||||
                    <div>
 | 
			
		||||
                        <h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
 | 
			
		||||
                        <h1 class="heading title is-1 {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div>
 | 
			
		||||
                        {% spaceless %}
 | 
			
		||||
                        <span class="heading subtitle is-3">
 | 
			
		||||
                        <span class="heading subtitle is-2">
 | 
			
		||||
                        {% block subtitle %}
 | 
			
		||||
                        {% if subtitle %}
 | 
			
		||||
                            {{ subtitle }}
 | 
			
		||||
 | 
			
		||||
@ -58,12 +58,4 @@
 | 
			
		||||
{% endif %}
 | 
			
		||||
{% endblock %}
 | 
			
		||||
 | 
			
		||||
{% block content-container %}
 | 
			
		||||
    {% if page and page.content %}
 | 
			
		||||
    {{ block.super }}
 | 
			
		||||
    {% elif parent and parent.content %}
 | 
			
		||||
    {% with parent as page %}
 | 
			
		||||
    {{ block.super }}
 | 
			
		||||
    {% endwith %}
 | 
			
		||||
    {% endif %}
 | 
			
		||||
{% endblock %}
 | 
			
		||||
{% block content-container %}{% endblock %}
 | 
			
		||||
 | 
			
		||||
@ -24,7 +24,7 @@ Styling related context:
 | 
			
		||||
    <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
 | 
			
		||||
    {% block headings %}
 | 
			
		||||
        <div>
 | 
			
		||||
            <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
 | 
			
		||||
            <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}"{% if title %} title="{{ title|escape }}"{% endif %}>{% block title %}{{ title|default:"" }}{% endblock %}</a>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div>
 | 
			
		||||
            <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
{% extends "./preview.html" %}
 | 
			
		||||
{% load i18n %}
 | 
			
		||||
 | 
			
		||||
{% block tag-class %}{{ block.super }} preview-wide columns{% endblock %}
 | 
			
		||||
{% block tag-class %}{{ block.super }} preview-wide{% endblock %}
 | 
			
		||||
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
 | 
			
		||||
{% block headings-tag-extra %}
 | 
			
		||||
    {{ block.super }}
 | 
			
		||||
 | 
			
		||||
@ -1,15 +1,21 @@
 | 
			
		||||
@use "vars" as v;
 | 
			
		||||
 | 
			
		||||
:root {
 | 
			
		||||
    --heading-height: 30rem;
 | 
			
		||||
    --title-1-sz: 2rem;
 | 
			
		||||
    --title-2-sz: 1.6rem;
 | 
			
		||||
    --title-3-sz: 1.4rem;
 | 
			
		||||
    --subtitle-1-sz: 1.8rem;
 | 
			
		||||
    --subtitle-2-sz: 1.6rem;
 | 
			
		||||
    --subtitle-3-sz: 1.4rem;
 | 
			
		||||
 | 
			
		||||
    --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-title-sz: #{v.$text-size-bigger};
 | 
			
		||||
    --preview-subtitle-sz: #{v.$text-size-medium};
 | 
			
		||||
    --preview-cover-size: 24rem;
 | 
			
		||||
    --preview-title-sz: #{v.$text-size-medium};
 | 
			
		||||
    --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-bigger};
 | 
			
		||||
@ -34,12 +40,12 @@
 | 
			
		||||
    --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-text-sz: #{v.$text-size-medium};
 | 
			
		||||
    --a-sound-text-sz: #{v.$text-size};
 | 
			
		||||
 | 
			
		||||
    --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: #{v.$text-size-bigger};
 | 
			
		||||
    --a-player-bar-title-alone-sz: #{v.$text-size-medium};
 | 
			
		||||
 | 
			
		||||
    --button-fg: var(--highlight-color-2);
 | 
			
		||||
    --button-bg: var(--highlight-color);
 | 
			
		||||
@ -56,26 +62,25 @@
 | 
			
		||||
        --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-subtitle-sz: #{v.$text-size-smaller};
 | 
			
		||||
        --preview-cover-size: 10rem;
 | 
			
		||||
        --preview-cover-small-size: 6rem;
 | 
			
		||||
        --preview-cover-tiny-size: 4rem;
 | 
			
		||||
        --preview-wide-content-sz: #{v.$text-size};
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// ---- ---- Preview & items
 | 
			
		||||
// ---- headings
 | 
			
		||||
.title {
 | 
			
		||||
.title, .header.preview .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); }
 | 
			
		||||
.subtitle, .header.preview .subtitle {
 | 
			
		||||
    &.is-1 { font-size: var(--subtitle-1-sz); }
 | 
			
		||||
    &.is-2 { font-size: var(--subtitle-2-sz); }
 | 
			
		||||
    &.is-3 { font-size: var(--subtitle-3-sz); }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.heading {
 | 
			
		||||
@ -105,11 +110,11 @@
 | 
			
		||||
@mixin button {
 | 
			
		||||
    .button, a.button, button.button, .nav-urls a {
 | 
			
		||||
        display: inline-block;
 | 
			
		||||
        padding: v.$mp-2e;
 | 
			
		||||
        padding: v.$mp-2;
 | 
			
		||||
        border: 1px var(--highlight-color-2-alpha) solid;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        font-size: v.$text-size-medium;
 | 
			
		||||
        // font-size: v.$text-size-medium;
 | 
			
		||||
 | 
			
		||||
        color: var(--button-fg);
 | 
			
		||||
        background-color: var(--button-bg);
 | 
			
		||||
@ -300,6 +305,7 @@
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .subtitle {
 | 
			
		||||
        font-size: var(--preview-title-sz);
 | 
			
		||||
        text-align: right;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -328,6 +334,7 @@
 | 
			
		||||
// ---- wide
 | 
			
		||||
.preview-wide {
 | 
			
		||||
    height: var(--preview-cover-size);
 | 
			
		||||
    display: flex;
 | 
			
		||||
 | 
			
		||||
    .headings {
 | 
			
		||||
        height: var(--preview-cover-size)
 | 
			
		||||
@ -372,6 +379,11 @@
 | 
			
		||||
        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .title {
 | 
			
		||||
        max-height: calc( var(--preview-cover-size) / 2 );
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .card-grid & {
 | 
			
		||||
        min-width: unset;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -90,7 +90,13 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.label, .textarea, .input, .select {
 | 
			
		||||
    font-size: v.$text-size-medium;
 | 
			
		||||
    font-size: v.$text-size;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: v.$screen-small) {
 | 
			
		||||
    textarea {
 | 
			
		||||
        height: calc( v.$text-size * 10 ) !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.navbar-item.active, .table tr.is-selected {
 | 
			
		||||
@ -355,13 +361,6 @@ nav li {
 | 
			
		||||
    &.has-cover {
 | 
			
		||||
        min-height: calc( var(--header-height) / 3 );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .title {
 | 
			
		||||
        font-size: v.$h1-size;
 | 
			
		||||
    }
 | 
			
		||||
    .subtitle {
 | 
			
		||||
        font-size: v.$h2-size;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -29,4 +29,4 @@ $title-color: #000;
 | 
			
		||||
// @import "~bulma/sass/elements/progress";
 | 
			
		||||
@import "~bulma/sass/elements/table";
 | 
			
		||||
@import "~bulma/sass/elements/tag";
 | 
			
		||||
@import "~bulma/sass/elements/title";
 | 
			
		||||
//@import "~bulma/sass/elements/title";
 | 
			
		||||
 | 
			
		||||
@ -18,7 +18,7 @@ export default class VueLoader {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    enable(hotReload=true) {
 | 
			
		||||
        hotReload && this.pageLoad.enable()
 | 
			
		||||
        hotReload && this.pageLoad.enable(document.body)
 | 
			
		||||
        this.mount()
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -14,3 +14,10 @@
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
{% endblock %}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{% block header-container %}
 | 
			
		||||
{% if not page.attach_to %}
 | 
			
		||||
{{ block.super }}
 | 
			
		||||
{% endif %}
 | 
			
		||||
{% endblock %}
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user