player link; page rendering
This commit is contained in:
bkfox
parent
c52e87acd2
commit
ccea2a5ea6
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user