give up on sidebar, add normal nav menu
This commit is contained in:
parent
be7064bf75
commit
6260f555f4
@ -5,7 +5,7 @@
|
||||
<span class="slash">/</span>
|
||||
<a href="/Projects">Projects</a>
|
||||
<span class="slash">/</span>
|
||||
FooBar
|
||||
</span>
|
||||
<span id="page">FooBar</span>
|
||||
</div>
|
||||
</header>
|
||||
@ -1,8 +1,3 @@
|
||||
<input id="sidebarToggle" type="checkbox"/>
|
||||
<span id="sidebarToggleImage">
|
||||
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
||||
<nav id="sidebar">
|
||||
|
||||
<ul id="navFlags">
|
||||
|
||||
3
_sass/_mobile.scss
Normal file
3
_sass/_mobile.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$mobile-width: 800px;
|
||||
|
||||
$mobile-header-height: 70px;
|
||||
@ -42,4 +42,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
$mobile-width: 800px;
|
||||
376
css/sidebar.scss
376
css/sidebar.scss
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
@import 'util';
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'mobile';
|
||||
|
||||
|
||||
.blue {
|
||||
@ -80,25 +81,11 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// HEADER
|
||||
|
||||
|
||||
header {
|
||||
|
||||
@media screen and (max-width: $mobile-width){
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: darken($background, 5%);
|
||||
|
||||
border-bottom: 1px solid $subtle;
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin:0;
|
||||
padding: 10px;
|
||||
@ -107,10 +94,6 @@ header {
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
|
||||
@media screen and (max-width: $mobile-width){
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@ -128,10 +111,6 @@ header {
|
||||
font: {
|
||||
size: 36px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width){
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,6 +138,45 @@ header {
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: $mobile-width){
|
||||
header {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: darken($background, 5%);
|
||||
|
||||
|
||||
border-bottom: 1px solid $subtle;
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
#title {
|
||||
font-size: $mobile-header-height * 0.5;
|
||||
text-align: center;
|
||||
padding: {
|
||||
top: 0;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
#path {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#page {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user