From 8f12e3dc197b8cb3daf008c8a1056bfbf5e32efb Mon Sep 17 00:00:00 2001 From: Matthias Hertel Date: Thu, 6 Feb 2025 22:34:57 +0100 Subject: [PATCH] refactor: update SCSS imports and improve text spacing in styles --- css/base.scss | 21 ++- css/card.scss | 228 +++++++++++++++++++++++++++++ css/doc.scss | 53 +------ css/iot.scss | 4 +- docstyle.css | 349 +++++++++++++++++++++++--------------------- docstyle.css.map | 2 +- icons.svg | 1 + iotstyle.css | 130 +++-------------- iotstyle.css.map | 2 +- package.json | 2 +- test-iotstyle.htm | 2 + test/test-cards.htm | 126 ++++++++++++++++ 12 files changed, 577 insertions(+), 343 deletions(-) create mode 100644 css/card.scss create mode 100644 test/test-cards.htm diff --git a/css/base.scss b/css/base.scss index c7d0600..488379d 100644 --- a/css/base.scss +++ b/css/base.scss @@ -46,6 +46,9 @@ $u-white-space: 1rem; $u-gutter: calc($u-white-space / 2); $u-gutter2: calc($u-white-space / 4); +// distance between paragraphs and other textual blocks +$u-text-spacing: calc($u-white-space / 2); + $u-btn-radius: calc($u-padding-block / 2); $u-output-border: $u-border-none; @@ -73,11 +76,12 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif; --code: rgb(255 255 185); --sidebar-width: 200px; - --content-width: 800px; - --layout-gap: 0.5em; + --content-width: 1168px; + --layout-gap: 16px; --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap)); --content-back: #f8f8f8; + --text-spacing: #{$u-text-spacing}; color-scheme: dark light; @@ -153,7 +157,8 @@ pre, code, h2, h3, -h4 { +h4, +.text { margin: 0; min-height: 1rem; @@ -168,15 +173,9 @@ h4 { } } - +p, - +pre, - +code, - +h2, - +h3, - +h4 { - margin-top: $u-gutter; + &:not(:first-child) { + margin-top: var(--text-spacing); } - } a, diff --git a/css/card.scss b/css/card.scss new file mode 100644 index 0000000..a549c0f --- /dev/null +++ b/css/card.scss @@ -0,0 +1,228 @@ +// @use "sass:color"; +@use "base"; + +// CSS for HTML cards and card design without any dependencies. + +// ===== card Layout settings ===== +// 365 px + +$u-card-width: 280px; +$u-card-gap: 16px; +$u-card-height: 320px; +$u-card-padding: 1em; +$u-card-radius: 1em; + +$u-card-border: none; + +// ===== card style settings ===== + +// $u-card-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.2); + +:root { + // When cards must be positioned using multiple columns + // the cards width and gap width must be constant. This is true as we need the width in the container queries. + // CSS variables cannot be used there. + + /* pixel units are preferred to create exact card sizes. */ + --card-width: #{$u-card-width}; + --card-gap: #{$u-card-gap}; + + /* cards can have fixed or variable height specified by the --card-height variable. */ + --card-height: #{$u-card-height}; + + /* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */ + + /* Design of cards, colors borders, paddings, */ + --card-head: hsl(220deg 20% 85%); + --card-head-active: hsl(220deg 80% 70%); + --card-back: #f2f2f2; + --card-padding: 0.5em; + --card-image-size: 120px; + --card-radius: 0; +} + +// ===== card container ===== + +// The card-container will contain and position all cards according to the given rules. +// By using some flags based on supplement class names +// Also it acts as a variable holder for card implementations that can overwrite the default values. +.card-container { + container-name: card; + container-type: inline-size; + display: flex; + flex-wrap: wrap; + + // same as .col1 + width: 100%; + gap: $u-card-gap; + + /* container marked with class='horizontal' for horizontal oriented cards + stretching on the whole with with image on the left */ + + /* https://getbootstrap.com/docs/4.3/components/card/#horizontal */ + + /* https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */ + &.horizontal>.card { + --card-width: 100%; + --card-height: 7.2rem; + + flex-direction: row; + align-items: stretch; + + >img:first-of-type { + display: block; + float: left; + margin-right: var(--card-padding); + width: var(--card-image-size); + height: 100%; + object-fit: cover; + } + } + + + // Cards with a defined, fixed width can be placed multiple times on one row when the with is giving enough space. + // For these cases the card-container implements the layout allowing centering the card collection in the center of the main content. + // Marking the card-container with class='col280' to provide multiple columns with width 280px. + // As css variables cannot be used in the css selectors they are hard-calculated here (with the help of sass if you like) + + + &.col280 { + // N columns of 280px cards with 16px gap + // 280*N + 16*(N-1)) = 280, 576, 872, 1168, ... in reverse with container queries + + // center in container by default + margin: 0 auto; + + // 4 columns maximum + width: calc($u-card-width * 4 + $u-card-gap * 3); + + // @container main (width < #{$u-card-4col}) { + @container main (width < #{$u-card-width * 4 + $u-card-gap * 3}) { + width: calc($u-card-width * 3 + $u-card-gap * 2); + } + + @container main (width < #{$u-card-width * 3 + $u-card-gap * 2}) { + width: calc($u-card-width * 2 + $u-card-gap); + } + + @container main (width < #{$u-card-width * 2}) { + width: $u-card-width; + } + + } + + /* One column only. */ + &.col1 { + width: 100%; + } + +} + +/* The cards are sized according to the given variables from :root or from the card-container) */ +.card { + position: relative; + display: inline-block; + width: var(--card-width); + height: var(--card-height); + margin: 0; + padding: 0; + border-radius: var(--card-radius); + page-break-inside: avoid; + overflow: hidden; + background-color: var(--card-back); + + /* cards can be marked with class='wide' covering 2 columns */ + &.wide { + width: calc(var(--card-width) * 2 + var(--card-gap)); + } + + /* cards can be marked with class='wide' covering 2 columns */ + &.small { + width: calc((var(--card-width) - var(--card-gap)) / 2); + height: calc((var(--card-height) - var(--card-gap)) / 2); + } + + >img:first-of-type { + display: block; + width: 100%; + height: var(--card-image-size); + object-fit: cover; + } + + .body { + /* background-color: lime; */ + padding: var(--card-padding); + } + + .actions { + position: absolute; + bottom: 0; + left: 0; + height: auto; + width: 100%; + padding: var(--card-padding); + border-top: 1px solid black; + background-color: inherit; + } + + &.autolink a:first-of-type::before { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + content: ""; + } +} + + +// simple content cards with image + text +.plaincard, +.imgcard, +.iconcard { + position: relative; + margin: base.$u-gutter base.$u-gutter base.$u-gutter 0; + width: 100%; + max-width: 100%; + background-color: var(--card-back); + page-break-inside: avoid; + + >h3 { + margin-top: 0; + } +} + +// card with text only +.plaincard { + padding: base.$u-gutter2; + min-height: 6rem; +} + +// cards with icon +.iconcard { + padding: base.$u-gutter base.$u-gutter base.$u-gutter calc(4rem + 2 * base.$u-gutter); + min-height: 5.4rem; + + svg { + position: absolute; + top: base.$u-gutter; + left: base.$u-gutter; + height: 4rem; + width: 4rem; + } +} + +// picture with 4:3 ratio + text +.imgcard { + padding: base.$u-gutter2 base.$u-gutter2 0 calc(9.6rem + base.$u-gutter2); + min-height: 7.2rem; + + img { + position: absolute; + top: 0; + left: 0; + height: auto; + width: 9.6rem; + max-height: 7.2rem; + } +} \ No newline at end of file diff --git a/css/doc.scss b/css/doc.scss index 0686c15..176e3b7 100644 --- a/css/doc.scss +++ b/css/doc.scss @@ -3,6 +3,7 @@ // This is part of the micro css implementation. @use "base"; +@use "card"; body.sitelayout { display: grid; @@ -70,6 +71,8 @@ body.sitelayout { main { grid-area: main; + container-name: main; + container-type: inline-size; background-color: var(--content-back); padding: var(--layout-gap); } @@ -115,56 +118,6 @@ table { } } -// simple content cards with image + text -.plaincard, -.imgcard, -.iconcard { - position: relative; - margin: base.$u-gutter base.$u-gutter base.$u-gutter 0; - width: 100%; - max-width: 100%; - background-color: var(--card-back); - page-break-inside: avoid; - - >h3 { - margin-top: 0; - } -} - -// card with text only -.plaincard { - padding: base.$u-gutter2; - min-height: 6rem; -} - -// cards with icon -.iconcard { - padding: base.$u-gutter base.$u-gutter base.$u-gutter calc(4rem + 2 * base.$u-gutter); - min-height: 5.4rem; - - svg { - position: absolute; - top: base.$u-gutter; - left: base.$u-gutter; - height: 4rem; - width: 4rem; - } -} - -// picture with 4:3 ratio + text -.imgcard { - padding: base.$u-gutter2 base.$u-gutter2 0 calc(9.6rem + base.$u-gutter2); - min-height: 7.2rem; - - img { - position: absolute; - top: 0; - left: 0; - height: auto; - width: 9.6rem; - max-height: 7.2rem; - } -} img[title='w200'] { width: 200px; diff --git a/css/iot.scss b/css/iot.scss index e3f1957..ed316ba 100644 --- a/css/iot.scss +++ b/css/iot.scss @@ -1,5 +1,5 @@ -@use "base"; - +@use "base"; + // file: iot.scss // Element and card rules for iot dashboards // This is part of the micro css implementation. diff --git a/docstyle.css b/docstyle.css index a8b5508..a5fde2f 100644 --- a/docstyle.css +++ b/docstyle.css @@ -7,10 +7,11 @@ --focus: hsl(220, 50%, 50%); --code: rgb(255 255 185); --sidebar-width: 200px; - --content-width: 800px; - --layout-gap: 0.5em; + --content-width: 1168px; + --layout-gap: 16px; --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap)); --content-back: #f8f8f8; + --text-spacing: 0.5rem; color-scheme: dark light; } @media (prefers-color-scheme: dark) { @@ -34,75 +35,6 @@ body { background-color: var(--back); } -body.sitelayout { - display: grid; - grid-template-columns: auto; - grid-template-areas: "header" "main" "sidebar" "footer"; - gap: var(--layout-gap); - max-width: var(--doc-body-width); - margin: 0 auto; -} -body.sitelayout:has(aside) { - grid-template-columns: auto var(--sidebar-width); - grid-template-areas: "header header" "main sidebar" "footer footer"; -} -@media (width <= 1000px) { - body.sitelayout:has(aside) { - grid-template-areas: "header" "main" "sidebar" "footer"; - } -} -body header { - grid-area: header; - /* background-color: #f0f0f0; */ - display: flex; -} -@media print { - body header { - display: none !important; - } -} -body header > * { - align-self: flex-end; - display: inline-block; -} -body header > *:not(:first-child) { - margin-left: var(--layout-gap); -} -body header > .logo { - font-size: 160%; - font-weight: bold; -} -body header a { - text-decoration: none; - width: 12ch; - text-align: center; - padding: 0.2ch 1ch; - transition: box-shadow 0.3s ease-in-out; -} -body header a:hover { - box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); -} -body aside { - grid-area: sidebar; - background-color: lime; - padding: var(--layout-gap); -} -@media print { - body aside { - display: none !important; - } -} -body main { - grid-area: main; - background-color: var(--content-back); - padding: var(--layout-gap); -} -body footer { - grid-area: footer; - background-color: lightblue; - padding: var(--layout-gap); -} - @media (width > 800px) { body { padding: 8px; @@ -177,44 +109,6 @@ h4 > img:first-child, h4 > svg:first-child { margin-right: 0.2em; } -p + p, -p + pre, -p + code, -p + h2, -p + h3, -p + h4, -pre + p, -pre + pre, -pre + code, -pre + h2, -pre + h3, -pre + h4, -code + p, -code + pre, -code + code, -code + h2, -code + h3, -code + h4, -h2 + p, -h2 + pre, -h2 + code, -h2 + h2, -h2 + h3, -h2 + h4, -h3 + p, -h3 + pre, -h3 + code, -h3 + h2, -h3 + h3, -h3 + h4, -h4 + p, -h4 + pre, -h4 + code, -h4 + h2, -h4 + h3, -h4 + h4 { - margin-top: 0.5rem; -} a, a:visited, @@ -487,6 +381,173 @@ main { } } +:root { + /* pixel units are preferred to create exact card sizes. */ + --card-width: 280px; + --card-gap: 16px; + /* cards can have fixed or variable height specified by the --card-height variable. */ + --card-height: 320px; + /* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */ + /* Design of cards, colors borders, paddings, */ + --card-head: hsl(220deg 20% 85%); + --card-head-active: hsl(220deg 80% 70%); + --card-back: #f2f2f2; + --card-padding: 0.5em; + --card-image-size: 120px; + --card-radius: 0; +} + +.card-container { + container-name: card; + container-type: inline-size; + display: flex; + flex-wrap: wrap; + width: 100%; + gap: 16px; + /* container marked with class='horizontal' for horizontal oriented cards + stretching on the whole with with image on the left */ + /* https://getbootstrap.com/docs/4.3/components/card/#horizontal */ + /* https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */ + /* Cards with a defined, fixed width can be placed multiple times on one row when the with is giving enough space. */ + /* For these cases the card-container implements the layout allowing centering the card collection in the center of the main content. */ + /* Marking the card-container with class='col280' to provide multiple columns with width 280px. */ + /* As css variables cannot be used in the css selectors they are hard-calculated here (with the help of sass if you like) */ + /* One column only. */ +} +.card-container.horizontal > .card { + --card-width: 100%; + --card-height: 7.2rem; + flex-direction: row; + align-items: stretch; +} +.card-container.horizontal > .card > img:first-of-type { + display: block; + float: left; + margin-right: var(--card-padding); + width: var(--card-image-size); + height: 100%; + object-fit: cover; +} +.card-container.col280 { + margin: 0 auto; + width: 1168px; +} +@container main (width < 1168px) { + .card-container.col280 { + width: 872px; + } +} +@container main (width < 872px) { + .card-container.col280 { + width: 576px; + } +} +@container main (width < 560px) { + .card-container.col280 { + width: 280px; + } +} +.card-container.col1 { + width: 100%; +} + +/* The cards are sized according to the given variables from :root or from the card-container) */ +.card { + position: relative; + display: inline-block; + width: var(--card-width); + height: var(--card-height); + margin: 0; + padding: 0; + border-radius: var(--card-radius); + page-break-inside: avoid; + overflow: hidden; + background-color: var(--card-back); + /* cards can be marked with class='wide' covering 2 columns */ + /* cards can be marked with class='wide' covering 2 columns */ +} +.card.wide { + width: calc(var(--card-width) * 2 + var(--card-gap)); +} +.card.small { + width: calc((var(--card-width) - var(--card-gap)) / 2); + height: calc((var(--card-height) - var(--card-gap)) / 2); +} +.card > img:first-of-type { + display: block; + width: 100%; + height: var(--card-image-size); + object-fit: cover; +} +.card .body { + /* background-color: lime; */ + padding: var(--card-padding); +} +.card .actions { + position: absolute; + bottom: 0; + left: 0; + height: auto; + width: 100%; + padding: var(--card-padding); + border-top: 1px solid black; + background-color: inherit; +} +.card.autolink a:first-of-type::before { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + content: ""; +} + +.plaincard, +.imgcard, +.iconcard { + position: relative; + margin: 0.5rem 0.5rem 0.5rem 0; + width: 100%; + max-width: 100%; + background-color: var(--card-back); + page-break-inside: avoid; +} +.plaincard > h3, +.imgcard > h3, +.iconcard > h3 { + margin-top: 0; +} + +.plaincard { + padding: 0.25rem; + min-height: 6rem; +} + +.iconcard { + padding: 0.5rem 0.5rem 0.5rem 5rem; + min-height: 5.4rem; +} +.iconcard svg { + position: absolute; + top: 0.5rem; + left: 0.5rem; + height: 4rem; + width: 4rem; +} + +.imgcard { + padding: 0.25rem 0.25rem 0 9.85rem; + min-height: 7.2rem; +} +.imgcard img { + position: absolute; + top: 0; + left: 0; + height: auto; + width: 9.6rem; + max-height: 7.2rem; +} + body.sitelayout { display: grid; grid-template-columns: auto; @@ -504,53 +565,55 @@ body.sitelayout:has(aside) { grid-template-areas: "header" "main" "sidebar" "footer"; } } -body header { +body.sitelayout header { grid-area: header; /* background-color: #f0f0f0; */ display: flex; } @media print { - body header { + body.sitelayout header { display: none !important; } } -body header > * { +body.sitelayout header > * { align-self: flex-end; display: inline-block; } -body header > *:not(:first-child) { +body.sitelayout header > *:not(:first-child) { margin-left: var(--layout-gap); } -body header > .logo { +body.sitelayout header > .logo { font-size: 160%; font-weight: bold; } -body header a { +body.sitelayout header a { text-decoration: none; width: 12ch; text-align: center; padding: 0.2ch 1ch; transition: box-shadow 0.3s ease-in-out; } -body header a:hover { +body.sitelayout header a:hover { box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); } -body aside { +body.sitelayout aside { grid-area: sidebar; background-color: lime; padding: var(--layout-gap); } @media print { - body aside { + body.sitelayout aside { display: none !important; } } -body main { +body.sitelayout main { grid-area: main; + container-name: main; + container-type: inline-size; background-color: var(--content-back); padding: var(--layout-gap); } -body footer { +body.sitelayout footer { grid-area: footer; background-color: lightblue; padding: var(--layout-gap); @@ -583,52 +646,6 @@ table td { border-bottom: 1px solid #203050; } -.plaincard, -.imgcard, -.iconcard { - position: relative; - margin: 0.5rem 0.5rem 0.5rem 0; - width: 100%; - max-width: 100%; - background-color: var(--card-back); - page-break-inside: avoid; -} -.plaincard > h3, -.imgcard > h3, -.iconcard > h3 { - margin-top: 0; -} - -.plaincard { - padding: 0.25rem; - min-height: 6rem; -} - -.iconcard { - padding: 0.5rem 0.5rem 0.5rem 5rem; - min-height: 5.4rem; -} -.iconcard svg { - position: absolute; - top: 0.5rem; - left: 0.5rem; - height: 4rem; - width: 4rem; -} - -.imgcard { - padding: 0.25rem 0.25rem 0 9.85rem; - min-height: 7.2rem; -} -.imgcard img { - position: absolute; - top: 0; - left: 0; - height: auto; - width: 9.6rem; - max-height: 7.2rem; -} - img[title=w200] { width: 200px; } diff --git a/docstyle.css.map b/docstyle.css.map index f575de6..1a9ed7e 100644 --- a/docstyle.css.map +++ b/docstyle.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["css/base.scss","css/doc.scss"],"names":[],"mappings":"AAgEA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EAnBF;IAoBI;IACA;IACA;IACA;IACA;;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,aArCkB;EAsClB;EACA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EAJF;IAKI;;;AAKN;EACE;AAEA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKJ;EACE;IACE;;;AAIJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEA;EACE,MApMM;EAqMN;;AAGF;EACE,MAjMM;EAkMN;;AAIJ;EACE;;;AAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,YAjNO;;;AAsNX;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA,aApNkB;EAqNlB;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA,OA/RO;EAgSP;EACA;;AAEA;EATF;AAAA;AAAA;AAAA;IAUI;;;;AAIJ;EACE;EACA,eAxRe;;;AA2RjB;EACE;EACA,eA5RgB;EA6RhB,SA9Re;;;AAmSjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;EACA,QAxSc;EAySd;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAGE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;AAAA;EAEE;;AAGF;EA/BF;IAgCI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA,eA3aS;;AA6aT;EACE,cA9aO;EA+aP;EACA;EACA;;AAGF;EACE;EACA;EACA,aAxagB;EAyahB;;;AAMJ;EACE;EACA;EACA,eAjcS;EAkcT;EACA,kBAjeU;EAkeV,OA1cc;;AA4cd;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE,aA9dQ;;AAieV;EApCF;IAqCI;;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA,OA7gBO;;;AAghBT;EACE;EACA;EACA,OAnhBO;;;AAuhBP;EADF;IAEI;;;;AC7hBF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EAJF;IAKI;;;AAKN;EACE;AAEA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;;AAKJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;;AAKJ;EACE,SD3FU;EC4FV;;;AAIF;EACE;EACA;;AAEA;EACE;EACA,KDvGO;ECwGP,MDxGO;ECyGP;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;AAAA;IAEE;IACA;;EAGF;IACE","file":"docstyle.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["css/base.scss","css/card.scss","css/doc.scss"],"names":[],"mappings":"AAmEA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;;AAEA;EApBF;IAqBI;IACA;IACA;IACA;IACA;;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,aAtCkB;EAuClB;EACA;EACA;;;AAKF;EACE;IACE;;;AAIJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEA;EACE,MA1HM;EA2HN;;AAGF;EACE,MAvHM;EAwHN;;AAIJ;EACE;;;AAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AAeN;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA,aAvIkB;EAwIlB;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA,OArNO;EAsNP;EACA;;AAEA;EATF;AAAA;AAAA;AAAA;IAUI;;;;AAIJ;EACE;EACA,eA9Me;;;AAiNjB;EACE;EACA,eAlNgB;EAmNhB,SApNe;;;AAyNjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;EACA,QA9Nc;EA+Nd;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAGE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;AAAA;EAEE;;AAGF;EA/BF;IAgCI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA,eAjWS;;AAmWT;EACE,cApWO;EAqWP;EACA;EACA;;AAGF;EACE;EACA;EACA,aA3VgB;EA4VhB;;;AAMJ;EACE;EACA;EACA,eAvXS;EAwXT;EACA,kBAvZU;EAwZV,OAhYc;;AAkYd;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE,aApZQ;;AAuZV;EApCF;IAqCI;;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA,OAncO;;;AAscT;EACE;EACA;EACA,OAzcO;;;AA6cP;EADF;IAEI;;;;ACtcJ;AAKE;EACA;EACA;AAEA;EACA;AAEA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;EACA;EACA;EACA;EAGA;EACA,KA/CW;AAiDX;AAAA;AAGA;AAEA;AAmBA;AAEA;AAEA;AAEA;AA4BA;;AApDA;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAcJ;EAKE;EAGA;;AAGA;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;AAGF;EAnBF;IAoBI,OAvGS;;;AA6Gb;EACE;;;AAKJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAKA;;AAJA;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;AACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;;AAKJ;EACE,SDzJU;EC0JV;;;AAIF;EACE;EACA;;AAEA;EACE;EACA,KDrKO;ECsKP,MDtKO;ECuKP;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC7NJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EAJF;IAKI;;;AAIJ;EACE;AAEA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;AAAA;IAEE;IACA;;EAGF;IACE","file":"docstyle.css"} \ No newline at end of file diff --git a/icons.svg b/icons.svg index bbe68ed..169430f 100644 --- a/icons.svg +++ b/icons.svg @@ -32,6 +32,7 @@ + diff --git a/iotstyle.css b/iotstyle.css index 0bc2c22..672e23d 100644 --- a/iotstyle.css +++ b/iotstyle.css @@ -7,10 +7,11 @@ --focus: hsl(220, 50%, 50%); --code: rgb(255 255 185); --sidebar-width: 200px; - --content-width: 800px; - --layout-gap: 0.5em; + --content-width: 1168px; + --layout-gap: 16px; --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap)); --content-back: #f8f8f8; + --text-spacing: 0.5rem; color-scheme: dark light; } @media (prefers-color-scheme: dark) { @@ -34,75 +35,6 @@ body { background-color: var(--back); } -body.sitelayout { - display: grid; - grid-template-columns: auto; - grid-template-areas: "header" "main" "sidebar" "footer"; - gap: var(--layout-gap); - max-width: var(--doc-body-width); - margin: 0 auto; -} -body.sitelayout:has(aside) { - grid-template-columns: auto var(--sidebar-width); - grid-template-areas: "header header" "main sidebar" "footer footer"; -} -@media (width <= 1000px) { - body.sitelayout:has(aside) { - grid-template-areas: "header" "main" "sidebar" "footer"; - } -} -body header { - grid-area: header; - /* background-color: #f0f0f0; */ - display: flex; -} -@media print { - body header { - display: none !important; - } -} -body header > * { - align-self: flex-end; - display: inline-block; -} -body header > *:not(:first-child) { - margin-left: var(--layout-gap); -} -body header > .logo { - font-size: 160%; - font-weight: bold; -} -body header a { - text-decoration: none; - width: 12ch; - text-align: center; - padding: 0.2ch 1ch; - transition: box-shadow 0.3s ease-in-out; -} -body header a:hover { - box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); -} -body aside { - grid-area: sidebar; - background-color: lime; - padding: var(--layout-gap); -} -@media print { - body aside { - display: none !important; - } -} -body main { - grid-area: main; - background-color: var(--content-back); - padding: var(--layout-gap); -} -body footer { - grid-area: footer; - background-color: lightblue; - padding: var(--layout-gap); -} - @media (width > 800px) { body { padding: 8px; @@ -144,7 +76,8 @@ pre, code, h2, h3, -h4 { +h4, +.text { margin: 0; min-height: 1rem; } @@ -159,7 +92,9 @@ h2 > svg, h3 > img, h3 > svg, h4 > img, -h4 > svg { +h4 > svg, +.text > img, +.text > svg { height: 1em; height: auto; } @@ -174,46 +109,19 @@ h2 > svg:first-child, h3 > img:first-child, h3 > svg:first-child, h4 > img:first-child, -h4 > svg:first-child { +h4 > svg:first-child, +.text > img:first-child, +.text > svg:first-child { margin-right: 0.2em; } -p + p, -p + pre, -p + code, -p + h2, -p + h3, -p + h4, -pre + p, -pre + pre, -pre + code, -pre + h2, -pre + h3, -pre + h4, -code + p, -code + pre, -code + code, -code + h2, -code + h3, -code + h4, -h2 + p, -h2 + pre, -h2 + code, -h2 + h2, -h2 + h3, -h2 + h4, -h3 + p, -h3 + pre, -h3 + code, -h3 + h2, -h3 + h3, -h3 + h4, -h4 + p, -h4 + pre, -h4 + code, -h4 + h2, -h4 + h3, -h4 + h4 { - margin-top: 0.5rem; +p:not(:first-child), +pre:not(:first-child), +code:not(:first-child), +h2:not(:first-child), +h3:not(:first-child), +h4:not(:first-child), +.text:not(:first-child) { + margin-top: var(--text-spacing); } a, diff --git a/iotstyle.css.map b/iotstyle.css.map index d29ba87..f8f6048 100644 --- a/iotstyle.css.map +++ b/iotstyle.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["css/base.scss","css/iot.scss"],"names":[],"mappings":"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BDrDY;ECsDZ,wBDtDY;ECuDZ;EACA;;AAEA;AAAA;EAEE;;AAIJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAQJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;AAAA;EAEE;EACA;EAGA;EACA,eDnHa;ECoHb,cDrJU;ECsJV,kBDtJU;ECuJV,ODtJe;ECuJf;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cD3JS;EC4JT,kBD5JS;;AC+JX;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE,OD7KW;;;ACkLb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBDxMW;ECyMX,2BDzMW;;AC4Mb;EACE,yBD7MW;EC8MX,4BD9MW;;;ACkNf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KDnPU;;;ACyPZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cDvVU;ECwVV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QDpXS;;;ACuXX;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,ODnaG;;ACsaL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OD1bK;EC2bL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["css/base.scss","css/iot.scss"],"names":[],"mappings":"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AAGF;AAAA;EACE;EACA;;;AAMJ;EACE,OD7KW;;;ACkLb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBDrMW;ECsMX,2BDtMW;;ACyMb;EACE,yBD1MW;EC2MX,4BD3MW;;;AC+Mf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KDnPU;;;ACyPZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cDvVU;ECwVV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QDpXS;;;ACuXX;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,ODnaG;;ACsaL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OD1bK;EC2bL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"} \ No newline at end of file diff --git a/package.json b/package.json index f1a09b9..fcb5285 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "clean": "shx rm -rf dist && shx rm -rf dist-mini", "xprebuild": "npm run test", "build:css": "sass css/iot.scss iotstyle.css && sass css/doc.scss docstyle.css", - "build:css-watch": "npm run build:css -- -w", + "build:css-watch": "sass css/doc.scss docstyle.css -w", "build:server": "tsc -p server", "build:ts": "tsc -p src", "build:ts-mini": "tsc -p src --project src/tsconfig.mini.json", diff --git a/test-iotstyle.htm b/test-iotstyle.htm index 974b384..cb8576c 100644 --- a/test-iotstyle.htm +++ b/test-iotstyle.htm @@ -91,7 +91,9 @@

