├── LICENSE ├── README.md ├── src ├── github.svg ├── index.php ├── octo-dark.css ├── octo-light.css └── octo.css └── website ├── favicon.ico ├── index.html ├── main.css └── octo.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Muhammad Muzzammil 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 | # Octo.CSS · [Preview](https://git.muzzammil.xyz/OctoCSS/?github) 2 | Minimalistic "Fork me on GitHub" 3 | 4 | ## What is this? 5 | This is, well, you know what it is. Just see the preview for more. 6 | 7 | ## Themes 8 | ### For dark theme use ```?theme=dark```, see example. 9 | ### For light do nothing, it's default. 10 | 11 | ## How to use: 12 | ### Just include "octo.css" in `````` tag: 13 | ``` 14 | 15 | 16 | 17 | ``` 18 | ### Now, use the tag anywhere in your code: 19 | #### For top-right use: 20 | ``` 21 | 22 | ``` 23 | #### For top-left use: 24 | ``` 25 | 26 | ``` 27 | 28 | ## Example 29 | ``` 30 | 31 | 32 | 33 | OctoCSS Example 34 | 35 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ``` 49 | 50 | ## Using OctoCSS? Let me know! 51 | If you are using OctoCSS, first of all, _thank you_, secondly, [let me know](mailto:email@muzzammil.xyz) and I'll mention it here. 52 | 53 | ## License 54 | MIT License 55 | 56 | Copyright (c) 2017 Muhammad Muzzammil (https://git.muzzammil.xyz/OctoCSS/) 57 | 58 | Permission is hereby granted, free of charge, to any person obtaining a copy 59 | of this software and associated documentation files (the "Software"), to deal 60 | in the Software without restriction, including without limitation the rights 61 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 62 | copies of the Software, and to permit persons to whom the Software is 63 | furnished to do so, subject to the following conditions: 64 | 65 | The above copyright notice and this permission notice shall be included in all 66 | copies or substantial portions of the Software. 67 | 68 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 69 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 70 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 71 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 72 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 73 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 74 | SOFTWARE. 75 | -------------------------------------------------------------------------------- /src/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/index.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/octo-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License 3 | 4 | Copyright (c) 2017 Muhammad Muzzammil (http://www.muzzammil.xyz/git/OctoCSS) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | */ 24 | github{ 25 | font-size: 0% !important; 26 | width: 0; 27 | height: 0; 28 | top: -16px; 29 | position: fixed !important; 30 | border-left: 100px solid transparent; 31 | border-right: 100px solid transparent; 32 | border-bottom: 100px solid black; 33 | transition: all .5s; 34 | cursor: pointer; 35 | box-shadow: 0 3px 7px 0 rgba(255, 255, 255, 0.2) !important; 36 | } 37 | .octo-left{ 38 | float: left !important; 39 | left: -65px; 40 | transform: rotate(-45deg); 41 | } 42 | .octo-right{ 43 | float: right !important; 44 | right: -65px; 45 | transform: rotate(45deg); 46 | } 47 | github:hover{ 48 | border-bottom: 100px solid white; 49 | box-shadow: 0 3px 7px 0 rgba(255, 255, 255, 0.5) !important; 50 | } 51 | github img{ 52 | height: 70px; 53 | width: 70px; 54 | margin-top: 28px; 55 | filter: invert(100%); 56 | margin-left: -37px; 57 | transition: all .5s; 58 | background-color: transparent; 59 | } 60 | github img:hover{background-color: transparent; filter: invert(0%);} 61 | -------------------------------------------------------------------------------- /src/octo-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License 3 | 4 | Copyright (c) 2017 Muhammad Muzzammil (http://www.muzzammil.xyz/git/OctoCSS) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | */ 24 | github{ 25 | font-size: 0% !important; 26 | width: 0; 27 | height: 0; 28 | top: -16px; 29 | position: fixed !important; 30 | border-left: 100px solid transparent; 31 | border-right: 100px solid transparent; 32 | border-bottom: 100px solid #F9F9F9; 33 | transition: all .5s; 34 | cursor: pointer; 35 | box-shadow: 0 3px 7px 0 rgba(0,0,0,0.2) !important; 36 | } 37 | .octo-left{ 38 | float: left !important; 39 | left: -65px; 40 | transform: rotate(-45deg); 41 | } 42 | .octo-right{ 43 | float: right !important; 44 | right: -65px; 45 | transform: rotate(45deg); 46 | } 47 | github:hover{ 48 | border-bottom: 100px solid white; 49 | box-shadow: 0 3px 7px 0 rgba(0,0,0,0.5) !important; 50 | } 51 | github img{ 52 | height: 70px; 53 | width: 70px; 54 | margin-top: 28px; 55 | margin-left: -37px; 56 | background-color: #F9F9F9; 57 | } 58 | github img:hover{background-color: white;} -------------------------------------------------------------------------------- /src/octo.css: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License 3 | 4 | Copyright (c) 2017 Muhammad Muzzammil (http://www.muzzammil.xyz/git/OctoCSS) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | */ 24 | github{ 25 | font-size: 0% !important; 26 | width: 0; 27 | height: 0; 28 | top: -16px; 29 | position: fixed !important; 30 | border-left: 100px solid transparent; 31 | border-right: 100px solid transparent; 32 | border-bottom: 100px solid #F9F9F9; 33 | transition: all .5s; 34 | cursor: pointer; 35 | box-shadow: 0 3px 7px 0 rgba(0,0,0,0.2) !important; 36 | } 37 | .octo-left{ 38 | float: left !important; 39 | left: -65px; 40 | transform: rotate(-45deg); 41 | } 42 | .octo-right{ 43 | float: right !important; 44 | right: -65px; 45 | transform: rotate(45deg); 46 | } 47 | github:hover{ 48 | border-bottom: 100px solid white; 49 | box-shadow: 0 3px 7px 0 rgba(0,0,0,0.5) !important; 50 | } 51 | github img{ 52 | height: 70px; 53 | width: 70px; 54 | margin-top: 28px; 55 | margin-left: -37px; 56 | background-color: #F9F9F9; 57 | } 58 | github img:hover{background-color: white;} 59 | -------------------------------------------------------------------------------- /website/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammadmuzzammil1998/OctoCSS/493a82e97eee1c1ddcab7e71683be21ec32afd8d/website/favicon.ico -------------------------------------------------------------------------------- /website/index.html: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 27 | Octo.CSS -Minimalistic "Fork me on GitHub" 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 |

