├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── suggestion.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── build ├── color.css ├── color.min.css ├── composer.json ├── composer.lock ├── dark.css ├── dark.min.css ├── extras └── README.md ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── light.css ├── light.min.css ├── mono-color.min.css ├── mono.css ├── mono.min.css ├── site.webmanifest ├── template-mono-only.html └── template.html /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/suggestion.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Suggestion 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | vendor/ 2 | composer.phar 3 | mono-only-*.zip 4 | mono-color-*.zip -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at asvvvad+monocolor@disroot.org. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute: 2 | 3 | Thanks for taking interest in this framework! It's a small personal project that I plan to use and I released it in hope to help others 4 | I'm always learning and would be happy to get help and you can learn too ^^ 5 | 6 | ## Some ways you can contribute: 7 | - Improve the code by reducing the size and avoid repetition where possible 8 | - Improve the instructions on the demo page. I tried to make it as detailed as possible but if you find any ways to make it better even by: 9 | - - Grammar, typos, missing things and better explanation: mostly I wrote this at night while sleep deprived so there may be a lot of grammar and syntax errors and over-explanation of rather simple things because I do that sometimes (a lot) 10 | - - Improving the examples: if you think they can be done better or have new simple and helpful elements you made using this don't hesitate to open a pull request! 11 | - - Improve navigation. The page is long and navigating it can be annoying for people that don't have the time to read it all. 12 | - Find out the gzipped size cause I'm lazy to do it 13 | - Creating an extra .css with elements that aren't included but would be nice to have in [extras](/extras) 14 | - - Examples: A progress bar, CSS-only nav bar 15 | - - Make sure the elements are small and don't require any other external CSS or pollyfils 16 | - - An extra section in the demo page about it would be nice 17 | 18 | 19 | ## Making pull requests: 20 | > #### I recommend reading this [easy getting started guide](https://github.com/firstcontributions/first-contributions) for understanding how to make contributions! 21 | - If you're making fixes to the demo page or minor fixes to the CSS that doesn't add any more feature you can submit the edits directly by making a pull request like the guide above shows 22 | - If you're adding new things to the CSS make sure that it doesn't add much size. I plan to keep all of the 5 CSS files under 4kb minified. 23 | - - If you're deleting make sure it keeps it nice 24 | - mono/color is focused on having two simple themes dark and light but you can make more based on your liking you can add them to the extras directory in this repository 25 | - mono/color is meant to be readable and easy to use for blogs and documentation 26 | - if you're adding something that would be nice for web apps add it in the extras directory ^^ 27 | 28 | Thanks again for your interest and last but not least you may also contribute to this guide with fixes ^^ 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 asvvvad 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 | # mono-color 2 | ![GitHub All Releases](https://img.shields.io/github/downloads/asvvvad/mono-color/total) ![GitHub](https://img.shields.io/github/license/asvvvad/mono-color) 3 | ![GitHub file size in bytes](https://img.shields.io/badge/mono-630b-brightgreen) 4 | ![GitHub file size in bytes](https://img.shields.io/badge/monocolor-1.3kb-brightgreen) 5 | 6 | a small, simple and beautiful CSS framework built with responsivity, readability, and a dual-theme in mind. 7 | 8 | It's perfect for a blog, a documentation site or a small web app. It can can be used for anything else as well. 9 | It's very responsive and looks neat on any resolution. 10 | Based on [Starveling](https://github.com/any-code/starveling/) and [lit](https://ajusa.github.io/lit/), providing only necessary elements while still looking great and customizable. 11 | 12 | ## mono/color is split into two: 13 | 14 | ### mono / 796b minified & gzipped, including both themes 15 | Can be used alone, it includes dark & light theme with no colors, you can use only one theme too. Only default html elements with a basic button. 16 | Good for a simple responsive blog. 17 | 18 | ### color / 1.3kb minified & gzipped, including mono and both themes 19 | Adds grids, cards, colors, useful utilities and badges. 20 | Great for a simple documentation page or a web app. 21 | 22 | ## Demo/Documentation: [here](https://asvvvad.github.io/mono-color) 23 | 24 | ## Showcase: 25 | [Stitch Micro-Framework Documentation](http://stitch.asvvvad.eu.org/) 26 | 27 | ## Download: [here](https://github.com/asvvvad/mono-color/releases) or simply clone the latest release branch 28 | 29 | ## Contributions: 30 | Any help or ideas on how to improve this are welcome! open an issue or a pull request ^^ 31 | -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/android-chrome-512x512.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/apple-touch-icon.png -------------------------------------------------------------------------------- /build: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env php 2 | run(file_get_contents("$file.css"))); 23 | } 24 | 25 | # combine mono and color into a single css file for better gzipping 26 | echo "Making mono-color.min.css ...\n"; 27 | file_put_contents("mono-color.min.css", file_get_contents("mono.min.css").file_get_contents("color.min.css")); 28 | 29 | # create the release zip files 30 | echo "Creating release archives ...\n"; 31 | `zip mono-only-$version.zip mono.min.css light.min.css dark.min.css template-mono-only.html`; 32 | `zip mono-color-$version.zip mono.min.css light.min.css dark.min.css color.min.css template.html`; 33 | 34 | echo "Done.\n"; -------------------------------------------------------------------------------- /color.css: -------------------------------------------------------------------------------- 1 | /* 2 | mono/color (https://github.com/asvvad/mono-color) 3 | Copyright (c) 2020 asvvvad - MIT License 4 | */ 5 | 6 | :root { 7 | --gray: #ccc; 8 | --accent: #fa0; 9 | --warning: #ffd600; 10 | --error: #d50000; 11 | --success: #00c853; 12 | --info: #2962ff 13 | } 14 | 15 | .card { 16 | padding: 1em; 17 | margin-top: 1rem; 18 | background: var(--def); 19 | color: var(--fg) 20 | } 21 | 22 | @media(min-width:45em) { 23 | .col { 24 | display: table-cell 25 | } 26 | .\31 { 27 | width: 5% 28 | } 29 | .\33 { 30 | width: 22% 31 | } 32 | .\34 { 33 | width: 30% 34 | } 35 | .\35 { 36 | width: 40% 37 | } 38 | .\32 { 39 | width: 15% 40 | } 41 | .row { 42 | display: table; 43 | border-spacing: 1em 0 44 | } 45 | } 46 | 47 | .w-100, 48 | .row { 49 | width: 100% 50 | } 51 | 52 | .w-50 { 53 | width: 50% 54 | } 55 | 56 | .white { 57 | color: #fff 58 | } 59 | 60 | .bg-white { 61 | background: #fff 62 | } 63 | 64 | .b-white { 65 | border-color: #fff 66 | } 67 | 68 | .gray { 69 | color: var(--gray) 70 | } 71 | 72 | .bg-gray { 73 | background: var(--gray) 74 | } 75 | 76 | .b-gray { 77 | border-color: var(--gray) 78 | } 79 | 80 | .black { 81 | color: #000 82 | } 83 | 84 | .bg-black { 85 | background: #000 86 | } 87 | 88 | .b-black { 89 | border-color: #000 90 | } 91 | 92 | .b-primary { 93 | border-color: var(--p) 94 | } 95 | 96 | .b-default { 97 | border-color: var(--b) 98 | } 99 | 100 | .accent { 101 | color: var(--accent) 102 | } 103 | 104 | .bg-accent { 105 | background: var(--accent) 106 | } 107 | 108 | .b-accent { 109 | border-color: var(--accent) 110 | } 111 | 112 | .warning { 113 | color: var(--warning) 114 | } 115 | 116 | .bg-warning { 117 | background: var(--warning) 118 | } 119 | 120 | .b-warning { 121 | border-color: var(--warning) 122 | } 123 | 124 | .error { 125 | color: var(--error) 126 | } 127 | 128 | .bg-error { 129 | background: var(--error) 130 | } 131 | 132 | .b-error { 133 | border-color: var(--error) 134 | } 135 | 136 | .success { 137 | color: var(--success) 138 | } 139 | 140 | .bg-success { 141 | background: var(--success) 142 | } 143 | 144 | .b-success { 145 | border-color: var(--success) 146 | } 147 | 148 | .info { 149 | color: var(--info) 150 | } 151 | 152 | .bg-info { 153 | background: var(--info) 154 | } 155 | 156 | .b-info { 157 | border-color: var(--info) 158 | } 159 | 160 | .inline { 161 | display: inline-block; 162 | margin: .5rem 0 163 | } 164 | 165 | .tacenter { 166 | text-align: center 167 | } 168 | 169 | .taleft { 170 | text-align: left 171 | } 172 | 173 | .taright { 174 | text-align: right 175 | } 176 | 177 | .pill { 178 | border-radius: 2rem; 179 | white-space: nowrap 180 | } 181 | 182 | .rounded { 183 | border-radius: 1rem 184 | } 185 | 186 | .mega { 187 | font-size: 4rem 188 | } 189 | 190 | .large { 191 | font-size: 2rem 192 | } 193 | 194 | .small { 195 | font-size: 1.4rem 196 | } 197 | 198 | .nano { 199 | font-size: 1.2rem 200 | } 201 | 202 | .normal { 203 | font-size: inherit 204 | } 205 | 206 | .vh-100 { 207 | height: 100vh; 208 | font-size: 1.8rem 209 | } 210 | 211 | .vc { 212 | position: relative; 213 | top: 40%; 214 | transform: perspective(.1rem) translateY(-45%) 215 | } 216 | 217 | .vc h1 { 218 | margin: 0 219 | } 220 | 221 | .p { 222 | padding: 1rem 223 | } 224 | 225 | .p04 { 226 | padding: .4rem 227 | } 228 | 229 | .ph { 230 | padding-left: 1rem; 231 | padding-right: 1rem 232 | } 233 | 234 | .ph04 { 235 | padding-left: .4rem; 236 | padding-right: .4rem 237 | } 238 | 239 | .pv { 240 | padding: 1rem; 241 | padding-bottom: 1rem 242 | } 243 | 244 | .pv04 { 245 | padding-top: .4rem; 246 | padding-bottom: .4rem 247 | } 248 | 249 | .m0 { 250 | margin: 0 251 | } 252 | 253 | .m { 254 | margin: 1rem 255 | } 256 | 257 | .mh { 258 | margin-left: 1rem; 259 | margin-right: 1rem 260 | } 261 | 262 | .mv { 263 | margin-top: 1rem; 264 | margin-bottom: 1rem 265 | } 266 | 267 | .border { 268 | border-style: solid; 269 | border-width: .1rem 270 | } -------------------------------------------------------------------------------- /color.min.css: -------------------------------------------------------------------------------- 1 | :root{--gray:#ccc;--accent:#fa0;--warning:#ffd600;--error:#d50000;--success:#00c853;--info:#2962ff}.card{padding:1em;margin-top:1rem;background:var(--def);color:var(--fg)}@media(min-width:45em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.row{display:table;border-spacing:1em 0}}.w-100,.row{width:100%}.w-50{width:50%}.white{color:#fff}.bg-white{background:#fff}.b-white{border-color:#fff}.gray{color:var(--gray)}.bg-gray{background:var(--gray)}.b-gray{border-color:var(--gray)}.black{color:#000}.bg-black{background:#000}.b-black{border-color:#000}.b-primary{border-color:var(--p)}.b-default{border-color:var(--b)}.accent{color:var(--accent)}.bg-accent{background:var(--accent)}.b-accent{border-color:var(--accent)}.warning{color:var(--warning)}.bg-warning{background:var(--warning)}.b-warning{border-color:var(--warning)}.error{color:var(--error)}.bg-error{background:var(--error)}.b-error{border-color:var(--error)}.success{color:var(--success)}.bg-success{background:var(--success)}.b-success{border-color:var(--success)}.info{color:var(--info)}.bg-info{background:var(--info)}.b-info{border-color:var(--info)}.inline{display:inline-block;margin:.5rem 0}.tacenter{text-align:center}.taleft{text-align:left}.taright{text-align:right}.pill{border-radius:2rem;white-space:nowrap}.rounded{border-radius:1rem}.mega{font-size:4rem}.large{font-size:2rem}.small{font-size:1.4rem}.nano{font-size:1.2rem}.normal{font-size:inherit}.vh-100{height:100vh;font-size:1.8rem}.vc{position:relative;top:40%;transform:perspective(.1rem) translateY(-45%)}.vc h1{margin:0}.p{padding:1rem}.p04{padding:.4rem}.ph{padding-left:1rem;padding-right:1rem}.ph04{padding-left:.4rem;padding-right:.4rem}.pv{padding:1rem;padding-bottom:1rem}.pv04{padding-top:.4rem;padding-bottom:.4rem}.m0{margin:0}.m{margin:1rem}.mh{margin-left:1rem;margin-right:1rem}.mv{margin-top:1rem;margin-bottom:1rem}.border{border-style:solid;border-width:.1rem} -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "require": { 3 | "tubalmartin/cssmin": "^4.1" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /composer.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_readme": [ 3 | "This file locks the dependencies of your project to a known state", 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", 5 | "This file is @generated automatically" 6 | ], 7 | "content-hash": "b06b0ba3dab3e61652e077d5f7a506b3", 8 | "packages": [ 9 | { 10 | "name": "tubalmartin/cssmin", 11 | "version": "v4.1.1", 12 | "source": { 13 | "type": "git", 14 | "url": "https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port.git", 15 | "reference": "3cbf557f4079d83a06f9c3ff9b957c022d7805cf" 16 | }, 17 | "dist": { 18 | "type": "zip", 19 | "url": "https://api.github.com/repos/tubalmartin/YUI-CSS-compressor-PHP-port/zipball/3cbf557f4079d83a06f9c3ff9b957c022d7805cf", 20 | "reference": "3cbf557f4079d83a06f9c3ff9b957c022d7805cf", 21 | "shasum": "" 22 | }, 23 | "require": { 24 | "ext-pcre": "*", 25 | "php": ">=5.3.2" 26 | }, 27 | "require-dev": { 28 | "cogpowered/finediff": "0.3.*", 29 | "phpunit/phpunit": "4.8.*" 30 | }, 31 | "bin": [ 32 | "cssmin" 33 | ], 34 | "type": "library", 35 | "autoload": { 36 | "psr-4": { 37 | "tubalmartin\\CssMin\\": "src" 38 | } 39 | }, 40 | "notification-url": "https://packagist.org/downloads/", 41 | "license": [ 42 | "BSD-3-Clause" 43 | ], 44 | "authors": [ 45 | { 46 | "name": "Túbal Martín", 47 | "homepage": "http://tubalmartin.me/" 48 | } 49 | ], 50 | "description": "A PHP port of the YUI CSS compressor", 51 | "homepage": "https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port", 52 | "keywords": [ 53 | "compress", 54 | "compressor", 55 | "css", 56 | "cssmin", 57 | "minify", 58 | "yui" 59 | ], 60 | "time": "2018-01-15T15:26:51+00:00" 61 | } 62 | ], 63 | "packages-dev": [], 64 | "aliases": [], 65 | "minimum-stability": "stable", 66 | "stability-flags": [], 67 | "prefer-stable": false, 68 | "prefer-lowest": false, 69 | "platform": [], 70 | "platform-dev": [] 71 | } 72 | -------------------------------------------------------------------------------- /dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | mono/color (https://github.com/asvvad/mono-color) 3 | Copyright (c) 2020 asvvvad - MIT License 4 | */ 5 | 6 | :root { 7 | font-size: 62.5%; 8 | --fg: #aaa; 9 | --h: #efefef; 10 | --bg: #000; 11 | --b: #333; 12 | --p: #eee; 13 | --def: #121212 14 | } -------------------------------------------------------------------------------- /dark.min.css: -------------------------------------------------------------------------------- 1 | :root{font-size:62.5%;--fg:#aaa;--h:#efefef;--bg:#000;--b:#333;--p:#eee;--def:#121212} -------------------------------------------------------------------------------- /extras/README.md: -------------------------------------------------------------------------------- 1 | # Extra elements/themes for mono/color 2 | 3 | This directory contains extra elements or themes for the mono/color framework 4 | 5 | Make sure you read the [CONTRIBUTING.md](/CONTRIBUTING.md) for a little guide on what is accepeted here 6 | 7 | Will be glad to see what you'll make for it! 8 | -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/favicon-32x32.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asvvvad1/mono-color/0eb491f8f71fab4e93893540258ce1a5e6fd9c5d/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mono/color 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 49 | 50 | 90 | 91 | 92 | 93 |
94 |
95 |

