├── scss ├── main.scss ├── button │ └── button.scss ├── form │ └── forms.scss └── _normalize.scss ├── README.md ├── package.json ├── .gitignore ├── index.html └── css └── main.css /scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "_normalize"; 2 | 3 | @import "button/button"; 4 | @import "form/forms"; 5 | 6 | :root { 7 | --primary-color: black; 8 | --disabled-color: #999999; 9 | --placeholder-color: #333333; 10 | --border-size: 0.125em; 11 | } 12 | 13 | body { 14 | max-width: 90%; 15 | margin: 0 auto; 16 | } 17 | 18 | li { 19 | padding-bottom: 0.6em; 20 | list-style-type: none; 21 | } 22 | 23 | label { 24 | display: block; 25 | } 26 | 27 | 28 | 29 | select { 30 | border: 2px solid black; 31 | padding: 0.5em 1em; 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ePaperCSS - The EInk Display ready CSS framework 2 | 3 | ## Introduction 4 | 5 | E-ink or ePaper displays have a few negligible disadvantages. This includes the reduced to nonexistent color selection - grayscale juhu - the refresh delay and ghosting. 6 | 7 | This framework is intended to help developers to implement their projects on e-ink displays without reading deeply into CSS and frameworks such as bootstrap. Plain CSS, Plain HTML. 8 | In order to ensure this goal and to meet the special requirements of e-ink displays, this framework follows an animation-free, minimalist approach. 9 | 10 | 11 | ## Say hello 12 | 13 | 14 | -------------------------------------------------------------------------------- /scss/button/button.scss: -------------------------------------------------------------------------------- 1 | button { 2 | border: 2px solid var(--primary-color); 3 | box-shadow: none; 4 | background: white; 5 | color: var(--primary-color); 6 | padding: 0.5em 1em; 7 | font-family: inherit; 8 | font-size: 100%; 9 | text-decoration: none; 10 | 11 | &:hover { 12 | box-shadow: inset 0.25em 0px 0px 0px rgba(var(--primary-color),1); 13 | } 14 | &:focus { 15 | outline: 0 16 | } 17 | &:active, &:focus { 18 | box-shadow: inset -0.45em 0px 0px 0px rgba(var(--primary-color),1); 19 | } 20 | 21 | &[disabled] { 22 | opacity: 0.75; 23 | box-shadow: none; 24 | border-color: var(--disabled-color); 25 | color: var(--disabled-color); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ePaperCSS", 3 | "version": "1.0.0", 4 | "description": "A CSS Only Framework optimized for e-ink display.", 5 | "scripts": { 6 | "build-css": "node-sass --include-path scss scss/main.scss css/main.css --watch" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/marcomattes/eink-css-ui-framework.git" 11 | }, 12 | "author": "", 13 | "license": "GPL", 14 | "bugs": { 15 | "url": "https://github.com/marcomattes/eink-css-ui-framework/issues" 16 | }, 17 | "homepage": "https://github.com/marcomattes/eink-css-ui-framework#readme", 18 | "devDependencies": { 19 | "node-sass": "^4.14.1", 20 | "nodemon": "^2.0.4" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # Snowpack dependency directory (https://snowpack.dev/) 47 | web_modules/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Microbundle cache 59 | .rpt2_cache/ 60 | .rts2_cache_cjs/ 61 | .rts2_cache_es/ 62 | .rts2_cache_umd/ 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | 84 | # Nuxt.js build / generate output 85 | .nuxt 86 | dist 87 | 88 | # Gatsby files 89 | .cache/ 90 | # Comment in the public line in if your project uses Gatsby and not Next.js 91 | # https://nextjs.org/blog/next-9-1#public-directory-support 92 | # public 93 | 94 | # vuepress build output 95 | .vuepress/dist 96 | 97 | # Serverless directories 98 | .serverless/ 99 | 100 | # FuseBox cache 101 | .fusebox/ 102 | 103 | # DynamoDB Local files 104 | .dynamodb/ 105 | 106 | # TernJS port file 107 | .tern-port 108 | 109 | # Stores VSCode versions used for testing VSCode extensions 110 | .vscode-test 111 | 112 | # yarn v2 113 | 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .pnp.* 118 | 119 | ### JetBrains template 120 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider 121 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 122 | 123 | # User-specific stuff 124 | .idea/**/workspace.xml 125 | .idea/**/tasks.xml 126 | .idea/**/usage.statistics.xml 127 | .idea/**/dictionaries 128 | .idea/**/shelf 129 | 130 | # Generated files 131 | .idea/**/contentModel.xml 132 | 133 | # Sensitive or high-churn files 134 | .idea/**/dataSources/ 135 | .idea/**/dataSources.ids 136 | .idea/**/dataSources.local.xml 137 | .idea/**/sqlDataSources.xml 138 | .idea/**/dynamic.xml 139 | .idea/**/uiDesigner.xml 140 | .idea/**/dbnavigator.xml 141 | 142 | # Gradle 143 | .idea/**/gradle.xml 144 | .idea/**/libraries 145 | 146 | # Gradle and Maven with auto-import 147 | # When using Gradle or Maven with auto-import, you should exclude module files, 148 | # since they will be recreated, and may cause churn. Uncomment if using 149 | # auto-import. 150 | # .idea/artifacts 151 | # .idea/compiler.xml 152 | # .idea/jarRepositories.xml 153 | # .idea/modules.xml 154 | # .idea/*.iml 155 | # .idea/modules 156 | # *.iml 157 | # *.ipr 158 | 159 | # CMake 160 | cmake-build-*/ 161 | 162 | # Mongo Explorer plugin 163 | .idea/**/mongoSettings.xml 164 | 165 | # File-based project format 166 | *.iws 167 | 168 | # IntelliJ 169 | out/ 170 | 171 | .idea/ 172 | 173 | # mpeltonen/sbt-idea plugin 174 | .idea_modules/ 175 | 176 | # JIRA plugin 177 | atlassian-ide-plugin.xml 178 | 179 | # Cursive Clojure plugin 180 | .idea/replstate.xml 181 | 182 | # Crashlytics plugin (for Android Studio and IntelliJ) 183 | com_crashlytics_export_strings.xml 184 | crashlytics.properties 185 | crashlytics-build.properties 186 | fabric.properties 187 | 188 | # Editor-based Rest Client 189 | .idea/httpRequests 190 | 191 | # Android studio 3.1+ serialized cache file 192 | .idea/caches/build_file_checksums.ser 193 | 194 | -------------------------------------------------------------------------------- /scss/form/forms.scss: -------------------------------------------------------------------------------- 1 | 2 | fieldset { 3 | border-color: var(--primary-color); 4 | } 5 | 6 | input { 7 | &[type="email"], 8 | &[type="text"], 9 | &[type="password"], 10 | &[type="tel"], 11 | &[type="search"], 12 | &[type="number"], 13 | &[type="month"], 14 | &[type="datetime-local"], 15 | &[type="datetime"], 16 | &[type="week"], 17 | &[type="date"], 18 | &[type="url"] { 19 | padding: 0.5em 1em; 20 | border-radius: 0; 21 | border: var(--border-size) solid #333; 22 | &::placeholder { 23 | letter-spacing: 0.1px; 24 | color: var(--placeholder-color); 25 | } 26 | &:focus { 27 | outline: 0; 28 | border: 2px dotted var(--primary-color) 29 | } 30 | } 31 | } 32 | 33 | 34 | [type="checkbox"]:not(:checked), 35 | [type="checkbox"]:checked { 36 | position: absolute; 37 | left: -9999px; 38 | } 39 | [type="checkbox"]:not(:checked) + label, 40 | [type="checkbox"]:checked + label { 41 | position: relative; 42 | padding-left: 1.5em; 43 | cursor: pointer; 44 | } 45 | 46 | [type="checkbox"]:not(:checked) + label:before, 47 | [type="checkbox"]:checked + label:before { 48 | content: ''; 49 | position: absolute; 50 | left: 0; top: 0; 51 | width: 1em; 52 | height: 1em; 53 | border: var(--border-size) solid var(--primary-color); 54 | background: #fff; 55 | border-radius: 0; 56 | } 57 | 58 | 59 | [type="checkbox"]:not(:checked) + label:after, 60 | [type="checkbox"]:checked + label:after { 61 | content: '\2713\0020'; 62 | position: absolute; 63 | top: 0.05em; 64 | left: 0.3em; 65 | font-size: 1em; 66 | line-height: 0.8; 67 | color: var(--primary-color); 68 | transition: all .2s; 69 | } 70 | 71 | 72 | [type="checkbox"]:not(:checked) + label:after { 73 | opacity: 0; 74 | transform: scale(0); 75 | } 76 | [type="checkbox"]:checked + label:after { 77 | opacity: 1; 78 | transform: scale(1); 79 | } 80 | 81 | [type="checkbox"]:disabled:not(:checked) + label:before, 82 | [type="checkbox"]:disabled:checked + label:before { 83 | box-shadow: none; 84 | border-color: var(--disabled-color); 85 | background-color: var(--disabled-color); 86 | } 87 | [type="checkbox"]:disabled:checked + label:after { 88 | color: var(--disabled-color); 89 | } 90 | [type="checkbox"]:disabled + label { 91 | color: var(--disabled-color); 92 | } 93 | 94 | [type="checkbox"]:checked:focus + label:before, 95 | [type="checkbox"]:not(:checked):focus + label:before { 96 | border: var(--border-size) dotted var(--primary-color); 97 | } 98 | 99 | 100 | // Radio Button 101 | 102 | [type="radio"]:checked, 103 | [type="radio"]:not(:checked) { 104 | position: absolute; 105 | left: -9999px; 106 | } 107 | [type="radio"]:checked + label, 108 | [type="radio"]:not(:checked) + label 109 | { 110 | position: relative; 111 | padding-left: 1.75em; 112 | cursor: pointer; 113 | line-height: 20px; 114 | display: inline-block; 115 | color: #666; 116 | } 117 | [type="radio"]:checked + label:before, 118 | [type="radio"]:not(:checked) + label:before { 119 | content: ''; 120 | position: absolute; 121 | left: 0; 122 | top: 0; 123 | width: 1em; 124 | height: 1em; 125 | border: var(--border-size) solid var(--primary-color); 126 | background: #fff; 127 | border-radius: 100%; 128 | } 129 | [type="radio"]:checked + label:after, 130 | [type="radio"]:not(:checked) + label:after { 131 | content: ''; 132 | width: 0.75em; 133 | height: 0.75em; 134 | background: var(--primary-color); 135 | position: absolute; 136 | top: 4px; 137 | left: 4px; 138 | border-radius: 100%; 139 | } 140 | [type="radio"]:not(:checked) + label:after { 141 | opacity: 0; 142 | -webkit-transform: scale(0); 143 | transform: scale(0); 144 | } 145 | [type="radio"]:checked + label:after { 146 | opacity: 1; 147 | -webkit-transform: scale(1); 148 | transform: scale(1); 149 | } 150 | 151 | [type="radio"]:disabled + label:before { 152 | border-color: var(--disabled-color); 153 | } 154 | 155 | [type="radio"]:disabled:checked + label:after { 156 | color: var(--disabled-color); 157 | 158 | } 159 | [type="radio"]:disabled + label { 160 | color: var(--disabled-color); 161 | } 162 | 163 | [type="radio"]:checked:focus + label:before, 164 | [type="radio"]:not(:checked):focus + label:before { 165 | border: var(--border-size) dotted var(--primary-color); 166 | } 167 | 168 | 169 | // Textarea 170 | 171 | textarea { 172 | color: var(--primary-color); 173 | border: var(--border-size) solid var(--primary-color); 174 | padding: 0.5em; 175 | &::placeholder { 176 | letter-spacing: 0.1px; 177 | color: var(--placeholder-color); 178 | } 179 | &:focus { 180 | border: var(--border-size) dotted var(--primary-color); 181 | outline: 0; 182 | } 183 | &[disabled] { 184 | color: var(--disabled-color); 185 | border-color: var(--disabled-color); 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Form

13 |
14 |
15 | Input fields 16 |

17 | 18 | 19 |

20 |

21 | 22 | 23 |

24 |

25 | 26 | 27 |

28 |

29 | 30 | 31 |

32 |

33 | 34 | 35 |

36 |

37 | 38 | 39 |

40 |

41 | 42 | 43 |

44 |

45 | 46 | 47 |

48 |

49 | 50 | 51 |

52 |
53 |

[Top]

54 |
55 | Select menus 56 |

57 | 58 | 65 |

66 |
67 |

[Top]

68 |
69 | Checkboxes 70 |
    71 |
  • 72 | 73 | 74 |
    • 75 |
  • 76 | 77 | 78 |
    • 79 |
  • 80 | 81 | 82 |
    • 83 | 84 | 85 |
86 |
87 |

[Top]

88 |
89 | Radio buttons 90 |
    91 |
  • 92 | 93 | 94 |
    • 95 |
  • 96 | 97 | 98 |
    • 99 |
  • 100 | 101 | 102 |
    • 103 |
104 |
105 |

[Top]

106 |
107 | Textareas 108 |

109 | 110 | 111 |

112 |
113 |

[Top]

114 |
115 | HTML5 inputs 116 |

117 | 118 | 119 |

120 |

121 | 122 | 123 |

124 |

125 | 126 | 127 |

128 |

129 | 130 | 131 |

132 |

133 | 134 | 135 |

136 |

137 | 138 | 139 |

140 |

141 | 142 | 143 |

144 |

145 | 146 | 147 |

148 |
149 |

[Top]

150 |
151 | Action buttons 152 |

153 | 154 | 155 | 156 | 157 |

158 |

159 | 160 | 161 | 162 | 163 |

164 |
165 |

[Top]

166 |
167 |
168 | 169 |
170 |

Button

171 | 174 | 177 | 180 | 183 |
184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | /* Document 3 | ========================================================================== */ 4 | /** 5 | * 1. Correct the line height in all browsers. 6 | * 2. Prevent adjustments of font size after orientation changes in iOS. 7 | */ 8 | html { 9 | line-height: 1.15; 10 | /* 1 */ 11 | -webkit-text-size-adjust: 100%; 12 | /* 2 */ } 13 | 14 | /* Sections 15 | ========================================================================== */ 16 | /** 17 | * Remove the margin in all browsers. 18 | */ 19 | body { 20 | margin: 0; } 21 | 22 | /** 23 | * Render the `main` element consistently in IE. 24 | */ 25 | main { 26 | display: block; } 27 | 28 | /** 29 | * Correct the font size and margin on `h1` elements within `section` and 30 | * `article` contexts in Chrome, Firefox, and Safari. 31 | */ 32 | h1 { 33 | font-size: 2em; 34 | margin: 0.67em 0; } 35 | 36 | /* Grouping content 37 | ========================================================================== */ 38 | /** 39 | * 1. Add the correct box sizing in Firefox. 40 | * 2. Show the overflow in Edge and IE. 41 | */ 42 | hr { 43 | box-sizing: content-box; 44 | /* 1 */ 45 | height: 0; 46 | /* 1 */ 47 | overflow: visible; 48 | /* 2 */ } 49 | 50 | /** 51 | * 1. Correct the inheritance and scaling of font size in all browsers. 52 | * 2. Correct the odd `em` font sizing in all browsers. 53 | */ 54 | pre { 55 | font-family: monospace, monospace; 56 | /* 1 */ 57 | font-size: 1em; 58 | /* 2 */ } 59 | 60 | /* Text-level semantics 61 | ========================================================================== */ 62 | /** 63 | * Remove the gray background on active links in IE 10. 64 | */ 65 | a { 66 | background-color: transparent; } 67 | 68 | /** 69 | * 1. Remove the bottom border in Chrome 57- 70 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 71 | */ 72 | abbr[title] { 73 | border-bottom: none; 74 | /* 1 */ 75 | text-decoration: underline; 76 | /* 2 */ 77 | text-decoration: underline dotted; 78 | /* 2 */ } 79 | 80 | /** 81 | * Add the correct font weight in Chrome, Edge, and Safari. 82 | */ 83 | b, 84 | strong { 85 | font-weight: bolder; } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | code, 92 | kbd, 93 | samp { 94 | font-family: monospace, monospace; 95 | /* 1 */ 96 | font-size: 1em; 97 | /* 2 */ } 98 | 99 | /** 100 | * Add the correct font size in all browsers. 101 | */ 102 | small { 103 | font-size: 80%; } 104 | 105 | /** 106 | * Prevent `sub` and `sup` elements from affecting the line height in 107 | * all browsers. 108 | */ 109 | sub, 110 | sup { 111 | font-size: 75%; 112 | line-height: 0; 113 | position: relative; 114 | vertical-align: baseline; } 115 | 116 | sub { 117 | bottom: -0.25em; } 118 | 119 | sup { 120 | top: -0.5em; } 121 | 122 | /* Embedded content 123 | ========================================================================== */ 124 | /** 125 | * Remove the border on images inside links in IE 10. 126 | */ 127 | img { 128 | border-style: none; } 129 | 130 | /* Forms 131 | ========================================================================== */ 132 | /** 133 | * 1. Change the font styles in all browsers. 134 | * 2. Remove the margin in Firefox and Safari. 135 | */ 136 | button, 137 | input, 138 | optgroup, 139 | select, 140 | textarea { 141 | font-family: inherit; 142 | /* 1 */ 143 | font-size: 100%; 144 | /* 1 */ 145 | line-height: 1.15; 146 | /* 1 */ 147 | margin: 0; 148 | /* 2 */ } 149 | 150 | /** 151 | * Show the overflow in IE. 152 | * 1. Show the overflow in Edge. 153 | */ 154 | button, 155 | input { 156 | /* 1 */ 157 | overflow: visible; } 158 | 159 | /** 160 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 161 | * 1. Remove the inheritance of text transform in Firefox. 162 | */ 163 | button, 164 | select { 165 | /* 1 */ 166 | text-transform: none; } 167 | 168 | /** 169 | * Correct the inability to style clickable types in iOS and Safari. 170 | */ 171 | button, 172 | [type="button"], 173 | [type="reset"], 174 | [type="submit"] { 175 | -webkit-appearance: button; } 176 | 177 | /** 178 | * Remove the inner border and padding in Firefox. 179 | */ 180 | button::-moz-focus-inner, 181 | [type="button"]::-moz-focus-inner, 182 | [type="reset"]::-moz-focus-inner, 183 | [type="submit"]::-moz-focus-inner { 184 | border-style: none; 185 | padding: 0; } 186 | 187 | /** 188 | * Restore the focus styles unset by the previous rule. 189 | */ 190 | button:-moz-focusring, 191 | [type="button"]:-moz-focusring, 192 | [type="reset"]:-moz-focusring, 193 | [type="submit"]:-moz-focusring { 194 | outline: 1px dotted ButtonText; } 195 | 196 | /** 197 | * Correct the padding in Firefox. 198 | */ 199 | fieldset { 200 | padding: 0.35em 0.75em 0.625em; } 201 | 202 | /** 203 | * 1. Correct the text wrapping in Edge and IE. 204 | * 2. Correct the color inheritance from `fieldset` elements in IE. 205 | * 3. Remove the padding so developers are not caught out when they zero out 206 | * `fieldset` elements in all browsers. 207 | */ 208 | legend { 209 | box-sizing: border-box; 210 | /* 1 */ 211 | color: inherit; 212 | /* 2 */ 213 | display: table; 214 | /* 1 */ 215 | max-width: 100%; 216 | /* 1 */ 217 | padding: 0; 218 | /* 3 */ 219 | white-space: normal; 220 | /* 1 */ } 221 | 222 | /** 223 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 224 | */ 225 | progress { 226 | vertical-align: baseline; } 227 | 228 | /** 229 | * Remove the default vertical scrollbar in IE 10+. 230 | */ 231 | textarea { 232 | overflow: auto; } 233 | 234 | /** 235 | * 1. Add the correct box sizing in IE 10. 236 | * 2. Remove the padding in IE 10. 237 | */ 238 | [type="checkbox"], 239 | [type="radio"] { 240 | box-sizing: border-box; 241 | /* 1 */ 242 | padding: 0; 243 | /* 2 */ } 244 | 245 | /** 246 | * Correct the cursor style of increment and decrement buttons in Chrome. 247 | */ 248 | [type="number"]::-webkit-inner-spin-button, 249 | [type="number"]::-webkit-outer-spin-button { 250 | height: auto; } 251 | 252 | /** 253 | * 1. Correct the odd appearance in Chrome and Safari. 254 | * 2. Correct the outline style in Safari. 255 | */ 256 | [type="search"] { 257 | -webkit-appearance: textfield; 258 | /* 1 */ 259 | outline-offset: -2px; 260 | /* 2 */ } 261 | 262 | /** 263 | * Remove the inner padding in Chrome and Safari on macOS. 264 | */ 265 | [type="search"]::-webkit-search-decoration { 266 | -webkit-appearance: none; } 267 | 268 | /** 269 | * 1. Correct the inability to style clickable types in iOS and Safari. 270 | * 2. Change font properties to `inherit` in Safari. 271 | */ 272 | ::-webkit-file-upload-button { 273 | -webkit-appearance: button; 274 | /* 1 */ 275 | font: inherit; 276 | /* 2 */ } 277 | 278 | /* Interactive 279 | ========================================================================== */ 280 | /* 281 | * Add the correct display in Edge, IE 10+, and Firefox. 282 | */ 283 | details { 284 | display: block; } 285 | 286 | /* 287 | * Add the correct display in all browsers. 288 | */ 289 | summary { 290 | display: list-item; } 291 | 292 | /* Misc 293 | ========================================================================== */ 294 | /** 295 | * Add the correct display in IE 10+. 296 | */ 297 | template { 298 | display: none; } 299 | 300 | /** 301 | * Add the correct display in IE 10. 302 | */ 303 | [hidden] { 304 | display: none; } 305 | 306 | button { 307 | border: 2px solid var(--primary-color); 308 | box-shadow: none; 309 | background: white; 310 | color: var(--primary-color); 311 | padding: 0.5em 1em; 312 | font-family: inherit; 313 | font-size: 100%; 314 | text-decoration: none; } 315 | button:hover { 316 | box-shadow: inset 0.25em 0px 0px 0px rgba(var(--primary-color), 1); } 317 | button:focus { 318 | outline: 0; } 319 | button:active, button:focus { 320 | box-shadow: inset -0.45em 0px 0px 0px rgba(var(--primary-color), 1); } 321 | button[disabled] { 322 | opacity: 0.75; 323 | box-shadow: none; 324 | border-color: var(--disabled-color); 325 | color: var(--disabled-color); } 326 | 327 | fieldset { 328 | border-color: var(--primary-color); } 329 | 330 | input[type="email"], input[type="text"], input[type="password"], input[type="tel"], input[type="search"], input[type="number"], input[type="month"], input[type="datetime-local"], input[type="datetime"], input[type="week"], input[type="date"], input[type="url"] { 331 | padding: 0.5em 1em; 332 | border-radius: 0; 333 | border: var(--border-size) solid #333; } 334 | input[type="email"]::placeholder, input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, input[type="search"]::placeholder, input[type="number"]::placeholder, input[type="month"]::placeholder, input[type="datetime-local"]::placeholder, input[type="datetime"]::placeholder, input[type="week"]::placeholder, input[type="date"]::placeholder, input[type="url"]::placeholder { 335 | letter-spacing: 0.1px; 336 | color: var(--placeholder-color); } 337 | input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="month"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="week"]:focus, input[type="date"]:focus, input[type="url"]:focus { 338 | outline: 0; 339 | border: 2px dotted var(--primary-color); } 340 | 341 | [type="checkbox"]:not(:checked), 342 | [type="checkbox"]:checked { 343 | position: absolute; 344 | left: -9999px; } 345 | 346 | [type="checkbox"]:not(:checked) + label, 347 | [type="checkbox"]:checked + label { 348 | position: relative; 349 | padding-left: 1.5em; 350 | cursor: pointer; } 351 | 352 | [type="checkbox"]:not(:checked) + label:before, 353 | [type="checkbox"]:checked + label:before { 354 | content: ''; 355 | position: absolute; 356 | left: 0; 357 | top: 0; 358 | width: 1em; 359 | height: 1em; 360 | border: var(--border-size) solid var(--primary-color); 361 | background: #fff; 362 | border-radius: 0; } 363 | 364 | [type="checkbox"]:not(:checked) + label:after, 365 | [type="checkbox"]:checked + label:after { 366 | content: '\2713\0020'; 367 | position: absolute; 368 | top: 0.05em; 369 | left: 0.3em; 370 | font-size: 1em; 371 | line-height: 0.8; 372 | color: var(--primary-color); 373 | transition: all .2s; } 374 | 375 | [type="checkbox"]:not(:checked) + label:after { 376 | opacity: 0; 377 | transform: scale(0); } 378 | 379 | [type="checkbox"]:checked + label:after { 380 | opacity: 1; 381 | transform: scale(1); } 382 | 383 | [type="checkbox"]:disabled:not(:checked) + label:before, 384 | [type="checkbox"]:disabled:checked + label:before { 385 | box-shadow: none; 386 | border-color: var(--disabled-color); 387 | background-color: var(--disabled-color); } 388 | 389 | [type="checkbox"]:disabled:checked + label:after { 390 | color: var(--disabled-color); } 391 | 392 | [type="checkbox"]:disabled + label { 393 | color: var(--disabled-color); } 394 | 395 | [type="checkbox"]:checked:focus + label:before, 396 | [type="checkbox"]:not(:checked):focus + label:before { 397 | border: var(--border-size) dotted var(--primary-color); } 398 | 399 | [type="radio"]:checked, 400 | [type="radio"]:not(:checked) { 401 | position: absolute; 402 | left: -9999px; } 403 | 404 | [type="radio"]:checked + label, 405 | [type="radio"]:not(:checked) + label { 406 | position: relative; 407 | padding-left: 1.75em; 408 | cursor: pointer; 409 | line-height: 20px; 410 | display: inline-block; 411 | color: #666; } 412 | 413 | [type="radio"]:checked + label:before, 414 | [type="radio"]:not(:checked) + label:before { 415 | content: ''; 416 | position: absolute; 417 | left: 0; 418 | top: 0; 419 | width: 1em; 420 | height: 1em; 421 | border: var(--border-size) solid var(--primary-color); 422 | background: #fff; 423 | border-radius: 100%; } 424 | 425 | [type="radio"]:checked + label:after, 426 | [type="radio"]:not(:checked) + label:after { 427 | content: ''; 428 | width: 0.75em; 429 | height: 0.75em; 430 | background: var(--primary-color); 431 | position: absolute; 432 | top: 4px; 433 | left: 4px; 434 | border-radius: 100%; } 435 | 436 | [type="radio"]:not(:checked) + label:after { 437 | opacity: 0; 438 | -webkit-transform: scale(0); 439 | transform: scale(0); } 440 | 441 | [type="radio"]:checked + label:after { 442 | opacity: 1; 443 | -webkit-transform: scale(1); 444 | transform: scale(1); } 445 | 446 | [type="radio"]:disabled + label:before { 447 | border-color: var(--disabled-color); } 448 | 449 | [type="radio"]:disabled:checked + label:after { 450 | color: var(--disabled-color); } 451 | 452 | [type="radio"]:disabled + label { 453 | color: var(--disabled-color); } 454 | 455 | [type="radio"]:checked:focus + label:before, 456 | [type="radio"]:not(:checked):focus + label:before { 457 | border: var(--border-size) dotted var(--primary-color); } 458 | 459 | textarea { 460 | color: var(--primary-color); 461 | border: var(--border-size) solid var(--primary-color); 462 | padding: 0.5em; } 463 | textarea::placeholder { 464 | letter-spacing: 0.1px; 465 | color: var(--placeholder-color); } 466 | textarea:focus { 467 | border: var(--border-size) dotted var(--primary-color); 468 | outline: 0; } 469 | textarea[disabled] { 470 | color: var(--disabled-color); 471 | border-color: var(--disabled-color); } 472 | 473 | :root { 474 | --primary-color: black; 475 | --disabled-color: #999999; 476 | --placeholder-color: #333333; 477 | --border-size: 0.125em; } 478 | 479 | body { 480 | max-width: 90%; 481 | margin: 0 auto; } 482 | 483 | li { 484 | padding-bottom: 0.6em; 485 | list-style-type: none; } 486 | 487 | label { 488 | display: block; } 489 | 490 | select { 491 | border: 2px solid black; 492 | padding: 0.5em 1em; } 493 | --------------------------------------------------------------------------------