Octo.CSS

40 |

Minimalistic "Fork me on GitHub"




41 |

Just include "octo.css" in <head></head> tag:

42 |
43 | <head>
44 | ...
45 | <link rel="stylesheet" type="text/css" href="octo.css">
46 | ...
47 | </head>
48 |



49 |

Now, use the <github> tag anywhere in your code:

50 |

For top-right use:

51 |
52 | <github class="octo-right"><img src="github.svg"></github> 53 |
54 |

For top-left use:

55 |
56 | <github class="octo-left"><img src="github.svg"></github> 57 |



58 |

To use, download or use my cdn:

59 |
60 | 61 | http://cdn.muzzammil.xyz/OctoCSS/octo.css
62 | http://cdn.muzzammil.xyz/OctoCSS/github.svg
63 | 64 |
65 |

<> with ❤ by Muhammad Muzzammil




66 |
67 |
68 | 76 | 77 | -------------------------------------------------------------------------------- /website/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License 3 | 4 | Copyright (c) 2017 Muhammad Muzzammil (http://www.muzzammil.xyz/git/OctoCSS) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | */ 24 | 25 | *{ 26 | margin: 0; 27 | font-weight: 300; 28 | letter-spacing: -0.5px; 29 | transition: all .5s; 30 | } 31 | .main{ 32 | padding-top: 3%; 33 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 34 | background-color: white; 35 | margin-bottom: 3%; 36 | } 37 | ::selection{ 38 | background-color: black; 39 | color: white; 40 | } 41 | a{ 42 | text-decoration: none; 43 | color: #e6b400; 44 | } 45 | a:hover{ 46 | text-decoration: underline; 47 | } 48 | #arrow{ 49 | top: 30px; 50 | right: 60px; 51 | position: fixed; 52 | } 53 | h1{ 54 | font-size: 600%; 55 | } 56 | h2{ 57 | font-size: 245%; 58 | } 59 | h3{ 60 | font-size: 245%; 61 | } 62 | .left{ 63 | text-align: left; 64 | } 65 | .body{ 66 | padding-left: 20%; 67 | padding-right: 20%; 68 | } 69 | .code{ 70 | background-color: #24292E; 71 | height: auto; 72 | width: 60%; 73 | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5); 74 | border-radius: 3px; 75 | font-family: monospace !important; 76 | font-size: 200%; 77 | color:white; 78 | } 79 | h3 a{ 80 | color: black; 81 | } 82 | tab{ 83 | margin: 20px; 84 | } 85 | #keyword{ 86 | color: #ff3b5d; 87 | } 88 | #attr{ 89 | color: #00d700; 90 | } 91 | #quote{ 92 | color: #e6b400; 93 | } 94 | @media screen and (max-width: 900px){ 95 | #arrow{display: none;} 96 | } -------------------------------------------------------------------------------- /website/octo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammadmuzzammil1998/OctoCSS/493a82e97eee1c1ddcab7e71683be21ec32afd8d/website/octo.png --------------------------------------------------------------------------------