mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-16 20:42:48 +00:00
Code Issues Releases Wiki Activity

too many changes - load posts now

Browse Source
This commit is contained in:
Mitchell
2016-08-24 00:29:00 -05:00
parent 24ef17ac5b
commit 7b48c79180
26 changed files with 354 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
client/assets/scss/Sidebar.scss
View File

@@ -1,75 +1,64 @@
$transitionDuration: .4s;
.Sidebar{
background: #fff;
width: 300px;
padding-right: 1em;
padding-left: 1em;
img{
width: 100%;
height: auto;
border-radius: 0.5em;
}
h2{
text-align: center;
margin-bottom: 0.5em;
}
a.toggler{
display: none;
}
@media (max-width: 768px) {
position: absolute;
top: 0;
right: 0;
min-height: 100%;
padding-top: 1em;
transform: translateX(300px);
-webkit-transform: translateX(300px);
transition: transform $transitionDuration ease-out;
-webkit-transition: transform $transitionDuration ease-out;
&.open {
transform: translateX(0px);
-webkit-transform: translateX(0px);
border-left: 1px solid #EAEAEA;
&:before {
content: " ";
display: block;
background: rgba(0,0,0,0.4);
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 100%;
}
a.toggler{
transform: rotate(450deg);
}
$transitionDuration: 0.4s;
.Sidebar {
background: #fff;
width: 300px;
padding-right: 1em;
padding-left: 1em;
img {
width: 100%;
height: auto;
border-radius: 0.5em;
}
a.toggler{
display: block;
width: 2em;
height: 2em;
h2 {
text-align: center;
margin-bottom: 0.5em;
}
a.toggler {
display: none;
}
@media (max-width: 768px) {
position: absolute;
left: -3em;
top: .5em;
cursor: pointer;
color: white;
transform: rotate(0deg);
top: 0;
right: 0;
min-height: 100%;
padding-top: 1em;
transform: translateX(300px);
-webkit-transform: translateX(300px);
transition: transform $transitionDuration ease-out;
-webkit-transition: transform $transitionDuration ease-out;
&:hover{
color: #3598db;
&.open {
transform: translateX(0px);
-webkit-transform: translateX(0px);
border-left: 1px solid #EAEAEA;
&:before {
content: " ";
display: block;
background: rgba(0,0,0,0.4);
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 100%;
}
a.toggler {
transform: rotate(450deg);
}
}
a.toggler {
display: block;
width: 2em;
height: 2em;
position: absolute;
left: -3em;
top: 0.5em;
cursor: pointer;
color: white;
transform: rotate(0deg);
transition: transform $transitionDuration ease-out;
-webkit-transition: transform $transitionDuration ease-out;
&:hover {
color: #3598db;
}
}
}
}
}