From 4082219525a0446de2a6128f428846e229bc250d Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 7 Mar 2024 14:46:36 +0100 Subject: [PATCH 1/6] fix(css): Make example a little more accessible (#261) --- web-workers/simple-shared-worker/style.css | 22 ++----------- web-workers/simple-web-worker/style.css | 38 +++++++--------------- 2 files changed, 15 insertions(+), 45 deletions(-) diff --git a/web-workers/simple-shared-worker/style.css b/web-workers/simple-shared-worker/style.css index 343ad8aa..b7d5d5f3 100644 --- a/web-workers/simple-shared-worker/style.css +++ b/web-workers/simple-shared-worker/style.css @@ -1,17 +1,8 @@ html { - background-color: #7d2663; + background-color: rgb(230, 230, 230); font-family: sans-serif; } -h1 { - margin: 0; - font-size: 15vw; - letter-spacing: -0.2rem; - position: absolute; - top: 0; - z-index: -1; -} - p { margin: 0 0 1rem 0; } @@ -20,15 +11,8 @@ p { padding: 4vw; width: 75%; margin: 3vw auto; - background-color: rgba(255, 255, 255, 0.7); - border: 5px solid black; - opacity: 0.3; - transition: 1s all; -} - -.controls:hover, -.controls:focus { - opacity: 1; + border: 2px solid; + border-radius: 6px; } .controls label, diff --git a/web-workers/simple-web-worker/style.css b/web-workers/simple-web-worker/style.css index 1e522576..b7d5d5f3 100644 --- a/web-workers/simple-web-worker/style.css +++ b/web-workers/simple-web-worker/style.css @@ -1,40 +1,26 @@ html { - background-color: #7D2663; - font-family: sans-serif; -} - -h1 { - margin: 0; - font-size: 20vmin; - letter-spacing: -0.2rem; - position: absolute; - top: 0; - z-index: -1; + background-color: rgb(230, 230, 230); + font-family: sans-serif; } p { - margin: 0; + margin: 0 0 1rem 0; } .controls { - padding: 4vw; - width: 75%; - margin: 10vw auto; - background-color: rgba(255,255,255,0.7); - border: 5px solid black; - opacity: 0.3; - transition: 1s all; + padding: 4vw; + width: 75%; + margin: 3vw auto; + border: 2px solid; + border-radius: 6px; } -.controls:hover, .controls:focus { - opacity: 1; -} - -.controls label, .controls p, .controls input { - font-size: 3vw; +.controls label, +.controls p, +.controls input { + font-size: 3vw; } .controls div { padding-bottom: 1rem; } - From 50234c815ba1bd98c88ece28145fc5b3042fd71f Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 7 Mar 2024 16:26:59 +0100 Subject: [PATCH 2/6] chore: remove unused tutorial files (#262) --- .../tutorial/tetrahedron/index.html | 15 - .../tutorial/tetrahedron/webgl-demo.js | 440 ------------------ 2 files changed, 455 deletions(-) delete mode 100644 webgl-examples/tutorial/tetrahedron/index.html delete mode 100644 webgl-examples/tutorial/tetrahedron/webgl-demo.js diff --git a/webgl-examples/tutorial/tetrahedron/index.html b/webgl-examples/tutorial/tetrahedron/index.html deleted file mode 100644 index 6074a84f..00000000 --- a/webgl-examples/tutorial/tetrahedron/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - WebGL Demo - - - - - - - - - - diff --git a/webgl-examples/tutorial/tetrahedron/webgl-demo.js b/webgl-examples/tutorial/tetrahedron/webgl-demo.js deleted file mode 100644 index c07f4543..00000000 --- a/webgl-examples/tutorial/tetrahedron/webgl-demo.js +++ /dev/null @@ -1,440 +0,0 @@ -var tetrahedronRotation = 0.0; - -main(); - -// -// Start here -// -function main() { - const canvas = document.querySelector("#glcanvas"); - const gl = - canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); - - // If we don't have a GL context, give up now - - if (!gl) { - alert( - "Unable to initialize WebGL. Your browser or machine may not support it." - ); - return; - } - - // Vertex shader program - - const vsSource = ` - attribute vec4 aVertexPosition; - attribute vec4 aVertexColor; - - uniform mat4 uModelViewMatrix; - uniform mat4 uProjectionMatrix; - - varying lowp vec4 vColor; - - void main(void) { - gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; - vColor = aVertexColor; - } - `; - - // Fragment shader program - - const fsSource = ` - varying lowp vec4 vColor; - - void main(void) { - gl_FragColor = vColor; - } - `; - - // Initialize a shader program; this is where all the lighting - // for the vertices and so forth is established. - const shaderProgram = initShaderProgram(gl, vsSource, fsSource); - - // Collect all the info needed to use the shader program. - // Look up which attributes our shader program is using - // for aVertexPosition, aVevrtexColor and also - // look up uniform locations. - const programInfo = { - program: shaderProgram, - attribLocations: { - vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), - vertexColor: gl.getAttribLocation(shaderProgram, "aVertexColor"), - }, - uniformLocations: { - projectionMatrix: gl.getUniformLocation( - shaderProgram, - "uProjectionMatrix" - ), - modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), - }, - }; - - // Here's where we call the routine that builds all the - // objects we'll be drawing. - const buffers = initBuffers(gl); - - var then = 0; - - // Draw the scene repeatedly - function render(now) { - now *= 0.001; // convert to seconds - const deltaTime = now - then; - then = now; - - drawScene(gl, programInfo, buffers, deltaTime); - - requestAnimationFrame(render); - } - - requestAnimationFrame(render); -} - -// -// initBuffers -// -// Initialize the buffers we'll need. For this demo, we just -// have one object -- a simple three-dimensional tetrahedron. -// -function initBuffers(gl) { - // Create a buffer for the tetrahedron's vertex positions. - - const positionBuffer = gl.createBuffer(); - - // Select the positionBuffer as the one to apply buffer - // operations to from here out. - - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - - // Now create an array of positions for the tetrahedron. - // A equilateral triangle is needed ( well 4 of them ) - // Point `O` is where the height is projected - // The tetrahedron is rotated around point `M` - // Height from vertex `A` to the edge `BC` is `H` - // The edge of the tetrahedron is 2 units long - // |AH| = 1.7320508075688772935274463415059 - // The median and a height AH divides itself by - // the other medians into 1x and 2x ( one part and two parts ) - // |AH|/3 = 0.57735026918962576450914878050197 - // Find the tetrahedron height by argument sine ( Date: Thu, 7 Mar 2024 18:37:30 +0200 Subject: [PATCH 3/6] fix(simple-service-worker): avoid HTML to appear as text (#234) * Fix #191 Fixes https://github.com/mdn/dom-examples/issues/191 * Update service-worker/simple-service-worker/app.js Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --------- Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> Co-authored-by: Brian Thomas Smith --- service-worker/simple-service-worker/app.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/service-worker/simple-service-worker/app.js b/service-worker/simple-service-worker/app.js index 72472bf5..e5f4f308 100644 --- a/service-worker/simple-service-worker/app.js +++ b/service-worker/simple-service-worker/app.js @@ -42,7 +42,11 @@ const createGalleryFigure = async (galleryImage) => { const myImage = document.createElement('img'); const myCaption = document.createElement('caption'); const myFigure = document.createElement('figure'); - myCaption.textContent = `${galleryImage.name}: Taken by ${galleryImage.credit}`; + const myName = document.createElement('span'); + myName.textContent = `${galleryImage.name}: `; + const myCredit = document.createElement('span'); + myCredit.innerHTML = `Taken by ${galleryImage.credit}`; + myCaption.append(myName, myCredit); myImage.src = window.URL.createObjectURL(imageBlob); myImage.setAttribute('alt', galleryImage.alt); myFigure.append(myImage, myCaption); From 69c077feb651ff465bee3ca3f822197f53ca81a7 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 11 Mar 2024 17:32:26 +0000 Subject: [PATCH 4/6] add display-mode: picture-in-picture example and fix sizing issue (#263) * add display-mode: picture-in-picture example and fix sizing issue * Update document-picture-in-picture/main.css Co-authored-by: Vadim Makeev --------- Co-authored-by: Vadim Makeev --- document-picture-in-picture/main.css | 16 ++++++++++++++++ document-picture-in-picture/main.js | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css index 06f31119..2920b44a 100644 --- a/document-picture-in-picture/main.css +++ b/document-picture-in-picture/main.css @@ -11,3 +11,19 @@ #in-pip-message { display: none; } + +@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) { + body { + background: antiquewhite; + } +} + +@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) { + body { + background: #333; + } + + a { + color: antiquewhite; + } +} diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js index 512e958a..d0b8635a 100644 --- a/document-picture-in-picture/main.js +++ b/document-picture-in-picture/main.js @@ -22,7 +22,7 @@ async function togglePictureInPicture() { // Open a Picture-in-Picture window. const pipWindow = await window.documentPictureInPicture.requestWindow({ width: videoPlayer.clientWidth, - height: videoPlayer.clientHeight, + height: videoPlayer.clientHeight + 50, }); // Add pagehide listener to handle the case of the pip window being closed using the browser X button From 929e39675d42b6642e96ede0b7cf4aa25eb822f5 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 12 Mar 2024 09:39:45 +0100 Subject: [PATCH 5/6] chore: Format CSS (#259) --- .prettierignore | 2 + .prettierrc.json | 3 + audiocontext-setsinkid/style.css | 99 +++++----- channel-messaging-multimessage/style.css | 18 +- .../half-highlight-fixed-size/style.css | 5 +- document-picture-in-picture/main.css | 14 +- fullscreen-api/main.css | 10 +- indexeddb-examples/idbindex/style/style.css | 9 +- media-session/moz.css | 122 +++++++----- media/mediaerror/main.css | 20 +- media/web-dictaphone/styles/app.css | 25 +-- picture-in-picture/main.css | 14 +- pointer-lock/style.css | 31 +-- screen-wake-lock-api/moz.css | 122 +++++++----- to-do-notifications/style/style.css | 3 +- view-transitions/style.css | 18 +- web-crypto/derive-bits/style.css | 78 ++++---- web-crypto/derive-key/style.css | 95 +++++----- web-crypto/encrypt-decrypt/style.css | 95 +++++----- web-crypto/export-key/style.css | 62 +++--- web-crypto/import-key/style.css | 104 +++++----- web-crypto/unwrap-key/style.css | 104 +++++----- web-crypto/wrap-key/style.css | 62 +++--- web-speech-api/phrase-matcher/style.css | 10 +- web-speech-api/speak-easy-synthesis/style.css | 21 +- web-speech-api/speech-color-changer/style.css | 10 +- web-storage/style.css | 179 +++++++++--------- 27 files changed, 736 insertions(+), 599 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..889bcbe1 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +**/*.html +**/*.md \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..9c1044f6 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "bracketSameLine": true +} diff --git a/audiocontext-setsinkid/style.css b/audiocontext-setsinkid/style.css index c370c14a..0a6b7073 100644 --- a/audiocontext-setsinkid/style.css +++ b/audiocontext-setsinkid/style.css @@ -1,46 +1,53 @@ -button, select, label { - font-weight: 400; - line-height: 1.5; - font-size: 1rem; - font-family: sans-serif; - } - - button, select { - padding: 6px 12px; - text-align: center; - background-color: transparent; - border-radius: .25rem; - } - - button { - color: #0d6efd; - border: 1px solid transparent; - border-color: #0d6efd; - cursor: pointer; - outline: 0; - display: inline-block; - transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; - margin-bottom: 20px; - } - - button:hover { - color: #fff; - background-color: #0d6efd; - border-color: #0d6efd; - } - - button:disabled { - color: #999; - border-color: #999; - background: white; - cursor: not-allowed; - } - - label { - padding-right: 24px; - } - - .select-container p { - color: red; - margin-bottom: 36px; - } \ No newline at end of file +button, +select, +label { + font-weight: 400; + line-height: 1.5; + font-size: 1rem; + font-family: sans-serif; +} + +button, +select { + padding: 6px 12px; + text-align: center; + background-color: transparent; + border-radius: 0.25rem; +} + +button { + color: #0d6efd; + border: 1px solid transparent; + border-color: #0d6efd; + cursor: pointer; + outline: 0; + display: inline-block; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; + margin-bottom: 20px; +} + +button:hover { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} + +button:disabled { + color: #999; + border-color: #999; + background: white; + cursor: not-allowed; +} + +label { + padding-right: 24px; +} + +.select-container p { + color: red; + margin-bottom: 36px; +} diff --git a/channel-messaging-multimessage/style.css b/channel-messaging-multimessage/style.css index 0c10a11d..ea128420 100644 --- a/channel-messaging-multimessage/style.css +++ b/channel-messaging-multimessage/style.css @@ -1,6 +1,7 @@ -html,body { - margin: 0; - font-family: 'Open Sans Condensed', sans-serif; +html, +body { + margin: 0; + font-family: "Open Sans Condensed", sans-serif; } body { @@ -15,7 +16,7 @@ form { } form input { - width: 55%; + width: 55%; } form label { @@ -24,7 +25,7 @@ form label { } form button { - width: 60%; + width: 60%; display: block; margin: 10px auto 0; } @@ -33,14 +34,15 @@ p { margin: 10px 0; } -h1, p { +h1, +p { text-align: center; } h1 { - font-family: 'Lobster Two', cursive; + font-family: "Lobster Two", cursive; } ul { width: 90%; -} \ No newline at end of file +} diff --git a/css-painting/half-highlight-fixed-size/style.css b/css-painting/half-highlight-fixed-size/style.css index 9697b809..26f56448 100644 --- a/css-painting/half-highlight-fixed-size/style.css +++ b/css-painting/half-highlight-fixed-size/style.css @@ -1,4 +1,3 @@ .fancy { - background-image: paint(headerHighlight); - } - \ No newline at end of file + background-image: paint(headerHighlight); +} diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css index 2920b44a..ea4ed45c 100644 --- a/document-picture-in-picture/main.css +++ b/document-picture-in-picture/main.css @@ -1,15 +1,19 @@ #contents { - width: 600px; - font: 14px "Open Sans", sans-serif; + width: 600px; + font: + 14px "Open Sans", + sans-serif; } #credits { - padding: 0 0 10px 0; - font: italic 10px "Open Sans", sans-serif; + padding: 0 0 10px 0; + font: + italic 10px "Open Sans", + sans-serif; } #in-pip-message { - display: none; + display: none; } @media (display-mode: picture-in-picture) and (prefers-color-scheme: light) { diff --git a/fullscreen-api/main.css b/fullscreen-api/main.css index c613fe9a..a8b267da 100644 --- a/fullscreen-api/main.css +++ b/fullscreen-api/main.css @@ -1,8 +1,10 @@ #credits { - padding: 0 0 10px 0; - font: italic 12px "Open Sans", sans-serif; + padding: 0 0 10px 0; + font: + italic 12px "Open Sans", + sans-serif; } #video { - max-width: 100%; -} \ No newline at end of file + max-width: 100%; +} diff --git a/indexeddb-examples/idbindex/style/style.css b/indexeddb-examples/idbindex/style/style.css index 5627d6f6..a96799a3 100644 --- a/indexeddb-examples/idbindex/style/style.css +++ b/indexeddb-examples/idbindex/style/style.css @@ -10,8 +10,13 @@ h1 { font-family: "Bevan", cursive; font-size: 4rem; letter-spacing: 0.2rem; - text-shadow: 1px 1px 1px #eee4fe, 2px 2px 1px #eee4fe, 3px 3px 1px #7b62ae, - 4px 4px 1px #7b62ae, 5px 5px 1px #261758, 6px 6px 1px #261758; + text-shadow: + 1px 1px 1px #eee4fe, + 2px 2px 1px #eee4fe, + 3px 3px 1px #7b62ae, + 4px 4px 1px #7b62ae, + 5px 5px 1px #261758, + 6px 6px 1px #261758; } table { diff --git a/media-session/moz.css b/media-session/moz.css index e50f740a..5f1a303a 100644 --- a/media-session/moz.css +++ b/media-session/moz.css @@ -1,85 +1,113 @@ @font-face { - font-family: 'zillaslab'; - src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2'); + font-family: "zillaslab"; + src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2") + format("woff2"); } :root { - --black: hsl(0, 0%, 16%); - --white: hsl(0,0%,97%); - --blue: hsl(198, 100%, 66%); - --teal: hsl(198, 43%, 42%); - --lightYellow: hsl(43, 100%, 92%); - --grey: hsl(0, 0%, 80%); - --unit: 1.2rem; + --black: hsl(0, 0%, 16%); + --white: hsl(0, 0%, 97%); + --blue: hsl(198, 100%, 66%); + --teal: hsl(198, 43%, 42%); + --lightYellow: hsl(43, 100%, 92%); + --grey: hsl(0, 0%, 80%); + --unit: 1.2rem; } body { - padding: var(--unit); - background-color: var(--white); - font-family: 'Arial', sans-serif; font-size: 100%; - color: var(--black); line-height: 1.3; + padding: var(--unit); + background-color: var(--white); + font-family: "Arial", sans-serif; + font-size: 100%; + color: var(--black); + line-height: 1.3; } /* page partials */ footer { - padding: var(--unit); - margin-top: calc(var(--unit)*2); - border-top: 1px solid var(--grey); + padding: var(--unit); + margin-top: calc(var(--unit) * 2); + border-top: 1px solid var(--grey); } footer p { - margin: 0px; text-align: center; + margin: 0px; + text-align: center; } /* base styles */ -h1, h2 { - font-family: "zillaslab", serif; +h1, +h2 { + font-family: "zillaslab", serif; } h2 { - padding: calc(var(--unit)/2); - background-color: var(--black); - color: var(--white); font-weight: normal; + padding: calc(var(--unit) / 2); + background-color: var(--black); + color: var(--white); + font-weight: normal; } -p {} +p { +} a { - border: 1px solid var(--teal); - border-width: 0px 0px 1px 0px; - color: var(--teal); - text-decoration: none; + border: 1px solid var(--teal); + border-width: 0px 0px 1px 0px; + color: var(--teal); + text-decoration: none; } a:hover { - border-width: 1px 0px 0px 0px; + border-width: 1px 0px 0px 0px; } nav ul { - display: flex; justify-content: space-between; - margin: 0px; padding: 0px; - list-style: none; + display: flex; + justify-content: space-between; + margin: 0px; + padding: 0px; + list-style: none; +} +nav li { + margin: 0px; + padding: 0px; } -nav li {margin: 0px; padding: 0px;} -dl {display: flex; flex-wrap: wrap;} -dt, dd {padding: 2%; box-sizing: border-box;} -dt {width: 30%; font-weight: bold; text-align: right;} -dd {width: 66%; margin: 0px;} +dl { + display: flex; + flex-wrap: wrap; +} +dt, +dd { + padding: 2%; + box-sizing: border-box; +} +dt { + width: 30%; + font-weight: bold; + text-align: right; +} +dd { + width: 66%; + margin: 0px; +} code { - background-color: var(--lightYellow); - font-family:monospace; font-size:110%; - letter-spacing:0.5px; + background-color: var(--lightYellow); + font-family: monospace; + font-size: 110%; + letter-spacing: 0.5px; } pre { - padding: var(--unit); - background-color: var(--grey); - border-left: 4px solid var(--teal); - white-space: pre-wrap; - overflow-wrap: break-word; - tab-size: 4; font-size: 86%; + padding: var(--unit); + background-color: var(--grey); + border-left: 4px solid var(--teal); + white-space: pre-wrap; + overflow-wrap: break-word; + tab-size: 4; + font-size: 86%; } pre code { - background: none; -} \ No newline at end of file + background: none; +} diff --git a/media/mediaerror/main.css b/media/mediaerror/main.css index a1686056..473de5d0 100644 --- a/media/mediaerror/main.css +++ b/media/mediaerror/main.css @@ -1,18 +1,22 @@ #contents { - width: 600px; - font: 14px "Open Sans", sans-serif; + width: 600px; + font: + 14px "Open Sans", + sans-serif; } #credits { - padding: 0 0 10px 0; - font: italic 10px "Open Sans", sans-serif; + padding: 0 0 10px 0; + font: + italic 10px "Open Sans", + sans-serif; } #controls { - border: 1px solid black; + border: 1px solid black; } #log { - font: 14px monospace; - padding: 6px 0; -} \ No newline at end of file + font: 14px monospace; + padding: 6px 0; +} diff --git a/media/web-dictaphone/styles/app.css b/media/web-dictaphone/styles/app.css index ae6f1b6c..01feb166 100644 --- a/media/web-dictaphone/styles/app.css +++ b/media/web-dictaphone/styles/app.css @@ -4,12 +4,13 @@ box-sizing: border-box; } -html, body { +html, +body { height: 100%; } body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.8rem; } @@ -19,7 +20,8 @@ body { flex-direction: column; } -h1, h2 { +h1, +h2 { font-size: 2rem; text-align: center; font-weight: normal; @@ -57,17 +59,17 @@ button { padding: 0.5rem; } -button:hover, button:focus { +button:hover, +button:focus { box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1); background: #0ae; } button:active { - box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); + box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5); transform: translateY(2px); } - /* Make the clips use as much space as possible, and * also show a scrollbar when there are too many clips to show * in the available space */ @@ -76,7 +78,8 @@ button:active { overflow: auto; } -section, article { +section, +article { display: block; } @@ -119,9 +122,9 @@ label { border-radius: 10px; } -input[type=checkbox] { - position: absolute; - top: -100px; +input[type="checkbox"] { + position: absolute; + top: -100px; } aside { @@ -146,7 +149,7 @@ aside a { } /* Toggled State of information box */ -input[type=checkbox]:checked ~ aside { +input[type="checkbox"]:checked ~ aside { transform: translateX(0); } diff --git a/picture-in-picture/main.css b/picture-in-picture/main.css index 577a3182..c97680b6 100644 --- a/picture-in-picture/main.css +++ b/picture-in-picture/main.css @@ -1,13 +1,17 @@ #contents { - width: 600px; - font: 14px "Open Sans", sans-serif; + width: 600px; + font: + 14px "Open Sans", + sans-serif; } #credits { - padding: 0 0 10px 0; - font: italic 10px "Open Sans", sans-serif; + padding: 0 0 10px 0; + font: + italic 10px "Open Sans", + sans-serif; } :picture-in-picture { - box-shadow: 0 0 0 5px red; + box-shadow: 0 0 0 5px red; } diff --git a/pointer-lock/style.css b/pointer-lock/style.css index 84d4c112..7a1edaf3 100644 --- a/pointer-lock/style.css +++ b/pointer-lock/style.css @@ -1,30 +1,31 @@ -html, body { - margin: 0; - padding: 0; +html, +body { + margin: 0; + padding: 0; } html { - font-family: sans-serif; + font-family: sans-serif; } canvas { - display: block; - margin: 0 auto; - border: 1px solid black; + display: block; + margin: 0 auto; + border: 1px solid black; } .information { - width: 640px; - margin: 0 auto 50px; + width: 640px; + margin: 0 auto 50px; } #tracker { - position: absolute; - top: 0; - right: 10px; - background-color: white; + position: absolute; + top: 0; + right: 10px; + background-color: white; } h1 { - font-size: 200%; -} \ No newline at end of file + font-size: 200%; +} diff --git a/screen-wake-lock-api/moz.css b/screen-wake-lock-api/moz.css index e50f740a..5f1a303a 100644 --- a/screen-wake-lock-api/moz.css +++ b/screen-wake-lock-api/moz.css @@ -1,85 +1,113 @@ @font-face { - font-family: 'zillaslab'; - src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2'); + font-family: "zillaslab"; + src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2") + format("woff2"); } :root { - --black: hsl(0, 0%, 16%); - --white: hsl(0,0%,97%); - --blue: hsl(198, 100%, 66%); - --teal: hsl(198, 43%, 42%); - --lightYellow: hsl(43, 100%, 92%); - --grey: hsl(0, 0%, 80%); - --unit: 1.2rem; + --black: hsl(0, 0%, 16%); + --white: hsl(0, 0%, 97%); + --blue: hsl(198, 100%, 66%); + --teal: hsl(198, 43%, 42%); + --lightYellow: hsl(43, 100%, 92%); + --grey: hsl(0, 0%, 80%); + --unit: 1.2rem; } body { - padding: var(--unit); - background-color: var(--white); - font-family: 'Arial', sans-serif; font-size: 100%; - color: var(--black); line-height: 1.3; + padding: var(--unit); + background-color: var(--white); + font-family: "Arial", sans-serif; + font-size: 100%; + color: var(--black); + line-height: 1.3; } /* page partials */ footer { - padding: var(--unit); - margin-top: calc(var(--unit)*2); - border-top: 1px solid var(--grey); + padding: var(--unit); + margin-top: calc(var(--unit) * 2); + border-top: 1px solid var(--grey); } footer p { - margin: 0px; text-align: center; + margin: 0px; + text-align: center; } /* base styles */ -h1, h2 { - font-family: "zillaslab", serif; +h1, +h2 { + font-family: "zillaslab", serif; } h2 { - padding: calc(var(--unit)/2); - background-color: var(--black); - color: var(--white); font-weight: normal; + padding: calc(var(--unit) / 2); + background-color: var(--black); + color: var(--white); + font-weight: normal; } -p {} +p { +} a { - border: 1px solid var(--teal); - border-width: 0px 0px 1px 0px; - color: var(--teal); - text-decoration: none; + border: 1px solid var(--teal); + border-width: 0px 0px 1px 0px; + color: var(--teal); + text-decoration: none; } a:hover { - border-width: 1px 0px 0px 0px; + border-width: 1px 0px 0px 0px; } nav ul { - display: flex; justify-content: space-between; - margin: 0px; padding: 0px; - list-style: none; + display: flex; + justify-content: space-between; + margin: 0px; + padding: 0px; + list-style: none; +} +nav li { + margin: 0px; + padding: 0px; } -nav li {margin: 0px; padding: 0px;} -dl {display: flex; flex-wrap: wrap;} -dt, dd {padding: 2%; box-sizing: border-box;} -dt {width: 30%; font-weight: bold; text-align: right;} -dd {width: 66%; margin: 0px;} +dl { + display: flex; + flex-wrap: wrap; +} +dt, +dd { + padding: 2%; + box-sizing: border-box; +} +dt { + width: 30%; + font-weight: bold; + text-align: right; +} +dd { + width: 66%; + margin: 0px; +} code { - background-color: var(--lightYellow); - font-family:monospace; font-size:110%; - letter-spacing:0.5px; + background-color: var(--lightYellow); + font-family: monospace; + font-size: 110%; + letter-spacing: 0.5px; } pre { - padding: var(--unit); - background-color: var(--grey); - border-left: 4px solid var(--teal); - white-space: pre-wrap; - overflow-wrap: break-word; - tab-size: 4; font-size: 86%; + padding: var(--unit); + background-color: var(--grey); + border-left: 4px solid var(--teal); + white-space: pre-wrap; + overflow-wrap: break-word; + tab-size: 4; + font-size: 86%; } pre code { - background: none; -} \ No newline at end of file + background: none; +} diff --git a/to-do-notifications/style/style.css b/to-do-notifications/style/style.css index ffaca88b..ec9ed54b 100644 --- a/to-do-notifications/style/style.css +++ b/to-do-notifications/style/style.css @@ -59,7 +59,8 @@ input[type="submit"] { color: black; text-shadow: 1px 1px 1px black; border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: inset 0px 5px 3px rgba(255, 255, 255, 0.2), + box-shadow: + inset 0px 5px 3px rgba(255, 255, 255, 0.2), inset 0px -5px 3px rgba(0, 0, 0, 0.2); } diff --git a/view-transitions/style.css b/view-transitions/style.css index 1a8a3ff6..412b44ad 100644 --- a/view-transitions/style.css +++ b/view-transitions/style.css @@ -1,7 +1,7 @@ /* resets */ figure { - margin: 0 + margin: 0; } /* layout */ @@ -32,7 +32,8 @@ a { outline: 0; } -.thumbs a:hover img, .thumbs a:focus img { +.thumbs a:hover img, +.thumbs a:focus img { opacity: 1; } @@ -46,10 +47,11 @@ a { border-radius: 7px; } -footer, figcaption { +footer, +figcaption { position: absolute; padding: 5px 10px; - background-color: rgba(255,255,255,0.5); + background-color: rgba(255, 255, 255, 0.5); } footer { @@ -70,8 +72,10 @@ figcaption { /* text */ -h1, figcaption, a { - font-family: 'Roboto Slab', serif; +h1, +figcaption, +a { + font-family: "Roboto Slab", serif; } h1 { @@ -150,4 +154,4 @@ figcaption { ::view-transition-new(figure-caption) { animation: 0.25s 0.25s linear both grow-x; -} */ \ No newline at end of file +} */ diff --git a/web-crypto/derive-bits/style.css b/web-crypto/derive-bits/style.css index d5ceac2b..703427db 100644 --- a/web-crypto/derive-bits/style.css +++ b/web-crypto/derive-bits/style.css @@ -1,93 +1,95 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .derive-bits { - margin: 0 .5rem; +.description, +.derive-bits { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .derive-bits { - box-shadow: -1px 2px 5px gray; - padding: .5rem; - margin-bottom: 2rem; + box-shadow: -1px 2px 5px gray; + padding: 0.5rem; + margin-bottom: 2rem; } input[type="button"] { - width: 5rem; + width: 5rem; } .derived-bits-value { - padding-left: .5rem; - font-family: monospace; + padding-left: 0.5rem; + font-family: monospace; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 40rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 40rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* derive-bits controls grid */ .derive-bits-controls { - display: grid; - grid-template-columns: 1fr 5rem; - grid-template-rows: 1fr; + display: grid; + grid-template-columns: 1fr 5rem; + grid-template-rows: 1fr; } .derived-bits { - grid-column-start: 1; - grid-row-start: 1; + grid-column-start: 1; + grid-row-start: 1; } .derive-bits-button { - grid-column-start: 2; - grid-row-start: 1; + grid-column-start: 2; + grid-row-start: 1; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/derive-key/style.css b/web-crypto/derive-key/style.css index c97e99e3..a73bf319 100644 --- a/web-crypto/derive-key/style.css +++ b/web-crypto/derive-key/style.css @@ -1,46 +1,49 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .derive-key { - margin: 0 .5rem; +.description, +.derive-key { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .derive-key { - box-shadow: -1px 2px 5px gray; - padding: .2rem .5rem; - margin-bottom: 2rem; + box-shadow: -1px 2px 5px gray; + padding: 0.2rem 0.5rem; + margin-bottom: 2rem; } .derive-key-controls > * { - margin: .5rem 0; + margin: 0.5rem 0; } input[type="button"] { - width: 5rem; + width: 5rem; } -.ciphertext-value, .decrypted-value { - padding-left: .5rem; - font-family: monospace; +.ciphertext-value, +.decrypted-value { + padding-left: 0.5rem; + font-family: monospace; } .error { @@ -49,68 +52,68 @@ input[type="button"] { /* Whole page grid */ main { - display: grid; - grid-template-columns: 32rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 32rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* derive-key controls grid */ .derive-key-controls { - display: grid; - grid-template-columns: 1fr 5rem; - grid-template-rows: 1fr 1fr 1fr; + display: grid; + grid-template-columns: 1fr 5rem; + grid-template-rows: 1fr 1fr 1fr; } .message-control { - grid-column-start: 1; - grid-row-start: 1; + grid-column-start: 1; + grid-row-start: 1; } .ciphertext { - grid-column-start: 1; - grid-row-start: 2; + grid-column-start: 1; + grid-row-start: 2; } .decrypted { - grid-column-start: 1; - grid-row-start: 3; + grid-column-start: 1; + grid-row-start: 3; } .encrypt-button { - grid-column-start: 2; - grid-row-start: 1; + grid-column-start: 2; + grid-row-start: 1; } .decrypt-button { - grid-column-start: 2; - grid-row-start: 2; + grid-column-start: 2; + grid-row-start: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/encrypt-decrypt/style.css b/web-crypto/encrypt-decrypt/style.css index 8627f88a..14fcc420 100644 --- a/web-crypto/encrypt-decrypt/style.css +++ b/web-crypto/encrypt-decrypt/style.css @@ -1,112 +1,115 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .encrypt-decrypt { - margin: 0 .5rem; +.description, +.encrypt-decrypt { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .encrypt-decrypt { - box-shadow: -1px 2px 5px gray; - padding: .2rem .5rem; - margin-bottom: 2rem; + box-shadow: -1px 2px 5px gray; + padding: 0.2rem 0.5rem; + margin-bottom: 2rem; } .encrypt-decrypt-controls > * { - margin: .5rem 0; + margin: 0.5rem 0; } input[type="button"] { - width: 5rem; + width: 5rem; } -.ciphertext-value, .decrypted-value { - padding-left: .5rem; - font-family: monospace; +.ciphertext-value, +.decrypted-value { + padding-left: 0.5rem; + font-family: monospace; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 32rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 32rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* encrypt-decrypt controls grid */ .encrypt-decrypt-controls { - display: grid; - grid-template-columns: 1fr 5rem; - grid-template-rows: 1fr 1fr 1fr; + display: grid; + grid-template-columns: 1fr 5rem; + grid-template-rows: 1fr 1fr 1fr; } .message-control { - grid-column-start: 1; - grid-row-start: 1; + grid-column-start: 1; + grid-row-start: 1; } .ciphertext { - grid-column-start: 1; - grid-row-start: 2; + grid-column-start: 1; + grid-row-start: 2; } .decrypted { - grid-column-start: 1; - grid-row-start: 3; + grid-column-start: 1; + grid-row-start: 3; } .encrypt-button { - grid-column-start: 2; - grid-row-start: 1; + grid-column-start: 2; + grid-row-start: 1; } .decrypt-button { - grid-column-start: 2; - grid-row-start: 2; + grid-column-start: 2; + grid-row-start: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/export-key/style.css b/web-crypto/export-key/style.css index 2d62b92c..d4bd28ad 100644 --- a/web-crypto/export-key/style.css +++ b/web-crypto/export-key/style.css @@ -1,72 +1,74 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .examples { - margin: 0 .5rem; +.description, +.examples { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .output { - box-shadow: inset 0 0 3px 1px black; - height: 100%; + box-shadow: inset 0 0 3px 1px black; + height: 100%; } .exported-key { - padding: 1em; - white-space: pre-wrap; - word-break: break-all; + padding: 1em; + white-space: pre-wrap; + word-break: break-all; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 48rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 48rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/import-key/style.css b/web-crypto/import-key/style.css index 7034d177..2611a356 100644 --- a/web-crypto/import-key/style.css +++ b/web-crypto/import-key/style.css @@ -1,112 +1,118 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .import-key { - margin: 0 .5rem; +.description, +.import-key { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .import-key { - box-shadow: -1px 2px 5px gray; - padding: .2rem .5rem; - margin-bottom: 2rem; + box-shadow: -1px 2px 5px gray; + padding: 0.2rem 0.5rem; + margin-bottom: 2rem; } .import-key-controls > * { - margin: .5rem 0; + margin: 0.5rem 0; } -.ciphertext-value, .signature-value { - padding-left: .5rem; - font-family: monospace; +.ciphertext-value, +.signature-value { + padding-left: 0.5rem; + font-family: monospace; } -.sign-button, .encrypt-button { - background-color: green; - color: white; +.sign-button, +.encrypt-button { + background-color: green; + color: white; } .hidden { - display: none; + display: none; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 36rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 36rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* encrypt-decrypt controls grid */ .import-key-controls { - display: grid; - grid-template-columns: 1fr 8rem; - grid-template-rows: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 8rem; + grid-template-rows: 1fr 1fr; } .message-control { - grid-column-start: 1; - grid-row-start: 1; + grid-column-start: 1; + grid-row-start: 1; } -.ciphertext, .signature { - grid-column-start: 1; - grid-row-start: 2; +.ciphertext, +.signature { + grid-column-start: 1; + grid-row-start: 2; } .import-button { - grid-column-start: 2; - grid-row-start: 1; + grid-column-start: 2; + grid-row-start: 1; } -.encrypt-button, .sign-button { - grid-column-start: 2; - grid-row-start: 2; +.encrypt-button, +.sign-button { + grid-column-start: 2; + grid-row-start: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/unwrap-key/style.css b/web-crypto/unwrap-key/style.css index 0871e6f1..a451057e 100644 --- a/web-crypto/unwrap-key/style.css +++ b/web-crypto/unwrap-key/style.css @@ -1,112 +1,118 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .unwrap-key { - margin: 0 .5rem; +.description, +.unwrap-key { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .unwrap-key { - box-shadow: -1px 2px 5px gray; - padding: .2rem .5rem; - margin-bottom: 2rem; + box-shadow: -1px 2px 5px gray; + padding: 0.2rem 0.5rem; + margin-bottom: 2rem; } .unwrap-key-controls > * { - margin: .5rem 0; + margin: 0.5rem 0; } -.ciphertext-value, .signature-value { - padding-left: .5rem; - font-family: monospace; +.ciphertext-value, +.signature-value { + padding-left: 0.5rem; + font-family: monospace; } -.sign-button, .encrypt-button { - background-color: green; - color: white; +.sign-button, +.encrypt-button { + background-color: green; + color: white; } .hidden { - display: none; + display: none; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 36rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 36rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* encrypt-decrypt controls grid */ .unwrap-key-controls { - display: grid; - grid-template-columns: 1fr 8rem; - grid-template-rows: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 8rem; + grid-template-rows: 1fr 1fr; } .message-control { - grid-column-start: 1; - grid-row-start: 1; + grid-column-start: 1; + grid-row-start: 1; } -.ciphertext, .signature { - grid-column-start: 1; - grid-row-start: 2; +.ciphertext, +.signature { + grid-column-start: 1; + grid-row-start: 2; } .unwrap-button { - grid-column-start: 2; - grid-row-start: 1; + grid-column-start: 2; + grid-row-start: 1; } -.encrypt-button, .sign-button { - grid-column-start: 2; - grid-row-start: 2; +.encrypt-button, +.sign-button { + grid-column-start: 2; + grid-row-start: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-crypto/wrap-key/style.css b/web-crypto/wrap-key/style.css index 5c3b4410..0dda8b40 100644 --- a/web-crypto/wrap-key/style.css +++ b/web-crypto/wrap-key/style.css @@ -1,72 +1,74 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - font-family: sans-serif; - line-height: 1.2rem; +html, +body { + font-family: sans-serif; + line-height: 1.2rem; } /* Layout and styles */ h1 { - color: green; - margin-left: .5rem; + color: green; + margin-left: 0.5rem; } -.description, .examples { - margin: 0 .5rem; +.description, +.examples { + margin: 0 0.5rem; } .description > p { - margin-top: 0; + margin-top: 0; } .output { - box-shadow: inset 0 0 3px 1px black; - height: 100%; + box-shadow: inset 0 0 3px 1px black; + height: 100%; } .wrapped-key { - padding: 1em; - white-space: pre-wrap; - word-break: break-all; + padding: 1em; + white-space: pre-wrap; + word-break: break-all; } /* Whole page grid */ main { - display: grid; - grid-template-columns: 48rem 1fr; - grid-template-rows: 4rem 1fr; + display: grid; + grid-template-columns: 48rem 1fr; + grid-template-rows: 4rem 1fr; } h1 { - grid-column: 1/2; - grid-row: 1; + grid-column: 1/2; + grid-row: 1; } .examples { - grid-column: 1; - grid-row: 2; + grid-column: 1; + grid-row: 2; } .description { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } /* Animate output display */ .fade-in { - animation: fadein .5s; + animation: fadein 0.5s; } @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } diff --git a/web-speech-api/phrase-matcher/style.css b/web-speech-api/phrase-matcher/style.css index 85d842ca..5dab06ad 100644 --- a/web-speech-api/phrase-matcher/style.css +++ b/web-speech-api/phrase-matcher/style.css @@ -1,4 +1,5 @@ -body, html { +body, +html { margin: 0; } @@ -12,14 +13,15 @@ body { overflow: hidden; } -h1, p { +h1, +p { font-family: sans-serif; text-align: center; } div p { padding: 20px; - background-color: rgba(0,0,0,0.2); + background-color: rgba(0, 0, 0, 0.2); } div { @@ -51,4 +53,4 @@ button { .output { font-style: italic; -} \ No newline at end of file +} diff --git a/web-speech-api/speak-easy-synthesis/style.css b/web-speech-api/speak-easy-synthesis/style.css index 60b6b878..48ce6339 100644 --- a/web-speech-api/speak-easy-synthesis/style.css +++ b/web-speech-api/speak-easy-synthesis/style.css @@ -1,4 +1,5 @@ -body, html { +body, +html { margin: 0; } @@ -12,13 +13,16 @@ body { margin: 0 auto; } -h1, p { +h1, +p { font-family: sans-serif; text-align: center; padding: 20px; } -.txt, select, form > div { +.txt, +select, +form > div { display: block; margin: 0 auto; font-family: sans-serif; @@ -38,7 +42,8 @@ form > div { width: 81%; } -.txt, form > div { +.txt, +form > div { margin-bottom: 10px; overflow: auto; } @@ -53,13 +58,15 @@ label { line-height: 1.5; } -.rate-value, .pitch-value { +.rate-value, +.pitch-value { float: right; width: 5%; line-height: 1.5; } -#rate, #pitch { +#rate, +#pitch { float: right; width: 81%; } @@ -71,4 +78,4 @@ label { .controls button { padding: 10px; -} \ No newline at end of file +} diff --git a/web-speech-api/speech-color-changer/style.css b/web-speech-api/speech-color-changer/style.css index f6f12cce..1c735605 100644 --- a/web-speech-api/speech-color-changer/style.css +++ b/web-speech-api/speech-color-changer/style.css @@ -1,4 +1,5 @@ -body, html { +body, +html { margin: 0; } @@ -13,7 +14,8 @@ body { margin: 0 auto; } -h1, p { +h1, +p { font-family: sans-serif; text-align: center; padding: 20px; @@ -26,7 +28,7 @@ div { bottom: 0px; right: 0; left: 0; - background-color: rgba(255,255,255,0.2); + background-color: rgba(255, 255, 255, 0.2); } ul { @@ -34,5 +36,5 @@ ul { } .hints span { - text-shadow: 0px 0px 6px rgba(255,255,255,0.7); + text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7); } diff --git a/web-storage/style.css b/web-storage/style.css index 1b5d0d5d..837e2d15 100644 --- a/web-storage/style.css +++ b/web-storage/style.css @@ -1,83 +1,87 @@ /* General setup */ * { - box-sizing: border-box; + box-sizing: border-box; } -html,body { - margin: 0; +html, +body { + margin: 0; } html { - font-size: 10px; - font-family: sans-serif; + font-size: 10px; + font-family: sans-serif; } /* Typography */ h1 { - font-size: 6rem; + font-size: 6rem; } -p,form,li { - font-size: 1.6rem; - line-height: 1.5; - font-family: sans-serif; +p, +form, +li { + font-size: 1.6rem; + line-height: 1.5; + font-family: sans-serif; } /* Layout and styles */ html { - background-color: #FF0000; - height: 100%; + background-color: #ff0000; + height: 100%; } body { - display: -webkit-box; - display: -moz-box; - display: box; - display: flex; - - -webkit-box-align: center; - -moz-box-align: center; - box-align: center; - justify-content: center; + display: -webkit-box; + display: -moz-box; + display: box; + display: flex; + + -webkit-box-align: center; + -moz-box-align: center; + box-align: center; + justify-content: center; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + align-items: center; - height: inherit; + height: inherit; } body > .wrapper { - width: 90%; - max-width: 800px; - background-color: rgb(250,250,250); - padding: 2rem; - position: relative; - border: 5px solid black; + width: 90%; + max-width: 800px; + background-color: rgb(250, 250, 250); + padding: 2rem; + position: relative; + border: 5px solid black; } body > div > div { - width: 300px; + width: 300px; } h1 { - margin: 0; - padding: 0; - font-family: sans-serif; - position: absolute; - left: 2rem; - top: -4.6rem; - text-transform: uppercase; - color: rgb(250,250,250); - text-shadow: 0px -1px 1px black, - 0px -2px 1px black, - 0px -3px 1px black, - 0px -4px 1px black, - 0px -5px 1px black; + margin: 0; + padding: 0; + font-family: sans-serif; + position: absolute; + left: 2rem; + top: -4.6rem; + text-transform: uppercase; + color: rgb(250, 250, 250); + text-shadow: + 0px -1px 1px black, + 0px -2px 1px black, + 0px -3px 1px black, + 0px -4px 1px black, + 0px -5px 1px black; } form div label { @@ -86,69 +90,70 @@ form div label { text-align: right; } -form div input, form div select { - float: right; +form div input, +form div select { + float: right; } form div input { - width: 49%; - line-height: 1.5; + width: 49%; + line-height: 1.5; } form div select { - width: 50%; + width: 50%; } form div option { - height: 2rem; + height: 2rem; } form div { - clear: both; - margin: 0 auto; - width: 70%; - padding-bottom: 4rem; + clear: both; + margin: 0 auto; + width: 70%; + padding-bottom: 4rem; } footer { - clear: both; + clear: both; } img { - position: absolute; - bottom: 1rem; - left: 1rem; + position: absolute; + bottom: 1rem; + left: 1rem; } @media (max-width: 800px) { - body > div { - width: 100%; - } + body > div { + width: 100%; + } } @media (max-width: 600px) { - h1 { - font-size: 3rem; - top: -2.2rem; - } - - form div label { - float: none; - width: 100%; - text-align: left; - } - - form div input, form div select { - float: none; - width: 100%; - } - - form div { - padding-bottom: 1.5rem; - } - - img { - bottom: -4rem; - } - + h1 { + font-size: 3rem; + top: -2.2rem; + } + + form div label { + float: none; + width: 100%; + text-align: left; + } + + form div input, + form div select { + float: none; + width: 100%; + } + + form div { + padding-bottom: 1.5rem; + } + + img { + bottom: -4rem; + } } From 909895913cedda7fe513481bc324b95870ac1824 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 18 Mar 2024 18:52:29 +0100 Subject: [PATCH 6/6] Make EditContext demo match the MDN tutorial (remove useless `setInterval`, debug mode, reorganize in files, clean up code) (#266) * Removing useless setInterval render * Remove the debug mode * Not needed debug mode visual transition * Split into multiple files * Final changes --- edit-context/html-editor/converter.js | 96 ++++++ edit-context/html-editor/editor.js | 222 ++++++++++++ edit-context/html-editor/index.html | 473 +------------------------- edit-context/html-editor/styles.css | 126 +++++++ 4 files changed, 448 insertions(+), 469 deletions(-) create mode 100644 edit-context/html-editor/converter.js create mode 100644 edit-context/html-editor/editor.js create mode 100644 edit-context/html-editor/styles.css diff --git a/edit-context/html-editor/converter.js b/edit-context/html-editor/converter.js new file mode 100644 index 00000000..4c0b844b --- /dev/null +++ b/edit-context/html-editor/converter.js @@ -0,0 +1,96 @@ +// The EditContext object only knows about a plain text string and about +// character offsets. However, our editor view renders the text by using +// DOM nodes. So we sometimes need to convert between the two. +// This function converts from a DOM selection object to character offsets. +export function fromSelectionToOffsets(selection, editorEl) { + const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT); + + let anchorNodeFound = false; + let extentNodeFound = false; + let anchorOffset = 0; + let extentOffset = 0; + + while (treeWalker.nextNode()) { + const node = treeWalker.currentNode; + if (node === selection.anchorNode) { + anchorNodeFound = true; + anchorOffset += selection.anchorOffset; + } + + if (node === selection.extentNode) { + extentNodeFound = true; + extentOffset += selection.extentOffset; + } + + if (!anchorNodeFound) { + anchorOffset += node.textContent.length; + } + if (!extentNodeFound) { + extentOffset += node.textContent.length; + } + } + + if (!anchorNodeFound || !extentNodeFound) { + return null; + } + + return { start: anchorOffset, end: extentOffset }; +} + +// The EditContext object only knows about a plain text string and about +// character offsets. However, our editor view renders the text by using +// DOM nodes. So we sometimes need to convert between the two. +// This function converts character offsets to a DOM selection object. +export function fromOffsetsToSelection(start, end, editorEl) { + const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT); + + let offset = 0; + let anchorNode = null; + let anchorOffset = 0; + let extentNode = null; + let extentOffset = 0; + + while (treeWalker.nextNode()) { + const node = treeWalker.currentNode; + + if (!anchorNode && offset + node.textContent.length >= start) { + anchorNode = node; + anchorOffset = start - offset; + } + + if (!extentNode && offset + node.textContent.length >= end) { + extentNode = node; + extentOffset = end - offset; + } + + if (anchorNode && extentNode) { + break; + } + + offset += node.textContent.length; + } + + return { anchorNode, anchorOffset, extentNode, extentOffset }; +} + +// The EditContext object only knows about character offsets. But out editor +// view renders HTML tokens as DOM nodes. This function finds DOM node tokens +// that are in the provided EditContext offset range. +export function fromOffsetsToRenderedTokenNodes(renderedTokens, start, end) { + const tokenNodes = []; + + for (let offset = start; offset < end; offset++) { + const token = renderedTokens.find( + (token) => token.pos <= offset && token.pos + token.value.length > offset + ); + if (token) { + tokenNodes.push({ + node: token.node, + nodeOffset: token.pos, + charOffset: offset, + }); + } + } + + return tokenNodes; +} diff --git a/edit-context/html-editor/editor.js b/edit-context/html-editor/editor.js new file mode 100644 index 00000000..728b89ef --- /dev/null +++ b/edit-context/html-editor/editor.js @@ -0,0 +1,222 @@ +import { tokenizeHTML } from "./tokenizer.js"; +import { + fromOffsetsToRenderedTokenNodes, + fromSelectionToOffsets, + fromOffsetsToSelection, +} from "./converter.js"; + +const IS_EDIT_CONTEXT_SUPPORTED = "EditContext" in window; +const IS_CUSTOM_HIGHLIGHT_SUPPORTED = "Highlight" in window; + +// The editor element. +const editorEl = document.getElementById("html-editor"); + +// The current tokens from the html text. +let currentTokens = []; + +// Instances of CSS custom Highlight objects, used to render +// the IME composition text formats. +const imeHighlights = { + "solid-thin": null, + "solid-thick": null, + "dotted-thin": null, + "dotted-thick": null, + "dashed-thin": null, + "dashed-thick": null, + "wavy-thin": null, + "wavy-thick": null, + "squiggle-thin": null, + "squiggle-thick": null, +}; +if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) { + for (const [key, value] of Object.entries(imeHighlights)) { + imeHighlights[key] = new Highlight(); + CSS.highlights.set(`ime-${key}`, imeHighlights[key]); + } +} else { + console.warn( + "Custom highlights are not supported in this browser. IME formats will not be rendered." + ); +} + +(function () { + if (!IS_EDIT_CONTEXT_SUPPORTED) { + editorEl.textContent = + "Sorry, your browser doesn't support the EditContext API. This demo will not work."; + return; + } + + // Instantiate the EditContext object. + const editContext = new EditContext({ + text: "\n \n

Cool Title

\n

hello
How are you? test

\n \n", + }); + + // Attach the EditContext object to the editor element. + // This makes the element focusable and able to receive text input. + editorEl.editContext = editContext; + + // Update the control bounds (i.e. where the editor is on the screen) + // now, and when the window is resized. + // This helps the OS position the IME composition window correctly. + function updateControlBounds() { + const editorBounds = editorEl.getBoundingClientRect(); + editContext.updateControlBounds(editorBounds); + } + updateControlBounds(); + window.addEventListener("resize", updateControlBounds); + + // Update the selection and selection bounds in the EditContext object. + // This helps the OS position the IME composition window correctly. + function updateSelection(start, end) { + editContext.updateSelection(start, end); + // Get the bounds of the selection. + editContext.updateSelectionBounds( + document.getSelection().getRangeAt(0).getBoundingClientRect() + ); + } + + // The render function is used to update the view of the editor. + // The EditContext object is our "model", and the editorEl is our "view". + // The render function's job is to update the view when the model changes. + function render(text, selectionStart, selectionEnd) { + // Empty the editor. We're re-rendering everything. + editorEl.innerHTML = ""; + + // Tokenize the text. + currentTokens = tokenizeHTML(text); + + // Render each token as a DOM node. + for (const token of currentTokens) { + const span = document.createElement("span"); + span.classList.add(`token-${token.type}`); + span.textContent = token.value; + editorEl.appendChild(span); + + // Store the new DOM node as a property of the token + // in the currentTokens array. We will need it again + // later in fromOffsetsToRenderedTokenNodes. + token.node = span; + } + + // Move the selection to the correct location. + // It was lost when we updated the DOM. + // The EditContext API gives us the selection as text offsets. + // Convert it into a DOM selection. + const { anchorNode, anchorOffset, extentNode, extentOffset } = + fromOffsetsToSelection(selectionStart, selectionEnd, editorEl); + document + .getSelection() + .setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset); + } + + // Listen to the EditContext's textupdate event. + // This tells us when text input happens. We use it to re-render the view. + editContext.addEventListener("textupdate", (e) => { + render(editContext.text, e.selectionStart, e.selectionEnd); + }); + + // Visually show when we're composing text, like when using an IME, + // or voice dictation. + editContext.addEventListener("compositionstart", (e) => { + editorEl.classList.add("is-composing"); + }); + editContext.addEventListener("compositionend", (e) => { + editorEl.classList.remove("is-composing"); + }); + + // Update the character bounds when the EditContext needs it. + editContext.addEventListener("characterboundsupdate", (e) => { + const tokenNodes = fromOffsetsToRenderedTokenNodes( + currentTokens, + e.rangeStart, + e.rangeEnd + ); + + const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => { + const range = document.createRange(); + range.setStart(node.firstChild, charOffset - nodeOffset); + range.setEnd(node.firstChild, charOffset - nodeOffset + 1); + return range.getBoundingClientRect(); + }); + + editContext.updateCharacterBounds(e.rangeStart, charBounds); + }); + + // Draw IME composition text formats if needed. + editContext.addEventListener("textformatupdate", (e) => { + const formats = e.getTextFormats(); + + for (const format of formats) { + // Find the DOM selection that corresponds to the format's range. + const selection = fromOffsetsToSelection( + format.rangeStart, + format.rangeEnd, + editorEl + ); + + // Highlight the selection with the right style and thickness. + addHighlight(selection, format.underlineStyle, format.underlineThickness); + } + }); + + function addHighlight(selection, underlineStyle, underlineThickness) { + // Get the right CSS custom Highlight object depending on the + // underline style and thickness. + const highlight = + imeHighlights[ + `${underlineStyle.toLowerCase()}-${underlineThickness.toLowerCase()}` + ]; + + if (highlight) { + // Add a range to the Highlight object. + const range = document.createRange(); + range.setStart(selection.anchorNode, selection.anchorOffset); + range.setEnd(selection.extentNode, selection.extentOffset); + highlight.add(range); + } + } + + // Handle key presses that are not already handled by the EditContext. + editorEl.addEventListener("keydown", (e) => { + const start = Math.min( + editContext.selectionStart, + editContext.selectionEnd + ); + const end = Math.max(editContext.selectionStart, editContext.selectionEnd); + + if (e.key === "Tab") { + e.preventDefault(); + editContext.updateText(start, end, "\t"); + updateSelection(start + 1, start + 1); + render( + editContext.text, + editContext.selectionStart, + editContext.selectionEnd + ); + } else if (e.key === "Enter") { + editContext.updateText(start, end, "\n"); + updateSelection(start + 1, start + 1); + render( + editContext.text, + editContext.selectionStart, + editContext.selectionEnd + ); + } + }); + + // Listen to selectionchange events to let the EditContext know where it is. + document.addEventListener("selectionchange", () => { + const selection = document.getSelection(); + const offsets = fromSelectionToOffsets(selection, editorEl); + if (offsets) { + updateSelection(offsets.start, offsets.end); + } + }); + + // Render the initial view. + render( + editContext.text, + editContext.selectionStart, + editContext.selectionEnd + ); +})(); diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html index ad54f6c4..9fc192a7 100644 --- a/edit-context/html-editor/index.html +++ b/edit-context/html-editor/index.html @@ -6,481 +6,16 @@ Edit Context API: HTML editor demo - + + -
- -
- -
- - + + \ No newline at end of file diff --git a/edit-context/html-editor/styles.css b/edit-context/html-editor/styles.css new file mode 100644 index 00000000..b37ac938 --- /dev/null +++ b/edit-context/html-editor/styles.css @@ -0,0 +1,126 @@ +html, +body { + font-size: 0.9rem; + font-family: consolas, monospace; + margin: 0; + height: 100%; + box-sizing: border-box; +} + +body { + padding: 1rem; +} + +#html-editor { + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: 0.5rem; + padding: 1rem; + overflow: auto; + white-space: pre; + tab-size: 2; + caret-color: red; + background: #000; + line-height: 1.6; + color: red; +} + +#html-editor::selection { + color: white; + background: red; +} + +#html-editor.is-composing { + box-shadow: 0 0 0 0.25rem red; +} + +.token-openTagStart, +.token-openTagEnd, +.token-closeTagStart, +.token-closeTagEnd, +.token-selfClose { + background: rgb(7 53 92); + margin: 0 2px; + color: white; + border-radius: 0.25rem; +} + +.token-equal { + color: white; +} + +.token-tagName { + font-weight: bold; + color: rgb(117, 186, 242); +} + +.token-attributeName { + color: rgb(207, 81, 198); +} + +.token-attributeValue { + font-style: italic; + color: rgb(127 230 127); + border: 1px dashed #8c8c8c; + border-width: 1px 0 1px 0; +} + +.token-quoteStart, +.token-quoteEnd { + font-weight: bold; + color: rgb(127 230 127); + border: 1px solid #8c8c8c; + border-width: 1px 0 1px 1px; + border-radius: 0.25rem 0 0 0.25rem; +} + +.token-quoteEnd { + border-width: 1px 1px 1px 0; + border-radius: 0 0.25rem 0.25rem 0; +} + +.token-text { + color: #6a6a6a; + padding: 0 0.25rem; +} + +::highlight(ime-solid-thin) { + text-decoration: underline 1px; +} + +::highlight(ime-solid-thick) { + text-decoration: underline 2px; +} + +::highlight(ime-dotted-thin) { + text-decoration: underline dotted 1px; +} + +::highlight(ime-dotted-thick) { + text-decoration: underline dotted 2px; +} + +::highlight(ime-dashed-thin) { + text-decoration: underline dashed 1px; +} + +::highlight(ime-dashed-thick) { + text-decoration: underline dashed 2px; +} + +::highlight(ime-wavy-thin) { + text-decoration: underline wavy 1px; +} + +::highlight(ime-wavy-thick) { + text-decoration: underline wavy 2px; +} + +::highlight(ime-squiggle-thin) { + text-decoration: underline wavy 1px; +} + +::highlight(ime-squiggle-thick) { + text-decoration: underline wavy 2px; +}