├── .gitignore ├── dist └── index.css ├── gulpfile.js ├── index.html ├── package.json └── sass ├── _code.scss ├── _forms.scss ├── _grid.scss ├── _progressbar.scss ├── _typography.scss └── index.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .git 3 | node_modules 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Main variables 3 | */ 4 | /** 5 | * Base styles 6 | */ 7 | html, body { 8 | height: 100%; 9 | font-family: "Share Tech Mono", "Lucida Console", Monaco, monospace; 10 | font-size: 1em; 11 | background-color: #444; } 12 | 13 | /** 14 | * Box 15 | */ 16 | .box { 17 | box-sizing: border-box; 18 | margin: 1.2em; 19 | padding: 10px 6px; 20 | background-color: darkblue; 21 | color: white; 22 | box-shadow: 16px 16px 0px #222; 23 | /* box title */ 24 | /* box body/content */ } 25 | .box.turquoise { 26 | background-color: turquoise; } 27 | .box.text-dark { 28 | color: black; } 29 | .box h2 { 30 | font-size: 1.1em; 31 | overflow: hidden; 32 | text-align: center; 33 | margin: 0; 34 | margin-bottom: -0.7em; 35 | padding-bottom: 0; } 36 | .box h2:before, .box h2:after { 37 | border-top: 3px double white; 38 | background-color: transparent; 39 | content: ""; 40 | display: inline-block; 41 | height: 3px; 42 | position: relative; 43 | vertical-align: middle; 44 | width: 50%; } 45 | .box h2:before { 46 | right: 0.5em; 47 | margin-left: -50%; } 48 | .box h2:after { 49 | left: 0.5em; 50 | margin-right: -50%; } 51 | .box .box-body { 52 | padding: 1em 2em; 53 | border: 3px double white; } 54 | .box h2 + .box-body { 55 | border-top: 0; } 56 | 57 | /* when dark text is required */ 58 | .text-dark .box-body, 59 | .box.text-dark h2:before, 60 | .box.text-dark h2:after { 61 | border-color: black; } 62 | 63 | body, html { 64 | font-family: "Share Tech Mono", "Lucida Console", Monaco, monospace; 65 | font-size: 1em; } 66 | 67 | a { 68 | display: inline-block; 69 | background-color: darkgray; 70 | color: #000; } 71 | 72 | .text-center { 73 | text-align: center; } 74 | 75 | .text-right { 76 | text-align: right; } 77 | 78 | pre { 79 | display: block; 80 | font-family: "Share Tech Mono", "Lucida Console", Monaco, monospace; 81 | font-size: 1em; 82 | background-color: black; 83 | color: lightgrey; 84 | padding: 1em; } 85 | 86 | .flex { 87 | display: -ms-flexbox; 88 | display: flex; 89 | flex-wrap: wrap; } 90 | .flex .grow-2 { 91 | flex-grow: 4; } 92 | 93 | .flex > * { 94 | box-sizing: border-box; 95 | flex: 1 1 auto; } 96 | 97 | input, textarea, select, option, button, a.button { 98 | display: inline-block; 99 | font-family: "Share Tech Mono", "Lucida Console", Monaco, monospace; 100 | font-size: 1.1em; 101 | padding: 0.3em 0.6em; 102 | height: 1.8em; 103 | background-color: lightgrey; 104 | color: #000; 105 | border: 0; 106 | border-radius: 0; 107 | box-shadow: 4px 4px 0px #000; } 108 | 109 | button, 110 | a.button, 111 | input[type="button"], 112 | input[type="submit"] { 113 | height: auto; 114 | min-width: 15%; 115 | padding: 0.3em 1em; } 116 | button:before, 117 | a.button:before, 118 | input[type="button"]:before, 119 | input[type="submit"]:before { 120 | content: "< "; } 121 | button:after, 122 | a.button:after, 123 | input[type="button"]:after, 124 | input[type="submit"]:after { 125 | content: " >"; } 126 | button:active, 127 | a.button:active, 128 | input[type="button"]:active, 129 | input[type="submit"]:active { 130 | margin: 3px 0 0 3px; 131 | box-shadow: 1px 1px 0px #000; } 132 | button.positive, 133 | a.button.positive, 134 | input[type="button"].positive, 135 | input[type="submit"].positive { 136 | background-color: limegreen; } 137 | button.negative, 138 | a.button.negative, 139 | input[type="button"].negative, 140 | input[type="submit"].negative { 141 | background-color: darkred; 142 | color: white; } 143 | button.primary, 144 | a.button.primary, 145 | input[type="button"].primary, 146 | input[type="submit"].primary { 147 | background-color: white; } 148 | button.turquoise, 149 | a.button.turquoise, 150 | input[type="button"].turquoise, 151 | input[type="submit"].turquoise { 152 | background-color: turquoise; } 153 | 154 | input { 155 | min-width: 35%; } 156 | 157 | select { 158 | border: 0; 159 | border-radius: 0; 160 | -webkit-appearance: none; } 161 | 162 | select { 163 | background: lightgrey url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) no-repeat scroll 95% center/10px 15px; 164 | background-position: calc(100% - 10px) 42%; 165 | cursor: pointer; 166 | min-width: 35%; 167 | height: 1.8em; 168 | box-sizing: border-box; 169 | padding: .3em .45em; 170 | -moz-appearance: none; 171 | -webkit-appearance: none; 172 | appearance: none; } 173 | 174 | textarea { 175 | width: 100%; 176 | min-height: 140px; } 177 | 178 | /* file input fields */ 179 | label > input[type=file] { 180 | overflow: hidden; } 181 | 182 | .form-control { 183 | margin: 0.5em 0; } 184 | 185 | .progress-bar { 186 | border: 1px solid white; 187 | display: block; 188 | padding: 8px; 189 | height: 30px; } 190 | .progress-bar span { 191 | display: block; 192 | height: 100%; 193 | background: yellow; } 194 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const sass = require('gulp-sass'); 5 | 6 | gulp.task('sass', function () { 7 | return gulp.src('./sass/**/*.scss') 8 | .pipe(sass().on('error', sass.logError)) 9 | .pipe(gulp.dest('./dist')); 10 | }); 11 | 12 | gulp.task('sass:watch', function () { 13 | gulp.watch('./sass/**/*.scss', ['sass']); 14 | }); 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |Some stuff here
14 |Something with a link to google.com here
15 |Some stuff here
16 |What about a button link? link to google.com
17 |And a mark in the text
18 |Some stuff here
19 |Some stuff here
26 |Some stuff here
27 |Some stuff here
28 |Some stuff here
37 |Some stuff here
44 |This is a box without a heading
94 |Loading Floppy Disk 1 of 4,273...
102 | 103 |
111 | 'use strict';
112 |
113 | const crypto = require('crypto');
114 |
115 | const ENCRYPTION_KEY = process.env.ENCRYPTION_KEY; // Must be 256 bytes (32 characters)
116 | const IV_LENGTH = 16; // For AES, this is always 16
117 |
118 | function encrypt(text) {
119 | let iv = crypto.randomBytes(IV_LENGTH);
120 | let cipher = crypto.createCipheriv('aes-256-cbc', new Buffer(ENCRYPTION_KEY), iv);
121 | let encrypted = cipher.update(text);
122 |
123 | encrypted = Buffer.concat([encrypted, cipher.final()]);
124 |
125 | return iv.toString('hex') + ':' + encrypted.toString('hex');
126 | }
127 |
128 | function decrypt(text) {
129 | let textParts = text.split(':');
130 | let iv = new Buffer(textParts.shift(), 'hex');
131 | let encryptedText = new Buffer(textParts.join(':'), 'hex');
132 | let decipher = crypto.createDecipheriv('aes-256-cbc', new Buffer(ENCRYPTION_KEY), iv);
133 | let decrypted = decipher.update(encryptedText);
134 |
135 | decrypted = Buffer.concat([decrypted, decipher.final()]);
136 |
137 | return decrypted.toString();
138 | }
139 |
140 | module.exports = { decrypt, encrypt };
141 |
142 |