mono/color

96 |

Very small, responsive, dual-themed CSS-only framework

97 |
Discover
98 |
Download
99 |
Github
100 |
101 |
102 | 103 |
104 |
105 | 106 |
107 |

mono/colorv1.2

108 |

mono/color is a very small yet full-featured, simple and beautiful CSS-only framework built with responsivity, readability, modularity, and a dual-theme in mind.

109 |

It's perfect for a blog or a documentation site and can be used for anything else as well.
It's very responsive and looks neat on any resolution.
Based on Starveling and lit, 110 | providing only necessary elements while still looking great.

111 |

mono/color is also hosted on Github and you can contribute to it or fork it and make your own style as you like!

112 | Star 113 | Fork 114 |
115 |

mono/color is split into two:

116 |
117 |
118 |

mono.css 630b 119 | 120 |

121 |

dark.css 83b

122 |

light.css 83b

123 |
total 796b 124 | 125 |
126 | 127 |

Can be used alone, it includes dark & light theme with no colors, only default html elements with a basic button.

128 |
129 |
130 |

color.css 131 | 132 | 736b 133 | 134 |

135 |
total 1.3kb 136 | 137 |
138 |

Adds grids, cards, colors, useful utilities and badges.

139 |
140 |
141 |
Note! These are gzipped sizes. Hover to see the minified size
142 |
143 |
144 |

