├── .gitignore ├── sass ├── _code.scss ├── _grid.scss ├── _progressbar.scss ├── _typography.scss ├── index.scss └── _forms.scss ├── gulpfile.js ├── package.json ├── index.html └── dist └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .git 3 | node_modules 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /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/_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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |