Skip to content

Commit

Permalink
Initial build
Browse files Browse the repository at this point in the history
  • Loading branch information
Waren Gonzaga committed Nov 6, 2020
1 parent e029c0e commit 057e779
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 3 deletions.
2 changes: 1 addition & 1 deletion demo/assets/css/fork-corner.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
*//*!
* Base Stylesheet | Fork Corner
* By Waren Gonzaga
*/
*/body{overflow-x:hidden}#fork-corner{z-index:105;position:absolute}.fork-corner+div{position:absolute;width:200px;height:200px;z-index:100}.fork-corner.fc-tr{top:16.66667px;right:16.66667px}.fork-corner.fc-tr+div{top:-100px;right:-100px;transform:rotate(45deg)}.fork-corner.fc-tl{top:16.66667px;left:16.66667px}.fork-corner.fc-tl+div{top:-100px;left:-100px;transform:rotate(45deg)}.fork-corner.fc-tr.fc-theme-default+div{background-color:#242424}.fork-corner.fc-tl.fc-theme-default+div{background-color:#242424}.fork-corner.fc-tr.fc-theme-github{text-decoration:none;width:50px;height:50px;background:url("https://simpleicons.org/icons/github.svg")}.fork-corner.fc-tr.fc-theme-github+div{background-color:#181717}.fork-corner.fc-tl.fc-theme-github{text-decoration:none;width:50px;height:50px;background:url("https://simpleicons.org/icons/github.svg")}.fork-corner.fc-tl.fc-theme-github+div{background-color:#181717}
8 changes: 8 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<a href="#" target="_blank" id="fork-corner" class="fork-corner fc-tr fc-theme-github"></a>

<script>
var fcController = document.getElementById("fork-corner");
var fcElement = document.createElement("div");
fcController.parentNode.insertBefore(fcElement, fcController.nextSibling);
</script>

</body>
</html>
54 changes: 54 additions & 0 deletions fork-corner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,57 @@
* Base Stylesheet | Fork Corner
* By Waren Gonzaga
*/
body {
overflow-x: hidden; }

#fork-corner {
z-index: 105;
position: absolute; }

.fork-corner + div {
position: absolute;
width: 200px;
height: 200px;
z-index: 100; }

.fork-corner.fc-tr {
top: 16.66667px;
right: 16.66667px; }

.fork-corner.fc-tr + div {
top: -100px;
right: -100px;
transform: rotate(45deg); }

.fork-corner.fc-tl {
top: 16.66667px;
left: 16.66667px; }

.fork-corner.fc-tl + div {
top: -100px;
left: -100px;
transform: rotate(45deg); }

.fork-corner.fc-tr.fc-theme-default + div {
background-color: #242424; }

.fork-corner.fc-tl.fc-theme-default + div {
background-color: #242424; }

.fork-corner.fc-tr.fc-theme-github {
text-decoration: none;
width: 50px;
height: 50px;
background: url("https://simpleicons.org/icons/github.svg"); }

.fork-corner.fc-tr.fc-theme-github + div {
background-color: #181717; }

.fork-corner.fc-tl.fc-theme-github {
text-decoration: none;
width: 50px;
height: 50px;
background: url("https://simpleicons.org/icons/github.svg"); }

.fork-corner.fc-tl.fc-theme-github + div {
background-color: #181717; }
2 changes: 1 addition & 1 deletion fork-corner.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
*//*!
* Base Stylesheet | Fork Corner
* By Waren Gonzaga
*/
*/body{overflow-x:hidden}#fork-corner{z-index:105;position:absolute}.fork-corner+div{position:absolute;width:200px;height:200px;z-index:100}.fork-corner.fc-tr{top:16.66667px;right:16.66667px}.fork-corner.fc-tr+div{top:-100px;right:-100px;transform:rotate(45deg)}.fork-corner.fc-tl{top:16.66667px;left:16.66667px}.fork-corner.fc-tl+div{top:-100px;left:-100px;transform:rotate(45deg)}.fork-corner.fc-tr.fc-theme-default+div{background-color:#242424}.fork-corner.fc-tl.fc-theme-default+div{background-color:#242424}.fork-corner.fc-tr.fc-theme-github{text-decoration:none;width:50px;height:50px;background:url("https://simpleicons.org/icons/github.svg")}.fork-corner.fc-tr.fc-theme-github+div{background-color:#181717}.fork-corner.fc-tl.fc-theme-github{text-decoration:none;width:50px;height:50px;background:url("https://simpleicons.org/icons/github.svg")}.fork-corner.fc-tl.fc-theme-github+div{background-color:#181717}
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ function cleanBuild() {
// develop builds
function devBuild() {
return watch(path.source+'/*.scss', series(
lintCSS, compile, minify, copyright, demo
lintCSS, cleanBuild, compile, minify, copyright, demo
));
}

Expand Down
81 changes: 81 additions & 0 deletions source/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,84 @@
* Base Stylesheet | Fork Corner
* By Waren Gonzaga
*/

body {
overflow-x: hidden;
}

#fork-corner {
z-index: 105;
position: absolute;
}

.fork-corner + div {
position: absolute;
width: $corner-size;
height: $corner-size;
z-index: 100;
}

.fork-corner {
// top right controller
&.fc-tr {
top: $corner-size/12;
right: $corner-size/12;
}
// top right element
&.fc-tr + div {
top: ($corner-size/2) - $corner-size;
right: ($corner-size/2) - $corner-size;
transform: rotate(45deg);
}
// top left controller
&.fc-tl {
top: $corner-size/12;
left: $corner-size/12;
}
// top left element
&.fc-tl + div {
top: ($corner-size/2) - $corner-size;
left: ($corner-size/2) - $corner-size;
transform: rotate(45deg);
}
}

// default theme
.fork-corner {
&.fc-tr {
&.fc-theme-default + div {
background-color: $default-bg-color;
}
}
&.fc-tl {
&.fc-theme-default + div {
background-color: $default-bg-color;
}
}
}

// github theme
.fork-corner {
&.fc-tr {
&.fc-theme-github {
text-decoration: none;
width: $corner-size/4;
height: $corner-size/4;
background: url("https://simpleicons.org/icons/github.svg");
}
&.fc-theme-github + div {
background-color: $github-bg-color;
}
}
&.fc-tl {
&.fc-theme-github {
text-decoration: none;
width: $corner-size/4;
height: $corner-size/4;
background: url("https://simpleicons.org/icons/github.svg");
}
&.fc-theme-github + div {
background-color: $github-bg-color;
}
}
}
4 changes: 4 additions & 0 deletions source/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,7 @@
* Variables Stylesheet | Fork Corner
* By Waren Gonzaga
*/

$corner-size: 200px;
$default-bg-color: #242424;
$github-bg-color: #181717;
3 changes: 3 additions & 0 deletions svg/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 057e779

Please sign in to comment.