rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

page headers, various fixes, responsive

Browse Source
This commit is contained in:
bkfox
2023-12-11 23:29:49 +01:00
parent a3c21c64ed
commit eaa1e2412a
16 changed files with 482 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/src/assets/common.scss
View File

@ -1,7 +1,6 @@
@use "./vars" as v;
@import "./vendor";
@import "./helpers";
@import "./components";
//-- helpers/modifiers
//-- forms

113
assets/src/assets/components.scss
View File

@ -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;

7
assets/src/assets/helpers.scss
View File

@ -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 }

89
assets/src/assets/public.scss
View File

@ -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;
}
}
}

8
assets/src/assets/vendor.scss
View File

@ -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";