├── css ├── fonts.css ├── note-editor.css ├── site.css ├── style.css └── transmat.css ├── fonts ├── icomoon.dev.svg ├── icomoon.eot ├── icomoon.svg ├── icomoon.ttf └── icomoon.woff ├── index.html ├── javascript ├── jquery-1.10.2.min.js ├── jquery-htmlclean.js └── note-editor.js ├── license.txt └── readme.md /css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('fonts/icomoon.eot'); 4 | src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.woff') format('woff'), 6 | url('fonts/icomoon.ttf') format('truetype'), 7 | url('fonts/icomoon.svg#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* Use the following CSS code if you want to use data attributes for inserting your icons */ 13 | [data-icon]:before { 14 | font-family: 'icomoon'; 15 | content: attr(data-icon); 16 | speak: none; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | /* Use the following CSS code if you want to have a class per icon */ 25 | /* 26 | Instead of a list of all class selectors, 27 | you can use the generic selector below, but it's slower: 28 | [class*="icon-"] { 29 | */ 30 | .icon-expand, .icon-target, .icon-contrast, .icon-floppy, .icon-contract, .icon-link, .icon-download-alt { 31 | font-family: 'icomoon'; 32 | speak: none; 33 | font-style: normal; 34 | font-weight: normal; 35 | font-variant: normal; 36 | text-transform: none; 37 | line-height: 1; 38 | -webkit-font-smoothing: antialiased; 39 | } 40 | .icon-expand:before { 41 | content: "\e000"; 42 | } 43 | .icon-target:before { 44 | content: "\e001"; 45 | } 46 | .icon-contrast:before { 47 | content: "\e002"; 48 | } 49 | .icon-floppy:before { 50 | content: "\e003"; 51 | } 52 | .icon-contract:before { 53 | content: "\e004"; 54 | } 55 | .icon-link:before { 56 | content: "\e005"; 57 | } 58 | .icon-download-alt:before { 59 | content: "\e006"; 60 | } -------------------------------------------------------------------------------- /css/note-editor.css: -------------------------------------------------------------------------------- 1 | .ui button, .text-options button { 2 | 3 | -webkit-transition: opacity 400ms; 4 | -moz-transition: opacity 400ms; 5 | -ms-transition: opacity 400ms; 6 | -o-transition: opacity 400ms; 7 | transition: opacity 400ms; 8 | 9 | font-family: inherit; 10 | background: none; 11 | cursor: pointer; 12 | font-size: 25px; 13 | color: inherit; 14 | opacity: 0.1; 15 | padding: 0px; 16 | height: 32px; 17 | width: 25px; 18 | border: 0px; 19 | } 20 | 21 | .useicons { 22 | -webkit-font-smoothing: antialiased; 23 | font-size: 20px !important; 24 | font-family: 'icomoon' !important; 25 | } 26 | 27 | .options button:hover { 28 | opacity: 0.95; 29 | } 30 | 31 | .note-editor{ 32 | position: relative; 33 | border: none; 34 | padding: 0; 35 | margin: 0; 36 | } 37 | 38 | .note-editor-count { 39 | color: #ccc; 40 | border-radius: 12px; 41 | padding-left: 16px; 42 | padding-right: 16px; 43 | display: block; 44 | text-align: middle; 45 | position: absolute; 46 | font-size: 0.85em; 47 | vertical-align: middle; 48 | text-align: center; 49 | right: 6px; 50 | bottom: 16px; 51 | } 52 | 53 | .note-editor-over{ 54 | color: red; 55 | } 56 | 57 | 58 | .note-editor-ui { 59 | border: 1px #ccc solid; 60 | position: relative; 61 | overflow-y: visible; 62 | width: 100%; 63 | min-height: 6em; 64 | padding: 1em; 65 | padding-bottom: 2em; 66 | margin: 0em; 67 | margin-bottom: 0.2em; 68 | left: 0em; 69 | top: 0em; 70 | -moz-box-sizing: border-box; 71 | -webkit-box-sizing: border-box; 72 | box-sizing: border-box; 73 | -webkit-appearance: none; 74 | outline: none; 75 | } 76 | 77 | 78 | 79 | 80 | @font-face { 81 | font-family: 'icomoon'; 82 | src:url('../fonts/icomoon.eot'); 83 | src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 84 | url('../fonts/icomoon.woff') format('woff'), 85 | url('../fonts/icomoon.ttf') format('truetype'), 86 | url('../fonts/icomoon.svg#icomoon') format('svg'); 87 | font-weight: normal; 88 | font-style: normal; 89 | } 90 | 91 | /* Use the following CSS code if you want to use data attributes for inserting your icons */ 92 | [data-icon]:before { 93 | font-family: 'icomoon'; 94 | content: attr(data-icon); 95 | speak: none; 96 | font-weight: normal; 97 | font-variant: normal; 98 | text-transform: none; 99 | line-height: 1; 100 | -webkit-font-smoothing: antialiased; 101 | } 102 | 103 | /* Use the following CSS code if you want to have a class per icon */ 104 | /* 105 | Instead of a list of all class selectors, 106 | you can use the generic selector below, but it's slower: 107 | [class*="icon-"] { 108 | */ 109 | .icon-expand, .icon-target, .icon-contrast, .icon-floppy, .icon-contract, .icon-link, .icon-download-alt { 110 | font-family: 'icomoon'; 111 | speak: none; 112 | font-style: normal; 113 | font-weight: normal; 114 | font-variant: normal; 115 | text-transform: none; 116 | line-height: 1; 117 | -webkit-font-smoothing: antialiased; 118 | } 119 | .icon-expand:before { 120 | content: "\e000"; 121 | } 122 | .icon-target:before { 123 | content: "\e001"; 124 | } 125 | .icon-contrast:before { 126 | content: "\e002"; 127 | } 128 | .icon-floppy:before { 129 | content: "\e003"; 130 | } 131 | .icon-contract:before { 132 | content: "\e004"; 133 | } 134 | .icon-link:before { 135 | content: "\e005"; 136 | } 137 | .icon-download-alt:before { 138 | content: "\e006"; 139 | } 140 | 141 | 142 | .no-overflow { 143 | overflow: hidden; 144 | display: block; 145 | height: 100%; 146 | width: 100%; 147 | } 148 | 149 | 150 | 151 | .text-options { 152 | 153 | -webkit-transition: opacity 250ms, margin 250ms; 154 | -moz-transition: opacity 250ms, margin 250ms; 155 | -ms-transition: opacity 250ms, margin 250ms; 156 | -o-transition: opacity 250ms, margin 250ms; 157 | transition: opacity 250ms, margin 250ms; 158 | 159 | position: absolute; 160 | left: -999px; 161 | top: -999px; 162 | color: #fff; 163 | height: 0px; 164 | width: 0px; 165 | z-index: 5; 166 | margin-top: 5px; 167 | opacity: 0; 168 | } 169 | 170 | .text-options.fade { 171 | opacity: 0; 172 | margin-top: -5px; 173 | } 174 | 175 | .text-options.active { 176 | opacity: 1; 177 | margin-top: 0px; 178 | } 179 | 180 | .options { 181 | background-color: rgba(0,0,0,0.9); 182 | position: absolute; 183 | border-radius: 5px; 184 | margin-left: -63px; 185 | margin-top: -46px; 186 | z-index: 1000; 187 | padding-top: 5px; 188 | padding-bottom: 0px; 189 | padding-left: 5px; 190 | padding-right: 5px; 191 | width: 125px; 192 | height: 40px; 193 | 194 | -webkit-transition: all 300ms ease-in-out; 195 | -moz-transition: all 300ms ease-in-out; 196 | -ms-transition: all 300ms ease-in-out; 197 | -o-transition: all 300ms ease-in-out; 198 | transition: all 300ms ease-in-out; 199 | } 200 | 201 | .options.url-mode { 202 | 203 | width: 280px; 204 | margin-left: -137px; 205 | } 206 | 207 | .options.url-mode .bold, .options.url-mode .italic, .options.url-mode .quote { 208 | width: 0px; 209 | overflow: hidden; 210 | margin-right: 0px; 211 | opacity: 0; 212 | } 213 | 214 | .options .italic { 215 | font-style: italic; 216 | } 217 | 218 | .options button { 219 | -webkit-transition: all 250ms ease-in-out; 220 | -moz-transition: all 250ms ease-in-out; 221 | -ms-transition: all 250ms ease-in-out; 222 | -o-transition: all 250ms ease-in-out; 223 | transition: all 250ms ease-in-out; 224 | 225 | float: left; 226 | width: 28px; 227 | opacity: 0.7; 228 | height: 30px; 229 | border-radius: 3px; 230 | margin-right: 1px; 231 | font-family: 'Lora', serif; 232 | } 233 | 234 | .options.url-mode input{ 235 | border-left: 2px solid transparent; 236 | padding-right: 5px; 237 | padding-left: 5px; 238 | width: 236px; 239 | } 240 | 241 | .options input { 242 | -webkit-transition: all 300ms ease-in-out; 243 | -moz-transition: all 300ms ease-in-out; 244 | -ms-transition: all 300ms ease-in-out; 245 | -o-transition: all 300ms ease-in-out; 246 | transition: all 300ms ease-in-out; 247 | 248 | border-radius: 3px; 249 | overflow: hidden; 250 | outline: 0px; 251 | height: 30px; 252 | padding: 0px; 253 | margin: 0px; 254 | border: 0px; 255 | float: left; 256 | width: 0px; 257 | } 258 | 259 | .options button.active { 260 | background-color: rgba(255,255,255,0.4); 261 | opacity: 1; 262 | } 263 | 264 | .yang .options button.active { 265 | background-color: rgba(0,0,0,0.3); 266 | } 267 | 268 | .options button:hover { 269 | opacity: 0.95; 270 | } 271 | 272 | .options:before { 273 | content: ""; 274 | border-top: 5px solid rgba(0,0,0,0.9); 275 | border-bottom: 5px solid transparent; 276 | border-right: 5px solid transparent; 277 | border-left: 5px solid transparent; 278 | position: absolute; 279 | margin-left: -5px; 280 | bottom: -15px; 281 | height: 5px; 282 | width: 0px; 283 | left: 50%; 284 | } 285 | 286 | .yang .options { 287 | background-color: rgba(255,255,255,0.9); 288 | color: #000; 289 | } 290 | 291 | .yang .options:before { 292 | border-top: 5px solid rgba(255,255,255,0.9); 293 | } 294 | 295 | .url { 296 | -webkit-font-smoothing: antialiased; 297 | } 298 | 299 | .top { 300 | position: absolute; 301 | top: 0px; 302 | } 303 | 304 | .bottom { 305 | position: absolute; 306 | bottom: 0px; 307 | } 308 | 309 | .about { 310 | font-family: 'Lora', serif; 311 | font-size: 28px !important 312 | } 313 | 314 | .wrapper { 315 | position: relative; 316 | height: 100%; 317 | } -------------------------------------------------------------------------------- /css/site.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 2em; 3 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 4 | font-size: 1.20000em; 5 | font-weight: 400; 6 | color: #333333; 7 | } 8 | 9 | .container{ 10 | max-width: 35em; 11 | margin: 0 auto; 12 | } 13 | 14 | code{ 15 | padding: .2rem .33rem; 16 | color: #6f6f6f; 17 | background-color: #f3f3f3; 18 | } 19 | 20 | a { 21 | color: #33a0e8; 22 | text-decoration: none; 23 | } 24 | 25 | a:hover, a:active { 26 | color: #fc0599; 27 | text-decoration: none; 28 | } 29 | 30 | p{ 31 | margin-top: 0; 32 | line-height: 1.62500em; 33 | } 34 | 35 | ul, ol{ 36 | line-height: 1.62500em; 37 | } 38 | 39 | h1{ 40 | font-size: 2em; 41 | } 42 | 43 | h2{ 44 | margin-top: 3em; 45 | margin-bottom: 0; 46 | } 47 | 48 | 49 | h3{ 50 | margin-top: 3em; 51 | margin-bottom: 0; 52 | } 53 | 54 | input, textarea{ 55 | font-size: 1em; 56 | } 57 | 58 | 59 | .large-text-area { 60 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 61 | font-size: 1em; 62 | font-weight: normal; 63 | font-style: normal; 64 | letter-spacing: normal; 65 | line-height: normal; 66 | text-transform: none; 67 | word-spacing: normal; 68 | text-indent: inherit; 69 | word-wrap: break-word; 70 | white-space: pre-wrap; 71 | background-color: rgba(0, 0, 0, 0); 72 | color: #000; 73 | position: relative; 74 | overflow-y: visible; 75 | min-height: 6em; 76 | padding: 1em; 77 | padding-bottom: 2em; 78 | margin: 0em; 79 | left: 0em; 80 | top: 0em; 81 | } 82 | 83 | 84 | input[type="submit"] { 85 | display: inline-block; 86 | padding-top: 0.4em; 87 | padding-right: 1em; 88 | padding-left: 1em; 89 | padding-bottom: 0.5em; 90 | margin-bottom: 0; 91 | font-weight: 200; 92 | font-size: 1rem; 93 | text-align: center; 94 | white-space: nowrap; 95 | cursor: pointer; 96 | background-image: none; 97 | border: 1px solid transparent; 98 | border-radius: 3px; 99 | background-color: #33a0e8; 100 | color: #fff; 101 | user-select: none; 102 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ZenPen 3 | * http://www.zenpen.io 4 | * MIT licensed 5 | * 6 | * Copyright (C) Tim Holman, http://tholman.com 7 | */ 8 | 9 | 10 | /********************************************* 11 | * BASE STYLES 12 | *********************************************/ 13 | 14 | 15 | 16 | 17 | 18 | 19 | article { 20 | padding-bottom: 50px; 21 | margin-top: 22px; 22 | display: block; 23 | -webkit-appearance: none; 24 | outline: none; 25 | } 26 | 27 | blockquote { 28 | border-left: 4px solid deepskyblue; 29 | margin-left: -19px; 30 | padding-left: 15px; 31 | margin-right: 0px; 32 | } 33 | 34 | .no-overflow { 35 | overflow: hidden; 36 | display: block; 37 | height: 100%; 38 | width: 100%; 39 | } 40 | 41 | /* Used by the ui bubble to stop wrapping */ 42 | .lengthen { 43 | display: block; 44 | width: 300px; 45 | height: 100%; 46 | } 47 | 48 | .useicons { 49 | -webkit-font-smoothing: antialiased; 50 | font-size: 20px !important; 51 | font-family: 'icomoon' !important; 52 | } 53 | 54 | .ui { 55 | position: fixed; 56 | padding: 20px; 57 | width: 65px; 58 | bottom: 0px; 59 | left: 0px; 60 | top: 0px; 61 | } 62 | 63 | .ui:hover button { 64 | opacity: 0.4; 65 | } 66 | 67 | .ui button:hover { 68 | opacity: 1; 69 | } 70 | 71 | .ui button, .text-options button { 72 | 73 | -webkit-transition: opacity 400ms; 74 | -moz-transition: opacity 400ms; 75 | -ms-transition: opacity 400ms; 76 | -o-transition: opacity 400ms; 77 | transition: opacity 400ms; 78 | 79 | font-family: inherit; 80 | background: none; 81 | cursor: pointer; 82 | font-size: 25px; 83 | color: inherit; 84 | opacity: 0.1; 85 | padding: 0px; 86 | height: 32px; 87 | width: 25px; 88 | border: 0px; 89 | } 90 | 91 | .overlay { 92 | position: fixed; 93 | display: none; 94 | height: 100%; 95 | width: 100%; 96 | z-index: 3; 97 | left: 0px; 98 | top: 0px; 99 | } 100 | 101 | .quote { 102 | line-height: 60px !important; 103 | font-size: 49px !important; 104 | } 105 | 106 | /********************************************* 107 | * MODAL 108 | *********************************************/ 109 | 110 | .yang .modal { 111 | background-color: rgba(255,255,255,0.9); 112 | color: #111; 113 | } 114 | 115 | .modal { 116 | background-color: rgba(0,0,0,0.9); 117 | margin-left: -200px; 118 | position: absolute; 119 | border-radius: 3px; 120 | height: 101px; 121 | padding: 15px; 122 | display: none; 123 | width: 400px; 124 | bottom: 10px; 125 | color: #fff; 126 | left: 50%; 127 | } 128 | 129 | .modal h1 { 130 | text-align: center; 131 | font-size: 20px; 132 | padding: 0px; 133 | margin: 0px; 134 | } 135 | 136 | .modal div { 137 | margin-bottom: 10px; 138 | margin-top: 10px; 139 | } 140 | 141 | .modal input[type="number"] { 142 | font-size: 16px; 143 | display: block; 144 | margin: auto; 145 | width: 150px; 146 | padding: 5px; 147 | } 148 | 149 | .description { 150 | height: 225px; 151 | } 152 | 153 | .saveoverlay { 154 | margin-left: -215px; 155 | margin-top: -100px; 156 | height: 170px; 157 | left: 50%; 158 | top: 50%; 159 | } 160 | 161 | .saveoverlay div { 162 | text-align: center; 163 | font-size: 11px; 164 | } 165 | 166 | .saveselection { 167 | margin-top: 17px; 168 | text-align:center; 169 | } 170 | 171 | .saveselection span { 172 | 173 | -webkit-transition: color 250ms, background 250ms; 174 | -moz-transition: color 250ms, background 250ms; 175 | -ms-transition: color 250ms, background 250ms; 176 | -o-transition: color 250ms, background 250ms; 177 | transition: color 250ms, background 250ms; 178 | 179 | cursor: pointer; 180 | font-size: 15px; 181 | margin: 5px; 182 | padding: 5px; 183 | border: 2px solid white; 184 | border-radius: 3px; 185 | } 186 | 187 | .saveselection span:hover { 188 | background: rgba(255,255,255,0.8); 189 | color: black; 190 | } 191 | 192 | .savebutton { 193 | 194 | -webkit-transition: opacity 250ms; 195 | -moz-transition: opacity 250ms; 196 | -ms-transition: opacity 250ms; 197 | -o-transition: opacity 250ms; 198 | transition: opacity 250ms; 199 | 200 | font-size: 30px !important; 201 | margin: 15px auto; 202 | background: none; 203 | cursor: pointer; 204 | display: block; 205 | border: none; 206 | padding: 0px; 207 | width: 80px; 208 | color: #fff; 209 | margin-top: -2px; 210 | } 211 | 212 | .savebutton:hover { 213 | opacity: 0.7; 214 | } 215 | 216 | .activesave { 217 | background: rgba(255,255,255,0.8); 218 | color: black; 219 | } 220 | 221 | .hiddentextbox { 222 | opacity:0; 223 | filter:alpha(opacity=0); 224 | position:absolute; 225 | } 226 | 227 | /********************************************* 228 | * WORK COUNT 229 | *********************************************/ 230 | 231 | .wordcount { 232 | margin-left: -150px; 233 | width: 300px; 234 | } 235 | 236 | .word-counter { 237 | box-shadow: inset 0px 0px 9px -2px rgba(0,0,0,0.9); 238 | position: fixed; 239 | height: 100%; 240 | right: -6px; 241 | width: 6px; 242 | top: 0px; 243 | } 244 | 245 | .word-counter.active { 246 | right: 0px; 247 | } 248 | 249 | .word-counter .progress { 250 | -webkit-transition: all 400ms ease-in-out; 251 | -moz-transition: all 400ms ease-in-out; 252 | -ms-transition: all 400ms ease-in-out; 253 | -o-transition: all 400ms ease-in-out; 254 | transition: all 400ms ease-in-out; 255 | 256 | background-color: deepskyblue; 257 | position: absolute; 258 | bottom: 0px; 259 | width: 100%; 260 | height: 0%; 261 | } 262 | 263 | .progress.complete{ 264 | background-color: greenyellow; 265 | } 266 | 267 | /********************************************* 268 | * UI BUBBLE 269 | *********************************************/ 270 | 271 | .text-options { 272 | 273 | -webkit-transition: opacity 250ms, margin 250ms; 274 | -moz-transition: opacity 250ms, margin 250ms; 275 | -ms-transition: opacity 250ms, margin 250ms; 276 | -o-transition: opacity 250ms, margin 250ms; 277 | transition: opacity 250ms, margin 250ms; 278 | 279 | position: absolute; 280 | left: -999px; 281 | top: -999px; 282 | color: #fff; 283 | height: 0px; 284 | width: 0px; 285 | z-index: 5; 286 | margin-top: 5px; 287 | opacity: 0; 288 | } 289 | 290 | .text-options.fade { 291 | opacity: 0; 292 | margin-top: -5px; 293 | } 294 | 295 | .text-options.active { 296 | opacity: 1; 297 | margin-top: 0px; 298 | } 299 | 300 | .options { 301 | background-color: rgba(0,0,0,0.9); 302 | position: absolute; 303 | border-radius: 5px; 304 | margin-left: -63px; 305 | margin-top: -46px; 306 | z-index: 1000; 307 | padding: 5px 4px 5px 5px; 308 | width: 125px; 309 | height: 40px; 310 | 311 | -webkit-transition: all 300ms ease-in-out; 312 | -moz-transition: all 300ms ease-in-out; 313 | -ms-transition: all 300ms ease-in-out; 314 | -o-transition: all 300ms ease-in-out; 315 | transition: all 300ms ease-in-out; 316 | } 317 | 318 | .options.url-mode { 319 | width: 275px; 320 | margin-left: -137px; 321 | } 322 | 323 | .options.url-mode .bold, .options.url-mode .italic, .options.url-mode .quote { 324 | width: 0px; 325 | overflow: hidden; 326 | margin-right: 0px; 327 | opacity: 0; 328 | } 329 | 330 | .options .italic { 331 | font-style: italic; 332 | } 333 | 334 | .options button { 335 | -webkit-transition: all 250ms ease-in-out; 336 | -moz-transition: all 250ms ease-in-out; 337 | -ms-transition: all 250ms ease-in-out; 338 | -o-transition: all 250ms ease-in-out; 339 | transition: all 250ms ease-in-out; 340 | 341 | float: left; 342 | width: 28px; 343 | opacity: 0.7; 344 | height: 30px; 345 | border-radius: 3px; 346 | margin-right: 1px; 347 | font-family: 'Lora', serif; 348 | } 349 | 350 | .options.url-mode input{ 351 | border-left: 2px solid transparent; 352 | padding-right: 5px; 353 | padding-left: 5px; 354 | width: 236px; 355 | } 356 | 357 | .options input { 358 | -webkit-transition: all 300ms ease-in-out; 359 | -moz-transition: all 300ms ease-in-out; 360 | -ms-transition: all 300ms ease-in-out; 361 | -o-transition: all 300ms ease-in-out; 362 | transition: all 300ms ease-in-out; 363 | 364 | border-radius: 3px; 365 | overflow: hidden; 366 | outline: 0px; 367 | height: 30px; 368 | padding: 0px; 369 | margin: 0px; 370 | border: 0px; 371 | float: left; 372 | width: 0px; 373 | } 374 | 375 | .options button.active { 376 | background-color: rgba(255,255,255,0.4); 377 | opacity: 1; 378 | } 379 | 380 | .yang .options button.active { 381 | background-color: rgba(0,0,0,0.3); 382 | } 383 | 384 | .options button:hover { 385 | opacity: 0.95; 386 | } 387 | 388 | .options:before { 389 | content: ""; 390 | border-top: 5px solid rgba(0,0,0,0.9); 391 | border-bottom: 5px solid transparent; 392 | border-right: 5px solid transparent; 393 | border-left: 5px solid transparent; 394 | position: absolute; 395 | margin-left: -5px; 396 | bottom: -15px; 397 | height: 5px; 398 | width: 0px; 399 | left: 50%; 400 | } 401 | 402 | .yang .options { 403 | background-color: rgba(255,255,255,0.9); 404 | color: #000; 405 | } 406 | 407 | .yang .options:before { 408 | border-top: 5px solid rgba(255,255,255,0.9); 409 | } 410 | 411 | .url { 412 | -webkit-font-smoothing: antialiased; 413 | } 414 | 415 | .top { 416 | position: absolute; 417 | top: 0px; 418 | } 419 | 420 | .bottom { 421 | position: absolute; 422 | bottom: 0px; 423 | } 424 | 425 | .about { 426 | font-family: 'Lora', serif; 427 | font-size: 28px !important 428 | } 429 | 430 | .wrapper { 431 | position: relative; 432 | height: 100%; 433 | } 434 | 435 | /********************************************* 436 | * PRINT 437 | *********************************************/ 438 | 439 | @media print { 440 | 441 | body { 442 | overflow: visible; 443 | } 444 | 445 | section { 446 | color: #111 !important; 447 | } 448 | 449 | .text-options, .ui, .word-counter { 450 | display: none; 451 | } 452 | } -------------------------------------------------------------------------------- /css/transmat.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* >>>>>> _variables.scss */ 4 | /* #2180ce; */ 5 | /* >>>>>> _reset.scss */ 6 | .cf:after { 7 | visibility: hidden; 8 | display: block; 9 | font-size: 0; 10 | content: " "; 11 | clear: both; 12 | height: 0; } 13 | 14 | .cf { 15 | display: inline-block; } 16 | 17 | /* start commented backslash hack \*/ 18 | * html .cf { 19 | height: 1%; } 20 | 21 | .cf { 22 | display: block; } 23 | 24 | /* close commented backslash hack */ 25 | /* ============================================================ 26 | Viewport 27 | ============================================================ */ 28 | @-ms-viewport { 29 | width: device-width; } 30 | 31 | @viewport { 32 | width: device-width; } 33 | 34 | /* ============================================================ 35 | HTML5 Elements 36 | ============================================================ */ 37 | section, nav, article, aside, hgroup, header, footer, main, 38 | img, figure, figcaption, details, menu { 39 | display: block; } 40 | 41 | audio, video, canvas { 42 | display: inline-block; } 43 | 44 | /* ============================================================ 45 | Box sizing 46 | ============================================================ */ 47 | * { 48 | -moz-box-sizing: border-box; 49 | -webkit-box-sizing: border-box; 50 | box-sizing: border-box; } 51 | 52 | /* ============================================================ 53 | Sectioning 54 | ============================================================ */ 55 | body { 56 | color: #444; 57 | font-family: sans-serif; 58 | font-weight: 400; 59 | font-size: 1em; 60 | /* 16px */ 61 | line-height: 1; 62 | /* 16px */ 63 | text-rendering: optimizeLegibility; 64 | margin: 0 auto; } 65 | 66 | h1 { 67 | color: #222; 68 | font-weight: 700; 69 | font-size: 2em; 70 | /* 32px */ 71 | line-height: 1; 72 | /* 32px */ 73 | letter-spacing: -0.03125em; 74 | /* -1px */ 75 | margin: 0.5em 0; 76 | /* 16px 0 */ 77 | -webkit-font-smoothing: antialiased; } 78 | 79 | h2, 80 | article > h1, 81 | section > h1, 82 | nav > h1 { 83 | color: #333; 84 | font-weight: 700; 85 | font-size: 1.5em; 86 | /* 24px */ 87 | line-height: 1; 88 | /* 24px */ 89 | margin: 1.3334em 0 0.3334em; 90 | /* 32px 0 8px */ 91 | -webkit-font-smoothing: antialiased; } 92 | 93 | h3, 94 | legend, 95 | article article > h1, 96 | article section > h1, 97 | section section > h1, 98 | section article > h1 { 99 | color: #333; 100 | font-weight: 400; 101 | font-size: 1.3125em; 102 | /* 21px */ 103 | line-height: 1.1429; 104 | /* 24px */ 105 | margin: 1.1429em 0 0.3810em; 106 | /* 24px 0 8px */ 107 | -webkit-font-smoothing: antialiased; } 108 | 109 | h4 { 110 | color: #444; 111 | font-weight: 400; 112 | font-size: 1.125em; 113 | /* 18px */ 114 | line-height: 1.3334; 115 | /* 24px */ 116 | margin: 1.3334em 0 0.4444em; 117 | /* 24px 0 8px */ 118 | -webkit-font-smoothing: antialiased; } 119 | 120 | h5 { 121 | color: #555; 122 | font-weight: 700; 123 | font-size: 1em; 124 | /* 16px */ 125 | line-height: 1; 126 | /* 16px */ 127 | margin: 1.5em 0 0.5em; 128 | /* 24px 0 8px */ 129 | -webkit-font-smoothing: antialiased; } 130 | 131 | h6 { 132 | color: #666; 133 | font-weight: 700; 134 | font-size: 0.875em; 135 | /* 14px */ 136 | line-height: 1.1429; 137 | /* 16px */ 138 | text-transform: uppercase; 139 | letter-spacing: 0.1429em; 140 | /* 2px */ 141 | margin: 1.7143em 0 0.5714em; 142 | /* 24px 0 8px */ 143 | -webkit-font-smoothing: antialiased; } 144 | 145 | header { 146 | margin-bottom: 1em; 147 | border-bottom: 1px solid #e9e9e9; } 148 | 149 | footer { 150 | margin-top: 1em; 151 | border-top: 1px solid #e9e9e9; 152 | padding-top: 0.5em; } 153 | 154 | nav ul { 155 | margin: 0; 156 | list-style: none; } 157 | 158 | /* ============================================================ 159 | Grouping 160 | ============================================================ */ 161 | p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset, details { 162 | font-size: 1em; 163 | /* 16px */ 164 | line-height: 1.5; 165 | /* 24px */ 166 | margin: 0.5em 0; 167 | /* 8px 0 */ } 168 | 169 | hr { 170 | font-weight: 700; 171 | font-size: 2em; 172 | /* 32px */ 173 | line-height: 1; 174 | /* 32px */ 175 | text-align: center; 176 | margin: 1em 0 2em; 177 | /* 0 0 32px */ 178 | border: 0; 179 | padding: 0; 180 | height: 0; 181 | clear: both; 182 | display: block; } 183 | 184 | hr::after { 185 | content: "···"; 186 | color: #bbb; 187 | letter-spacing: 1em; 188 | padding-left: 1em; 189 | height: 0; } 190 | 191 | pre { 192 | margin-left: 1.5em; 193 | /* 24px */ 194 | white-space: pre-wrap; } 195 | 196 | pre code, 197 | pre samp { 198 | line-height: 1.5; } 199 | 200 | blockquote { 201 | color: #666; 202 | font-size: 1em; 203 | /* 16px */ 204 | line-height: 1.5; 205 | /* 32px */ 206 | border-left: 0.25em solid #e9e9e9; 207 | padding: 0 1.5em 0 1em; 208 | /* 0 24px 0 16px */ } 209 | 210 | blockquote p { 211 | line-height: 1.5; 212 | /* 24px */ 213 | margin: 0.5em 0; 214 | /* 8px 0 */ } 215 | 216 | /* Grouping > Lists */ 217 | ol { 218 | list-style-type: decimal; 219 | padding: 0; } 220 | 221 | ul { 222 | list-style-type: square; 223 | padding: 0; } 224 | 225 | ul li li { 226 | list-style-type: circle; } 227 | 228 | dt { 229 | font-size: 1em; 230 | /* 16px */ 231 | font-weight: 700; 232 | line-height: 1.5; 233 | /* 24px */ } 234 | 235 | dd, li { 236 | margin-left: 1.5em; 237 | /* 24px */ } 238 | 239 | dd > *, li > * { 240 | margin-top: 0; } 241 | 242 | /* Grouping > Figures */ 243 | figcaption { 244 | color: #999; 245 | font-size: 0.75em; 246 | /* 12px */ 247 | line-height: 1.3334; 248 | /* 16px */ 249 | padding: 0.6667em 0; 250 | /* 8px 0 */ 251 | clear: left; } 252 | 253 | /* blockquote + figcaption: before { 254 | content: "\2014"; 255 | } */ 256 | /* ============================================================ 257 | Text-level semantics 258 | ============================================================ */ 259 | a { 260 | color: #25d; 261 | text-decoration: none; 262 | /* border-bottom: 1px solid rgba(34,85,221,0.1); */ } 263 | 264 | a:focus { 265 | /* outline: 1px solid rgba(34,85,221,0.3); */ } 266 | 267 | a:hover { 268 | color: #52d; 269 | /* border-bottom-color: rgba(85,34,221,0.2); */ } 270 | 271 | a:link, a:visited, a:hover { 272 | transition: all 0.2s ease; } 273 | 274 | a:active { 275 | color: #d25; 276 | /* border-bottom: 1px solid rgba(221,34,85,0.25); */ 277 | transition: none; } 278 | 279 | em, i, cite, var { 280 | font-family: Georgia,serif; 281 | font-style: italic; 282 | line-height: 90%; } 283 | 284 | strong, b { 285 | color: #333; 286 | font-weight: 700; 287 | line-height: 90%; } 288 | 289 | /* : lang(en-gb)>q { 290 | quotes: "\201C" "\201D" "\2018" "\2019"; 291 | } 292 | q::before { content: open-quote; } 293 | q::after { content: close-quote; 294 | } */ 295 | small { 296 | color: #999; 297 | font-size: 0.875em; 298 | /* 14px */ 299 | line-height: 1.3334; 300 | /* 16px */ 301 | display: inline-block; 302 | font-weight: 300; 303 | font-style: italic; } 304 | 305 | abbr { 306 | color: #999; 307 | font-size: 0.875em; 308 | /* 14px */ 309 | line-height: 90%; 310 | letter-spacing: 0.0357em; 311 | /* 0.5px */ } 312 | 313 | abbr[title], 314 | dfn[title] { 315 | border-bottom: 1px dotted rgba(0, 0, 0, 0.3); 316 | cursor: help; } 317 | 318 | code, samp { 319 | font-family: 'DejaVu Sans Mono',Inconsolata,Consolas,'Lucida Console',monospace; 320 | font-size: 1em; 321 | /* 16px */ 322 | line-height: 90%; } 323 | 324 | code .comment { 325 | color: #999; } 326 | 327 | samp { 328 | background-color: #f9f9f9; 329 | padding: 0.25em; } 330 | 331 | kbd { 332 | color: #666; 333 | font-family: inherit; 334 | font-size: 87.5%; 335 | line-height: 90%; 336 | background-color: #f9f9f9; 337 | margin: 0 0.25em; 338 | /* 0 4px */ 339 | border: 1px solid #e9e9e9; 340 | border-radius: 4px; 341 | padding: 0.3334em 0.5em; 342 | box-shadow: inset 0 1px 0 #fff; } 343 | 344 | sub { 345 | font-size: smaller; 346 | line-height: 90%; 347 | vertical-align: sub; } 348 | 349 | sup { 350 | font-size: smaller; 351 | line-height: 90%; 352 | vertical-align: super; } 353 | 354 | /* ============================================================ 355 | Edits 356 | ============================================================ */ 357 | mark, ins { 358 | background-color: #fff9d9; 359 | line-height: 90%; 360 | padding: 0 0.125em; 361 | /* 0 2px */ } 362 | 363 | ins { 364 | background-color: #e9e9e9; } 365 | 366 | del, s { 367 | line-height: 90%; 368 | text-decoration: line-through; } 369 | 370 | /* ============================================================ 371 | Embedded content 372 | ============================================================ */ 373 | img { 374 | border: 0; 375 | max-width: 100%; } 376 | 377 | /* ============================================================ 378 | Tabular data 379 | ============================================================ */ 380 | table { 381 | border-collapse: collapse; 382 | border-spacing: 0; } 383 | 384 | caption { 385 | caption-side: bottom; 386 | color: #999; 387 | font-size: 0.875em; 388 | /* 14px */ 389 | line-height: 1.3334; 390 | /* 16px */ 391 | text-align: left; 392 | margin: 1em 0; 393 | /* 12px 0 */ } 394 | 395 | td, th { 396 | text-align: left; 397 | border-bottom: 1px solid #e9e9e9; 398 | padding: 0.375em 2em 0.375em 0; 399 | /* 6px 32px 6px 0 */ 400 | vertical-align: top; } 401 | 402 | th { 403 | font-weight: 700; 404 | padding-bottom: 0.5em; 405 | /* 8px */ } 406 | 407 | thead th { 408 | border-bottom: 2px solid #ddd; } 409 | 410 | /* ============================================================ 411 | Forms 412 | ============================================================ */ 413 | fieldset { 414 | border: 0; 415 | padding: 0; } 416 | 417 | legend { 418 | margin: 0; } 419 | 420 | label { 421 | line-height: 1.5; 422 | cursor: pointer; } 423 | 424 | button, 425 | input, 426 | select, 427 | textarea { 428 | color: inherit; 429 | font-family: inherit; 430 | font-size: 100%; 431 | margin: 0; 432 | outline: 0; } 433 | 434 | select { 435 | -webkit-appearance: select; 436 | appearance: normal; } 437 | 438 | button, 439 | input[type="button"], 440 | input[type="submit"] { 441 | -webkit-appearance: button; 442 | line-height: normal; 443 | width: auto; 444 | cursor: pointer; } 445 | 446 | button::-moz-focus-inner, 447 | input::-moz-focus-inner { 448 | border: 0; 449 | padding: 0; } 450 | 451 | input[type="radio"], 452 | input[type="checkbox"] { 453 | margin-right: 0.25em; } 454 | 455 | input[type="search"] { 456 | -webkit-appearance: none; } 457 | 458 | input[type="search"]::-webkit-search-cancel-button, 459 | input[type="search"]::-webkit-search-decoration { 460 | -webkit-appearance: none; } 461 | 462 | [disabled] { 463 | cursor: default; } 464 | 465 | /* Placheolder */ 466 | ::-webkit-input-placeholder { 467 | color: #999; } 468 | 469 | :focus::-webkit-input-placeholder { 470 | color: #ccc; } 471 | 472 | :-moz-placeholder { 473 | color: #999; } 474 | 475 | :focus:-moz-placeholder { 476 | color: #ccc; } 477 | 478 | :-ms-input-placeholder { 479 | color: #999; } 480 | 481 | :focus:-ms-input-placeholder { 482 | color: #ccc; } 483 | 484 | /* ============================================================ 485 | Interactive 486 | ============================================================ */ 487 | summary { 488 | border: 0; 489 | outline: 0; 490 | cursor: pointer; } 491 | 492 | /* ============================================================ 493 | Print styles 494 | ============================================================ */ 495 | @media print { 496 | @page { 497 | margin: 0.5cm; } 498 | 499 | * { 500 | background: transparent !important; 501 | color: #000 !important; 502 | text-shadow: none !important; 503 | box-shadow: none; } 504 | 505 | p, h1, h2, h3 { 506 | orphans: 3; 507 | widows: 3; } 508 | 509 | h1, h2, h3, h4 { 510 | page-break-after: avoid; } 511 | 512 | blockquote { 513 | border-left: 4px solid #ccc; 514 | padding: 0 1em; 515 | page-break-inside: avoid; } 516 | 517 | a, a:visited { 518 | color: #000 !important; 519 | border-bottom: 1px dotted #999; 520 | padding-left: 0 !important; } 521 | 522 | thead { 523 | display: table-header-group; } 524 | 525 | tr, img { 526 | page-break-inside: avoid; } 527 | 528 | input[type="text"], 529 | input[type="email"], 530 | input[type="url"], 531 | input[type="password"], 532 | input[type="search"], 533 | textarea { 534 | border-bottom: 1px solid #999; 535 | box-shadow: none; } } 536 | textarea, input, summary, button { 537 | outline: none; } 538 | 539 | details summary::-webkit-details-marker { 540 | display: none; } 541 | 542 | summary { 543 | cursor: pointer; } 544 | 545 | /* >>>>>> _mixins.scss */ 546 | /* >>>>>> _type.scss */ 547 | body { 548 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 549 | font-size: 1.20000em; 550 | font-weight: 400; 551 | line-height: 1.62500em; 552 | color: #333333; } 553 | 554 | article { 555 | margin: auto; } 556 | 557 | h1 { 558 | font-size: 2.87500em; 559 | line-height: 1.13043em; 560 | margin-top: 0.5652em; 561 | margin-bottom: 1.1304em; } 562 | 563 | h2 { 564 | font-size: 1.68750em; 565 | line-height: 1.13043em; 566 | margin-top: 1.9259em; 567 | margin-bottom: 0.963em; } 568 | 569 | h3 { 570 | font-size: 1.31250em; 571 | line-height: 1.23810em; 572 | margin-top: 1.2381em; } 573 | 574 | code, pre { 575 | font-family: Consolas, "Lucida Console", monospace; } 576 | 577 | button, input { 578 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 579 | font-size: 1em; } 580 | 581 | a { 582 | color: #33a0e8; 583 | text-decoration: none; } 584 | 585 | a:hover, a:active { 586 | color: #fc0599; 587 | text-decoration: none; } 588 | 589 | a.secondary { 590 | color: #eeeeee; 591 | text-decoration: none; } 592 | 593 | a.secondary:hover, a.secondary:active { 594 | color: #666666; 595 | text-decoration: none; } 596 | 597 | a.warning { 598 | color: #f0ad4e; 599 | text-decoration: none; } 600 | 601 | a.warning:hover, a.warning:active { 602 | color: #ed9c28; 603 | text-decoration: none; } 604 | 605 | a.danger { 606 | color: #d9534f; 607 | text-decoration: none; } 608 | 609 | a.danger:hover, a.danger:active { 610 | color: #d2322d; 611 | text-decoration: none; } 612 | 613 | a:not([href]) { 614 | color: #333333; } 615 | 616 | b { 617 | font-weight: bold; } 618 | 619 | /* >>>>>> _form.scss */ 620 | a.button, a.button:hover, a.button:active { 621 | color: #fff; } 622 | 623 | a.button-secondary, a.button-secondary:hover, a.button-secondary:active { 624 | color: #666; } 625 | 626 | input[type="text"].small-input { 627 | width: 4em; } 628 | 629 | button, input[type="submit"], input[type="button"], .button { 630 | display: inline-block; 631 | padding-top: 0.4em; 632 | padding-right: 1em; 633 | padding-left: 1em; 634 | padding-bottom: 0.5em; 635 | margin-bottom: 0; 636 | font-weight: 200; 637 | font-size: 1rem; 638 | text-align: center; 639 | white-space: nowrap; 640 | cursor: pointer; 641 | background-image: none; 642 | border: 1px solid transparent; 643 | border-radius: 3px; 644 | background-color: #33a0e8; 645 | color: #fff; 646 | -webkit-user-select: none; 647 | -moz-user-select: none; 648 | -ms-user-select: none; 649 | -o-user-select: none; 650 | user-select: none; } 651 | button:active, input[type="submit"]:active, input[type="button"]:active, .button:active { 652 | background-color: #fc0599; } 653 | 654 | .button-secondary, input[type="submit"].button-secondary, input[type="button"].button-secondary { 655 | color: #666666; 656 | background-color: #eeeeee; } 657 | .button-secondary:active, input[type="submit"].button-secondary:active, input[type="button"].button-secondary:active { 658 | color: #eeeeee; 659 | background-color: #666666; } 660 | 661 | .button-success { 662 | background-color: #5cb85c; } 663 | .button-success:active { 664 | background-color: #47a447; } 665 | 666 | .button-info { 667 | background-color: #5bc0de; } 668 | .button-info:active { 669 | background-color: #39b3d7; } 670 | 671 | .button-warning { 672 | background-color: #f0ad4e; } 673 | .button-warning:active { 674 | background-color: #ed9c28; } 675 | 676 | .button-danger, input[type="submit"].button-danger, input[type="button"].button-danger { 677 | background-color: #d9534f; } 678 | .button-danger:active, input[type="submit"].button-danger:active, input[type="button"].button-danger:active { 679 | background-color: #d2322d; } 680 | 681 | .button .icon { 682 | vertical-align: middle; 683 | padding-left: 0.2em; 684 | padding-right: 0.2em; } 685 | 686 | .button-group { 687 | vertical-align: middle; } 688 | .button-group p { 689 | float: left; 690 | padding-right: 0.6em; 691 | white-space: nowrap; } 692 | 693 | .warning { 694 | padding-top: 0.4em; 695 | padding-right: 1em; 696 | padding-left: 1em; 697 | padding-bottom: 0.5em; 698 | margin-bottom: 2em; 699 | font-weight: 200; 700 | font-size: 1rem; 701 | border: 1px solid transparent; 702 | border-radius: 3px; 703 | color: #fff; 704 | line-height: 1.2em; 705 | background-color: #f0ad4e; } 706 | 707 | a.inverted { 708 | color: #333333; 709 | background-color: transparent; 710 | border: 1px solid #333333; } 711 | 712 | a.inverted:hover { 713 | color: #fff; 714 | background-color: #FC0599; 715 | border: 1px solid #FC0599; } 716 | 717 | /* File selector 718 | ------------------------------*/ 719 | .file-selector { 720 | position: relative; 721 | overflow: hidden; 722 | white-space: nowrap; 723 | display: inline-block; 724 | vertical-align: middle; } 725 | .file-selector input { 726 | position: absolute; 727 | top: 0; 728 | right: 0; 729 | margin: 0; 730 | padding: 0; 731 | font-size: 40em; 732 | cursor: pointer; 733 | opacity: 0; 734 | filter: alpha(opacity=0); } 735 | .file-selector i { 736 | display: inline-block; 737 | margin-right: 0.2em; } 738 | 739 | textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder { 740 | font-style: italic; } 741 | textarea::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="password"]::-moz-placeholder { 742 | font-style: italic; } 743 | textarea:-moz-placeholder, input[type="text"]:-moz-placeholder, input[type="url"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="password"]:-moz-placeholder { 744 | font-style: italic; } 745 | textarea:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder { 746 | font-style: italic; } 747 | 748 | input[type="text"], input[type="url"], input[type="email"], input[type="password"], textarea { 749 | color: #404040; 750 | background-color: white; 751 | border: 1px solid #ccc; 752 | /* -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.04); 753 | box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.04); */ 754 | cursor: text; 755 | padding: 0.2em; 756 | padding-left: 0.4em; 757 | margin-bottom: 0.4em; 758 | width: 100%; 759 | font-size: 1em; 760 | -webkit-appearance: none; 761 | border-radius: 0; } 762 | 763 | textarea.full-width { 764 | width: 100%; 765 | height: 10em; } 766 | 767 | /* Combined inputs/buttons */ 768 | .combined { 769 | display: block; 770 | overflow: hidden; 771 | padding-bottom: 1px; } 772 | .combined .input, .combined [class$="button"], .combined [class$="button button-secondary"] { 773 | margin: 0; 774 | border-left-width: 0; 775 | border-radius: 0; 776 | float: left; } 777 | .combined input:first-of-type, .combined [class$="button"]:first-of-type, .combined [class$="button button-secondary"]:first-of-type { 778 | border-left-width: 1px; 779 | border-radius: 0.25em 0 0 0.25em; } 780 | .combined input:last-of-type, .combined [class$="button"]:last-of-type, .combined [class$="button button-secondary"]:last-of-type { 781 | border-radius: 0 0.25em 0.25em 0; } 782 | 783 | /* Single checkboxes */ 784 | label.check { 785 | font-weight: 400; 786 | margin: 0; 787 | padding: 0; 788 | float: none; } 789 | 790 | label.check input { 791 | width: 1.25em; } 792 | 793 | label.check + .caption { 794 | margin-top: 0; 795 | padding-left: 2em; } 796 | 797 | /* Field caption */ 798 | label.check + .caption, 799 | .input + .caption, 800 | .button + .caption { 801 | display: block; 802 | margin: 0; } 803 | 804 | @media screen and (min-width: 40em) { 805 | .input + .caption, 806 | .button + .caption, 807 | label.check + .caption, 808 | fieldset.options .caption { 809 | margin-left: 25%; } } 810 | @media screen and (min-width: 40em) { 811 | fieldset.options li { 812 | margin-left: 25%; } 813 | 814 | label.check { 815 | margin-left: 25%; 816 | float: none; } } 817 | label.no-indent { 818 | margin-left: 0; } 819 | 820 | form p { 821 | margin-bottom: 2em; } 822 | 823 | legend { 824 | margin: 0.375em 0; 825 | /* 6px 0 */ 826 | margin-top: 0.725em; 827 | clear: both; } 828 | 829 | /* Labels */ 830 | label, 831 | fieldset.options legend { 832 | color: #444; 833 | margin: 0.375em 0; 834 | /* 6px 0 */ 835 | font-size: 1em; 836 | /* 16px */ 837 | font-weight: 700; 838 | line-height: 1.5; 839 | /* 24px */ 840 | width: auto; 841 | display: block; 842 | -webkit-font-smoothing: antialiased; } 843 | 844 | fieldset.options legend { 845 | margin: 0; 846 | padding: 0.375em 0; 847 | /* 6px 0 */ } 848 | 849 | @media screen and (min-width: 40em) { 850 | label, 851 | fieldset.options legend { 852 | padding: 0; 853 | width: 25%; 854 | float: left; 855 | display: inline; } 856 | 857 | input[type="text"], input[type="url"], input[type="email"], input[type="password"], textarea { 858 | width: 60%; } 859 | 860 | .indented-in { 861 | margin-left: 25%; } } 862 | @media screen and (max-width: 40em) { 863 | .fixed-indented { 864 | width: 40%; } } 865 | .signup-nav { 866 | float: right; 867 | text-align: right; 868 | width: 18em; 869 | margin-bottom: 0.4em; } 870 | 871 | .signup-nav .combined { 872 | text-align: right; 873 | display: inline-block; } 874 | 875 | @media screen and (max-width: 40em) { 876 | input[type="text"], input[type="url"], input[type="email"], textarea { 877 | width: 100%; } } 878 | body.lock-scroll { 879 | overflow: hidden; } 880 | 881 | header { 882 | border-bottom: 1px solid #e4e4e4; 883 | margin: 0.4em; } 884 | 885 | header h2 { 886 | font-size: 1.4em; 887 | font-weight: bold; 888 | margin-top: 1.2em; 889 | margin-bottom: 0.4em; } 890 | 891 | .contents { 892 | overflow: hidden; 893 | width: 100%; } 894 | 895 | hgroup { 896 | margin-top: 2em; 897 | margin-bottom: 2em; 898 | width: 100%; } 899 | 900 | hgroup h1 { 901 | margin: 0; 902 | font-weight: 100; 903 | display: inline-block; } 904 | 905 | /* .container { 906 | margin: 0 auto; 907 | padding: 0em 5%; 908 | max-width: 50em; 909 | } 910 | .container::before, 911 | .container::after { 912 | content: " "; 913 | display: table; 914 | } 915 | .container::after { 916 | clear: both; 917 | } 918 | @media screen and (min-width: 30em) { 919 | .container { 920 | padding: 0em 2.5%; 921 | } 922 | } 923 | */ 924 | .menu { 925 | color: #333; 926 | margin: 0; } 927 | .menu a { 928 | display: block; 929 | padding: 0 0.5em 0 0.5em; 930 | color: #999; 931 | font-size: 1em; 932 | text-decoration: none; 933 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 934 | -webkit-tap-highlight-color: transparent; 935 | /* For some Androids */ } 936 | .menu a:hover { 937 | color: #000; 938 | text-decoration: none; } 939 | .menu li { 940 | list-style: none; 941 | display: inline-block; 942 | margin: 0; } 943 | .menu .current { 944 | padding: 0 0.5em 0 0.5em; } 945 | .menu .divide { 946 | border-right: solid 1px #999; } 947 | 948 | .user-context { 949 | position: absolute; 950 | top: 2.2em; 951 | left: 0px; 952 | width: 100%; } 953 | 954 | .user-context .container { 955 | text-align: right; } 956 | 957 | .user-context .settings { 958 | margin-right: 2em; } 959 | 960 | .nav-divider { 961 | margin-left: 0.5em; 962 | margin-right: 0.5em; 963 | overflow: hidden; 964 | border-left: solid 1px #999; } 965 | 966 | .editor-menu { 967 | margin: 0; } 968 | .editor-menu a { 969 | display: block; 970 | padding-right: 1em; 971 | font-size: 1em; 972 | text-decoration: none; } 973 | .editor-menu a:hover { 974 | text-decoration: none; } 975 | .editor-menu li { 976 | list-style: none; 977 | display: inline-block; 978 | margin: 0; } 979 | 980 | /* @media screen and (max-width:40em) { 981 | .editor-menu .title{ 982 | display: none; 983 | } 984 | 985 | .editor-menu ul:nth-child(1){ 986 | margin-right: 1.2em; 987 | } 988 | 989 | } */ 990 | .in-reply-to-box { 991 | margin: 0.5em 0 0.5em 0; } 992 | 993 | .editable-box textarea { 994 | padding: 0.4em; 995 | font-family: Lato, Calibri, arial, helvetica, 'lucida grande', 'lucida sans unicode', verdana, sans-serif; 996 | font-size: 1em; 997 | min-height: 7em; } 998 | 999 | .editor-card .button { 1000 | margin-top: 2em; } 1001 | 1002 | .h-feed .h-as-note h2 { 1003 | margin: 0; 1004 | margin-top: 0.2em; 1005 | margin-bottom: 0.2em; 1006 | line-height: 1.2em; 1007 | padding: 0; 1008 | font-size: 1.3em; } 1009 | 1010 | .h-entry { 1011 | word-wrap: break-word; 1012 | margin-top: 3em; 1013 | margin-bottom: 3em; } 1014 | 1015 | .syndication-interactions { 1016 | text-transform: uppercase; 1017 | font-size: 0.75000em; } 1018 | 1019 | .reply-to { 1020 | color: #bbb; 1021 | text-transform: uppercase; 1022 | font-size: 0.75000em; 1023 | font-weight: 400; 1024 | letter-spacing: 0.05em; } 1025 | .reply-to a { 1026 | color: #bbb; } 1027 | .reply-to a:hover { 1028 | color: #fc0599; } 1029 | .reply-to i { 1030 | display: none; } 1031 | 1032 | .subdue { 1033 | color: #999; 1034 | font-size: 0.75000em; 1035 | font-weight: 400; 1036 | letter-spacing: 0.05em; } 1037 | 1038 | .dateline, .counts, .likes { 1039 | text-transform: uppercase; 1040 | color: #999; 1041 | font-size: 0.75000em; 1042 | font-weight: 400; 1043 | letter-spacing: 0.05em; } 1044 | .dateline i, .counts i, .likes i { 1045 | display: none; } 1046 | 1047 | .dateline a, .counts a { 1048 | /* color: #999; */ 1049 | color: #33a0e8; } 1050 | 1051 | .dateline a:hover, .counts a:hover { 1052 | color: #FC0599; } 1053 | 1054 | .syndication-interactions { 1055 | text-transform: uppercase; 1056 | font-size: 0.75000em; } 1057 | 1058 | .h-paging p, .sync-link { 1059 | text-transform: uppercase; 1060 | color: #999; 1061 | font-size: 0.75000em; } 1062 | 1063 | .likes ul { 1064 | margin: 0; 1065 | padding: 0; 1066 | padding-left: 1em; 1067 | margin-left: 1em; 1068 | display: inline-block; 1069 | height: 1.5em; } 1070 | 1071 | .likes li { 1072 | list-style: none; 1073 | margin: 0; 1074 | margin-right: 1em; 1075 | padding: 0; 1076 | display: inline-block; 1077 | height: 1.5em; } 1078 | 1079 | .likes li a { 1080 | margin: 0; 1081 | padding: 0; 1082 | height: 1.5em; 1083 | display: inline-block; } 1084 | 1085 | .likes li .u-like-of { 1086 | display: none; } 1087 | 1088 | .likes li img { 1089 | vertical-align: middle; 1090 | display: inline; } 1091 | 1092 | .avatar { 1093 | width: 6em; 1094 | height: 6em; 1095 | overflow: hidden; 1096 | background-color: #f2f2f0; 1097 | -webkit-border-radius: 100%; 1098 | -moz-border-radius: 100%; 1099 | border-radius: 100%; 1100 | margin-bottom: 0.5em; } 1101 | 1102 | .avatar-icon { 1103 | width: 1.5em; 1104 | height: 1.5em; 1105 | margin: 0; 1106 | border: 1px solid #fff; } 1107 | 1108 | .p-in-reply-to img, .p-comment img { 1109 | vertical-align: middle; } 1110 | 1111 | .p-in-reply-to, .p-comment { 1112 | padding-top: 2em; 1113 | padding-bottom: 2em; 1114 | border-bottom: 1px dotted #999; } 1115 | 1116 | .p-in-reply-to:last-child, .p-comment:last-child { 1117 | border-bottom: 0; } 1118 | 1119 | .p-in-reply-to .dateline, .p-comment .dateline { 1120 | display: block; } 1121 | 1122 | /* ============================================================ 1123 | Image 1124 | ============================================================ */ 1125 | .circular { 1126 | border-radius: 100%; } 1127 | 1128 | .framed { 1129 | box-shadow: 0 2px 2px #e9e9e9; 1130 | border: 1px solid #ccc; 1131 | padding: 0.25em; 1132 | display: inline-block; } 1133 | 1134 | .framed.circular img { 1135 | border-radius: 100%; } 1136 | 1137 | table { 1138 | border: 0; 1139 | width: 100%; 1140 | margin-top: 1em; 1141 | margin-bottom: 1em; } 1142 | 1143 | td { 1144 | border-bottom: 1px solid #e4e4e4; 1145 | padding: 0.2em; 1146 | padding-right: 0.2em; } 1147 | 1148 | tr:last-child td { 1149 | border-bottom: none; } 1150 | 1151 | .elsewhere-selector table { 1152 | margin-left: 0; 1153 | width: 100%; } 1154 | .elsewhere-selector tr td:nth-child(2) { 1155 | color: #888; 1156 | padding-left: 0.5em; 1157 | padding-right: 0.5em; } 1158 | .elsewhere-selector tr td:nth-child(3) { 1159 | color: #888; 1160 | text-align: right; } 1161 | 1162 | .photo-selector:after { 1163 | content: ""; 1164 | display: table; 1165 | clear: both; } 1166 | 1167 | .photo-container { 1168 | margin-left: 0; } 1169 | 1170 | .profile-photo { 1171 | width: 5em; 1172 | height: 5em; 1173 | margin-bottom: 2em; 1174 | vertical-align: middle; 1175 | float: left; 1176 | background-color: #eee; 1177 | border: none; } 1178 | 1179 | .photo-task-icons { 1180 | display: block; 1181 | border-left: solid 1px #e4e4e4; 1182 | height: 5em; 1183 | width: 8em; 1184 | margin-left: 7em; 1185 | padding-top: 1em; 1186 | padding-left: 0.5em; } 1187 | 1188 | /* @media screen and (min-width:40em) { 1189 | .photo-container { 1190 | margin-left: 25%; 1191 | } 1192 | .elsewhere-selector table{ 1193 | margin-left: 25%; 1194 | width: auto; 1195 | } 1196 | } */ 1197 | .icon-label-list li { 1198 | list-style-type: none; 1199 | display: inline-block; 1200 | margin-left: 0; 1201 | padding-right: 1em; } 1202 | 1203 | .app-avatars { 1204 | margin-bottom: 2em; } 1205 | .app-avatars img:last-child { 1206 | left: -12px; } 1207 | 1208 | .app-avatar { 1209 | width: 6em; 1210 | height: 6em; 1211 | overflow: hidden; 1212 | -webkit-border-radius: 100%; 1213 | -moz-border-radius: 100%; 1214 | border-radius: 100%; 1215 | margin-bottom: 0.5em; 1216 | border: 12px solid rgba(0, 0, 0, 0.06); 1217 | float: left; 1218 | display: inline-block; 1219 | position: relative; } 1220 | 1221 | .app-buttons { 1222 | margin-top: 1em; 1223 | margin-bottom: 2em; } 1224 | 1225 | .app-scope { 1226 | margin-bottom: 2em; 1227 | padding: 1em 0; 1228 | border-bottom: 1px #ccc solid; } 1229 | 1230 | .app-token { 1231 | margin-top: 1em; 1232 | border-top: 1px #ccc solid; 1233 | word-wrap: break-word; } 1234 | .app-token h4 { 1235 | margin: 1em 0 0 0; } 1236 | .app-token .app-avatar { 1237 | margin: 1em; 1238 | width: 4em; 1239 | height: 4em; 1240 | border: 9px solid rgba(0, 0, 0, 0.06); } 1241 | .app-token .app-block { 1242 | margin-left: 6em; } 1243 | .app-token .codes { 1244 | color: #bbbbbb; } 1245 | 1246 | .service-connections { 1247 | width: auto; 1248 | /* td:nth-child(1), td:nth-child(3) { 1249 | 1250 | span{ 1251 | color: #888; 1252 | font-weight: normal; 1253 | } 1254 | 1255 | } 1256 | 1257 | td:nth-child(2){ 1258 | padding-left: 2em; 1259 | padding-right: 2em; 1260 | 1261 | i{ 1262 | font-size: 1rem; 1263 | } 1264 | } */ } 1265 | .service-connections td { 1266 | vertical-align: middle; } 1267 | .service-connections td:nth-child(1) i { 1268 | font-size: 2rem; } 1269 | .service-connections td:nth-child(2) { 1270 | padding-right: 2em; } 1271 | .service-connections td:nth-child(3) a { 1272 | display: block; 1273 | clear: all; } 1274 | .service-connections td:nth-child(3) span.fa-stack { 1275 | font-size: 1rem; } 1276 | .service-connections td:nth-child(4) i.fa-times-circle { 1277 | font-size: 2rem; } 1278 | 1279 | .storage-connections, .archive-history { 1280 | width: auto; } 1281 | .storage-connections td, .archive-history td { 1282 | padding-top: 0.6em; 1283 | padding-bottom: 0.6em; } 1284 | .storage-connections td:nth-child(1), .archive-history td:nth-child(1) { 1285 | vertical-align: top; } 1286 | .storage-connections td:nth-child(2), .archive-history td:nth-child(2) { 1287 | font-weight: bold; 1288 | vertical-align: middle; } 1289 | .storage-connections td:nth-child(2) span, .archive-history td:nth-child(2) span { 1290 | color: #888; 1291 | font-weight: normal; } 1292 | .storage-connections td:nth-child(2) small, .archive-history td:nth-child(2) small { 1293 | color: #888; 1294 | font-weight: normal; 1295 | display: block; 1296 | margin-top: 0; } 1297 | .storage-connections td:nth-child(3), .archive-history td:nth-child(3) { 1298 | vertical-align: middle; 1299 | padding-left: 2em; } 1300 | .storage-connections td:nth-child(3) a, .archive-history td:nth-child(3) a { 1301 | display: block; 1302 | clear: all; } 1303 | .storage-connections td:nth-child(3) span.fa-stack, .archive-history td:nth-child(3) span.fa-stack { 1304 | font-size: 1rem; } 1305 | .storage-connections td:nth-child(4), .archive-history td:nth-child(4) { 1306 | vertical-align: middle; } 1307 | .storage-connections td:nth-child(4) i.fa-times-circle, .archive-history td:nth-child(4) i.fa-times-circle { 1308 | font-size: 2rem; } 1309 | 1310 | .archive-history { 1311 | margin: 2em 0; } 1312 | 1313 | .reclaim-options { 1314 | display: table; } 1315 | .reclaim-options li { 1316 | display: table-row; } 1317 | .reclaim-options div { 1318 | display: table-cell; 1319 | vertical-align: top; 1320 | padding-right: 0.5em; } 1321 | .reclaim-options p { 1322 | display: table-cell; 1323 | margin: 0; 1324 | padding: 0; 1325 | padding-bottom: 2em; } 1326 | .reclaim-options a.title { 1327 | display: block; } 1328 | .reclaim-options time { 1329 | color: #888; 1330 | display: block; } 1331 | 1332 | .home section { 1333 | font-size: 3em; 1334 | margin-top: 2em; 1335 | margin-bottom: 2em; 1336 | text-align: center; } 1337 | .home h1 { 1338 | margin-bottom: 0.2em; } 1339 | .home li { 1340 | font-size: 1.68750em; 1341 | line-height: 1.13043em; 1342 | margin-top: 1.9259em; 1343 | margin-bottom: 0.963em; 1344 | display: block; 1345 | margin-left: 0; 1346 | text-align: center; 1347 | text-transform: lowercase; 1348 | margin: 2em; } 1349 | .home li span { 1350 | color: #999; } 1351 | 1352 | #reply-to { 1353 | display: none; } 1354 | 1355 | #reply-to label { 1356 | margin: 0; } 1357 | 1358 | #reply-to.active { 1359 | display: block; } 1360 | 1361 | #photo-button .title { 1362 | font-size: 1.2rem; } 1363 | 1364 | footer { 1365 | margin-top: 10em; 1366 | margin-bottom: 6em; 1367 | color: #ccc; 1368 | font-size: 1rem; 1369 | font-weight: 100; 1370 | border: none; } 1371 | 1372 | footer a { 1373 | color: #ccc; } 1374 | 1375 | .avatar-small { 1376 | width: 4em; 1377 | height: 4em; 1378 | margin: 0; } 1379 | 1380 | .leaflet-control-attribution { 1381 | display: none; } 1382 | 1383 | .file-preview { 1384 | border: solid 1px #ccc; 1385 | display: none; 1386 | text-align: center; 1387 | padding: 6px; } 1388 | 1389 | .file-preview img { 1390 | display: inline-block; } 1391 | 1392 | #author { 1393 | margin: 2em 0; } 1394 | 1395 | #author span, #author img, #author li { 1396 | display: block; 1397 | margin: 0; 1398 | padding: 0; 1399 | line-height: 1.6rem; } 1400 | 1401 | #author img { 1402 | margin-bottom: 1em; } 1403 | 1404 | #author ul { 1405 | margin: 0; 1406 | padding: 0; 1407 | list-style: none; } 1408 | 1409 | .beta-notes { 1410 | /* @include border-radius(12px); */ 1411 | /* border: 1px solid #ccc; */ 1412 | background-color: #fcfae7; 1413 | padding: 1.6em 1em; 1414 | margin-top: 6em; 1415 | margin-bottom: 4em; } 1416 | .beta-notes h2 { 1417 | margin: 0; } 1418 | 1419 | .button-list form { 1420 | margin-top: 1em; 1421 | display: inline-block; } 1422 | 1423 | .hidden { 1424 | display: none; 1425 | transition: all 0.3s ease; } 1426 | 1427 | .signin-button { 1428 | text-align: right; } 1429 | 1430 | .alert-danger { 1431 | background-color: #f2dede; 1432 | border-color: #ebccd1; 1433 | color: #a94442; } 1434 | 1435 | .alert-warning { 1436 | background-color: #f0ad4e; 1437 | border-color: #ed9c28; 1438 | color: #fff; } 1439 | 1440 | .alert { 1441 | padding: 15px; 1442 | margin-bottom: 20px; 1443 | border: 1px solid transparent; 1444 | border-radius: 2px; } 1445 | 1446 | .alert-progress { 1447 | border: 1px solid #47a447; 1448 | background-color: #5cb85c; 1449 | color: #fff; 1450 | -webkit-user-select: none; 1451 | -moz-user-select: none; 1452 | -ms-user-select: none; 1453 | -o-user-select: none; 1454 | user-select: none; 1455 | -webkit-border-radius: 6; 1456 | -moz-border-radius: 6; 1457 | -ms-border-radius: 6; 1458 | border-radius: 6; 1459 | width: 100%; } 1460 | 1461 | input:-webkit-autofill { 1462 | -webkit-box-shadow: 0 0 0px 1000px white inset; } 1463 | 1464 | .loading-notice { 1465 | color: #bbbbbb; 1466 | padding: 0 1em; 1467 | font-weight: 300; } 1468 | 1469 | .intro-list li { 1470 | padding-top: 0.6em; } 1471 | 1472 | .standard-notes { 1473 | background-color: #fafafa; 1474 | padding: 0.6em 1em 1.6em 1em; 1475 | margin-top: 6em; 1476 | margin-bottom: 4em; } 1477 | 1478 | section.app-download a { 1479 | transition: none; } 1480 | 1481 | .feedback { 1482 | text-align: right; } 1483 | .feedback a, .feedback span { 1484 | text-align: right; 1485 | text-transform: uppercase; 1486 | font-size: 0.75000em; 1487 | font-weight: 400; 1488 | letter-spacing: 0.05em; } 1489 | .feedback span { 1490 | color: #bbbbbb; } 1491 | 1492 | .listtype-a { 1493 | list-style-type: lower-latin; 1494 | padding-left: 1em; } 1495 | 1496 | .setting-group { 1497 | margin-top: 4em; } 1498 | 1499 | .editor-places fieldset { 1500 | margin-top: 2em; } 1501 | 1502 | .editor-places .icon-row label { 1503 | color: #444; } 1504 | 1505 | .dateline a.geo-uri { 1506 | color: #bbb; } 1507 | 1508 | .places-menu { 1509 | display: block; 1510 | position: relative; } 1511 | 1512 | .tooltip { 1513 | position: absolute; 1514 | z-index: 1030; 1515 | display: block; 1516 | visibility: visible; 1517 | font-size: 0.75em; 1518 | line-height: 1.4; 1519 | opacity: 0; 1520 | filter: alpha(opacity=0); } 1521 | 1522 | .tooltip.in { 1523 | opacity: 0.9; 1524 | filter: alpha(opacity=90); } 1525 | 1526 | .tooltip.top { 1527 | margin-top: -3px; 1528 | padding: 5px 0; } 1529 | 1530 | .tooltip.right { 1531 | margin-left: 3px; 1532 | padding: 0 5px; } 1533 | 1534 | .tooltip.bottom { 1535 | margin-top: 3px; 1536 | padding: 5px 0; } 1537 | 1538 | .tooltip.left { 1539 | margin-left: -3px; 1540 | padding: 0 5px; } 1541 | 1542 | .tooltip-inner { 1543 | max-width: 200px; 1544 | padding: 3px 8px; 1545 | color: #ffffff; 1546 | text-align: center; 1547 | text-decoration: none; 1548 | background-color: #333; 1549 | border-radius: 4px; } 1550 | 1551 | .tooltip-arrow { 1552 | position: absolute; 1553 | width: 0; 1554 | height: 0; 1555 | border-color: transparent; 1556 | border-style: solid; } 1557 | 1558 | .tooltip.top .tooltip-arrow { 1559 | bottom: 0; 1560 | left: 50%; 1561 | margin-left: -5px; 1562 | border-width: 5px 5px 0; 1563 | border-top-color: #333; } 1564 | 1565 | .tooltip.top-left .tooltip-arrow { 1566 | bottom: 0; 1567 | left: 5px; 1568 | border-width: 5px 5px 0; 1569 | border-top-color: #333; } 1570 | 1571 | .tooltip.top-right .tooltip-arrow { 1572 | bottom: 0; 1573 | right: 5px; 1574 | border-width: 5px 5px 0; 1575 | border-top-color: #333; } 1576 | 1577 | .tooltip.right .tooltip-arrow { 1578 | top: 50%; 1579 | left: 0; 1580 | margin-top: -5px; 1581 | border-width: 5px 5px 5px 0; 1582 | border-right-color: #333; } 1583 | 1584 | .tooltip.left .tooltip-arrow { 1585 | top: 50%; 1586 | right: 0; 1587 | margin-top: -5px; 1588 | border-width: 5px 0 5px 5px; 1589 | border-left-color: #333; } 1590 | 1591 | .tooltip.bottom .tooltip-arrow { 1592 | top: 0; 1593 | left: 50%; 1594 | margin-left: -5px; 1595 | border-width: 0 5px 5px; 1596 | border-bottom-color: #333; } 1597 | 1598 | .tooltip.bottom-left .tooltip-arrow { 1599 | top: 0; 1600 | left: 5px; 1601 | border-width: 0 5px 5px; 1602 | border-bottom-color: #333; } 1603 | 1604 | .tooltip.bottom-right .tooltip-arrow { 1605 | top: 0; 1606 | right: 5px; 1607 | border-width: 0 5px 5px; 1608 | border-bottom-color: #333; } 1609 | 1610 | /* >>>>>> _menu.scss */ 1611 | /* 1 Slide menu 1612 | ------------------------------*/ 1613 | .wrap { 1614 | transition: left 0.3s ease; 1615 | position: relative; 1616 | left: 0em; } 1617 | 1618 | .slide-menu { 1619 | transition: left 0.3s ease; 1620 | width: 10em; 1621 | height: 100%; 1622 | position: fixed; 1623 | z-index: 100; 1624 | top: 0; 1625 | left: -10em; 1626 | background: #33a0e8; 1627 | color: #fff; 1628 | -webkit-user-select: none; 1629 | -moz-user-select: none; 1630 | -ms-user-select: none; 1631 | -o-user-select: none; 1632 | user-select: none; 1633 | -webkit-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1634 | -moz-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1635 | box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); } 1636 | .slide-menu a { 1637 | display: block; 1638 | padding: 0.5em; 1639 | padding-left: 1em; 1640 | color: #fff; 1641 | font-size: 1em; 1642 | text-decoration: none; 1643 | font-weight: 300; } 1644 | .slide-menu a:hover { 1645 | color: #fff; 1646 | background-color: #3b7eaa; 1647 | text-decoration: none; } 1648 | .slide-menu ul { 1649 | margin: 1.5em; 1650 | display: block; } 1651 | .slide-menu li { 1652 | display: block; 1653 | margin: 0; } 1654 | .slide-menu ul.meta-menu { 1655 | border: none; 1656 | padding-left: 0; 1657 | border-top: 1px dotted #fff; 1658 | padding-top: 1.5em; } 1659 | 1660 | /* 1661 | 1662 | .wrap { 1663 | transition: left 0.3s ease; 1664 | position: relative; 1665 | left: 0em; 1666 | } 1667 | 1668 | .slide-menu { 1669 | transition: left 0.3s ease; 1670 | background: #33a0e8; 1671 | color: #fff; 1672 | @include user-select(none); 1673 | 1674 | -webkit-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1675 | -moz-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1676 | box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.25); 1677 | 1678 | clear: both; 1679 | overflow: hidden; 1680 | 1681 | a { 1682 | display: block; 1683 | padding: 0.5em; 1684 | color: #fff; 1685 | font-size: 1em; 1686 | text-decoration: none; 1687 | font-weight: 300; 1688 | } 1689 | 1690 | a:hover { 1691 | color: #fff; 1692 | background-color: #3b7eaa; 1693 | text-decoration: none; 1694 | } 1695 | 1696 | ul{ 1697 | margin: 0.5em; 1698 | font-size: 1em; 1699 | display: inline-block; 1700 | 1701 | .content-menu{ 1702 | margin-top: 4em; 1703 | } 1704 | } 1705 | 1706 | ul.meta-menu{ 1707 | border-left: 1px dotted #fff; 1708 | padding-left: 1.5em; 1709 | } 1710 | 1711 | li{ 1712 | list-style: none; 1713 | margin: 0; 1714 | display: inline-block; 1715 | white-space: nowrap; 1716 | 1717 | i[class^="icon-"]{ 1718 | display: inline-block; 1719 | text-align: center; 1720 | width: 1.5em; 1721 | } 1722 | } 1723 | 1724 | } 1725 | 1726 | 1727 | 1728 | 1.1 Hoz 1729 | ------------------------------ 1730 | 1731 | a.menu-link { 1732 | display: none; 1733 | } 1734 | 1735 | .wrap.active { 1736 | left: 0; 1737 | height: 100%; 1738 | } 1739 | 1740 | 1741 | 1742 | 1743 | 1.2 Ver 1744 | ------------------------------ 1745 | 1746 | body.js .slide-menu { 1747 | width: 10em; 1748 | height: 100%; 1749 | position: fixed; 1750 | z-index: 100; 1751 | top: 0; 1752 | left: -10em; 1753 | 1754 | -webkit-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1755 | -moz-box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1756 | box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.25); 1757 | 1758 | ul{ 1759 | margin: 1.5em; 1760 | display: block; 1761 | } 1762 | 1763 | li{ 1764 | display: block; 1765 | } 1766 | 1767 | ul.meta-menu{ 1768 | border: none; 1769 | padding-left: 0; 1770 | border-top: 1px dotted #fff; 1771 | padding-top: 1.5em; 1772 | } 1773 | 1774 | 1775 | } 1776 | */ 1777 | body.js .wrap.active { 1778 | left: 10em; } 1779 | 1780 | body.js .slide-menu.active { 1781 | left: 0em; } 1782 | 1783 | /* 2 button for slide menu 1784 | ------------------------------*/ 1785 | .menu-button-bar { 1786 | padding-top: 0em; 1787 | margin-left: 2em; 1788 | -webkit-transition: all 0.3s ease; 1789 | -moz-transition: all 0.3s ease; 1790 | transition: all 0.3s ease; 1791 | -webkit-user-select: none; 1792 | -moz-user-select: none; 1793 | -ms-user-select: none; 1794 | -o-user-select: none; 1795 | user-select: none; 1796 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 1797 | -webkit-tap-highlight-color: transparent; 1798 | /* For some Androids */ 1799 | display: none; 1800 | z-index: 200; } 1801 | 1802 | body.js .menu-button-bar { 1803 | display: block; } 1804 | 1805 | .menu-button { 1806 | text-align: center; 1807 | width: 2.4em; 1808 | height: 2.4em; 1809 | cursor: pointer; 1810 | border-radius: 50%; 1811 | color: #ccc; 1812 | border: 1px solid #ccc; 1813 | display: inline-block; 1814 | margin-right: 0.5em; 1815 | vertical-align: top; } 1816 | .menu-button i.fa-angle-left { 1817 | margin-top: 0.05em; 1818 | margin-left: -0.1em; } 1819 | .menu-button i.fa-angle-right { 1820 | margin-top: 0.05em; 1821 | margin-left: 0.05em; } 1822 | .menu-button :hover { 1823 | color: #333; 1824 | border-color: #333; } 1825 | .menu-button a { 1826 | color: #ccc; 1827 | display: inline-block; 1828 | padding-top: 0.25em; } 1829 | .menu-button a:hover { 1830 | color: #333; } 1831 | 1832 | .menu-button:nth-child(3) a { 1833 | padding-top: 0.3em; } 1834 | 1835 | /* 2.1 button for collection selection menu 1836 | ------------------------------*/ 1837 | #collection-menu { 1838 | display: inline-block; 1839 | vertical-align: top; 1840 | margin-top: 0.6em; 1841 | margin-left: 0.6em; } 1842 | 1843 | #collection-icon { 1844 | text-align: center; 1845 | width: 2.4em; 1846 | height: 2.4em; 1847 | cursor: pointer; 1848 | border-radius: 50%; 1849 | color: #ccc; 1850 | border: 1px solid #ccc; 1851 | display: inline-block; } 1852 | #collection-icon i.fa-angle-down { 1853 | margin-top: 0.06em; 1854 | margin-bottom: 0.04em; } 1855 | #collection-icon :hover { 1856 | color: #333; 1857 | border-color: #333; } 1858 | #collection-icon ul.dropdown-menu { 1859 | margin-top: -0.2em; } 1860 | 1861 | /* 3 Icon-row 1862 | ------------------------------*/ 1863 | .icon-row { 1864 | color: #ccc; 1865 | font-size: 0.8em; 1866 | margin: 0; 1867 | display: inline-block; 1868 | -webkit-transition: all 0.3s ease; 1869 | -moz-transition: all 0.3s ease; 1870 | transition: all 0.3s ease; 1871 | -webkit-user-select: none; 1872 | -moz-user-select: none; 1873 | -ms-user-select: none; 1874 | -o-user-select: none; 1875 | user-select: none; 1876 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 1877 | -webkit-tap-highlight-color: transparent; 1878 | /* For some Androids */ } 1879 | .icon-row li { 1880 | list-style: none; 1881 | display: inline-block; 1882 | margin: 0; } 1883 | .icon-row .title { 1884 | display: none; 1885 | font-size: 1.2em; 1886 | padding-right: 1.2em; } 1887 | .icon-row label { 1888 | color: #ccc; 1889 | display: inline-block; 1890 | width: auto; 1891 | float: none; } 1892 | 1893 | /* 3 Editor-menu 1894 | ------------------------------*/ 1895 | .editor-menu { 1896 | color: #33a0e8; 1897 | display: block; } 1898 | .editor-menu .title { 1899 | display: inline; } 1900 | .editor-menu label { 1901 | display: inline; 1902 | width: auto; 1903 | float: none; } 1904 | .editor-menu ul { 1905 | display: inline-block; } 1906 | .editor-menu ul:nth-child(2) { 1907 | padding-left: 1.2em; 1908 | border-left: 1px solid #ccc; 1909 | display: inline-block; } 1910 | .editor-menu ul:nth-child(2) label { 1911 | color: #666; } 1912 | .editor-menu input[type="checkbox"] { 1913 | display: none; } 1914 | .editor-menu input[type="checkbox"] + label .private { 1915 | display: inline; } 1916 | .editor-menu input[type="checkbox"] + label .public { 1917 | display: none; } 1918 | .editor-menu input[type="checkbox"]:checked + label .private { 1919 | display: none; } 1920 | .editor-menu input[type="checkbox"]:checked + label .public { 1921 | display: inline; } 1922 | .editor-menu a, .editor-menu a:focus { 1923 | color: #add9f6; } 1924 | .editor-menu a.active { 1925 | color: #33a0e8; } 1926 | 1927 | /* 4 Push-to menu 1928 | ------------------------------*/ 1929 | .push-to-menu li { 1930 | margin-right: 0.5em; } 1931 | .push-to-menu input[type="checkbox"] { 1932 | display: none; } 1933 | .push-to-menu input[type="checkbox"] + label { 1934 | color: #ccc; } 1935 | .push-to-menu input[type="checkbox"]:checked + label { 1936 | color: #666; } 1937 | 1938 | /* 2 Line with up triangle 1939 | ------------------------------*/ 1940 | .tri-up { 1941 | position: relative; 1942 | margin-top: 2em; 1943 | border-top: 1px solid #ccc; } 1944 | 1945 | /* Required for Down Triangle */ 1946 | .tri-up:before, .tri-up:after { 1947 | content: ""; 1948 | position: absolute; 1949 | width: 0; 1950 | height: 0; 1951 | border-style: solid; 1952 | border-color: transparent; 1953 | border-bottom: 0; } 1954 | 1955 | /* Stroke */ 1956 | .tri-up:before { 1957 | top: -23px; 1958 | left: 2em; 1959 | border-bottom: 20px solid #aaa; 1960 | border-left: 20px solid transparent; 1961 | border-right: 20px solid transparent; } 1962 | 1963 | /* Fill */ 1964 | .tri-up:after { 1965 | top: -22px; 1966 | left: 2em; 1967 | border-bottom: 20px solid #fff; 1968 | border-left: 20px solid transparent; 1969 | border-right: 20px solid transparent; } 1970 | 1971 | /* 2 1972 | ------------------------------*/ 1973 | #post-button { 1974 | font-weight: 300; 1975 | padding-left: 2em; 1976 | padding-right: 2em; 1977 | font-size: 1em; 1978 | margin-top: 4em; } 1979 | 1980 | #text-count { 1981 | display: none; 1982 | /* border: solid 1px #ccc; */ 1983 | color: #ccc; 1984 | -webkit-border-radius: 12px; 1985 | -moz-border-radius: 12px; 1986 | -ms-border-radius: 12px; 1987 | border-radius: 12px; 1988 | padding-left: 16px; 1989 | padding-right: 16px; 1990 | display: inline-block; 1991 | text-align: middle; 1992 | position: absolute; 1993 | font-size: 0.85em; 1994 | vertical-align: middle; 1995 | text-align: center; 1996 | right: 6px; 1997 | bottom: 16px; } 1998 | 1999 | #text-count.over-limit { 2000 | font-weight: normal; 2001 | color: red; } 2002 | 2003 | /* >>>>>> _textentry.scss */ 2004 | .textentry { 2005 | position: relative; } 2006 | .textentry:after { 2007 | content: ""; 2008 | display: table; 2009 | clear: both; } 2010 | 2011 | .edit { 2012 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 2013 | font-size: 1em; 2014 | font-weight: normal; 2015 | font-style: normal; 2016 | letter-spacing: normal; 2017 | line-height: normal; 2018 | text-transform: none; 2019 | word-spacing: normal; 2020 | text-indent: inherit; 2021 | word-wrap: break-word; 2022 | white-space: pre-wrap; 2023 | border: 1px rgba(0, 0, 0, 0) solid; 2024 | background-color: rgba(0, 0, 0, 0); 2025 | color: #000; 2026 | position: relative; 2027 | overflow-y: visible; 2028 | width: 100%; 2029 | min-height: 6em; 2030 | padding: 1em; 2031 | padding-bottom: 2em; 2032 | margin: 0em; 2033 | left: 0em; 2034 | top: 0em; } 2035 | 2036 | .edit-hidden { 2037 | position: absolute; 2038 | left: 0em; 2039 | top: 0em; } 2040 | 2041 | #text { 2042 | z-index: 200; 2043 | opacity: 00.1; 2044 | color: rgba(0, 0, 0, 0); 2045 | white-space: normal; 2046 | border: 1px #ccc solid; } 2047 | 2048 | #text-selected { 2049 | z-index: 150; } 2050 | 2051 | #result { 2052 | z-index: 100; 2053 | border: none; 2054 | border: 1px #ccc solid; } 2055 | 2056 | #placeholder { 2057 | z-index: 100; 2058 | color: #ccc; 2059 | border: none; 2060 | font-style: oblique; 2061 | padding-left: 1.2em; } 2062 | 2063 | #html { 2064 | z-index: 1; 2065 | display: none; } 2066 | 2067 | #caretInsertIcon { 2068 | position: absolute; 2069 | top: 0; 2070 | left: 0; 2071 | z-index: 180; 2072 | height: 1em; 2073 | padding-left: 2px; 2074 | padding-top: 0.3em; } 2075 | 2076 | #caretInsertIcon div { 2077 | border-left: 1px solid #000; 2078 | vertical-align: top; 2079 | padding: 0; 2080 | margin: 0; 2081 | height: 0.8em; } 2082 | 2083 | /* Also use prefixes with @keyframes and animation to support current browsers */ 2084 | @keyframes blinker { 2085 | 0% { 2086 | visibility: visible; } 2087 | 2088 | 50% { 2089 | visibility: hidden; } 2090 | 2091 | 100% { 2092 | visibility: visible; } } 2093 | 2094 | .cursor { 2095 | animation: blinker steps(1) 1s infinite; } 2096 | 2097 | .blink { 2098 | -webkit-animation-name: blinker; 2099 | -webkit-animation-duration: 1s; 2100 | -webkit-animation-iteration-count: infinite; 2101 | -moz-animation-name: blinker; 2102 | -moz-animation-duration: 1s; 2103 | -moz-animation-iteration-count: infinite; 2104 | animation-name: blinker; 2105 | animation-duration: 1s; 2106 | animation-iteration-count: infinite; } 2107 | 2108 | @-moz-keyframes blinker { 2109 | 0% { 2110 | opacity: 1.0; } 2111 | 2112 | 50% { 2113 | opacity: 0.0; } 2114 | 2115 | 100% { 2116 | opacity: 1.0; } } 2117 | 2118 | @-webkit-keyframes blinker { 2119 | 0% { 2120 | opacity: 1.0; } 2121 | 2122 | 50% { 2123 | opacity: 0.0; } 2124 | 2125 | 100% { 2126 | opacity: 1.0; } } 2127 | 2128 | @keyframes blinker { 2129 | 0% { 2130 | opacity: 1.0; } 2131 | 2132 | 50% { 2133 | opacity: 0.0; } 2134 | 2135 | 100% { 2136 | opacity: 1.0; } } 2137 | 2138 | .text-not-selected { 2139 | opacity: 0.0; } 2140 | 2141 | .text-selected { 2142 | background: #33a0e8; 2143 | color: #fff; } 2144 | 2145 | #result a, #result a:visited { 2146 | color: #33a0e8; 2147 | text-decoration: none; } 2148 | 2149 | #geo-container { 2150 | position: relative; 2151 | display: none; 2152 | margin-bottom: 8px; } 2153 | 2154 | .map-container { 2155 | border: solid 1px #ccc; 2156 | padding: 6px; 2157 | position: relative; } 2158 | 2159 | .map { 2160 | height: 180px; } 2161 | 2162 | .map-large { 2163 | height: 280px; } 2164 | 2165 | .map-attribution { 2166 | display: none; } 2167 | 2168 | #map-title { 2169 | position: absolute; 2170 | z-index: 5000; 2171 | left: 1em; 2172 | top: 1em; 2173 | background-color: #fff; } 2174 | 2175 | /* -------------------- */ 2176 | /* Version 3 */ 2177 | #content { 2178 | font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 2179 | font-size: 1em; 2180 | border: 1px #ccc solid; 2181 | position: relative; 2182 | overflow-y: visible; 2183 | width: 100%; 2184 | min-height: 6em; 2185 | padding: 1em; 2186 | padding-bottom: 2em; 2187 | margin: 0em; 2188 | margin-bottom: 0.2em; 2189 | left: 0em; 2190 | top: 0em; } 2191 | 2192 | #html { 2193 | display: none; } 2194 | 2195 | #text { 2196 | display: none; 2197 | opacity: 1; 2198 | color: #333; } 2199 | 2200 | #geo-container { 2201 | position: relative; 2202 | display: none; 2203 | margin-bottom: 0.2em; } 2204 | 2205 | .geo-metadata { 2206 | color: #bbbbbb; 2207 | font-weight: 300; } 2208 | 2209 | .settings-menu { 2210 | margin: 0; } 2211 | .settings-menu li { 2212 | list-style: none; 2213 | display: inline-block; 2214 | border-right: 1px solid #aaa; 2215 | margin: 0; 2216 | padding: 0 1em; } 2217 | .settings-menu li:first-child { 2218 | padding-left: 0; } 2219 | .settings-menu li:last-child { 2220 | border: none; } 2221 | 2222 | #profile-settings #settings-profile-item, 2223 | #mentions-settings #settings-mentions-item, 2224 | #access-settings #settings-access-item, 2225 | #content-settings #settings-content-item, 2226 | #password-settings #settings-password-item { 2227 | color: #333333; } 2228 | 2229 | #content-settings section.settings { 2230 | margin-bottom: 4em; } 2231 | #content-settings section.settings hgroup { 2232 | margin-bottom: 1.6em; } 2233 | #content-settings section.settings h2 { 2234 | margin-bottom: 0.2em; } 2235 | #content-settings section.settings label { 2236 | display: inline-block; } 2237 | #content-settings section.settings select { 2238 | -webkit-appearance: select; } 2239 | 2240 | #access-settings section.settings input[type="submit"] { 2241 | margin-top: 1.6em; } 2242 | #access-settings section.settings p { 2243 | margin: 0; 2244 | padding: 0; } 2245 | 2246 | #profile-settings h2 { 2247 | margin-bottom: 0.2em; } 2248 | 2249 | /* #content-settings{ 2250 | form{ 2251 | margin-top: 0; 2252 | } 2253 | 2254 | input[type="submit"]{ 2255 | margin-top: 0; 2256 | } 2257 | } */ 2258 | /* 2259 | .h-feed, .h-entry{ 2260 | a{ 2261 | color: $type-dark; 2262 | } 2263 | .dateline a{ 2264 | color: $link-color; 2265 | } 2266 | .reply-to a{ 2267 | color: #bbb; 2268 | } 2269 | 2270 | a:hover, .dateline a:hover{ 2271 | color: $link-color-dark; 2272 | } 2273 | 2274 | } */ 2275 | body.detail .h-entry .u-url { 2276 | color: #bbb; } 2277 | 2278 | .h-feed .h-as-note h2 { 2279 | margin: 0; 2280 | margin-top: 0.2em; 2281 | margin-bottom: 0.2em; 2282 | line-height: 1.2em; 2283 | padding: 0; 2284 | font-size: 1.3em; } 2285 | 2286 | .h-entry { 2287 | word-wrap: break-word; 2288 | margin-top: 3em; 2289 | margin-bottom: 3em; } 2290 | 2291 | .comments h-entry { 2292 | margin: 0; } 2293 | 2294 | .syndication-interactions { 2295 | text-transform: uppercase; 2296 | font-size: 0.75000em; } 2297 | 2298 | .reply-to { 2299 | color: #bbb; 2300 | text-transform: uppercase; 2301 | font-size: 0.75000em; 2302 | font-weight: 400; 2303 | letter-spacing: 0.05em; } 2304 | .reply-to a { 2305 | color: #bbb; } 2306 | .reply-to a:hover { 2307 | color: #fc0599; } 2308 | .reply-to i { 2309 | display: none; } 2310 | 2311 | .dateline, .counts, .likes { 2312 | text-transform: uppercase; 2313 | color: #bbbbbb; 2314 | font-size: 0.75000em; 2315 | font-weight: 400; 2316 | letter-spacing: 0.05em; } 2317 | .dateline i, .counts i, .likes i { 2318 | display: none; } 2319 | 2320 | .dateline a, .counts a { 2321 | color: #33a0e8; } 2322 | 2323 | .dateline a:hover, .counts a:hover { 2324 | color: #fc0599; } 2325 | 2326 | .syndication-interactions { 2327 | text-transform: uppercase; 2328 | font-size: 0.75000em; } 2329 | 2330 | .h-paging p, .sync-link { 2331 | text-transform: uppercase; 2332 | color: #999; 2333 | font-size: 0.75000em; } 2334 | 2335 | .likes { 2336 | background-color: #F8F8F8; 2337 | padding: 0.4em; } 2338 | 2339 | .likes-header { 2340 | margin-top: 3em; 2341 | padding-top: 1em; 2342 | padding-bottom: 1em; 2343 | -webkit-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); 2344 | -moz-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); 2345 | box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); } 2346 | 2347 | .likes ul { 2348 | margin: 0; 2349 | padding: 0; 2350 | margin-left: 1em; 2351 | display: inline-block; 2352 | height: 1.5em; } 2353 | 2354 | .likes li { 2355 | list-style: none; 2356 | margin: 0; 2357 | margin-right: 1em; 2358 | padding: 0; 2359 | display: inline-block; 2360 | height: 1.5em; } 2361 | 2362 | .likes li a { 2363 | margin: 0; 2364 | padding: 0; 2365 | height: 1.5em; 2366 | display: inline-block; } 2367 | 2368 | .likes li .u-like-of { 2369 | display: none; } 2370 | 2371 | .likes li img { 2372 | vertical-align: middle; 2373 | display: inline; } 2374 | 2375 | .avatar { 2376 | width: 6em; 2377 | height: 6em; 2378 | overflow: hidden; 2379 | background-color: #f2f2f0; 2380 | -webkit-border-radius: 100%; 2381 | -moz-border-radius: 100%; 2382 | border-radius: 100%; 2383 | margin-bottom: 0.5em; } 2384 | 2385 | .avatar-icon { 2386 | width: 1.5em; 2387 | height: 1.5em; 2388 | margin: 0; 2389 | border: 1px solid #fff; } 2390 | 2391 | .p-in-reply-to img, .p-comment img { 2392 | vertical-align: middle; } 2393 | 2394 | .p-in-reply-to, .p-comment { 2395 | padding-top: 2em; 2396 | padding-bottom: 2em; 2397 | border-bottom: 1px dotted #999; 2398 | margin: 0; } 2399 | 2400 | .p-in-reply-to:last-child, .p-comment:last-child { 2401 | border-bottom: 0; } 2402 | 2403 | .p-in-reply-to .dateline, .p-comment .dateline { 2404 | display: block; } 2405 | 2406 | .syndications { 2407 | text-transform: uppercase; 2408 | color: #bbb; 2409 | font-size: 0.75000em; 2410 | display: inline-block; } 2411 | 2412 | .syndication-list { 2413 | margin-left: 0; 2414 | display: inline; } 2415 | .syndication-list li { 2416 | list-style: none; 2417 | margin: 0; 2418 | display: inline; } 2419 | .syndication-list li a { 2420 | font-size: 0.8em; 2421 | font-weight: 100; 2422 | background-color: #bbb; 2423 | color: #fff; 2424 | padding-top: 0.15em; 2425 | padding-right: 0.5em; 2426 | padding-bottom: 0.2em; 2427 | padding-left: 0.5em; 2428 | -webkit-border-radius: 3px; 2429 | -moz-border-radius: 3px; 2430 | -ms-border-radius: 3px; 2431 | border-radius: 3px; } 2432 | .syndication-list li a:hover { 2433 | background-color: #FC0599; 2434 | color: #fff; } 2435 | 2436 | .in-replies, .comments { 2437 | background-color: #F8F8F8; 2438 | font-size: 1rem; 2439 | font-weight: 300; 2440 | line-height: 1.4rem; 2441 | padding: 0 2em; 2442 | margin-bottom: 3em; 2443 | -webkit-box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.25); 2444 | -moz-box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.25); 2445 | box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.25); } 2446 | .in-replies .dateline, .comments .dateline { 2447 | padding-top: 0.5em; } 2448 | .in-replies .dateline a, .comments .dateline a { 2449 | color: #333333; } 2450 | 2451 | .p-in-reply-to, .p-comment { 2452 | position: relative; } 2453 | .p-in-reply-to img, .p-comment img { 2454 | position: absolute; 2455 | left: 0; 2456 | top: 2em; 2457 | display: inline-block; } 2458 | .p-in-reply-to .reply-to-text, .p-comment .reply-to-text { 2459 | display: inline-block; 2460 | margin-left: 2em; } 2461 | 2462 | /* box-shadow: inset 0 16px 12px -12px rgba(0, 0, 0, 0.125); for small high des screens */ 2463 | .comments { 2464 | -webkit-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); 2465 | -moz-box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); 2466 | box-shadow: inset 0 8px 6px -6px rgba(0, 0, 0, 0.25); 2467 | margin-bottom: 0; } 2468 | 2469 | .comment-on { 2470 | color: #bbb; 2471 | text-transform: uppercase; 2472 | font-size: 0.75000em; 2473 | font-weight: 400; 2474 | letter-spacing: 0.05em; 2475 | margin-top: 3em; } 2476 | 2477 | .photo-frame { 2478 | margin: 0.5em 0; 2479 | border: 1px solid #bbb; 2480 | padding: 2px; 2481 | text-align: center; } 2482 | 2483 | .h-as-mention { 2484 | display: block; } 2485 | .h-as-mention img { 2486 | display: inline-block; 2487 | vertical-align: middle; } 2488 | 2489 | /* hr.stream-item-divider:after{ 2490 | content: ' '; 2491 | height: 1em; 2492 | border-right: 1px #bbb solid; 2493 | 2494 | width: 50%; 2495 | display: inline-block; 2496 | padding: 0; 2497 | margin: 0; 2498 | margin-top: 1em; 2499 | 2500 | } 2501 | 2502 | hr.stream-item-divider{ 2503 | border: 1px #bbb solid; 2504 | border-top: none; 2505 | height: 1em; 2506 | font-weight: 300; 2507 | font-size: 1em; 2508 | text-align: left; 2509 | } 2510 | */ 2511 | hr { 2512 | margin: 4em; 2513 | margin-top: 0.8em; 2514 | margin-bottom: 1.5em; 2515 | border-top: 1px #ccc solid; } 2516 | 2517 | hr.stream-item-divider:after { 2518 | content: ' '; } 2519 | 2520 | hr:last-of-type { 2521 | display: none; } 2522 | 2523 | .listing .list-item { 2524 | border: 1px #ddd solid; 2525 | padding: 1em; } 2526 | 2527 | .listing .list-item:before { 2528 | content: ' '; 2529 | height: 1em; 2530 | background-color: #fff; 2531 | margin-top: -1.5em; 2532 | margin-bottom: .5em; 2533 | display: block; 2534 | clear: both; } 2535 | 2536 | .listing .list-item:after { 2537 | content: ' '; 2538 | height: 1em; 2539 | background-color: #fff; 2540 | margin-top: 1.5em; 2541 | margin-bottom: -2em; 2542 | display: block; 2543 | clear: both; } 2544 | 2545 | .listing-notice { 2546 | font-style: italic; 2547 | margin-bottom: 2em; 2548 | font-weight: 300; 2549 | color: #999; } 2550 | 2551 | .spaced-item { 2552 | margin-bottom: 3em; } 2553 | 2554 | .e-content { 2555 | -ms-word-break: break-all; 2556 | word-break: break-all; 2557 | /* Non standard for webkit */ 2558 | word-break: break-word; 2559 | -webkit-hyphens: auto; 2560 | -moz-hyphens: auto; 2561 | -ms-hyphens: auto; 2562 | hyphens: auto; } 2563 | 2564 | /* .e-content a{ 2565 | display: inline; 2566 | word-wrap: break-word; 2567 | width: 100%; 2568 | } 2569 | */ 2570 | ul.tag-list { 2571 | display: inline; 2572 | padding: 0; 2573 | margin: 0; 2574 | color: #bbb; 2575 | text-transform: lowercase; 2576 | font-weight: 300; } 2577 | ul.tag-list li { 2578 | list-style: none; 2579 | display: inline; 2580 | padding: 0; 2581 | margin: 0; } 2582 | ul.tag-list li:after { 2583 | content: ", "; } 2584 | ul.tag-list li:last-child:after { 2585 | content: " "; } 2586 | 2587 | .tag-icon { 2588 | color: #bbb; 2589 | margin-right: 0.25em; } 2590 | 2591 | .address-sentence span:after { 2592 | content: ","; } 2593 | .address-sentence span:last-child:after { 2594 | content: ""; } 2595 | 2596 | .h-as-mention .access { 2597 | display: none; } 2598 | 2599 | body.listing .item a { 2600 | color: #333333; } 2601 | 2602 | body.listing .item .dateline a { 2603 | color: #bbbbbb; } 2604 | 2605 | body.listing .item a:hover { 2606 | color: #fc0599; } 2607 | 2608 | body.listing .item a.detail-link { 2609 | color: #33a0e8; } 2610 | 2611 | body.listing .item .syndication-list a { 2612 | color: #fff; } 2613 | 2614 | .formats, .photo-sizes { 2615 | margin: 0; 2616 | margin-top: 5em; 2617 | text-transform: uppercase; 2618 | font-size: 0.75000em; 2619 | color: #bbbbbb; } 2620 | .formats p, .photo-sizes p { 2621 | display: inline-block; } 2622 | .formats ul, .photo-sizes ul { 2623 | padding: 0; 2624 | margin: 0; 2625 | display: inline-block; } 2626 | .formats li, .photo-sizes li { 2627 | list-style: none; 2628 | display: inline-block; 2629 | border-right: 1px solid #aaa; 2630 | margin: 0; 2631 | padding: 0 1em; } 2632 | .formats li:last-child, .photo-sizes li:last-child { 2633 | border: none; } 2634 | 2635 | .photo-sizes { 2636 | margin-top: 0; } 2637 | 2638 | body.detail .h-entry .formats a { 2639 | color: #33a0e8; } 2640 | 2641 | body.detail .h-entry .formats a.current-format { 2642 | color: #bbbbbb; } 2643 | 2644 | a.u-sgn { 2645 | color: #bbbbbb; } 2646 | 2647 | body.listing article a { 2648 | color: #333333; } 2649 | 2650 | body.listing article a[rel="bookmark"] { 2651 | color: #33a0e8; } 2652 | 2653 | body.listing article a.u-syndication, body.listing article a.u-x-equivalent { 2654 | color: #fff; } 2655 | 2656 | #author span.hidden { 2657 | display: none; } 2658 | 2659 | .truncate { 2660 | width: 100%; 2661 | white-space: nowrap; 2662 | overflow: hidden; 2663 | text-overflow: ellipsis; } 2664 | 2665 | a.u-source span, a.u-target span { 2666 | color: #bbbbbb; } 2667 | 2668 | .mention-title { 2669 | font-size: 1.2rem; 2670 | padding: 0; 2671 | margin: 0; } 2672 | 2673 | /* >>>>>> _media-queries.scss */ 2674 | /* Top level content area */ 2675 | .contents { 2676 | -webkit-transition: all 0.3s ease; 2677 | -moz-transition: all 0.3s ease; 2678 | transition: all 0.3s ease; 2679 | padding: 0 30px; } 2680 | 2681 | /* Centered content area */ 2682 | .container { 2683 | margin: 0 auto; 2684 | padding: 0; 2685 | max-width: 30em; 2686 | min-width: 14em; } 2687 | 2688 | .container::before, 2689 | .container::after { 2690 | content: " "; 2691 | display: table; } 2692 | 2693 | .container::after { 2694 | clear: both; } 2695 | 2696 | /* menu open - close 3 titles */ 2697 | @media screen and (max-width: 46em) { 2698 | .wrap.active .editor-menu ul:nth-child(1) .title { 2699 | display: none; } 2700 | 2701 | .editor-menu ul:nth-child(1) { 2702 | margin-right: 1.2em; } 2703 | 2704 | .feedback { 2705 | margin-right: 1em; } } 2706 | /* menu open - close 1 titles */ 2707 | @media screen and (max-width: 36em) { 2708 | .wrap.active .editor-menu ul:nth-child(2) .title { 2709 | display: none; } 2710 | 2711 | .editor-menu ul:nth-child(1) { 2712 | margin-right: 1.2em; } } 2713 | /* close 3 titles */ 2714 | @media screen and (max-width: 40em) { 2715 | .editor-menu ul:nth-child(1) .title { 2716 | display: none; } 2717 | 2718 | .editor-menu ul:nth-child(1) { 2719 | margin-right: 1.2em; } } 2720 | /* close 1 titles */ 2721 | @media screen and (max-width: 26em) { 2722 | .editor-menu ul:nth-child(2) .title { 2723 | display: none; } 2724 | 2725 | .editor-menu ul:nth-child(1) { 2726 | margin-right: 1.2em; } } 2727 | /* close 1 titles */ 2728 | @media screen and (max-width: 35em) { 2729 | .slide-menu ul { 2730 | margin: 1.5em; 2731 | display: block; } 2732 | .slide-menu li { 2733 | display: block; } 2734 | .slide-menu ul.meta-menu { 2735 | border: none; 2736 | border-top: 1px dotted #fff; 2737 | padding-top: 1.5em; 2738 | padding-left: 0; } } 2739 | /* small screen lose title */ 2740 | @media screen and (max-width: 30em) { 2741 | .container:nth-child(1) { 2742 | margin-top: 1em; } 2743 | 2744 | .menu-button-bar { 2745 | font-size: 0.75em; 2746 | padding-top: 1em; } 2747 | 2748 | .menu-button a { 2749 | padding-top: 0.08em; } 2750 | 2751 | .menu-button:nth-child(3) a { 2752 | padding-top: 0.1em; } 2753 | 2754 | #collection-menu { 2755 | font-size: 0.75em; } 2756 | #collection-menu .dropdown-menu { 2757 | font-size: 1.1rem; } 2758 | 2759 | #collection-icon i.fa-angle-down { 2760 | margin-top: 0.09em; 2761 | margin-bottom: 0.04em; } 2762 | 2763 | #post-button { 2764 | margin-top: 1em; } 2765 | 2766 | .settings-menu li { 2767 | padding: 0 0.4em; } 2768 | 2769 | body { 2770 | font-size: 1.1rem; 2771 | line-height: 1.5em; } 2772 | 2773 | .reply-to, .dateline { 2774 | letter-spacing: 0; } 2775 | 2776 | hgroup { 2777 | margin: 0; } 2778 | hgroup h1 { 2779 | font-size: 2.2rem; 2780 | font-weight: 300; 2781 | padding-bottom: .4em; 2782 | margin: 0; } 2783 | 2784 | h2 { 2785 | font-size: 1.3em; 2786 | line-height: 1.2em; 2787 | margin-top: 1.6em; 2788 | margin-bottom: 0.4em; } 2789 | 2790 | .service-connections .remove-button { 2791 | /* @include border-radius(2em); 2792 | width: 2em; 2793 | height: 2em; 2794 | padding: 0; */ } 2795 | .service-connections .remove-button span { 2796 | display: none; } 2797 | 2798 | .app-download .cancel { 2799 | display: none; } 2800 | 2801 | .photo-task-icons { 2802 | margin-left: 6em; } 2803 | 2804 | .in-replies, .comments { 2805 | padding: 0.75em; } 2806 | 2807 | .p-in-reply-to, .p-comment { 2808 | padding: 0.75em 0; } 2809 | 2810 | .p-in-reply-to img, .p-comment img { 2811 | top: 0.75em; } 2812 | 2813 | .listing .list-item { 2814 | padding: .75em; } 2815 | 2816 | .listing .list-item:after { 2817 | margin-top: .1em; 2818 | margin-bottom: -1em; } } 2819 | @media screen and (min-width: 40em) { 2820 | .photo-container { 2821 | margin-left: 25%; } 2822 | 2823 | .elsewhere-selector table { 2824 | margin-left: 25%; 2825 | width: auto; } } 2826 | -------------------------------------------------------------------------------- /fonts/icomoon.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 21 | 26 | 27 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glennjones/note-editor/552e58199558e098c7408fa9fb35b2f6725fd21b/fonts/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 21 | 26 | 27 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glennjones/note-editor/552e58199558e098c7408fa9fb35b2f6725fd21b/fonts/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glennjones/note-editor/552e58199558e098c7408fa9fb35b2f6725fd21b/fonts/icomoon.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Note Editor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |

