├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json └── src ├── index.html.example ├── js └── index.js ├── progress.json.example └── styles ├── icons.scss ├── index.scss ├── normalize.css └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | .cache 63 | dist 64 | .DS_Store 65 | src/index.html 66 | src/progress.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Gergo Tolnai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OSSU-progress 2 | 3 | [![Open Source Society University - Computer Science](https://img.shields.io/badge/OSSU-computer--science-blue.svg)](https://github.com/ossu/computer-science) 4 | 5 | Showcase your progress with the Open Source Society University's Computer Science curriculum. 6 | Currently only `Introduction to Computer Science` and `Core CS` courses are included. 7 | 8 | [Preview](https://geritol.github.io/ossu) 9 | 10 | ## Usage 11 | 12 | Copy `src/index.html.example` to `src/index.html` 13 | and `src/progress.json.example` to `src/progress.json` 14 | 15 | Alter `progress.js` to reflect your current progress with the course 16 | Use the following statuses: 17 | 18 | - todo 19 | - doing 20 | - done 21 | 22 | Add your name and contact info to `./index.html` 23 | 24 | Run `npm install` and `npm run build` 25 | 26 | > Note: the `build` script assumes that you will deploy it in the root of your site. 27 | > To deploy it in a subfolder use `npm run build-subfolder` (replace the part after `--public-url` with your subfolder name) 28 | 29 | > Tip: to try it out locally run `npx serve dist` 30 | 31 | Deploy contents of `./dist` to a static server 32 | 33 | ## Development 34 | 35 | Setup: `npm install` in the root folder 36 | 37 | Source files are located in the `./src` folder 38 | After altering files `npm run build` 39 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ossu-progress", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "anymatch": { 8 | "version": "3.0.3", 9 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz", 10 | "integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==", 11 | "dev": true, 12 | "requires": { 13 | "normalize-path": "^3.0.0", 14 | "picomatch": "^2.0.4" 15 | } 16 | }, 17 | "binary-extensions": { 18 | "version": "2.0.0", 19 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", 20 | "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", 21 | "dev": true 22 | }, 23 | "braces": { 24 | "version": "3.0.2", 25 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 26 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 27 | "dev": true, 28 | "requires": { 29 | "fill-range": "^7.0.1" 30 | } 31 | }, 32 | "chokidar": { 33 | "version": "3.0.2", 34 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz", 35 | "integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==", 36 | "dev": true, 37 | "requires": { 38 | "anymatch": "^3.0.1", 39 | "braces": "^3.0.2", 40 | "fsevents": "^2.0.6", 41 | "glob-parent": "^5.0.0", 42 | "is-binary-path": "^2.1.0", 43 | "is-glob": "^4.0.1", 44 | "normalize-path": "^3.0.0", 45 | "readdirp": "^3.1.1" 46 | } 47 | }, 48 | "fill-range": { 49 | "version": "7.0.1", 50 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 51 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 52 | "dev": true, 53 | "requires": { 54 | "to-regex-range": "^5.0.1" 55 | } 56 | }, 57 | "fsevents": { 58 | "version": "2.0.7", 59 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz", 60 | "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==", 61 | "dev": true, 62 | "optional": true 63 | }, 64 | "glob-parent": { 65 | "version": "5.0.0", 66 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz", 67 | "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==", 68 | "dev": true, 69 | "requires": { 70 | "is-glob": "^4.0.1" 71 | } 72 | }, 73 | "is-binary-path": { 74 | "version": "2.1.0", 75 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 76 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 77 | "dev": true, 78 | "requires": { 79 | "binary-extensions": "^2.0.0" 80 | } 81 | }, 82 | "is-extglob": { 83 | "version": "2.1.1", 84 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 85 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 86 | "dev": true 87 | }, 88 | "is-glob": { 89 | "version": "4.0.1", 90 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", 91 | "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", 92 | "dev": true, 93 | "requires": { 94 | "is-extglob": "^2.1.1" 95 | } 96 | }, 97 | "is-number": { 98 | "version": "7.0.0", 99 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 100 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 101 | "dev": true 102 | }, 103 | "normalize-path": { 104 | "version": "3.0.0", 105 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 106 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 107 | "dev": true 108 | }, 109 | "picomatch": { 110 | "version": "2.0.7", 111 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz", 112 | "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==", 113 | "dev": true 114 | }, 115 | "readdirp": { 116 | "version": "3.1.2", 117 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.2.tgz", 118 | "integrity": "sha512-8rhl0xs2cxfVsqzreYCvs8EwBfn/DhVdqtoLmw19uI3SC5avYX9teCurlErfpPXGmYtMHReGaP2RsLnFvz/lnw==", 119 | "dev": true, 120 | "requires": { 121 | "picomatch": "^2.0.4" 122 | } 123 | }, 124 | "sass": { 125 | "version": "1.22.9", 126 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.9.tgz", 127 | "integrity": "sha512-FzU1X2V8DlnqabrL4u7OBwD2vcOzNMongEJEx3xMEhWY/v26FFR3aG0hyeu2T965sfR0E9ufJwmG+Qjz78vFPQ==", 128 | "dev": true, 129 | "requires": { 130 | "chokidar": ">=2.0.0 <4.0.0" 131 | } 132 | }, 133 | "to-regex-range": { 134 | "version": "5.0.1", 135 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 136 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 137 | "dev": true, 138 | "requires": { 139 | "is-number": "^7.0.0" 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ossu-progress", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "parcel build src/index.html && node src/js/index.js", 9 | "build-subfolder": "parcel build src/index.html --public-url /ossu && node src/js/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "sass": "^1.22.9" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/index.html.example: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | John Doe - OSSU Computer Science progress 8 | 9 | 10 | 11 |
12 | 26 |

27 | Progress with Open Source Society University's
28 | Computer Science curriculum
29 | Open Source Society University - Computer Science 34 |

35 | 36 | 37 |

38 | Crafted by @geritol 39 |

40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const progress = require("../progress.json"); 3 | 4 | const TEMPATE_LOCATION = "dist/index.html"; 5 | 6 | fs.readFile(TEMPATE_LOCATION, "utf8", function(err, template) { 7 | if (err) { 8 | console.error(`Failed to read ${TEMPATE_LOCATION} \n TIP: run 'npm build'`); 9 | } 10 | const courseProgress = __createCourseProgress(); 11 | const htmlToRender = template.replace( 12 | /[\S\s]*?<\/ul>/gi, 13 | '" 14 | ); 15 | fs.writeFileSync(TEMPATE_LOCATION, htmlToRender); 16 | }); 17 | 18 | function __createCourseProgress() { 19 | let courseProgress = ""; 20 | progress.forEach(function renderCategory(category) { 21 | courseProgress += _createCategoryOutput(category); 22 | }); 23 | return courseProgress; 24 | } 25 | 26 | function _createCategoryOutput(category) { 27 | var content = `

  • ${category.name}

    `; 28 | if (category.categories) { 29 | content += ""; 34 | } else if (category.courses) { 35 | content += ""; 40 | } 41 | content += "
    • "; 42 | return content; 43 | } 44 | 45 | function _createCourseOutput(course) { 46 | const statuses = { 47 | done: '
    ', 48 | doing: '
    ', 49 | todo: '
    ' 50 | }; 51 | return `
  • ${statuses[course.status]}

    ${course.name}

    • `; 54 | } 55 | -------------------------------------------------------------------------------- /src/progress.json.example: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Introduction to Computer Science", 4 | "courses": [ 5 | { 6 | "name": "Introduction to Computer Science - CS50", 7 | "url": "https://www.edx.org/course/introduction-computer-science-harvardx-cs50x#!", 8 | "status": "todo" 9 | }, 10 | { 11 | "name": "Introduction to Computer Science and Programming using Python", 12 | "url": "https://www.edx.org/course/introduction-computer-science-mitx-6-00-1x-10", 13 | "status": "todo" 14 | } 15 | ] 16 | }, 17 | { 18 | "name": "Core CS", 19 | "categories": [ 20 | { 21 | "name": "Core programming", 22 | "courses": [ 23 | { 24 | "name": "How to Code - Simple Data", 25 | "url": "https://www.edx.org/course/how-code-simple-data-ubcx-htc1x", 26 | "status": "todo" 27 | }, 28 | { 29 | "name": "How to Code - Complex Data", 30 | "url": "https://www.edx.org/course/how-code-complex-data-ubcx-htc2x", 31 | "status": "todo" 32 | }, 33 | { 34 | "name": "Software Construction - Data Abstraction", 35 | "url": "https://www.edx.org/course/software-construction-data-abstraction-ubcx-softconst1x", 36 | "status": "todo" 37 | }, 38 | { 39 | "name": "Software Construction - Object-Oriented Design", 40 | "url": "https://www.edx.org/course/software-construction-object-oriented-ubcx-softconst2x", 41 | "status": "todo" 42 | }, 43 | { 44 | "name": "Programming Languages, Part A", 45 | "url": "https://www.coursera.org/learn/programming-languages", 46 | "status": "todo" 47 | }, 48 | { 49 | "name": "Programming Languages, Part B", 50 | "url": "https://www.coursera.org/learn/programming-languages-part-b", 51 | "status": "todo" 52 | }, 53 | { 54 | "name": "Programming Languages, Part C", 55 | "url": "https://www.coursera.org/learn/programming-languages-part-c", 56 | "status": "todo" 57 | } 58 | ] 59 | }, 60 | { 61 | "name": "Core math", 62 | "courses": [ 63 | { 64 | "name": "Essence of Linear Algebra", 65 | "url": "https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab", 66 | "status": "todo" 67 | }, 68 | { 69 | "name": "Linear Algebra - Foundations to Frontiers", 70 | "url": "https://www.edx.org/course/linear-algebra-foundations-frontiers-utaustinx-ut-5-04x#!", 71 | "status": "todo" 72 | }, 73 | { 74 | "name": "Calculus One", 75 | "url": "https://www.coursera.org/learn/calculus1", 76 | "status": "todo" 77 | }, 78 | { 79 | "name": "Calculus Two: Sequences and Series", 80 | "url": "https://www.coursera.org/learn/advanced-calculus", 81 | "status": "todo" 82 | }, 83 | { 84 | "name": "Mathematics for Computer Science", 85 | "url": "https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-042j-mathematics-for-computer-science-spring-2015/index.htm", 86 | "status": "todo" 87 | } 88 | ] 89 | }, 90 | { 91 | "name": "Core systems", 92 | "courses": [ 93 | { 94 | "name": "Build a Modern Computer from First Principles: From Nand to Tetris", 95 | "url": "https://www.coursera.org/learn/build-a-computer", 96 | "status": "todo" 97 | }, 98 | { 99 | "name": "Build a Modern Computer from First Principles: Nand to Tetris Part II", 100 | "url": "https://www.coursera.org/learn/nand2tetris2", 101 | "status": "todo" 102 | }, 103 | { 104 | "name": "Introduction to Computer Networking", 105 | "url": "https://lagunita.stanford.edu/courses/Engineering/Networking-SP/SelfPaced/about", 106 | "status": "todo" 107 | }, 108 | { 109 | "name": "ops-class.org - Hack the Kernel", 110 | "url": "https://www.ops-class.org/", 111 | "status": "todo" 112 | } 113 | ] 114 | }, 115 | { 116 | "name": "Core theory", 117 | "courses": [ 118 | { 119 | "name": "Algorithms: Design and Analysis, Part I", 120 | "url": "https://lagunita.stanford.edu/courses/course-v1:Engineering+Algorithms1+SelfPaced/about", 121 | "status": "todo" 122 | }, 123 | { 124 | "name": "Algorithms: Design and Analysis, Part II", 125 | "url": "https://lagunita.stanford.edu/courses/course-v1:Engineering+Algorithms2+SelfPaced/about", 126 | "status": "todo" 127 | } 128 | ] 129 | }, 130 | { 131 | "name": "Core applications", 132 | "courses": [ 133 | { 134 | "name": "Databases", 135 | "url": "https://lagunita.stanford.edu/courses/DB/2014/SelfPaced/about", 136 | "status": "todo" 137 | }, 138 | { 139 | "name": "Machine Learning", 140 | "url": "https://www.coursera.org/learn/machine-learning", 141 | "status": "todo" 142 | }, 143 | { 144 | "name": "Computer Graphics", 145 | "url": "https://www.edx.org/course/computer-graphics-uc-san-diegox-cse167x", 146 | "status": "todo" 147 | }, 148 | { 149 | "name": "Cryptography I", 150 | "url": "https://www.coursera.org/course/crypto", 151 | "status": "todo" 152 | }, 153 | { 154 | "name": "Software Engineering: Introduction", 155 | "url": "https://www.edx.org/course/software-engineering-introduction-ubcx-softeng1x", 156 | "status": "todo" 157 | }, 158 | { 159 | "name": "Software Development Capstone Project", 160 | "url": "https://www.edx.org/course/software-development-capstone-project-ubcx-softengprjx", 161 | "status": "todo" 162 | } 163 | ] 164 | } 165 | ] 166 | } 167 | ] 168 | -------------------------------------------------------------------------------- /src/styles/icons.scss: -------------------------------------------------------------------------------- 1 | 2 | // Define vars we'll be using 3 | $loader-size: 1em; 4 | $check-height: $loader-size/2; 5 | $check-width: $check-height/2; 6 | $check-left: ($loader-size/6 ); 7 | $check-thickness: 2px; 8 | $done-color: #5cb85c; 9 | $doing-color: rgb(209, 186, 84); 10 | $todo-color: rgb(110, 110, 110); 11 | 12 | .status { 13 | border: $check-thickness solid; 14 | position: relative; 15 | display: inline-block; 16 | vertical-align: top; 17 | margin: 0 auto; 18 | } 19 | 20 | .status, 21 | .status:after{ 22 | border-radius: 50%; 23 | } 24 | 25 | .status.done, 26 | .status.done:after { 27 | margin-top: 4px; 28 | width: $loader-size; 29 | height: $loader-size; 30 | border-color: $done-color; 31 | } 32 | 33 | .status.doing, 34 | .status.doing:after { 35 | margin-top: 7px; 36 | margin-left: 2px; 37 | width: $loader-size / 1.3; 38 | height: $loader-size /1.3; 39 | border-color: $doing-color; 40 | background-color: $doing-color; 41 | } 42 | 43 | .status.todo, 44 | .status.todo:after { 45 | margin-top: 7px; 46 | margin-left: 2px; 47 | width: $loader-size / 1.3; 48 | height: $loader-size /1.3; 49 | border-color: $todo-color; 50 | background-color: $todo-color; 51 | } 52 | 53 | .checkmark { 54 | 55 | &.draw:after { 56 | transform: scaleX(-1) rotate(135deg); 57 | } 58 | 59 | &:after { 60 | opacity: 1; 61 | height: $check-height; 62 | width: $check-width; 63 | transform-origin: left top; 64 | border-right: $check-thickness solid $done-color; 65 | border-top: $check-thickness solid $done-color; 66 | content: ''; 67 | left: $check-left; 68 | top: $check-height; 69 | position: absolute; 70 | } 71 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./normalize.css"; 2 | @import "./icons.scss"; 3 | @import "./style.scss"; 4 | -------------------------------------------------------------------------------- /src/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family: monospace, monospace; /* 1 */ 92 | font-size: 1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color: transparent; /* 1 */ 105 | -webkit-text-decoration-skip: objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family: monospace, monospace; /* 1 */ 146 | font-size: 1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display: inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display: none; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style: none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family: sans-serif; /* 1 */ 246 | font-size: 100%; /* 1 */ 247 | line-height: 1.15; /* 1 */ 248 | margin: 0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow: visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type="button"], /* 1 */ 279 | [type="reset"], 280 | [type="submit"] { 281 | -webkit-appearance: button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type="button"]::-moz-focus-inner, 290 | [type="reset"]::-moz-focus-inner, 291 | [type="submit"]::-moz-focus-inner { 292 | border-style: none; 293 | padding: 0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type="button"]:-moz-focusring, 302 | [type="reset"]:-moz-focusring, 303 | [type="submit"]:-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding: 0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing: border-box; /* 1 */ 324 | color: inherit; /* 2 */ 325 | display: table; /* 1 */ 326 | max-width: 100%; /* 1 */ 327 | padding: 0; /* 3 */ 328 | white-space: normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display: inline-block; /* 1 */ 338 | vertical-align: baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow: auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type="checkbox"], 355 | [type="radio"] { 356 | box-sizing: border-box; /* 1 */ 357 | padding: 0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type="number"]::-webkit-inner-spin-button, 365 | [type="number"]::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type="search"] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | outline-offset: -2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type="search"]::-webkit-search-cancel-button, 384 | [type="search"]::-webkit-search-decoration { 385 | -webkit-appearance: none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance: button; /* 1 */ 395 | font: inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display: block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display: list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display: inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display: none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display: none; 447 | } -------------------------------------------------------------------------------- /src/styles/style.scss: -------------------------------------------------------------------------------- 1 | $connector-color: rgb(100,100,100); 2 | 3 | body { 4 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 5 | } 6 | 7 | h3, h4 { 8 | font-weight: 400; 9 | line-height: 2em; 10 | margin: 0px; 11 | display: inline; 12 | } 13 | 14 | h3{ 15 | font-size: 16px; 16 | } 17 | 18 | h4{ 19 | font-size: 15px; 20 | } 21 | 22 | a { 23 | color: #0366d6; 24 | text-decoration: none; 25 | 26 | &:hover{ 27 | text-decoration: underline; 28 | } 29 | } 30 | 31 | .lead{ 32 | margin-top: 0px; 33 | font-size: 1.25rem; 34 | font-weight: 300; 35 | line-height: 1.4; 36 | } 37 | 38 | .lead a img{ 39 | margin-top: 8px; 40 | } 41 | 42 | #main{ 43 | max-width: 580px; 44 | padding: 0 20px 20px 20px; 45 | margin: 0 auto; 46 | } 47 | 48 | #header{ 49 | display: flex; 50 | align-items: center; 51 | } 52 | 53 | .tags{ 54 | margin: 8px 0 0 12px;} 55 | 56 | .tag{ 57 | display: inline-block; 58 | background-color: rgb(251, 251, 123); 59 | padding: 0 5px 0 5px; 60 | margin-bottom: 3px 61 | } 62 | 63 | .creator{ 64 | margin-top: 30px; 65 | text-align: right; 66 | } 67 | 68 | // Connect uls 69 | 70 | ul#ossu, ul#ossu ul { 71 | list-style: none; 72 | margin: 0; 73 | padding: 0; 74 | } 75 | ul#ossu ul { 76 | margin-left: 10px; 77 | } 78 | ul#ossu li { 79 | margin: 0; 80 | padding: 0 7px; 81 | line-height: 20px; 82 | border-left:1px solid $connector-color; 83 | // font-size: 25px; 84 | // font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; 85 | // line-height: 40px; 86 | } 87 | ul#ossu li:last-child { 88 | border-left:none; 89 | } 90 | ul#ossu li:before { 91 | position:relative; 92 | top:-0.3em; 93 | height:1em; 94 | width:12px; 95 | color:white; 96 | border-bottom:1px solid $connector-color; 97 | content:""; 98 | display:inline-block; 99 | left:-7px; 100 | } 101 | ul#ossu li:last-child:before { 102 | border-left:1px solid $connector-color; 103 | } --------------------------------------------------------------------------------