diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css index 51fc66b..dbb269b 100644 --- a/aircox/static/aircox/css/admin.css +++ b/aircox/static/aircox/css/admin.css @@ -13,20 +13,27 @@ --heading-fg: var(--text-color); --heading-hg-fg: var(--text-color); --heading-hg-bg: var(--hg-color-2); + --cover-w: 14rem; + --cover-h: 14rem; + --cover-small-w: 10rem; + --cover-small-h: 10rem; + --cover-tiny-w: 10rem; + --cover-tiny-h: 10rem; + --card-w: var(--cover-w); --preview-bg: var(--body-bg); - --preview-title-sz: 1.4rem; - --preview-subtitle-sz: 1rem; + --preview-title-sz: var(--title-3-sz); + --preview-subtitle-sz: var(--title-3-sz); --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; --preview-heading-bg-color: var(--hg-color); - --header-height: var(--preview-cover-size); + --header-height: var(--cover-h); --a-carousel-p: 1.4rem; --a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-gap: 1.2rem; --a-carousel-nav-x: -0.6em; - --a-carousel-bg: var(--secondary-color-light); + --a-carousel-bg: none; --a-progress-bg: transparent; --a-progress-bar-bg: var(--secondary-color); --a-progress-bar-color: var(--text-color); @@ -62,12 +69,15 @@ @media screen and (max-width: 1380px) { :root { + --cover-w: 10rem; + --cover-h: 10rem; + --cover-small-w: 6rem; + --cover-small-h: 6rem; + --cover-tiny-w: 4rem; + --cover-tiny-h: 4rem; --section-content-sz: 1rem; --preview-title-sz: 1rem; --preview-subtitle-sz: 0.8rem; - --preview-cover-size: 10rem; - --preview-cover-small-size: 6rem; - --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } @@ -150,10 +160,21 @@ } .preview-cover { + background-color: var(--preview-bg); background-size: cover; - height: var(--preview-cover-size); - width: var(--preview-cover-size); - min-width: var(--preview-cover-size); + background-repeat: no-repeat; + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); + overflow: hidden; +} +.preview-cover img { + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); +} +.preview-cover img.hide { + visibility: hidden; } .preview-cover.small, .preview.small .preview-cover { min-width: unset; @@ -207,7 +228,7 @@ .list-item .subtitle { font-size: var(--preview-title-sz); text-align: right; - min-width: 8rem; + min-width: 9rem; } .list-item .media { flex-grow: 1; @@ -249,49 +270,87 @@ flex-grow: 1; } -.preview-card { - padding: 0rem !important; - height: var(--preview-cover-size); - width: var(--preview-cover-size); -} -.preview-card.small { - height: var(--preview-cover-small-size); - width: var(--preview-cover-small-size); -} -.preview-card.tiny { - height: var(--preview-cover-tiny-size); - width: var(--preview-cover-tiny-size); -} -.preview-card:not(.header) { - box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); -} -.preview-card .heading { - background-color: var(--preview-heading-bg-color); -} -.preview-card .title { - max-height: calc(var(--preview-cover-size) / 2); - overflow: hidden; -} -.card-grid .preview-card { - min-width: unset; -} -.preview-card .actions { - position: absolute; - bottom: 0.6rem; - right: 0.6rem; -} -.preview-card .actions label { - display: none; +:root { + --preview-card-width: 20rem; } -.card-headings, .preview-card-headings { - padding-top: 0.6rem; +.preview-card { + display: flex; + flex-direction: column; + width: var(--card-w); + padding: 0rem !important; + margin-bottom: auto; + background-color: var(--preview-bg) !important; + transition: box-shadow 0.2s; + /* + height: var(--preview-cover-size); + width: var(--preview-cover-size); + + &.small { + height: var(--preview-cover-small-size); + width: var(--preview-cover-small-size); + } + &.tiny { + height: var(--preview-cover-tiny-size); + width: var(--preview-cover-tiny-size); + } + + &:not(.header) { + box-shadow: 0em 0em 1em rgba(0,0,0,0.2); + } + + .heading { + background-color: var(--preview-heading-bg-color); + } + + .title { + max-height: calc( var(--preview-cover-size) / 2 ); + overflow: hidden; + } + + .card-grid & { + min-width: unset; + } + + .actions { + position: absolute; + bottom: v.$mp-3; + right: v.$mp-3; + + label { + display: none; + } + }*/ } -.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-card:hover figure { + box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; } -preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading { - margin-bottom: 0.6rem; +.preview-card .headings { + margin-top: 0.4rem; +} +.preview-card .headings .heading { + display: block !important; +} +.preview-card .headings .title { + overflow: hidden; +} +.preview-card .headings .subtitle { + font-size: 1.4rem; +} +.preview-card .card-content { + flex-grow: 1; + position: relative; +} +.preview-card .card-content figure { + box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); + height: var(--cover-h); + width: var(--cover-w); +} +.preview-card .card-content .actions { + position: absolute; + padding: 0.4rem; + bottom: 0rem; + right: 0rem; } .card-grid { @@ -316,7 +375,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co box-shadow: inset 0em 0em 20rem var(--a-carousel-bg); margin-bottom: var(--a-carousel-p); padding: var(--a-carousel-p) 0; - padding-left: var(--a-carousel-ml); + margin-top: calc(0rem - var(--a-carousel-p)); } .a-carousel-container { @@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co .a-carousel-bullets-container { padding-left: var(--a-carousel-ml); } +.a-carousel-bullets-container .bullet { + margin: 0.2rem; +} .a-progress { display: flex; diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index 5e1d2cf..7b1af2f 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -8,7 +8,7 @@ } .a-carousel-viewport[data-v-b79f173e] { width: 100%; - overflow: hidden; + overflow-x: hidden; } .a-carousel-container[data-v-b79f173e] { display: flex; diff --git a/aircox/static/aircox/css/chunk-vendors.css b/aircox/static/aircox/css/chunk-vendors.css index b89f7dd..9560e9f 100644 --- a/aircox/static/aircox/css/chunk-vendors.css +++ b/aircox/static/aircox/css/chunk-vendors.css @@ -1211,7 +1211,7 @@ background-color: var(--vc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-tap-highlight-color: transparent; + -webkit-tap-hg-color: transparent; } .vc-container, diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css index 593489a..794d585 100644 --- a/aircox/static/aircox/css/public.css +++ b/aircox/static/aircox/css/public.css @@ -13,20 +13,27 @@ --heading-fg: var(--text-color); --heading-hg-fg: var(--text-color); --heading-hg-bg: var(--hg-color-2); + --cover-w: 14rem; + --cover-h: 14rem; + --cover-small-w: 10rem; + --cover-small-h: 10rem; + --cover-tiny-w: 10rem; + --cover-tiny-h: 10rem; + --card-w: var(--cover-w); --preview-bg: var(--body-bg); - --preview-title-sz: 1.4rem; - --preview-subtitle-sz: 1rem; + --preview-title-sz: var(--title-3-sz); + --preview-subtitle-sz: var(--title-3-sz); --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; --preview-heading-bg-color: var(--hg-color); - --header-height: var(--preview-cover-size); + --header-height: var(--cover-h); --a-carousel-p: 1.4rem; --a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-gap: 1.2rem; --a-carousel-nav-x: -0.6em; - --a-carousel-bg: var(--secondary-color-light); + --a-carousel-bg: none; --a-progress-bg: transparent; --a-progress-bar-bg: var(--secondary-color); --a-progress-bar-color: var(--text-color); @@ -62,12 +69,15 @@ @media screen and (max-width: 1380px) { :root { + --cover-w: 10rem; + --cover-h: 10rem; + --cover-small-w: 6rem; + --cover-small-h: 6rem; + --cover-tiny-w: 4rem; + --cover-tiny-h: 4rem; --section-content-sz: 1rem; --preview-title-sz: 1rem; --preview-subtitle-sz: 0.8rem; - --preview-cover-size: 10rem; - --preview-cover-small-size: 6rem; - --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } @@ -150,10 +160,21 @@ } .preview-cover { + background-color: var(--preview-bg); background-size: cover; - height: var(--preview-cover-size); - width: var(--preview-cover-size); - min-width: var(--preview-cover-size); + background-repeat: no-repeat; + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); + overflow: hidden; +} +.preview-cover img { + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); +} +.preview-cover img.hide { + visibility: hidden; } .preview-cover.small, .preview.small .preview-cover { min-width: unset; @@ -207,7 +228,7 @@ .list-item .subtitle { font-size: var(--preview-title-sz); text-align: right; - min-width: 8rem; + min-width: 9rem; } .list-item .media { flex-grow: 1; @@ -249,49 +270,87 @@ flex-grow: 1; } -.preview-card { - padding: 0rem !important; - height: var(--preview-cover-size); - width: var(--preview-cover-size); -} -.preview-card.small { - height: var(--preview-cover-small-size); - width: var(--preview-cover-small-size); -} -.preview-card.tiny { - height: var(--preview-cover-tiny-size); - width: var(--preview-cover-tiny-size); -} -.preview-card:not(.header) { - box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); -} -.preview-card .heading { - background-color: var(--preview-heading-bg-color); -} -.preview-card .title { - max-height: calc(var(--preview-cover-size) / 2); - overflow: hidden; -} -.card-grid .preview-card { - min-width: unset; -} -.preview-card .actions { - position: absolute; - bottom: 0.6rem; - right: 0.6rem; -} -.preview-card .actions label { - display: none; +:root { + --preview-card-width: 20rem; } -.card-headings, .preview-card-headings { - padding-top: 0.6rem; +.preview-card { + display: flex; + flex-direction: column; + width: var(--card-w); + padding: 0rem !important; + margin-bottom: auto; + background-color: var(--preview-bg) !important; + transition: box-shadow 0.2s; + /* + height: var(--preview-cover-size); + width: var(--preview-cover-size); + + &.small { + height: var(--preview-cover-small-size); + width: var(--preview-cover-small-size); + } + &.tiny { + height: var(--preview-cover-tiny-size); + width: var(--preview-cover-tiny-size); + } + + &:not(.header) { + box-shadow: 0em 0em 1em rgba(0,0,0,0.2); + } + + .heading { + background-color: var(--preview-heading-bg-color); + } + + .title { + max-height: calc( var(--preview-cover-size) / 2 ); + overflow: hidden; + } + + .card-grid & { + min-width: unset; + } + + .actions { + position: absolute; + bottom: v.$mp-3; + right: v.$mp-3; + + label { + display: none; + } + }*/ } -.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-card:hover figure { + box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; } -preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading { - margin-bottom: 0.6rem; +.preview-card .headings { + margin-top: 0.4rem; +} +.preview-card .headings .heading { + display: block !important; +} +.preview-card .headings .title { + overflow: hidden; +} +.preview-card .headings .subtitle { + font-size: 1.4rem; +} +.preview-card .card-content { + flex-grow: 1; + position: relative; +} +.preview-card .card-content figure { + box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); + height: var(--cover-h); + width: var(--cover-w); +} +.preview-card .card-content .actions { + position: absolute; + padding: 0.4rem; + bottom: 0rem; + right: 0rem; } .card-grid { @@ -316,7 +375,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co box-shadow: inset 0em 0em 20rem var(--a-carousel-bg); margin-bottom: var(--a-carousel-p); padding: var(--a-carousel-p) 0; - padding-left: var(--a-carousel-ml); + margin-top: calc(0rem - var(--a-carousel-p)); } .a-carousel-container { @@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co .a-carousel-bullets-container { padding-left: var(--a-carousel-ml); } +.a-carousel-bullets-container .bullet { + margin: 0.2rem; +} .a-progress { display: flex; @@ -7302,7 +7364,7 @@ a.tag:hover { margin-top: 0.6rem; } .page section.container > .title { - font-size: 1.4rem; + font-size: var(--title-2-sz); clear: both; margin-bottom: 1.2rem; } diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html index 34857ea..53a2118 100644 --- a/aircox/templates/aircox/page_detail.html +++ b/aircox/templates/aircox/page_detail.html @@ -50,6 +50,7 @@ Context: {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %} {% endwith %} + {% endif %} {% endblock %} diff --git a/aircox/templates/aircox/widgets/card.html b/aircox/templates/aircox/widgets/card.html index 127c29f..b4f0b5a 100644 --- a/aircox/templates/aircox/widgets/card.html +++ b/aircox/templates/aircox/widgets/card.html @@ -2,18 +2,22 @@ {% load i18n %} {% block tag-class %}{{ block.super }} preview-card{% endblock %} -{% block tag-extra %} - {{ block.super }} - {% if cover %} - style="background-image: url({{ cover }});" - {% endif %} -{% endblock %} -{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %} - {% block inner %} -{% block headings-container %} - {{ block.super }} - {% block actions-container %}{{ block.super }}{% endblock %} -{% endblock %} +