Skip to content

Commit ea0f6a8

Browse files
mathertelmathertel
committed
Remove mermaid plugin and dependency from package.json
css fixes and docu
1 parent 8e59945 commit ea0f6a8

File tree

10 files changed

+352
-1817
lines changed

10 files changed

+352
-1817
lines changed

‎.eleventy.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
22

33
const myMarkdown = require("./.myMarkdown");
4-
const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");
54

65

76
module.exports = function(eleventyConfig) {
@@ -264,8 +263,6 @@ module.exports = function(eleventyConfig) {
264263
// ===== Markdown configuration =====
265264

266265
eleventyConfig.addPlugin(myMarkdown);
267-
eleventyConfig.addPlugin(pluginMermaid);
268-
269266
// console.log(eleventyConfig.ignores);
270267

271268
return {

‎_includes/page.njk‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,5 @@ permalink: "{{ page.filePathStem }}.htm"
8787
lazyLoadHTM('nav', '/toc.htm');
8888
</script>
8989

90-
<script type="module" async>
91-
import mermaid from "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs";
92-
document.addEventListener('DOMContentLoaded', mermaid.initialize({startOnLoad: true}));
93-
</script>
94-
9590
</body>
9691
</html>

‎css/card.scss‎

Lines changed: 107 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -56,106 +56,6 @@ $u-card-gap: 16px;
5656
// center in main container by default
5757
margin: 0 auto;
5858

59-
>.card {
60-
position: relative;
61-
width: var(--card-width);
62-
height: var(--card-height);
63-
64-
// used a card grid for normal cards (not horizonal)
65-
display: grid;
66-
grid-template: "header" auto "main" 1fr "footer" auto / auto;
67-
gap: 0;
68-
margin: 0;
69-
padding: 0;
70-
page-break-inside: avoid;
71-
overflow: hidden;
72-
background-color: var(--card-back);
73-
border: var(--card-border);
74-
border-radius: var(--card-radius);
75-
76-
@media print {
77-
border: 1px solid var(--color);
78-
}
79-
80-
// cards can be marked with class='wide' covering 2 columns
81-
&.wide {
82-
width: calc(var(--card-width) * 2 + var(--card-gap));
83-
}
84-
85-
// cards can be marked with class='small' covering 1/2 column
86-
&.small {
87-
width: calc((var(--card-width) - var(--card-gap)) / 2);
88-
height: calc((var(--card-height) - var(--card-gap)) / 2);
89-
}
90-
91-
&.shadow {
92-
box-shadow: var(--dropshadow);
93-
}
94-
95-
// images as first element in card
96-
>svg:first-child,
97-
>img:first-child {
98-
grid-area: header;
99-
width: 100%;
100-
height: var(--card-image-size);
101-
object-fit: cover;
102-
103-
&.icon {
104-
width: 2.75rem;
105-
height: 2.75rem;
106-
}
107-
}
108-
109-
.header {
110-
grid-area: header;
111-
background-color: var(--card-head);
112-
padding: var(--card-padding);
113-
min-height: 2.75em; // with or without icon
114-
max-height: 4rem;
115-
116-
h3,
117-
h4 {
118-
margin: 0;
119-
}
120-
121-
// images in header
122-
>svg:first-child,
123-
>img:first-child {
124-
// display: block;
125-
float: left;
126-
height: 2.75rem;
127-
aspect-ratio: 1/1;
128-
margin-right: var(--card-padding);
129-
}
130-
}
131-
132-
.main,
133-
.body {
134-
grid-area: main;
135-
flex: 1;
136-
padding: var(--card-padding);
137-
}
138-
139-
.footer,
140-
.actions {
141-
grid-area: footer;
142-
height: auto;
143-
width: 100%;
144-
padding: var(--card-padding);
145-
border-top: 1px solid rgb(0 0 0 / 12.5%);
146-
background-color: inherit;
147-
}
148-
149-
&.autolink h3>a::before {
150-
position: absolute;
151-
top: 0;
152-
left: 0;
153-
height: 100%;
154-
width: 100%;
155-
content: "";
156-
}
157-
}
158-
15959
// container marked with class='horizontal' for horizontal oriented cards
16060
// stretching on the whole with with image on the left */
16161
&.horizontal {
@@ -210,7 +110,7 @@ $u-card-gap: 16px;
210110
width: calc(365px * 4 + 10px * 3);
211111

212112
// @container main (width < #{$u-card-4col}) {
213-
@container main (width <= #{365px * 4 + 10px * 3}) {
113+
@container main (width <=#{365px * 4 + 10px * 3}) {
214114
width: calc(365px * 3 + 10px * 2);
215115
}
216116

@@ -224,6 +124,111 @@ $u-card-gap: 16px;
224124
}
225125
}
226126

127+
.card {
128+
position: relative;
129+
width: var(--card-width);
130+
height: var(--card-height);
131+
132+
// used a card grid for normal cards (not horizonal)
133+
display: grid;
134+
grid-template: "header" auto "main" 1fr "footer" auto / auto;
135+
gap: 0;
136+
margin: 0;
137+
padding: 0;
138+
page-break-inside: avoid;
139+
overflow: hidden;
140+
background-color: var(--card-back);
141+
border: var(--card-border);
142+
border-radius: var(--card-radius);
143+
144+
@media print {
145+
border: 1px solid var(--color);
146+
}
147+
148+
// cards can be marked with class='wide' covering 2 columns
149+
&.wide {
150+
width: calc(var(--card-width) * 2 + var(--card-gap));
151+
}
152+
153+
// cards can be marked with class='small' covering 1/2 column
154+
&.small {
155+
width: calc((var(--card-width) - var(--card-gap)) / 2);
156+
height: calc((var(--card-height) - var(--card-gap)) / 2);
157+
}
158+
159+
&.shadow {
160+
box-shadow: var(--dropshadow);
161+
}
162+
163+
// images as first element in card
164+
>svg:first-child,
165+
>img:first-child {
166+
grid-area: header;
167+
width: 100%;
168+
height: var(--card-image-size);
169+
object-fit: cover;
170+
171+
&.icon {
172+
width: 2.75rem;
173+
height: 2.75rem;
174+
}
175+
}
176+
177+
.header {
178+
grid-area: header;
179+
background-color: var(--card-head);
180+
padding: var(--card-padding);
181+
min-height: 2.75em; // with or without icon
182+
max-height: 4rem;
183+
184+
h3,
185+
h4 {
186+
display: inline-block;
187+
margin: 0;
188+
}
189+
190+
// images in header
191+
>svg:first-child,
192+
>img:first-child {
193+
// display: block;
194+
float: left;
195+
height: 2.75rem;
196+
aspect-ratio: 1/1;
197+
margin-right: var(--card-padding);
198+
}
199+
}
200+
201+
.main,
202+
.body {
203+
grid-area: main;
204+
flex: 1;
205+
padding: var(--card-padding);
206+
}
207+
208+
.footer {
209+
grid-area: footer;
210+
height: auto;
211+
width: 100%;
212+
padding: var(--card-padding);
213+
border-top: 1px solid rgb(0 0 0 / 12.5%);
214+
background-color: inherit;
215+
text-align: right;
216+
217+
button:not(:first-child) {
218+
margin-left: var(--text-spacing);
219+
}
220+
}
221+
222+
&.autolink h3>a::before {
223+
position: absolute;
224+
top: 0;
225+
left: 0;
226+
height: 100%;
227+
width: 100%;
228+
content: "";
229+
}
230+
}
231+
227232

228233
// simple content cards with image + text
229234
// picture with 4:3 ratio + text
@@ -249,4 +254,4 @@ $u-card-gap: 16px;
249254
width: 9.6rem;
250255
max-height: 7.2rem;
251256
}
252-
}
257+
}

