Skip to content

Commit 2bfbb40

Browse files
muhammadmuzzammil1998muhammadmuzzammil1998
committed
Update for OctoCSS Dark
1 parent 0588b4a commit 2bfbb40

File tree

5 files changed

+133
-2
lines changed

5 files changed

+133
-2
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ Minimalistic "Fork me on GitHub"
66
# What is this?
77
This is, well, you know what it is. Just see the preview for more.
88

9+
# Themes
10+
## For dark theme use ```?theme=dark```, see example.
11+
## For light do nothing, it's default.
12+
913
# How to use:
1014
## Just include "octo.css" in ```<head></head>``` tag:
1115
```
@@ -29,7 +33,11 @@ This is, well, you know what it is. Just see the preview for more.
2933
<html>
3034
<head>
3135
<title>OctoCSS Example</title>
32-
<link rel="stylesheet" type="text/css" href="https://cdn.muzzammil.xyz/OctoCSS/octo.css">
36+
<link rel="stylesheet" type="text/css" href="https://cdn.muzzammil.xyz/OctoCSS/">
37+
<!--
38+
For dark theme:
39+
<link rel="stylesheet" type="text/css" href="https://cdn.muzzammil.xyz/OctoCSS/?theme=dark">
40+
-->
3341
</head>
3442
<body>
3543
<a href="https://github.com/muhammadmuzzammil1998/OctoCSS/" target="_blank">

‎src/index.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?php
2+
header("Content-type: text/css; charset: UTF-8");
3+
if($_GET['theme'] == 'dark') include('octo-dark.css');
4+
else include('octo-light.css');
5+
?>

‎src/octo-dark.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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%);}

‎src/octo-light.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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;}

‎website/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<html>
2626
<head>
2727
<title>Octo.CSS -Minimalistic "Fork me on GitHub"</title>
28-
<link rel="stylesheet" type="text/css" href="//cdn.muzzammil.xyz/OctoCSS/octo.css">
28+
<link rel="stylesheet" type="text/css" href="//cdn.muzzammil.xyz/OctoCSS/?theme=dark">
2929
<link rel="stylesheet" type="text/css" href="main.css">
3030
<link rel="icon" href="favicon.ico" type="image/ico">
3131
<meta name="description" content='Minimalistic "Fork me on GitHub"' />

0 commit comments

Comments
 (0)