Skip to content

Commit

Permalink
Rearrange folders/workflow + style
Browse files Browse the repository at this point in the history
  • Loading branch information
zessx committed Mar 29, 2016
1 parent fbd77cd commit 46ba07b
Show file tree
Hide file tree
Showing 29 changed files with 351 additions and 172 deletions.
1 change: 0 additions & 1 deletion assets/css/app.css

This file was deleted.

10 changes: 5 additions & 5 deletions assets/css/scss/base/_icons.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@charset "UTF-8";
@font-face {
font-family: "icons";
src: url('./assets/fonts/icons.eot');
src: url('./assets/fonts/icons.eot?#iefix') format('eot'),
url('./assets/fonts/icons.woff') format('woff'),
url('./assets/fonts/icons.ttf') format('truetype'),
url('./assets/fonts/icons.svg#icons') format('svg');
src: url('assets/fonts/icons.eot');
src: url('assets/fonts/icons.eot?#iefix') format('eot'),
url('assets/fonts/icons.woff') format('woff'),
url('assets/fonts/icons.ttf') format('truetype'),
url('assets/fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
Expand Down
3 changes: 3 additions & 0 deletions assets/css/scss/base/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,8 @@
$light: #fff;
$dark: #222;

$logoWidth: 200px;
$logoHeight: 154px;
$logoAngle: -28.71deg;
$unit: 14px;
$linkPadding: 10px;
116 changes: 91 additions & 25 deletions assets/css/scss/layout/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,137 @@

%section {
position: absolute;
width: 50vw;
height: 100vh;
top: 3 * $unit;
bottom: 3 * $unit;
width: calc(50vw - #{$logoWidth});
z-index: 2;

h2 {
position: absolute;
bottom: 3 * $unit;
width: calc(50vw - #{12 * $unit});
top: 50%;
text-align: center;
margin: 0;
padding: $linkPadding;
cursor: pointer;
font-size: 3 * $unit;
font-weight: normal;
text-transform: uppercase;
}
transform-origin: center center;
transition: left .4s, right .4s;

&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 3px;
background: currentColor;
transform: translate(-50%, -50%);
transition: all .4s;
}
&:hover:after {
width: calc(100% + #{3 * $unit});
}
}
ul {
padding: 0;
height: calc(100vh - #{6 * $unit});
list-style: none;
padding: 3 * $unit;
margin: 0;
transition: transform .4s;

li {
line-height: 3 * $unit - 2 * $linkPadding;
margin-bottom: $unit;
width: 50vw;
width: 100%;
transition: color .4s, background .4s;

h3 {
margin: 0;
}
p {
margin: 0;
padding: 10px 10px 0;
}
a {
display: block;
color: inherit;
margin: 0;
padding: $linkPadding;
text-decoration: none;
}
}
}
&.active {
h2:after {
width: calc(100% + #{3 * $unit});
}
ul {
transform: translateX(0);
}
}
}

.posts {
@extend %section;
bottom: 0;
left: 0;
left: 3 * $unit;
color: $dark;

h2 {
left: 6 * $unit;
transform: rotate(-90deg);
transform-origin: top left;
left: 3 * $unit;
transform: translate(-50%, -50%) rotate(-90deg);
}
ul {
transform: translateX(-100%);

li {
color: $dark;
text-align: right;

&:hover {
background: $dark;
color: $light;
}
}
}
li {
background: $dark;
color: $light;
text-align: right;
&.active {
h2 {
left: calc(50vw - #{$logoWidth - 3 * $unit});
}
~ .logo {
left: calc(50vw + #{$logoWidth});
}
}
}
.works {
@extend %section;
top: 0;
right: 0;
right: 3 * $unit;
color: $light;

h2 {
right: 6 * $unit;
transform: rotate(90deg);
transform-origin: top right;
right: 3 * $unit;
transform: translate(50%, -50%) rotate(90deg);
}
ul {
transform: translateX(100%);

li {
color: $light;
text-align: left;

&:hover {
background: $light;
color: $dark;
}
}
}
li {
background: $light;
color: $dark;
text-align: left;
&.active {
h2 {
right: calc(50vw - #{$logoWidth - 3 * $unit});
}
~ .logo {
left: calc(50vw - #{$logoWidth});
}
}
}
7 changes: 4 additions & 3 deletions assets/css/scss/layout/_logo.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.logo {
position: absolute;
top: 50%;
left: 50%;
top: 50vh;
left: 50vw;
overflow: visible !important;
transform: translate(-50%, -50%);
transition: left .4s;
z-index: 1;
}
.logo__layer--dark {
Expand Down Expand Up @@ -47,7 +48,7 @@
height: 8000px;
y: -2077px;
width: 4000px;
transform: rotate(-28.71deg);
transform: rotate($logoAngle);
}
}
@keyframes rectToDot1 {
Expand Down
2 changes: 2 additions & 0 deletions assets/css/scss/app.scss → assets/css/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,7 @@
@import "base/variables";
@import "base/bootstrap";

@import "vendor/perfect-scrollbar";

@import "layout/logo";
@import "layout/content";
46 changes: 46 additions & 0 deletions assets/css/scss/vendor/_perfect-scrollbar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@import "../../../../bower_components/perfect-scrollbar/src/css/main";

.ps-theme-light {
@include ps-container(map-merge($ps-theme-default, (
border-radius: 0,
rail-container-hover-opacity: 1,
rail-hover-opacity: 1,
bar-container-hover-bg: $light,
bar-hover-bg: $light,
rail-hover-bg: none,
// scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
// scrollbar-y-right: $ps-scrollbar-y-right
)));

> .ps-scrollbar-y-rail {
background: none !important;

> .ps-scrollbar-y {
border-top: $ps-scrollbar-y-rail-right solid $dark;
border-bottom: $ps-scrollbar-y-rail-right solid $dark;
}
}
}

.ps-theme-dark {
@include ps-container(map-merge($ps-theme-default, (
border-radius: 0,
rail-container-hover-opacity: 1,
rail-hover-opacity: 1,
bar-container-hover-bg: $dark,
bar-hover-bg: $dark,
rail-hover-bg: none,
// scrollbar-y-rail-right: calc(100% - #{$ps-scrollbar-y-width} - #{$ps-scrollbar-y-rail-right})
)));

> .ps-scrollbar-y-rail {
background: none !important;
left: $ps-scrollbar-y-rail-right !important;
right: 0 !important;

> .ps-scrollbar-y {
border-top: $ps-scrollbar-y-rail-right solid $light;
border-bottom: $ps-scrollbar-y-rail-right solid $light;
}
}
}
Binary file removed assets/fonts/icons.woff2
Binary file not shown.
73 changes: 0 additions & 73 deletions assets/js/app.js

This file was deleted.

Empty file removed assets/js/dist.js
Empty file.
Loading

0 comments on commit 46ba07b

Please sign in to comment.