Usage:

145 |

The following code snippets will use jsDelivr CDN but you can download and host the css files whereever you like. If you download the zip the following templates comes with 146 | it. 147 |

148 |
149 | mono only 150 | 
<!DOCTYPE html>
151 | <html>
152 | <head>
153 |     <meta charset="utf-8">
154 |     <title>my awesome webpage</title>
155 |     <meta name="viewport" content="width=device-width, initial-scale=1">
156 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/light.min.css" media="">
157 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/dark.min.css" media="(prefers-color-scheme: dark)">
158 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/mono.min.css">
159 | </head>
160 | <body>
161 |     <div class="container">
162 |         <div class="content">
163 |             <header>
164 |                 <h1>Header</h1>
165 |                 <nav>
166 |                     <a href="#">Home</a>
167 |                     <a href="#">Docs</a>
168 |                     <a href="#">About</a>
169 |                 </nav>
170 |             </header>
171 |             <p>
172 |                 This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything
173 |                 outside content will touch the screen. It's recommended to center the text that's outside to prevent that.
174 |             </p>
175 |             <footer><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
176 |         </div>
177 |     </div>
178 | </body>
179 | </html>
180 |
181 |
182 |
183 | mono+color 184 | 
<!DOCTYPE html>
185 | <html>
186 | <head>
187 |     <meta charset="utf-8">
188 |     <title>my awesome webpage</title>
189 |     <meta name="viewport" content="width=device-width, initial-scale=1">
190 |     <!-- or any of these methods: https://asvvvad.github.io/mono-color/#switching-theme -->
191 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/light.min.css" media="">
192 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/dark.min.css" media="(prefers-color-scheme: dark)">
193 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/mono-color.min.css">
194 | </head>
195 | <body>
196 |     <div class="container">
197 |         <header class="tacenter">
198 |             <h1>Header</h1>
199 |             <nav>
200 |                 <a href="#">Home</a>
201 |                 <a href="#">Docs</a>
202 |                 <a href="#">About</a>
203 |             </nav>
204 |         </header>
205 |         <hr>
206 |         <div class="content">
207 |             <p>
208 |                 This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything
209 |                 outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
210 |             </p>
211 |         </div>
212 |         <footer class="default tacenter p"><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
213 |     </div>
214 | </body>
215 | </html>
216 |
217 |
218 |
219 | 220 | Switching Dark/Light theme: The templates above use one method but mono/color allows many others! 221 | 222 |

