├── .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 |
10 |
11 |

Box Title

12 |
13 |

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 |
20 |
21 | 22 |
23 |

Box Title

24 |
25 |

Some stuff here

26 |

Some stuff here

27 |

Some stuff here

28 |
29 |
30 |
31 | 32 |
33 |
34 |

Menu

35 |
36 |

Some stuff here

37 |
38 |
39 | 40 |
41 |

Main Content

42 |
43 |

Some stuff here

44 |
45 |
46 |
47 | 48 |
49 |

Form Elements

50 |
51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 |
59 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 | 78 | 79 | 80 |
81 |
82 | 83 | 84 | 85 | 86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |

This is a box without a heading

94 |
95 |
96 | 97 |
98 |

Progress Bar

99 |
100 |
101 |

Loading Floppy Disk 1 of 4,273...

102 |
103 |
104 |
105 |
106 | 107 |
108 |

Code Box

109 |
110 |
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 |
143 |
144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dos-css", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/vlucas/dos-css.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/vlucas/dos-css/issues" 17 | }, 18 | "homepage": "https://github.com/vlucas/dos-css#readme", 19 | "dependencies": { 20 | "gulp": "^3.9.1", 21 | "gulp-sass": "^3.1.0", 22 | "sass": "^1.0.0-beta.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /sass/_code.scss: -------------------------------------------------------------------------------- 1 | pre { 2 | display: block; 3 | font-family: $font-stack; 4 | font-size: 1em; 5 | background-color: black; 6 | color: lightgrey; 7 | padding: 1em; 8 | } 9 | -------------------------------------------------------------------------------- /sass/_forms.scss: -------------------------------------------------------------------------------- 1 | $color-bg: lightgrey; 2 | $input-height: 1.8em; 3 | 4 | input, textarea, select, option, button, a.button { 5 | display: inline-block; 6 | font-family: $font-stack; 7 | font-size: 1.1em; 8 | padding: 0.3em 0.6em; 9 | height: $input-height; 10 | background-color: $color-bg; 11 | color: #000; 12 | border: 0; 13 | border-radius: 0; 14 | box-shadow: 4px 4px 0px #000; 15 | } 16 | 17 | button, 18 | a.button, 19 | input[type="button"], 20 | input[type="submit"] { 21 | height: auto; 22 | min-width: 15%; 23 | padding: 0.3em 1em; 24 | 25 | &:before { 26 | content: "< "; 27 | } 28 | &:after { 29 | content: " >"; 30 | } 31 | 32 | &:active { 33 | margin: 3px 0 0 3px; 34 | box-shadow: 1px 1px 0px #000; 35 | } 36 | 37 | &.positive { 38 | background-color: limegreen; 39 | } 40 | &.negative { 41 | background-color: darkred; 42 | color: white; 43 | } 44 | &.primary { 45 | background-color: white; 46 | } 47 | &.turquoise { 48 | background-color: turquoise; 49 | } 50 | } 51 | 52 | input { 53 | min-width: 35%; 54 | } 55 | 56 | select { 57 | border: 0; 58 | border-radius: 0; 59 | -webkit-appearance: none; 60 | } 61 | select { 62 | background: $color-bg url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) no-repeat scroll 95% center/10px 15px; 63 | background-position: calc(100% - 10px) 42%; 64 | cursor: pointer; 65 | min-width: 35%; 66 | height: $input-height; 67 | box-sizing: border-box; 68 | padding: .3em .45em; 69 | -moz-appearance: none; 70 | -webkit-appearance: none; 71 | appearance: none 72 | } 73 | 74 | textarea { 75 | width: 100%; 76 | min-height: 140px; 77 | } 78 | 79 | /* file input fields */ 80 | label > input[type=file] { 81 | overflow: hidden; 82 | } 83 | 84 | .form-control { 85 | margin: 0.5em 0; 86 | } 87 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: -ms-flexbox; 3 | display: flex; 4 | flex-wrap: wrap; 5 | 6 | .grow-2 { 7 | flex-grow: 4; 8 | } 9 | } 10 | 11 | .flex>* { 12 | box-sizing: border-box; 13 | flex: 1 1 auto; 14 | } 15 | -------------------------------------------------------------------------------- /sass/_progressbar.scss: -------------------------------------------------------------------------------- 1 | .progress-bar { 2 | border: 1px solid white; 3 | display: block; 4 | padding: 8px; 5 | height: 30px; 6 | 7 | span { 8 | display: block; 9 | height: 100%; 10 | background: yellow; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /sass/_typography.scss: -------------------------------------------------------------------------------- 1 | body, html { 2 | font-family: $font-stack; 3 | font-size: 1em; 4 | } 5 | 6 | a { 7 | display: inline-block; 8 | background-color: darkgray; 9 | color: #000; 10 | } 11 | 12 | .text-center { 13 | text-align: center; 14 | } 15 | .text-right { 16 | text-align: right; 17 | } 18 | -------------------------------------------------------------------------------- /sass/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Main variables 3 | */ 4 | $font-stack: "Share Tech Mono", "Lucida Console", Monaco, monospace; 5 | 6 | /** 7 | * Base styles 8 | */ 9 | html, body { 10 | height: 100%; 11 | font-family: $font-stack; 12 | font-size: 1em; 13 | background-color: #444; 14 | } 15 | 16 | /** 17 | * Box 18 | */ 19 | .box { 20 | box-sizing: border-box; 21 | margin: 1.2em; 22 | padding: 10px 6px; 23 | background-color: darkblue; 24 | color: white; 25 | box-shadow: 16px 16px 0px #222; 26 | 27 | &.turquoise { 28 | background-color: turquoise; 29 | } 30 | &.text-dark { 31 | color: black; 32 | } 33 | 34 | /* box title */ 35 | h2 { 36 | font-size: 1.1em; 37 | overflow: hidden; 38 | text-align: center; 39 | margin: 0; 40 | margin-bottom: -0.7em; 41 | padding-bottom: 0; 42 | &:before, 43 | &:after { 44 | border-top: 3px double white; 45 | background-color: transparent; 46 | content: ""; 47 | display: inline-block; 48 | height: 3px; 49 | position: relative; 50 | vertical-align: middle; 51 | width: 50%; 52 | } 53 | &:before { 54 | right: 0.5em; 55 | margin-left: -50%; 56 | } 57 | &:after { 58 | left: 0.5em; 59 | margin-right: -50%; 60 | } 61 | } 62 | 63 | /* box body/content */ 64 | .box-body { 65 | padding: 1em 2em; 66 | border: 3px double white; 67 | } 68 | 69 | h2 + .box-body { 70 | border-top: 0; 71 | } 72 | } 73 | 74 | /* when dark text is required */ 75 | .text-dark .box-body, 76 | .box.text-dark h2:before, 77 | .box.text-dark h2:after { 78 | border-color: black; 79 | } 80 | 81 | 82 | @import '_typography.scss'; 83 | @import '_code.scss'; 84 | @import '_grid.scss'; 85 | @import '_forms.scss'; 86 | @import '_progressbar.scss'; 87 | --------------------------------------------------------------------------------