Try to add responsive design?
This commit is contained in:
parent
b1843db4d6
commit
ee0b1a7a38
|
@ -1,9 +1,11 @@
|
||||||
<header>
|
<header>
|
||||||
<div id = "title">
|
<div id = "title">
|
||||||
<a href="/"><b>Andrew Cassidy</b></a>
|
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
||||||
<span class="slash">/</span>
|
<span id="path">
|
||||||
<a href="/Projects">Projects</a>
|
<span class="slash">/</span>
|
||||||
<span class="slash">/</span>
|
<a href="/Projects">Projects</a>
|
||||||
FooBar
|
<span class="slash">/</span>
|
||||||
|
FooBar
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
|
@ -1,4 +1,10 @@
|
||||||
|
<input id="sidebarToggle" type="checkbox"/>
|
||||||
|
<span id="sidebarToggleImage">
|
||||||
|
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
|
||||||
<nav id="sidebar">
|
<nav id="sidebar">
|
||||||
|
|
||||||
<ul id="navFlags">
|
<ul id="navFlags">
|
||||||
<li>{% include flag.html color="blue" name="Home" url="/" %}</li>
|
<li>{% include flag.html color="blue" name="Home" url="/" %}</li>
|
||||||
<li>{% include flag.html color="green" name="Blog" url="/Blog" %}</li>
|
<li>{% include flag.html color="green" name="Blog" url="/Blog" %}</li>
|
||||||
|
|
|
@ -40,4 +40,6 @@
|
||||||
// Output standard non-prefixed declaration
|
// Output standard non-prefixed declaration
|
||||||
#{$property}: $value;
|
#{$property}: $value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$mobile-width: 500px;
|
|
@ -19,6 +19,44 @@ $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 {
|
#navFlags {
|
||||||
display: block;
|
display: block;
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
|
@ -32,6 +70,27 @@ $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 {
|
#navLinks {
|
||||||
padding: {
|
padding: {
|
||||||
left: 10px;
|
left: 10px;
|
||||||
|
|
|
@ -57,7 +57,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $margin;
|
background-color: $margin;
|
||||||
|
@ -72,40 +71,71 @@ body {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: 0 0 4px 5px $shadow;
|
|
||||||
-moz-box-shadow: 0 0 4px 5px $shadow;
|
|
||||||
-webkit-box-shadow: 0 0 4px 5px $shadow;
|
@media screen and (min-width: $mobile-width){
|
||||||
|
box-shadow: 0 0 4px 5px $shadow;
|
||||||
|
-moz-box-shadow: 0 0 4px 5px $shadow;
|
||||||
|
-webkit-box-shadow: 0 0 4px 5px $shadow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// HEADER
|
// HEADER
|
||||||
|
header {
|
||||||
|
|
||||||
#title {
|
@media screen and (max-width: $mobile-width){
|
||||||
margin:0;
|
top: 0;
|
||||||
padding: 10px;
|
right: 0;
|
||||||
font-family: $title-font;
|
z-index: 1;
|
||||||
color: $title-text;
|
background-color: darken($background, 5%);
|
||||||
font-weight: normal;
|
|
||||||
font-size: 28px;
|
|
||||||
|
|
||||||
a {
|
border-bottom: 1px solid $subtle;
|
||||||
color: inherit;
|
padding: {
|
||||||
text-decoration: none;
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
line-height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
#title {
|
||||||
color: inherit;
|
margin:0;
|
||||||
text-decoration: underline;
|
padding: 10px;
|
||||||
|
font-family: $title-font;
|
||||||
|
color: $title-text;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-width){
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.slash {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: -10%;
|
||||||
|
font: {
|
||||||
|
size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-width){
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slash {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: -10%;
|
|
||||||
font: {
|
|
||||||
size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user