Light/Dark theming with mono/color is made easy! The themes are made into two separate CSS files so that you can use it the way you like!

223 |

Automatic with fallback to light for unsupported browsers support

224 |

It uses the new CSS media prefers-color-scheme which automatically sets the theme based on what the user have in their system.

225 |
Tip!
Switch the dark in (prefers-color-scheme: dark) with light and dark.css with light.css to default the fallback to dark theme
226 | 
<link rel="stylesheet" href="light.min.css" media="">
227 | <link rel="stylesheet" href="dark.min.css" media="(prefers-color-scheme: dark)">
228 |
229 |

Javascript

230 |

Make the media attribute empty for the theme you want to be default

231 | 
<link rel="stylesheet" href="light.min.css" media="">
232 | <link rel="stylesheet" href="dark.min.css" media="none">
233 |

Now the javascript should be something like this that is called by clicking a button for example

234 | 
function toggleTheme() {
235 |     var dark = document.getElementById("dark-theme");
236 |     var light = document.getElementById("light-theme");
237 |     if (light.media == "none") {
238 |         light.media = ""
239 |         dark.media = "none"
240 |     } else {
241 |         light.media = "none"
242 |         dark.media = ""
243 |     }
244 | }
245 |

Server side

246 |

This is very basic, you set a variable theme for example that contains the current theme. And let a user submit a request that can toggle it for example.

247 |

For example, this is how it would be done in PHP

248 | 
<?php
249 |     $theme = "dark";
250 |     echo "<link rel='stylesheet' href='".$theme.".css'>";
251 |

