├── sass ├── i.scss ├── _grid.scss ├── _styles.scss ├── _unicodes.scss └── _normalize.scss ├── README.md ├── .gitignore ├── package.json ├── css ├── i.min.css └── i.css ├── index.html └── gulpfile.js /sass/i.scss: -------------------------------------------------------------------------------- 1 | @import "normalize"; 2 | @import "styles"; 3 | @import "grid"; 4 | @import "unicodes"; 5 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | @media (min-width:0) and (max-width:480px) { 2 | article { 3 | width:100%; 4 | } 5 | } 6 | 7 | @media (min-width:481px) and (max-width:888px) { 8 | article { 9 | width:50%; 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Unicode 2 | --------------------------------------------------------------------------------- 3 | 4 | Large format unicode characters I enjoy staring at. Nothing more, nothing less. 5 | 6 | Project hosted at [http://mrmrs.github.io/-/] 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Thumbnails 8 | ._* 9 | 10 | # Files that might appear on external disk 11 | .Spotlight-V100 12 | .Trashes 13 | 14 | # Directories potentially created on remote AFP share 15 | .AppleDB 16 | .AppleDesktop 17 | Network Trash Folder 18 | Temporary Items 19 | .apdisk 20 | 21 | # Vim 22 | Session.vim 23 | 24 | # Node 25 | node_modules/* 26 | npm-debug.log 27 | -------------------------------------------------------------------------------- /sass/_styles.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing:border-box; 3 | } 4 | 5 | .item-info { 6 | font-size:10px; 7 | line-height:1.5; 8 | } 9 | 10 | .intro { 11 | font-size:42px; 12 | text-align:center; 13 | padding:1em 0; 14 | font-family:georgia!important; 15 | font-weight:100; 16 | } 17 | 18 | article { 19 | width:25%; 20 | float:left; 21 | margin:0 !important; 22 | border:0; 23 | padding:2em; 24 | text-align:center; 25 | background-color:pink; 26 | height:24em; 27 | } 28 | 29 | article > h1 { 30 | margin:0 0 .125em 0; 31 | font-size:256px; 32 | line-height:1; 33 | font-weight:bold; 34 | } 35 | -------------------------------------------------------------------------------- /sass/_unicodes.scss: -------------------------------------------------------------------------------- 1 | .§ { 2 | background:#EA2E49; 3 | } 4 | 5 | .° { 6 | background:#DAEDE2; 7 | } 8 | 9 | .© { 10 | background:#7ECEFD; 11 | } 12 | 13 | .« { 14 | background:#FCFFF5; 15 | } 16 | 17 | .π { 18 | background:lighten(#314159,3.14%); 19 | } 20 | 21 | .☀ { 22 | background-color:gold; 23 | } 24 | 25 | .⏣ { 26 | background-color:#00E398; 27 | } 28 | 29 | .☠ { 30 | background-color:#FF8E0D; 31 | } 32 | 33 | .☢ { 34 | background-color:#7E8AA2; 35 | } 36 | 37 | .☣ { 38 | background-color:#FF007D; 39 | } 40 | 41 | .⚛ { 42 | background-color:#17CCAB; 43 | } 44 | 45 | .☃ { 46 | background:#5a5a5a; 47 | } 48 | 49 | .⌬ { 50 | background-color:lighten(#7ECEFD,10%); 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "-", 3 | "version": "1.0.0", 4 | "description": "My favorite unicode characters", 5 | "main": "index.html", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/mrmrs/-.git" 9 | }, 10 | "keywords": [ 11 | "unicode", 12 | "colors", 13 | "html" 14 | ], 15 | "author": "mrmrs", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/mrmrs/-/issues" 19 | }, 20 | "devDependencies": { 21 | "browser-sync": "^1.1.1", 22 | "css": "^2.1.0", 23 | "gulp": "^3.8.2", 24 | "gulp-autoprefixer": "0.0.7", 25 | "gulp-csslint": "^0.1.4", 26 | "gulp-minify-css": "^0.3.5", 27 | "gulp-rename": "^1.2.0", 28 | "gulp-sass": "^0.7.2", 29 | "gulp-shell": "^0.2.8", 30 | "gulp-size": "^0.4.0", 31 | "gulp-stylestats": "^0.2.8", 32 | "gulp-uncss": "^0.4.4", 33 | "gulp-util": "^2.2.18", 34 | "gulp-watch": "^0.6.8", 35 | "node-sass": "^0.9" 36 | }, 37 | "contributors": [ 38 | { "name": "adam morse", "email": "hi@mrmrs.cc" } 39 | ], 40 | "scripts": { 41 | "start": "gulp" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /css/i.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn,em{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}.item-info{font-size:10px;line-height:1.5}.intro{font-size:42px;text-align:center;padding:1em 0;font-family:georgia!important;font-weight:100}article{width:25%;float:left;margin:0!important;border:0;padding:2em;text-align:center;background-color:pink;height:24em}article>h1{margin:0 0 .125em 0;font-size:256px;line-height:1;font-weight:bold}@media(min-width:0) and (max-width:480px){article{width:100%}}@media(min-width:481px) and (max-width:888px){article{width:50%}}.§{background:#ea2e49}.°{background:#daede2}.©{background:#7ecefd}.«{background:#fcfff5} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | UNICODES I ALWAYS NEEDZ 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 |
17 |
18 |

Unicode I'm always looking for

19 |
20 |
21 |

§

22 |

0x00A7 167 SECTION SIGN

23 |
24 |
25 |

°

26 |

MASCULINE ORDINAL INDICATOR

27 |
28 |
29 |

©

30 |

COPYRIGHT SYMBOL

31 |
32 |
33 |

«

34 |

LEFT-POINTING DOUBLE ANGLE QUOTATION MARK - EURO QUOTES

35 |
36 |
37 |

π

38 |

PI 3.14159

39 |
40 |
41 |

☃

42 |

SNOWMAN

43 |
44 |
45 |

☀

46 |

SUN

47 |
48 |
49 |

⏣

50 |

BENZENE RING WITH CIRCLE

51 |
52 |
53 |

☠

54 |

SKULL DEATH

55 |
56 |
57 |

⚛

58 |

ATOM

59 |
60 |
61 |

☣

62 |

WASTE

63 |
64 |
65 |

☢

66 |

NUCLEAR BIOHAZARD

67 |
68 |
69 |

⌬

70 |

BENZENE RING

71 |
72 | 73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Gulp tasks for Tachyons 2 | // Load plugins 3 | var gulp = require('gulp'), 4 | fs = require('fs'), 5 | gutil = require('gulp-util'), 6 | watch = require('gulp-watch'), 7 | prefix = require('gulp-autoprefixer'), 8 | uncss = require('gulp-uncss'), 9 | minifyCSS = require('gulp-minify-css'), 10 | sass = require('gulp-sass'), 11 | size = require('gulp-size'), 12 | rename = require('gulp-rename'), 13 | csslint = require('gulp-csslint'), 14 | css = require('css'), 15 | fileinclude = require('gulp-file-include'), 16 | browserSync = require('browser-sync'), 17 | browserReload = browserSync.reload, 18 | gendocss = require('./tasks/generateDocs'), 19 | stylestats = require('gulp-stylestats'); 20 | 21 | gulp.task('generateDocs', require('./tasks/generateDocs')); 22 | 23 | // Use csslint without box-sizing or compatible vendor prefixes (these 24 | // don't seem to be kept up to date on what to yell about) 25 | gulp.task('csslint', function(){ 26 | gulp.src('./css/tachyons.css') 27 | .pipe(csslint({ 28 | 'compatible-vendor-prefixes': false, 29 | 'box-sizing': false, 30 | 'important': false, 31 | 'known-properties': false 32 | })) 33 | .pipe(csslint.reporter()); 34 | }); 35 | 36 | // Task that compiles scss files down to good old css 37 | gulp.task('pre-process', function(){ 38 | gulp.src('./sass/tachyons.scss') 39 | .pipe(watch(function(files) { 40 | return files.pipe(sass()) 41 | .pipe(size({gzip: false, showFiles: true, title:'un-prefixed css'})) 42 | .pipe(size({gzip: true, showFiles: true, title:'un-prefixed gzipped css'})) 43 | .pipe(prefix()) 44 | .pipe(size({gzip: false, showFiles: true, title:'prefixed css'})) 45 | .pipe(size({gzip: true, showFiles: true, title:'prefixed css'})) 46 | .pipe(gulp.dest('css')) 47 | .pipe(minifyCSS()) 48 | .pipe(rename('tachyons.min.css')) 49 | .pipe(gulp.dest('./css/')) 50 | .pipe(size({gzip: false, showFiles: true, title:'minified css'})) 51 | .pipe(size({gzip: true, showFiles: true, title:'minified css'})) 52 | .pipe(browserSync.reload({stream:true})); 53 | })); 54 | }); 55 | 56 | // Minify all css files in the css directory 57 | // Run this in the root directory of the project with `gulp minify-css ` 58 | gulp.task('minify-css', function(){ 59 | gulp.src('./css/tachyons.css') 60 | .pipe(minifyCSS()) 61 | .pipe(rename('tachyons.min.css')) 62 | .pipe(gulp.dest('./css/')) 63 | .pipe(size({gzip: false, showFiles: true, title:'minified css'})) 64 | .pipe(size({gzip: true, showFiles: true, title:'minified css'})); 65 | }); 66 | 67 | // Initialize browser-sync which starts a static server also allows for 68 | // browsers to reload on filesave 69 | gulp.task('browser-sync', function() { 70 | browserSync.init(null, { 71 | server: { 72 | baseDir: "./" 73 | } 74 | }); 75 | }); 76 | 77 | gulp.task('stylestats', function () { 78 | gulp.src('./css/tachyons.css') 79 | .pipe(stylestats()); 80 | }); 81 | 82 | // Function to call for reloading browsers 83 | gulp.task('bs-reload', function () { 84 | browserSync.reload(); 85 | }); 86 | 87 | /* 88 | DEFAULT TASK 89 | 90 | • Process sass then auto-prefixes and lints outputted css 91 | • Starts a server on port 3000 92 | • Reloads browsers when you change html or sass files 93 | 94 | */ 95 | gulp.task('default', ['pre-process', 'minify-css', 'bs-reload', 'browser-sync', 'generateDocs'], function(){ 96 | gulp.start('pre-process', 'csslint'); 97 | gulp.watch('sass/*.scss', ['pre-process']); 98 | gulp.watch('css/tachyons.css', ['bs-reload']); 99 | //gulp.watch('views/**', ['generateDocs']); 100 | gulp.watch(['*.html', 'docs/*/*.html'], ['bs-reload']); 101 | }); 102 | 103 | -------------------------------------------------------------------------------- /sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -webkit-text-size-adjust: 100%; /* 2 */ 67 | -ms-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari 5 and Chrome. 122 | */ 123 | 124 | dfn,em { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address differences between Firefox and other browsers. 130 | */ 131 | 132 | hr { 133 | -moz-box-sizing: content-box; 134 | box-sizing: content-box; 135 | height: 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Correct font family set oddly in Safari 5 and Chrome. 149 | */ 150 | 151 | code, 152 | kbd, 153 | pre, 154 | samp { 155 | font-family: monospace, serif; 156 | font-size: 1em; 157 | } 158 | 159 | /** 160 | * Improve readability of pre-formatted text in all browsers. 161 | */ 162 | 163 | pre { 164 | white-space: pre-wrap; 165 | } 166 | 167 | /** 168 | * Set consistent quote types. 169 | */ 170 | 171 | q { 172 | quotes: "\201C" "\201D" "\2018" "\2019"; 173 | } 174 | 175 | /** 176 | * Address inconsistent and variable font size in all browsers. 177 | */ 178 | 179 | small { 180 | font-size: 80%; 181 | } 182 | 183 | /** 184 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 185 | */ 186 | 187 | sub, 188 | sup { 189 | font-size: 75%; 190 | line-height: 0; 191 | position: relative; 192 | vertical-align: baseline; 193 | } 194 | 195 | sup { 196 | top: -0.5em; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | /* ========================================================================== 204 | Embedded content 205 | ========================================================================== */ 206 | 207 | /** 208 | * Remove border when inside `a` element in IE 8/9. 209 | */ 210 | 211 | img { 212 | border: 0; 213 | } 214 | 215 | /** 216 | * Correct overflow displayed oddly in IE 9. 217 | */ 218 | 219 | svg:not(:root) { 220 | overflow: hidden; 221 | } 222 | 223 | /* ========================================================================== 224 | Figures 225 | ========================================================================== */ 226 | 227 | /** 228 | * Address margin not present in IE 8/9 and Safari 5. 229 | */ 230 | 231 | figure { 232 | margin: 0; 233 | } 234 | 235 | /* ========================================================================== 236 | Forms 237 | ========================================================================== */ 238 | 239 | /** 240 | * Define consistent border, margin, and padding. 241 | */ 242 | 243 | fieldset { 244 | border: 1px solid #c0c0c0; 245 | margin: 0 2px; 246 | padding: 0.35em 0.625em 0.75em; 247 | } 248 | 249 | /** 250 | * 1. Correct `color` not being inherited in IE 8/9. 251 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 252 | */ 253 | 254 | legend { 255 | border: 0; /* 1 */ 256 | padding: 0; /* 2 */ 257 | } 258 | 259 | /** 260 | * 1. Correct font family not being inherited in all browsers. 261 | * 2. Correct font size not being inherited in all browsers. 262 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 263 | */ 264 | 265 | button, 266 | input, 267 | select, 268 | textarea { 269 | font-family: inherit; /* 1 */ 270 | font-size: 100%; /* 2 */ 271 | margin: 0; /* 3 */ 272 | } 273 | 274 | /** 275 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 276 | * the UA stylesheet. 277 | */ 278 | 279 | button, 280 | input { 281 | line-height: normal; 282 | } 283 | 284 | /** 285 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 286 | * All other form control elements do not inherit `text-transform` values. 287 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 288 | * Correct `select` style inheritance in Firefox 4+ and Opera. 289 | */ 290 | 291 | button, 292 | select { 293 | text-transform: none; 294 | } 295 | 296 | /** 297 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 298 | * and `video` controls. 299 | * 2. Correct inability to style clickable `input` types in iOS. 300 | * 3. Improve usability and consistency of cursor style between image-type 301 | * `input` and others. 302 | */ 303 | 304 | button, 305 | html input[type="button"], /* 1 */ 306 | input[type="reset"], 307 | input[type="submit"] { 308 | -webkit-appearance: button; /* 2 */ 309 | cursor: pointer; /* 3 */ 310 | } 311 | 312 | /** 313 | * Re-set default cursor for disabled elements. 314 | */ 315 | 316 | button[disabled], 317 | html input[disabled] { 318 | cursor: default; 319 | } 320 | 321 | /** 322 | * 1. Address box sizing set to `content-box` in IE 8/9. 323 | * 2. Remove excess padding in IE 8/9. 324 | */ 325 | 326 | input[type="checkbox"], 327 | input[type="radio"] { 328 | box-sizing: border-box; /* 1 */ 329 | padding: 0; /* 2 */ 330 | } 331 | 332 | /** 333 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 334 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 335 | * (include `-moz` to future-proof). 336 | */ 337 | 338 | input[type="search"] { 339 | -webkit-appearance: textfield; /* 1 */ 340 | -moz-box-sizing: content-box; 341 | -webkit-box-sizing: content-box; /* 2 */ 342 | box-sizing: content-box; 343 | } 344 | 345 | /** 346 | * Remove inner padding and search cancel button in Safari 5 and Chrome 347 | * on OS X. 348 | */ 349 | 350 | input[type="search"]::-webkit-search-cancel-button, 351 | input[type="search"]::-webkit-search-decoration { 352 | -webkit-appearance: none; 353 | } 354 | 355 | /** 356 | * Remove inner padding and border in Firefox 4+. 357 | */ 358 | 359 | button::-moz-focus-inner, 360 | input::-moz-focus-inner { 361 | border: 0; 362 | padding: 0; 363 | } 364 | 365 | /** 366 | * 1. Remove default vertical scrollbar in IE 8/9. 367 | * 2. Improve readability and alignment in all browsers. 368 | */ 369 | 370 | textarea { 371 | overflow: auto; /* 1 */ 372 | vertical-align: top; /* 2 */ 373 | } 374 | 375 | /* ========================================================================== 376 | Tables 377 | ========================================================================== */ 378 | 379 | /** 380 | * Remove most spacing between table cells. 381 | */ 382 | 383 | table { 384 | border-collapse: collapse; 385 | border-spacing: 0; 386 | } 387 | -------------------------------------------------------------------------------- /css/i.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* normalize.css v2.1.0 | MIT License | git.io/normalize */ 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | /** 7 | * Correct `block` display not defined in IE 8/9. 8 | */ 9 | article, 10 | aside, 11 | details, 12 | figcaption, 13 | figure, 14 | footer, 15 | header, 16 | hgroup, 17 | main, 18 | nav, 19 | section, 20 | summary { 21 | display: block; } 22 | 23 | /** 24 | * Correct `inline-block` display not defined in IE 8/9. 25 | */ 26 | audio, 27 | canvas, 28 | video { 29 | display: inline-block; } 30 | 31 | /** 32 | * Prevent modern browsers from displaying `audio` without controls. 33 | * Remove excess height in iOS 5 devices. 34 | */ 35 | audio:not([controls]) { 36 | display: none; 37 | height: 0; } 38 | 39 | /** 40 | * Address styling not present in IE 8/9. 41 | */ 42 | [hidden] { 43 | display: none; } 44 | 45 | /* ========================================================================== 46 | Base 47 | ========================================================================== */ 48 | /** 49 | * 1. Set default font family to sans-serif. 50 | * 2. Prevent iOS text size adjust after orientation change, without disabling 51 | * user zoom. 52 | */ 53 | html { 54 | font-family: sans-serif; 55 | /* 1 */ 56 | -webkit-text-size-adjust: 100%; 57 | /* 2 */ 58 | -ms-text-size-adjust: 100%; 59 | /* 2 */ } 60 | 61 | /** 62 | * Remove default margin. 63 | */ 64 | body { 65 | margin: 0; } 66 | 67 | /* ========================================================================== 68 | Links 69 | ========================================================================== */ 70 | /** 71 | * Address `outline` inconsistency between Chrome and other browsers. 72 | */ 73 | a:focus { 74 | outline: thin dotted; } 75 | 76 | /** 77 | * Improve readability when focused and also mouse hovered in all browsers. 78 | */ 79 | a:active, 80 | a:hover { 81 | outline: 0; } 82 | 83 | /* ========================================================================== 84 | Typography 85 | ========================================================================== */ 86 | /** 87 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 88 | */ 89 | abbr[title] { 90 | border-bottom: 1px dotted; } 91 | 92 | /** 93 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 94 | */ 95 | b, 96 | strong { 97 | font-weight: bold; } 98 | 99 | /** 100 | * Address styling not present in Safari 5 and Chrome. 101 | */ 102 | dfn, em { 103 | font-style: italic; } 104 | 105 | /** 106 | * Address differences between Firefox and other browsers. 107 | */ 108 | hr { 109 | -moz-box-sizing: content-box; 110 | box-sizing: content-box; 111 | height: 0; } 112 | 113 | /** 114 | * Address styling not present in IE 8/9. 115 | */ 116 | mark { 117 | background: #ff0; 118 | color: #000; } 119 | 120 | /** 121 | * Correct font family set oddly in Safari 5 and Chrome. 122 | */ 123 | code, 124 | kbd, 125 | pre, 126 | samp { 127 | font-family: monospace, serif; 128 | font-size: 1em; } 129 | 130 | /** 131 | * Improve readability of pre-formatted text in all browsers. 132 | */ 133 | pre { 134 | white-space: pre-wrap; } 135 | 136 | /** 137 | * Set consistent quote types. 138 | */ 139 | q { 140 | quotes: "\201C" "\201D" "\2018" "\2019"; } 141 | 142 | /** 143 | * Address inconsistent and variable font size in all browsers. 144 | */ 145 | small { 146 | font-size: 80%; } 147 | 148 | /** 149 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 150 | */ 151 | sub, 152 | sup { 153 | font-size: 75%; 154 | line-height: 0; 155 | position: relative; 156 | vertical-align: baseline; } 157 | 158 | sup { 159 | top: -0.5em; } 160 | 161 | sub { 162 | bottom: -0.25em; } 163 | 164 | /* ========================================================================== 165 | Embedded content 166 | ========================================================================== */ 167 | /** 168 | * Remove border when inside `a` element in IE 8/9. 169 | */ 170 | img { 171 | border: 0; } 172 | 173 | /** 174 | * Correct overflow displayed oddly in IE 9. 175 | */ 176 | svg:not(:root) { 177 | overflow: hidden; } 178 | 179 | /* ========================================================================== 180 | Figures 181 | ========================================================================== */ 182 | /** 183 | * Address margin not present in IE 8/9 and Safari 5. 184 | */ 185 | figure { 186 | margin: 0; } 187 | 188 | /* ========================================================================== 189 | Forms 190 | ========================================================================== */ 191 | /** 192 | * Define consistent border, margin, and padding. 193 | */ 194 | fieldset { 195 | border: 1px solid silver; 196 | margin: 0 2px; 197 | padding: 0.35em 0.625em 0.75em; } 198 | 199 | /** 200 | * 1. Correct `color` not being inherited in IE 8/9. 201 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 202 | */ 203 | legend { 204 | border: 0; 205 | /* 1 */ 206 | padding: 0; 207 | /* 2 */ } 208 | 209 | /** 210 | * 1. Correct font family not being inherited in all browsers. 211 | * 2. Correct font size not being inherited in all browsers. 212 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 213 | */ 214 | button, 215 | input, 216 | select, 217 | textarea { 218 | font-family: inherit; 219 | /* 1 */ 220 | font-size: 100%; 221 | /* 2 */ 222 | margin: 0; 223 | /* 3 */ } 224 | 225 | /** 226 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 227 | * the UA stylesheet. 228 | */ 229 | button, 230 | input { 231 | line-height: normal; } 232 | 233 | /** 234 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 235 | * All other form control elements do not inherit `text-transform` values. 236 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 237 | * Correct `select` style inheritance in Firefox 4+ and Opera. 238 | */ 239 | button, 240 | select { 241 | text-transform: none; } 242 | 243 | /** 244 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 245 | * and `video` controls. 246 | * 2. Correct inability to style clickable `input` types in iOS. 247 | * 3. Improve usability and consistency of cursor style between image-type 248 | * `input` and others. 249 | */ 250 | button, 251 | html input[type="button"], 252 | input[type="reset"], 253 | input[type="submit"] { 254 | -webkit-appearance: button; 255 | /* 2 */ 256 | cursor: pointer; 257 | /* 3 */ } 258 | 259 | /** 260 | * Re-set default cursor for disabled elements. 261 | */ 262 | button[disabled], 263 | html input[disabled] { 264 | cursor: default; } 265 | 266 | /** 267 | * 1. Address box sizing set to `content-box` in IE 8/9. 268 | * 2. Remove excess padding in IE 8/9. 269 | */ 270 | input[type="checkbox"], 271 | input[type="radio"] { 272 | box-sizing: border-box; 273 | /* 1 */ 274 | padding: 0; 275 | /* 2 */ } 276 | 277 | /** 278 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 279 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 280 | * (include `-moz` to future-proof). 281 | */ 282 | input[type="search"] { 283 | -webkit-appearance: textfield; 284 | /* 1 */ 285 | -moz-box-sizing: content-box; 286 | -webkit-box-sizing: content-box; 287 | /* 2 */ 288 | box-sizing: content-box; } 289 | 290 | /** 291 | * Remove inner padding and search cancel button in Safari 5 and Chrome 292 | * on OS X. 293 | */ 294 | input[type="search"]::-webkit-search-cancel-button, 295 | input[type="search"]::-webkit-search-decoration { 296 | -webkit-appearance: none; } 297 | 298 | /** 299 | * Remove inner padding and border in Firefox 4+. 300 | */ 301 | button::-moz-focus-inner, 302 | input::-moz-focus-inner { 303 | border: 0; 304 | padding: 0; } 305 | 306 | /** 307 | * 1. Remove default vertical scrollbar in IE 8/9. 308 | * 2. Improve readability and alignment in all browsers. 309 | */ 310 | textarea { 311 | overflow: auto; 312 | /* 1 */ 313 | vertical-align: top; 314 | /* 2 */ } 315 | 316 | /* ========================================================================== 317 | Tables 318 | ========================================================================== */ 319 | /** 320 | * Remove most spacing between table cells. 321 | */ 322 | table { 323 | border-collapse: collapse; 324 | border-spacing: 0; } 325 | 326 | * { 327 | box-sizing: border-box; } 328 | 329 | .item-info { 330 | font-size: 10px; 331 | line-height: 1.5; } 332 | 333 | .intro { 334 | font-size: 42px; 335 | text-align: center; 336 | padding: 1em 0; 337 | font-family: georgia!important; 338 | font-weight: 100; } 339 | 340 | article { 341 | width: 25%; 342 | float: left; 343 | margin: 0 !important; 344 | border: 0; 345 | padding: 2em; 346 | text-align: center; 347 | background-color: pink; 348 | height: 24em; } 349 | 350 | article > h1 { 351 | margin: 0 0 0.125em 0; 352 | font-size: 256px; 353 | line-height: 1; 354 | font-weight: bold; } 355 | 356 | @media (min-width: 0) and (max-width: 480px) { 357 | article { 358 | width: 100%; } } 359 | @media (min-width: 481px) and (max-width: 888px) { 360 | article { 361 | width: 50%; } } 362 | .§ { 363 | background: #EA2E49; } 364 | 365 | .° { 366 | background: #DAEDE2; } 367 | 368 | .© { 369 | background: #7ECEFD; } 370 | 371 | .« { 372 | background: #FCFFF5; } 373 | 374 | .π { 375 | background: #374963; } 376 | 377 | .☀ { 378 | background-color: gold; } 379 | 380 | .⏣ { 381 | background-color: #00E398; } 382 | 383 | .☠ { 384 | background-color: #FF8E0D; } 385 | 386 | .☢ { 387 | background-color: #7E8AA2; } 388 | 389 | .☣ { 390 | background-color: #FF007D; } 391 | 392 | .⚛ { 393 | background-color: #17CCAB; } 394 | 395 | .☃ { 396 | background: #5a5a5a; } 397 | 398 | .⌬ { 399 | background-color: #b0e1fe; } 400 | --------------------------------------------------------------------------------