fix misalignment on resources

This commit is contained in:
William Zhang 2017-10-25 16:39:29 -04:00
parent 5042eba053
commit 7347b4723c
3 changed files with 16 additions and 8 deletions

View File

@ -17,14 +17,14 @@ header {
#banner #logo { #banner #logo {
content: ''; content: '';
height: 10vh; height: 10vh;
width: 10vh; width: 100%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: 2.5em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
background-image: url('../img/logo.png'); background-image: url('../img/logo.png');
background-size: 90%; background-size: 8vh;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -62,7 +62,7 @@ nav#menu {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
background-color: rgb(164, 38, 44); border-bottom: 3px solid rgb(164, 38, 44);
box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27); box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
} }
@ -81,18 +81,18 @@ button.menu-item {
width: 100%; width: 100%;
height: 50px; height: 50px;
outline: none; outline: none;
color: #fff; color: #000;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
button.menu-item:hover { button.menu-item:hover {
color: #E0E0E0; color: #767676;
} }
button.menu-item:active { button.menu-item:active {
font-size: 1.4em; font-size: 1.4em;
color: #BDBDBD; color: #9f9f9f;
} }
#dome:before { #dome:before {

View File

@ -175,6 +175,7 @@ section {
flex-flow: row wrap; flex-flow: row wrap;
} }
section h1 { section h1 {
font-size: 3.5em; font-size: 3.5em;
margin-top: 0.5em; margin-top: 0.5em;

View File

@ -42,9 +42,12 @@
top: 0; top: 0;
position: fixed; position: fixed;
box-shadow: 0 28rem 79rem 0 rgba(91, 194, 182, .08), 0 40rem 32rem 0 rgba(0, 0, 0, .04); box-shadow: 0 28rem 79rem 0 rgba(91, 194, 182, .08), 0 40rem 32rem 0 rgba(0, 0, 0, .04);
border-bottom: 3px solid rgb(164, 38, 44);
} }
#banner #logo { #banner #logo {
display: none; height: 100%;
width: 100%;
background: none;
} }
#menu-toggle { #menu-toggle {
position: absolute; position: absolute;
@ -69,13 +72,14 @@
} }
button.menu-item:hover { button.menu-item:hover {
color: #fff; color: #fff;
background-color: rgb(118, 23, 33); background-color: rgb(164, 38, 44);
} }
button.menu-item:active { button.menu-item:active {
font-size: 1.1em; font-size: 1.1em;
} }
nav#menu { nav#menu {
width: 30vw; width: 30vw;
max-width: 200px;
height: 100vh; height: 100vh;
top: 0; top: 0;
left: -30vw; left: -30vw;
@ -84,6 +88,8 @@
position: fixed; position: fixed;
z-index: 2; z-index: 2;
transition: all 130ms ease; transition: all 130ms ease;
background-color: #fff;
border: none;
} }
#menu-toggle { #menu-toggle {
display: block; display: block;
@ -127,6 +133,7 @@
#intro-image, #intro-image,
.list, .list,
.links { .links {
width: 40vw;
max-width: 550px; max-width: 550px;
} }
.list>ul { .list>ul {