From 929e39675d42b6642e96ede0b7cf4aa25eb822f5 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 12 Mar 2024 09:39:45 +0100 Subject: [PATCH] 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; + } }