Note this is just to give you the idea, use a templating system like Plates to render your html as it will make it easier.

252 |

Only one theme

253 |

You can always use a one theme by just linking its file only. You can also have multiple themes on different pages. Whatever you like :3

254 |
255 |
256 |

Components:

257 |
258 |

mono

259 |
260 |

Container

261 |

Containers add margin to the sides of your content and center it. This website has one main container and content wrapper that wraps everything.

262 | 
<div class="container">
263 |     <div class="content">
264 |         <header>
265 |             <h1>Header</h1>
266 |             <nav class="">
267 |                 <a href="#">Home</a>
268 |                 <a href="#">Docs</a>
269 |                 <a href="#">About</a>
270 |             </nav>
271 |         </header>
272 |         <hr>
273 |         <p>
274 |         This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
275 |         </p>
276 |         <hr>
277 |     </div>
278 | </div>
279 |

Typography

280 |

Heading 1

281 |

Heading 2

282 |

Heading 3

283 |

Heading 4

284 |
Heading 5
285 |
Heading 6
286 |

This is a paragraph. The font family is monospace and for the headings 1 to 3 it's Sans-Serif. 287 | Some bold text. Italics also looks nice. You can underline things you feel are important. has styles that override the default heading styles, including margin.

288 | 
<h1>Heading</h1>
289 | <h2>Heading</h2>
290 | <h3>Heading</h3>
291 | <h2>Heading</h2>
292 | <h5>Heading</h5>
293 | <h6>Heading</h6>
294 | <p>This is a paragraph. The font family is Courier New/monospace.
295 | <b>Some bold text.</b> <i>Italics also looks nice.</i>
296 | You can <u>underline</u> things you feel are important.
297 | mono has styles that override the default heading styles, including margin.</p>
298 |

Code Block

299 |

inline code; inline samp; and kbd: ctrl c

300 |

Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays

301 | 
<pre><code>
302 | <h2>Code Block Example</h2>
303 | </code></pre>
304 |

Samp blocks are similar but intended for output moslty so mono/color sets the line-height tighter to show it better (for example, ASCII art)

