drewcassidy/drewcassidy.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

give up on sidebar, add normal nav menu

Browse Source
This commit is contained in:
Andrew Cassidy
2017-11-26 22:13:13 -08:00
parent 427401ae43
commit 5931b1e920
6 changed files with 237 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
css/sidebar.scss
View File

@ -3,12 +3,14 @@
@import 'util';
@import 'colors';
@import 'fonts';
@import 'mobile';
$flag-shadow: rgba(black, 0.2);
$animate-time: 0.03s;
#sidebar {
display: block;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 180px;
margin: 0;
@ -19,44 +21,6 @@ $animate-time: 0.03s;
}
}
#sidebarToggle {
display:none;
@media screen and (max-width: $mobile-width){
display: block;
position: fixed;
top: 0;
left: 0;
width: 30px;
height: 30px;
margin: 0;
z-index: 2;
cursor: pointer;
opacity: 0;
}
}
#sidebarToggleImage {
display:none;
@media screen and (max-width: $mobile-width){
display: block;
position: fixed;
text-align: center;
color: $title-text;
top: 7px;
left: 0;
width: 30px;
z-index: 1;
cursor: pointer;
//opacity: 0;
}
}
#navFlags {
display: block;
margin-block-start: 0;
@ -70,28 +34,9 @@ $animate-time: 0.03s;
}
}
@media screen and (max-width: $mobile-width){
#sidebar{
position: fixed;
left: -180px;
background-color: #FFE;
width: 145px;
height: 100%;
padding-top: 40px;
}
#sidebarToggle:checked ~ #sidebar{
left: 0px;
}
#navLinks a:hover {
color: $sidebar-text;
}
}
#navLinks {
display: block;
padding: {
left: 10px;
}
@ -122,146 +67,205 @@ $animate-time: 0.03s;
), webkit moz o);
}
.flag {
display: inline-block;
position: relative;
left: -3px;
text-align: center;
z-index: 1;
padding: {
top: 5px;
bottom: 5px;
left: 0px;
.flagText {
font: {
family: $sidebar-font;
size: 20px;
weight: 600;
}
.flagButton {
display: block;
float: left;
position: absolute;
height: 50px;
width: 160px;
line-height: normal;
text-align: center;
border-radius: 0 5px 5px 0;
width: 160px;
right:0;
top:15px;
@include prefix(transition-property, width, webkit moz o);
@include prefix(transition-property, border-radius, webkit moz o);
color: $sidebar-text;
}
.flagText {
font: {
family: $sidebar-font;
size: 20px;
weight: 600;
}
position: absolute;
@media screen and (min-width: $mobile-width){
#navFlags {
.flag {
display: inline-block;
position: relative;
left: -3px;
line-height: normal;
text-align: center;
z-index: 1;
width: 160px;
right:0;
top:15px;
padding: {
top: 5px;
bottom: 5px;
left: 0px;
}
.flagButton {
display: block;
float: left;
color: $sidebar-text;
height: 50px;
width: 160px;
border-radius: 0 5px 5px 0;
@include prefix(transition-property, width, webkit moz o);
@include prefix(transition-property, border-radius, webkit moz o);
}
.flagButton::after{
z-index: -1;
content: " ";
display: block;
position: relative;
left: 3px;
top: 4px;
height: 50px;
width: 160px;
background-color: $flag-shadow;
border-radius: 0 5px 5px 0;
@include prefix(transition-property, width, webkit moz o);
@include prefix(transition-property, border-radius, webkit moz o);
}
.flagPoint{
position: absolute;
width: 0;
height: 0;
left: 160px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left-width: 0px;
border-left-style: solid;
background-color: transparent;
@include prefix(transition-property, left, webkit moz o);
@include prefix(transition-property, border-left-width, webkit moz o);
}
.flagPoint.blue {
border-left-color: $blue;
}
.flagPoint.orange {
border-left-color: $orange;
}
.flagPoint.green {
border-left-color: $green;
}
.flagPoint.magenta {
border-left-color: $magenta;
}
.flagPoint::after{
position: absolute;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 0px solid $flag-shadow;
z-index: -1;
content: " ";
left: -20 + 3px;
top: -25 + 4px;
@include prefix(transition-property, border-left-width, webkit moz o);
}
.flagFold{
display: block;
position: absolute;
z-index: -100;
left:0px;
top:55px;
width: 3px;
height: 3px;
mask-image: url('../svg/fold.svg');
-webkit-mask-image: url('../svg/fold.svg');
}
}
.flag:hover {
.flagButton {
width: 170px;
border-radius: 0;
}
.flagButton::after{
width: 170px;
border-radius: 0;
}
.flagPoint {
left: 170px;
border-left-width: 20px;
}
.flagPoint::after{
border-left-width: 20px;
}
}
}
}
@media screen and (max-width: $mobile-width){
#sidebar{
position: -webkit-sticky;
display: flex;
justify-content: space-between;
top: 0;
width: 100%;
}
#navFlags {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
li {
padding: 5px;
flex-grow: 1;
flex-shrink: 0;
min-width: 100px;
}
.flag {
text-decoration: none;
display: block;
flex-shrink: 0;
flex-grow: 1;
width: 100%;
.flagPoint, .flagFold {
display: none;
}
.flagButton{
border-radius: 5px;
display: block;
height: 50px;
width: 100%;
.flagText {
display: block;
position: relative;
width: 100%;
}
}
}
}
.flagButton::after{
z-index: -1;
content: " ";
display: block;
position: relative;
left: 3px;
top: 4px;
height: 50px;
width: 160px;
background-color: $flag-shadow;
border-radius: 0 5px 5px 0;
@include prefix(transition-property, width, webkit moz o);
@include prefix(transition-property, border-radius, webkit moz o);
#navLinks {
display: none;
}
.flagPoint{
position: absolute;
width: 0;
height: 0;
left: 160px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left-width: 0px;
border-left-style: solid;
background-color: transparent;
@include prefix(transition-property, left, webkit moz o);
@include prefix(transition-property, border-left-width, webkit moz o);
}
.flagPoint.blue {
border-left-color: $blue;
}
.flagPoint.orange {
border-left-color: $orange;
}
.flagPoint.green {
border-left-color: $green;
}
.flagPoint.magenta {
border-left-color: $magenta;
}
.flagPoint::after{
position: absolute;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 0px solid $flag-shadow;
z-index: -1;
content: " ";
left: -20 + 3px;
top: -25 + 4px;
@include prefix(transition-property, border-left-width, webkit moz o);
}
.flagFold{
display: block;
position: absolute;
z-index: -100;
left:0px;
top:55px;
width: 3px;
height: 3px;
mask-image: url('../svg/fold.svg');
}
}
.flag:hover {
.flagButton {
width: 170px;
border-radius: 0;
}
.flagButton::after{
width: 170px;
border-radius: 0;
}
.flagPoint {
left: 170px;
border-left-width: 20px;
}
.flagPoint::after{
border-left-width: 20px;
}
}
}