Note editor ‐ Example of output

53 |

A note editor for indie blogging platforms.

54 | 55 | 56 |
57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 |
73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /javascript/jquery-htmlclean.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML Clean for jQuery 3 | Anthony Johnston 4 | http://www.antix.co.uk 5 | 6 | version 1.4.0 7 | 8 | $Revision: 99 $ 9 | 10 | requires jQuery http://jquery.com 11 | 12 | Use and distibution http://www.opensource.org/licenses/bsd-license.php 13 | 14 | 2010-04-02 allowedTags/removeTags added (white/black list) thanks to David Wartian (Dwartian) 15 | 2010-06-30 replaceStyles added for replacement of bold, italic, super and sub styles on a tag 16 | 2012-04-30 allowedAttributes added, an array of attributed allowed on the elements 17 | 2013-02-25 now will push non-inline elements up the stack if nested in an inline element 18 | 2013-02-25 comment element support added, removed by default, see AllowComments in options 19 | */ 20 | (function ($) { 21 | $.fn.htmlClean = function (options) { 22 | // iterate and html clean each matched element 23 | return this.each(function () { 24 | if (this.value) { 25 | this.value = $.htmlClean(this.value, options); 26 | } else { 27 | this.innerHTML = $.htmlClean(this.innerHTML, options); 28 | } 29 | }); 30 | }; 31 | 32 | // clean the passed html 33 | $.htmlClean = function (html, options) { 34 | options = $.extend({}, $.htmlClean.defaults, options); 35 | options.allowEmpty = tagAllowEmpty.concat(options.allowEmpty); 36 | 37 | var tagsRE = /(<(\/)?(\w+:)?([\w]+)([^>]*)>)|