305 | 
                /\  (hi i'm v dude)
306 |    __  ____  __/\/\__  __   ___
307 |   /  \/ __ \ \ _  _ / /  \ |   \
308 |  / /\ \__ \ \/\'  '/\/ /\ \|    | 
309 | /_/  \____/\__/\__/\__/  \_____/
310 |

Blockquote

311 |
You're not a fucking moron if you use default browser styles you can do what ever the fuck you want who cares 312 |
— Eleanor Roosevelt 313 |
This is a nested quote 314 |
— Me 315 |
Yes, I totally took that from this site. I always used it as a reference. 316 |
— Also me
317 |
318 |
319 |
320 |

Lists

321 |

Lists are default HTML lists. I tried a few things but figured the defaults are all that's needed (imo). 322 |

323 |
    324 |
  • First Item
    • 325 |
  • 326 | Second Item 327 |
      328 |
    • Sub Item 1
      • 329 |
    • Sub Item 2
      • 330 |
    331 |
    • 332 |
  • Third Item
    • 333 |
334 |

Tables

335 |

Tables looks nice too:

336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 |
NameUsernameemailsecondary email
Lorem Ipsumlorememail@example.comemail@example.org
Lorem Ipsumlorememail@example.comemail@example.org
358 |

Forms

359 |

Just like the code blocks the form is also scrollable when the elements take too much horizontal space 360 |
There is also an option to use grids and the card class if you prefer.
color have w-100 and w-50 classes to set the inputs to full and half width respectively. 361 |
To get the connected inputs look use the inline class on the inputs just as in here.

362 |

This is a regular HTML form:

363 |
364 |
375 |
376 | 377 |
378 |

See more in color

379 |

Buttons

380 |

Buttons are created with either a button or an anchor, they both must have the btn class.

381 |
382 | Link button 383 | 384 |

Primary buttons are made with the primary class

385 | 386 |
387 |

Horizontal Rules

388 |

Horizontal Rules are useful for dividing up content. Their color is the same as same default border color which change with theme. More in color.

389 |
390 |

Extra

391 |

Since mono support light and dark themes it also provide these two helper classes:

392 |

primary class can be used on anything from buttons, inputs, divs, code ect. It's meant to be a reverse color.

393 |
primary
394 |

default class can be used on anything from buttons, inputs, divs, code ect. It's meant to be the default color.

395 |
default
396 |

Blockquotes with background can be made by adding primary or default or other 397 | background colors in color - It can also be used to make alerts

398 |
This is a blockquote with default background

399 |
This is a blockquote with primary background
400 |

color

401 |
402 |

Grid

403 |

Grids are defined on a 12 column scale. Each col will take up equal width if no width number is specified. They automatically collapse on mobile to take up the full viewport. Go ahead, try it!

404 |
405 |
406 |
1 col
407 |
11 col
408 |
409 |
410 |
2 col
411 |
10 col
412 |
413 |
414 |
3 col
415 |
9 col
416 |
417 |
418 |
4 col
419 |
8 col
420 |
421 |
422 |
5 col
423 |
7 col
424 |
425 |
426 |
6 col
427 |
6 col
428 |
429 |
430 |

Utilities

431 |

Size classes:

432 | mega 433 | large 434 | normal 435 | small 436 | nano 437 |

Spacing and alignment:

438 |
tacenter
439 |
taleft
440 |
taright
441 |

The above classes set the alignment of text within an element

442 |
.m0
443 | m0 Removes margins on all sides 444 |
.m
445 | m Adds 1rem(10px) margin on all sides 446 |
.mh.mh
447 | mh Adds 1rem margin on the left and right sides
448 |
.mv
449 | mv Adds 1rem margin on the top and bottom sides
450 |
.p
451 | p Adds 1rem padding on all sides 452 |
.p04
453 | p04 Adds .04rem padding on all sides
454 |
.ph
455 | p Adds 1rem padding on the left and right sides
456 |
.ph04
457 | p04 Adds .04rem padding on the left and right sides
458 |
.pv
459 | p Adds 1rem padding on the top and bottom sides
460 |
.pv04
461 | p04 Adds .04rem padding on the top and bottom sides
462 |
463 | inline makes elements inline (stick to each other) by removing margins on both side 464 |
w-100
465 |
w-50
466 |
w-50

467 | w-100 and w-50 sets the width to 100% and 50% respecitively 468 |
vh-100 takes the full width of it's container and the full height of it's screen. To use for full-page landing place it outside any 469 | container div. 470 |
vc class centers a div vertically in the full-page div
471 |
472 |
473 |

Colors

474 |

Text Colors

475 | accent 476 | info 477 | success 478 | warning 479 | error 480 | black 481 | white 482 | gray 483 |

Background Colors

484 |
bg-accent
485 |
bg-info
486 |
bg-success
487 |
bg-warning
488 |
bg-error
489 |
bg-black
490 |
bg-white
491 |
bg-gray
492 |

Border Colors

493 |

Since mono/color is borderless by default a add a border use border and a b-color like in these:

494 |
border b-accent
495 |
border b-info
496 |
border b-success
497 |
border b-warning
498 |
border b-error
499 |
border b-black
500 |
border b-white
501 |
border b-gray
502 |
border b-primary
503 |
border b-default
504 |
Horizontal Rules
505 |

border colors can be used for horizontal rules as well

506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |

Colorful Buttons

517 |

These are made using the background colors and color classes above. The ghost ones for example uses accent instead of bg-accent.

518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 |

Rounded Buttons

526 | 
<button class="rounded btn primary">Primary Button</button>
527 | 528 | 529 | 
<button class="rounded btn bg-accent white">Accent Button</button>
530 | 531 | 532 | 533 | 534 | 535 |

Pill Buttons

536 | 
<button class="pill btn">Default Button</button>
537 | 538 | 539 | 
<button class="pill btn bg-accent white">Accent Button</button>
540 | 541 | 542 | 543 | 544 | 545 |

546 |
547 | Ghost & Primary Ghost Buttons Not recommended 548 | 549 | 550 |
551 |

These are other possible combinations, they're not bloat. They use default background color of the theme so it may have a low constrast and it changes with the theme. They're meant to be showcase only maybe you'll like them or you'll have some use. If you want something readable use ones with a background color and the default & primary ones without custom text color. Use the toggle theme 552 | button to see. 553 |

554 |
555 | 556 | 557 | 558 | 559 |
560 | 561 | 562 | 563 | 564 | 565 |
566 | 567 |

More Forms

568 |

mono/color is built to be moduar so you can extend inputs just as easy as you extend buttons or anything else. Same classes are used to create round and colored form elements.

569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 | 577 |
578 |

Cards

579 |

Cards can be used to display info in a concise and consistent manner.

580 |
581 |

Simple Card

582 |

Here is some text that generally describes the card, or something about it.

583 | 584 | 585 |
586 |

Cards are usually nested within grids to create powerful display systems, like below.

587 |
588 |
589 |

Card Title

590 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

591 | 592 |
593 |
594 |

Card Title

595 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

596 | 597 |
598 |
599 |

Card Title

600 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

601 | 602 |
603 |
604 | 605 |
606 |

Alerts

607 |

These are easily created using a div that have a text & background color class, 608 | small class to set the text size right (default is bigger and meant for increasing readability on content) and an extra rounded class to make it look nice:

609 |
610 | Oh no!
This is an example of an error alert 611 |

612 |
613 | Success!
This is an example of a success alert 614 |
615 | 
<div class="bg-error white p rounded small">
616 |     <span class="large">Oh no!</span><br>This is an example of an error alert
617 | </div>
618 |
619 | Warning! is an example of a warning alert 620 |
621 | 
<div class="bg-warning primary p rounded black"">
622 |     Warning! <span class="small">is an example of a warning alert</span>
623 | </div>
624 |

Using blockquote

625 |

As mentioned above in mono, blockquotes can be used along with other background colors.

626 |
Tip!
This is an example of an info alert
627 | 
<blockquote class="bg-info b-primary white"><span class="large">Tip!</span><br>This is an example of an info alert</blockquote>
628 |
Note!
Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the small class) but that can be fixed by adding the normal class to the inline code.
629 |
630 |
631 |

Badges

632 |

Another small and helpful elements are badges.
As with alerts, they are made by combining a couple classes:

633 |
Note!
pill class is used for these, the rounded class while it can also do it, it's meant for alerts as only pill have white-space: nowrap; which makes it not break.
634 |

Heading Badge New!

635 | 
<h4>Heading Badge <span class="bg-warning white p04 rounded nano"> New!</span></h4>
636 | 638 | 
<button class="pill btn bg-info white">Button Badge <span class="bg-white info p04 rounded nano"><b>500</b></span></button>
639 |
640 |