IoT Style Check Page Header

Chapter headings <h2>

+

Some regular text.

Topic headings <h3>

+

Some regular text.

Subtitles <h4>

Normal floating text with links.

Colors:

diff --git a/test/test-cards.htm b/test/test-cards.htm new file mode 100644 index 0000000..e598d3b --- /dev/null +++ b/test/test-cards.htm @@ -0,0 +1,126 @@ + + + + + + + Card-container + + + + + + + + + + + + +

Card-container

+
+
+
github cat +
+

What to say...

+

Lorem ipsum

+
+
+
github cat +
Some thoughts...
+
+
+ github cat +
Some plain thoughts...
+
+
+ +   +
+
+ analog input +
+

GitHub

+ matthias-hertel_dbk + no meaning +
+
+
+ British +
+

Autolink included

+ container queries +

here

+ cards +
+
+ +
+ no meaning +
+

Lorem ipsum

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Similique eveniet quaerat eum voluptatibus + dolore laborum praesentium

+

id eaque, unde harum. Ea temporibus ipsam beatae adipisci repellat distinctio + consequuntur a quo!

+
+
+
+ +
+
+

Plain Lorem ipsum

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Similique eveniet quaerat eum voluptatibus + dolore laborum praesentium

+

id eaque, unde harum. Ea temporibus ipsam beatae adipisci repellat distinctio + consequuntur a quo!

+
+
+
+ +
x
+
x
+
x
+
x
+
+ +

Card Tricks

+ 
+Often cards are used to show the into to a longer article or application and a click on the card will then navigate to the
+target.
+
+Here is a css trick to make the whole card a link to the first link found in the card. Effecting any click on the card will trigger the link.
+
+This is done by adding a ::before pseudo element to the first link that covers the card completely on z-index: 1:
+
+```css
+.card.autolink a:first-of-type::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  content: "";
+}
+
+in case you have further functions on the card like action buttons these must be shiftet to z-index > 1 to make sure that they 
+
+```
+
+Links for whole cards
+
+[ .footer.action ] <= all additiona actions and links in the footer 
+[    1           ] <= pseudo element of the first link found 
+[    auto layer  ] <= all elements of the card, except .card > .footer.action
+
+
+
+ +
+ + + + \ No newline at end of file