diff --git a/base.css b/base.css new file mode 100644 index 0000000..972647f --- /dev/null +++ b/base.css @@ -0,0 +1,53 @@ +:root { + --default-font-size: 16px; + --default-spacing: 10px; +} +body { + line-height: 1.5; +} + +p, h1, h2, h3, h4, h5, textarea, input, fieldset { + margin: var(--default-spacing); +} + +legend { + padding: 5px; + font-size: 18px; + font-weight: bold; +} + +textarea, input { + padding: var(--default-spacing); + font-size: var(--default-font-size); +} + +.flex { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +header { + grid-area: header; + border: solid 1px black; +} + +article { + grid-area: content; + border: solid 1px black; +} + +aside { + grid-area: sidebar; + border: solid 1px black; +} + +.details { + grid-area: details; + border: solid 1px black; +} + +footer { + grid-area: footer; + border: solid 1px black; +} \ No newline at end of file diff --git a/low-contrast.css b/low-contrast.css new file mode 100644 index 0000000..baeb5fc --- /dev/null +++ b/low-contrast.css @@ -0,0 +1,61 @@ +:root { + /*Fallback is a thing with the var() function + https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function + */ + --main-bg-color: #adadad; + --alt-bg-color: #e6e6e6; + --main-font-color: #134e13; + --disabled-bg-color: #666666; + --border-style: 0.25rem outset pink; +} +body { + background-color: var(--main-bg-color); + color: var(--main-font-color); +} + +textarea, input { + background-color: #a6a6a6; + color: var(--main-font-color); +} + +input[type=checkbox] { + appearance: none; + + border: 2px solid black; +} + +input[type=checkbox]:checked { + content: 'X'; +} + +/*Override the default radio button*/ +input[type=radio] { + appearance: none; + + border-radius: 50%; + border: 2px solid var(--main-bg-color); + transition: 0.2s all linear; +} + +input[type=radio]:checked { + background-color: black; + border: 2px solid var(--main-bg-color); +} +/*End Override the default radio button*/ + +input[type=button] { + border: var(--border-style); +} + +/*On button press / hold*/ +input[type=button]:active { + border: 3px solid var(--alt-bg-color); +} + +::placeholder { + color: var(--main-font-color); +} + +*:disabled { + background-color: var(--disabled-bg-color); +} \ No newline at end of file diff --git a/test.html b/test.html index 302b124..edc7876 100644 --- a/test.html +++ b/test.html @@ -1,114 +1,6 @@ - - - - + +
@@ -176,26 +62,21 @@
- - \ No newline at end of file