641 |
642 |
I try to make this page as reader oriented as I can but I'm not perfect I miss things a lot so if you have any suggestions or fixes I'll be happy if you open an issue on Github ^^
643 |
644 | 645 |
646 | 647 | 648 | -------------------------------------------------------------------------------- /light.css: -------------------------------------------------------------------------------- 1 | /* 2 | mono/color (https://github.com/asvvad/mono-color) 3 | Copyright (c) 2020 asvvvad - MIT License 4 | */ 5 | 6 | :root { 7 | font-size: 62.5%; 8 | --fg: #555; 9 | --h: #444; 10 | --bg: #fefefe; 11 | --b: #ccc; 12 | --p: #000; 13 | --def: #eee 14 | } -------------------------------------------------------------------------------- /light.min.css: -------------------------------------------------------------------------------- 1 | :root{font-size:62.5%;--fg:#555;--h:#444;--bg:#fefefe;--b:#ccc;--p:#000;--def:#eee} -------------------------------------------------------------------------------- /mono-color.min.css: -------------------------------------------------------------------------------- 1 | *{box-sizing:border-box}.container{position:relative;width:100%;max-width:70rem;margin:0 auto;font-size:1.8rem}.content{width:calc(100% - 5rem);margin:auto;overflow:hidden}@media (min-width:420px){.container{width:90%;padding:0}}body{margin:0;line-height:1.6;font-family:monospace;color:var(--fg);background-color:var(--bg)}h1,h2,h3{line-height:1.2;font-family:sans-serif;color:var(--h)}a{color:var(--p)}a:hover,.btn:hover,input[type=submit]:hover{opacity:.8;cursor:pointer}code,samp,kbd{padding:.4rem;font-size:80%;color:var(--fg);background-color:var(--def);white-space:nowrap;border:solid .1rem var(--b)}kbd{border-bottom:.3rem solid var(--b);padding:.3rem .4em}input,textarea,select,pre>*,.btn{border:0;white-space:nowrap;font-style:normal;font-size:85%;font-family:monospace;display:inline;padding:1rem;margin:.5rem;max-width:100%;color:var(--fg);background-color:var(--def);text-decoration:none}textarea{height:15rem;white-space:pre-wrap}select{padding:.9rem}pre>*,table{display:block;white-space:pre}pre>samp{line-height:1.1}textarea,pre>*,table{margin:.5rem 0}pre>*,table,form{overflow:auto}table{white-space:normal;padding:0;font-size:90%}blockquote{white-space:normal;padding:1rem;margin:0;border-left:.4rem solid var(--b)}form{white-space:nowrap;display:block}th,td{padding:1rem 1.1rem;text-align:justify;border-bottom:.1rem solid var(--b)}.primary{background-color:var(--p);color:var(--def)}.default{background-color:var(--def);color:var(--fg)}hr{border:.1rem solid var(--b)}:root{--gray:#ccc;--accent:#fa0;--warning:#ffd600;--error:#d50000;--success:#00c853;--info:#2962ff}.card{padding:1em;margin-top:1rem;background:var(--def);color:var(--fg)}@media(min-width:45em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.row{display:table;border-spacing:1em 0}}.w-100,.row{width:100%}.w-50{width:50%}.white{color:#fff}.bg-white{background:#fff}.b-white{border-color:#fff}.gray{color:var(--gray)}.bg-gray{background:var(--gray)}.b-gray{border-color:var(--gray)}.black{color:#000}.bg-black{background:#000}.b-black{border-color:#000}.b-primary{border-color:var(--p)}.b-default{border-color:var(--b)}.accent{color:var(--accent)}.bg-accent{background:var(--accent)}.b-accent{border-color:var(--accent)}.warning{color:var(--warning)}.bg-warning{background:var(--warning)}.b-warning{border-color:var(--warning)}.error{color:var(--error)}.bg-error{background:var(--error)}.b-error{border-color:var(--error)}.success{color:var(--success)}.bg-success{background:var(--success)}.b-success{border-color:var(--success)}.info{color:var(--info)}.bg-info{background:var(--info)}.b-info{border-color:var(--info)}.inline{display:inline-block;margin:.5rem 0}.tacenter{text-align:center}.taleft{text-align:left}.taright{text-align:right}.pill{border-radius:2rem;white-space:nowrap}.rounded{border-radius:1rem}.mega{font-size:4rem}.large{font-size:2rem}.small{font-size:1.4rem}.nano{font-size:1.2rem}.normal{font-size:inherit}.vh-100{height:100vh;font-size:1.8rem}.vc{position:relative;top:40%;transform:perspective(.1rem) translateY(-45%)}.vc h1{margin:0}.p{padding:1rem}.p04{padding:.4rem}.ph{padding-left:1rem;padding-right:1rem}.ph04{padding-left:.4rem;padding-right:.4rem}.pv{padding:1rem;padding-bottom:1rem}.pv04{padding-top:.4rem;padding-bottom:.4rem}.m0{margin:0}.m{margin:1rem}.mh{margin-left:1rem;margin-right:1rem}.mv{margin-top:1rem;margin-bottom:1rem}.border{border-style:solid;border-width:.1rem} -------------------------------------------------------------------------------- /mono.css: -------------------------------------------------------------------------------- 1 | /* 2 | mono/color (https://github.com/asvvad/mono-color) 3 | Copyright (c) 2020 asvvvad - MIT License 4 | */ 5 | 6 | * { 7 | box-sizing: border-box 8 | } 9 | 10 | .container { 11 | position: relative; 12 | width: 100%; 13 | max-width: 70rem; 14 | margin: 0 auto; 15 | font-size: 1.8rem 16 | } 17 | 18 | .content { 19 | width: calc(100% - 5rem); 20 | margin: auto; 21 | overflow: hidden 22 | } 23 | 24 | @media (min-width:420px) { 25 | .container { 26 | width: 90%; 27 | padding: 0 28 | } 29 | } 30 | 31 | body { 32 | margin: 0; 33 | line-height: 1.6; 34 | font-family: monospace; 35 | color: var(--fg); 36 | background-color: var(--bg) 37 | } 38 | 39 | h1, 40 | h2, 41 | h3 { 42 | line-height: 1.2; 43 | font-family: sans-serif; 44 | color: var(--h) 45 | } 46 | 47 | a { 48 | color: var(--p) 49 | } 50 | 51 | a:hover, 52 | .btn:hover, 53 | input[type=submit]:hover { 54 | opacity: .8; 55 | cursor: pointer 56 | } 57 | 58 | code, 59 | samp, 60 | kbd { 61 | padding: .4rem; 62 | font-size: 80%; 63 | color: var(--fg); 64 | background-color: var(--def); 65 | white-space: nowrap; 66 | border: solid .1rem var(--b) 67 | } 68 | 69 | kbd { 70 | border-bottom: .3rem solid var(--b); 71 | padding: .3rem .4em 72 | } 73 | 74 | input, 75 | textarea, 76 | select, 77 | pre>*, 78 | .btn { 79 | border: 0; 80 | white-space: nowrap; 81 | font-style: normal; 82 | font-size: 85%; 83 | font-family: monospace; 84 | display: inline; 85 | padding: 1rem; 86 | margin: .5rem; 87 | max-width: 100%; 88 | color: var(--fg); 89 | background-color: var(--def); 90 | text-decoration: none 91 | } 92 | 93 | textarea { 94 | height: 15rem; 95 | white-space: pre-wrap 96 | } 97 | 98 | select { 99 | padding: .9rem 100 | } 101 | 102 | pre>*, 103 | table { 104 | display: block; 105 | white-space: pre 106 | } 107 | 108 | pre>samp { 109 | line-height: 1.1 110 | } 111 | 112 | textarea, 113 | pre>*, 114 | table { 115 | margin: .5rem 0 116 | } 117 | 118 | pre>*, 119 | table, 120 | form { 121 | overflow: auto 122 | } 123 | 124 | table { 125 | white-space: normal; 126 | padding: 0; 127 | font-size: 90% 128 | } 129 | 130 | blockquote { 131 | white-space: normal; 132 | padding: 1rem; 133 | margin: 0; 134 | border-left: .4rem solid var(--b) 135 | } 136 | 137 | form { 138 | white-space: nowrap; 139 | display: block 140 | } 141 | 142 | th, 143 | td { 144 | padding: 1rem 1.1rem; 145 | text-align: justify; 146 | border-bottom: .1rem solid var(--b) 147 | } 148 | 149 | .primary { 150 | background-color: var(--p); 151 | color: var(--def) 152 | } 153 | 154 | .default { 155 | background-color: var(--def); 156 | color: var(--fg) 157 | } 158 | 159 | hr { 160 | border: .1rem solid var(--b) 161 | } -------------------------------------------------------------------------------- /mono.min.css: -------------------------------------------------------------------------------- 1 | *{box-sizing:border-box}.container{position:relative;width:100%;max-width:70rem;margin:0 auto;font-size:1.8rem}.content{width:calc(100% - 5rem);margin:auto;overflow:hidden}@media (min-width:420px){.container{width:90%;padding:0}}body{margin:0;line-height:1.6;font-family:monospace;color:var(--fg);background-color:var(--bg)}h1,h2,h3{line-height:1.2;font-family:sans-serif;color:var(--h)}a{color:var(--p)}a:hover,.btn:hover,input[type=submit]:hover{opacity:.8;cursor:pointer}code,samp,kbd{padding:.4rem;font-size:80%;color:var(--fg);background-color:var(--def);white-space:nowrap;border:solid .1rem var(--b)}kbd{border-bottom:.3rem solid var(--b);padding:.3rem .4em}input,textarea,select,pre>*,.btn{border:0;white-space:nowrap;font-style:normal;font-size:85%;font-family:monospace;display:inline;padding:1rem;margin:.5rem;max-width:100%;color:var(--fg);background-color:var(--def);text-decoration:none}textarea{height:15rem;white-space:pre-wrap}select{padding:.9rem}pre>*,table{display:block;white-space:pre}pre>samp{line-height:1.1}textarea,pre>*,table{margin:.5rem 0}pre>*,table,form{overflow:auto}table{white-space:normal;padding:0;font-size:90%}blockquote{white-space:normal;padding:1rem;margin:0;border-left:.4rem solid var(--b)}form{white-space:nowrap;display:block}th,td{padding:1rem 1.1rem;text-align:justify;border-bottom:.1rem solid var(--b)}.primary{background-color:var(--p);color:var(--def)}.default{background-color:var(--def);color:var(--fg)}hr{border:.1rem solid var(--b)} -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | { "name": "mono/color", "short_name": "mono-color", "icons": [{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }], "theme_color": "#555", "background_color": "#fefefe", "display": "standalone" } -------------------------------------------------------------------------------- /template-mono-only.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | my awesome webpage 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |

Header

19 | 24 |
25 |

26 | This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything outside content will touch 27 | the screen. It's recommended to center the text that's outside to prevent that. 28 |

29 | 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | my awesome webpage 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Header

18 | 23 |
24 |
25 |
26 | This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything outside content will touch 27 | the screen. It's recommended to center the text that's outside to prevent that. 28 |

29 |
30 | 31 |
32 | 33 | 34 | --------------------------------------------------------------------------------