‎css/page.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
// The width of the page level elements must be known for the @media queries.
1616
$u-menu-width: 14em;
17-
$u-main-width: 42em;
17+
$u-main-width: 56em;
1818
$u-sidebar-width: 14em;
1919
$u-menu-width: 14em;
2020
$u-layout-gap: 1em;
@@ -36,7 +36,7 @@ $u-layout-gap: 1em;
3636
--header-color: var (--color);
3737

3838
// --main-back: light-dark(white, black);
39-
--main-back: light-dark(hsl(#{base.$u-hue} 0 90%), hsl(#{base.$u-hue} 0 10%));
39+
--main-back: var (--back); // light-dark(hsl(#{base.$u-hue} 0 90%), hsl(#{base.$u-hue} 0 10%));
4040
--main-color: var(--color);
4141
--main-width: #{$u-main-width};
4242

@@ -220,7 +220,7 @@ body.sitelayout {
220220
main {
221221
background-color: var(--main-back);
222222
color: var(--main-color);
223-
padding: var(--layout-padding);
223+
padding: var(--layout-padding) 0;
224224
container-name: main;
225225
container-type: inline-size;
226226
}

‎dev/displays.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ For drawing anything to the screen the stroke and fill colors always have to be
102102
The C++ Classes used for display drivers for specific chips and the display item shown on the
103103
display are illustrated in the following class diagram:
104104

105-
```mermaid
105+
<!-- ```mermaid
106106
flowchart TD
107107
108108
DisplayChipAdapter["Display#60;Chip#62;Adapter"]
@@ -111,30 +111,31 @@ flowchart TD
111111
DisplayOutputElement
112112
DisplayChipElement["Display#60;Chip#62;Element"]
113113
DisplayElement
114-
Element
114+
Element
115115
116116
117117
subgraph Implementation of displays
118-
DisplayChipElement -- implements--> DisplayElement
118+
DisplayChipElement -- implements -- > DisplayElement
119119
end
120120
121121
subgraph Implementation of display items
122-
DisplayItemElement --implements--> DisplayOutputElement
122+
DisplayItemElement --implements-- > DisplayOutputElement
123123
end
124124
125125
subgraph Implementation of draw operations
126-
DisplayChipAdapter -->|implements| DisplayAGFXAdapter
127-
DisplayAGFXAdapter -->|implements| DisplayAdapter
126+
DisplayChipAdapter -- >|implements| DisplayAGFXAdapter
127+
DisplayAGFXAdapter -- >|implements| DisplayAdapter
128128
end
129129
130130
131-
DisplayElement --implements--> Element
131+
DisplayElement --implements-- > Element
132132
133-
DisplayOutputElement --implements--> Element
133+
DisplayOutputElement --implements-- > Element
134134
135135
DisplayItemElement -.draws with.-> DisplayChipAdapter
136136
DisplayChipElement -.creates.-> DisplayChipAdapter
137137
```
138+
-->
138139

139140
The `Display<Chip>Adapter` implementations include using various display types. They are
140141
created and initialized by the corresponding `Display<Chip>Element` class.

‎docstyle.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)