-
Notifications
You must be signed in to change notification settings - Fork 0
/
styleguide.html
282 lines (262 loc) · 9 KB
/
styleguide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Home-page of Duncan Ritchie, a web developer in Chester, England.">
<title>Style-guide — Duncan Ritchie’s portfolio</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" media="print" href="./css/print.css">
<link rel="stylesheet" href="https://fonts.duncanritchie.co.uk/main.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon-96x96.png" type="image/png" />
<style>
:root {
scroll-padding-top: 3.5rem;
}
</style>
</head>
<body class="no-intersection-observer" id="index-body">
<nav>
<a id="nav-icon-a" href="index.html">
<picture>
<source media="(min-width:1201px)" srcset="android-chrome-192x192.png">
<img id="nav-icon" src="favicon-96x96.png" alt="Duncan’s fulmar icon" />
</picture>
Duncan Ritchie
</a>
<ul id="nav-main-list">
<li>
<input type="checkbox" id="code-nav-tickbox" title="Show or hide menu for my code" aria-controls="code-nav-menu" />
<label for="code-nav-tickbox" id="code-nav-toggle">
My code
</label>
<ul id="code-nav-menu" aria-labelledby="code-nav-toggle">
<li>
<a href="code.html#employment">
My employment
</a>
</li>
<li>
<a href="code.html#website-development">
Developing this website
</a>
</li>
<li>
<a href="code.html#velut">
Latin dictionary
</a>
</li>
<!-- <li>
<a href="code.html#velut-projects">
Ancillary pages for my dictionary
</a>
</li> -->
<li>
<a href="code.html#code">
How I got into coding
</a>
</li>
<!-- <li>
<a href="code.html#csharp-projects">
C# projects
</a>
</li>
<li>
<a href="code.html#java-projects">
Java projects
</a>
</li>
<li>
<a href="code.html#javascript-projects">
JavaScript projects
</a>
</li> -->
</ul>
</li>
<li>
<!-- When the JavaScript runs, the input and label are swapped out for a button that has the same Aria attributes. -->
<input type="checkbox" id="about-me-nav-tickbox" title="Show or hide menu for more about me" aria-controls="about-me-nav-menu" />
<label for="about-me-nav-tickbox" id="about-me-nav-toggle">
More <span id="about-me-hidden-text">about me</span>
</label>
<ul id="about-me-nav-menu" aria-labelledby="about-me-nav-toggle">
<li>
<a href="aboutme.html#blog">
My blog
</a>
</li>
<li>
<a href="aboutme.html#dog">
My dog
</a>
</li>
<li>
<a href="aboutme.html#chester">
Chester
</a>
</li>
<li>
<a href="aboutme.html#latin">
Latin
</a>
</li>
<li>
<a href="aboutme.html#photos">
Photography
</a>
</li>
<li>
<a href="aboutme.html#tiq">
Theatre in the Quarter
</a>
</li>
</ul>
</li>
</ul>
<ul id="socials-list">
<li>
<a href="https://github.com/DuncanRitchie/" id="nav-github">
GitHub
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/duncan-ritchie-uk/" id="nav-linkedin">
LinkedIn
</a>
</li>
</ul>
</nav>
<article id="styleguide-article" aria-labelledby="styleguide-heading">
<h1 id="styleguide-heading">
Style-guide.
</h1>
<p>
Inspired by the style-guides of <a href="https://chenhuijing.com/styleguide/">Chen Hui Jing</a>, <a href="https://danabyerly.com/style-guide/">Dana Byerly</a>, and <a href="https://poormansstyleguide.com/">Bryan Braun</a>, this page illustrates how HTML elements are displayed on DuncanRitchie.co.uk with my CSS.
</p>
<p>
(<dfn>HyperText Markup Language</dfn> defines the content of a webpage, and <dfn>Cascading StyleSheets</dfn> are the rules of how that website content should look.)
</p>
<p>
Elements that are not used on this site may be simply taking on your browser’s default styles.
</p>
<p>
Projects such as my blog may have their own styles in addition to what you see here.
</p>
<p>
This is a paragraph.
</p>
<h2>Lists</h2>
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Description term</dt>
<dd>Description definition</dd>
<dt>Description term</dt>
<dd>Description definition</dd>
<dt>Description term</dt>
<dd>Description definition</dd>
<dt>Description term</dt>
<dd>Description definition</dd>
</dl>
<h2>Inline elements</h2>
<p>
A paragraph may contain:<br>
an <a href="./">a</a> element linking internally,<br>
an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">a</a> element linking to an external site,<br>
an <abbr title="abbreviation">abbr</abbr> element,<br>
a <b>b</b> element,<br>
a <cite>cite</cite> element,<br>
a <code>code</code> element,<br>
a <del>del</del> element (but there may be special formatting on <a href="#block-insertions-and-deletions">block-level deletions</a>),<br>
an <em>em</em> element,<br>
a <dfn title="I didn’t realise <dfn> was an element">dfn</dfn> element,<br>
an <i>i</i> element,<br>
an <ins>ins</ins> element (but there may be special formatting on <a href="#block-insertions-and-deletions">block-level insertions</a>),<br>
a <kbd>kbd</kbd> element,<br>
a <mark>mark</mark> element,<br>
a <q>q</q> element,<br>
a <q>q element with a <q>q</q> element inside it</q>,<br>
an <s>s</s> element,<br>
a <samp>samp</samp> element,<br>
a <small>small</small> element,<br>
a <span>span</span> element,<br>
a <strong>strong</strong> element,<br>
a <sub>sub</sub> element,<br>
a <sup>sup</sup> element,<br>
a <u>u</u> element,<br>
a <var>var</var> element,<br>
</p>
<h2>Block elements</h2>
<h3>A picture</h3>
<picture>
<img src="favicon-96x96.png" alt="My fulmar icon"/>
</picture>
<h3>A figure containing a picture and figcaption</h3>
<figure>
<picture>
<img src="favicon-96x96.png" alt="Head of a fulmar on a sky-blue background"/>
</picture>
<figcaption>
My fulmar icon
</figcaption>
</figure>
<h3>A blockquote</h3>
<blockquote>
I sing of weapons and the man who first from the shores at Troy...
</blockquote>
<h3>Preformatted</h3>
<pre>
This is something in a <pre> element.
</pre>
<h4>Code-blocks</h4>
<p>
My <a href="https://www.duncanritchie.co.uk/blog">blog</a> (as well as my <a href="https://www.duncanritchie.co.uk/childhood-blog">Childhood Blog</a> in its archived state) includes code-blocks, <code><pre><code></code></pre></code>.
These have syntax highlighting, courtesy of Shiki which comes built into Astro (the static-site generator I use).
</p>
<p>
Articles in my blog are written in Markdown, so the syntax for a code-block is as follows:
</p>
<pre><code>```html
<p>This is HTML code.</p>
```</code></pre>
<p>
Articles in my Childhood Blog do not contain code.
The <a href="https://www.duncanritchie.co.uk/childhood-blog/source">code-blocks are on a page</a> rendered by an .astro file, using a component built into Astro:
</p>
<pre><code><Code code="<p>This is HTML code.</p>" lang="html" theme="slack-dark" /></code></pre>
<p>(Astro’s <code><Code></code> component seems not to inherit the Shiki theme from the project settings, so it must be specified for each code-block.)</p>
<h3 id="block-insertions-and-deletions">Block insertions and deletions</h3>
<p>
I have <code>del</code> and <code>ins</code> classes for block-level elements that are intended to wrap <code><del></code>/<code><ins></code> elements.
The block-level elements then look like this:
</p>
<p class="del"><del>This entire paragraph has been deleted.</del></p>
<p class="ins"><ins>This entire paragraph has been inserted.</ins></p>
<h3>A disclosure widget</h3>
<details>
<summary>Details that may be hidden by default</summary>
<p>Here is the content that was hidden.</p>
<p>This uses <code><details></code> and <code><summary></code> elements.</p>
</details>
<h2>Headings</h2>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<p>Here is some text under the headings because headings without anything under them don’t make much sense.</p>
</article>
<script src="js/main.js"></script>
<script src="js/navbar.js"></script>
</body>
</html>