rushilwiz/website-2018
1
0
Fork 0
mirror of https://github.com/tjsga/website-2018.git synced 2025-04-20 19:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix some responsiveness issues and width

Browse Source
This commit is contained in:
William Zhang 2017-07-07 21:02:50 -04:00
parent 3a58e03e70
commit b203b0fff4
3 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -133,6 +133,9 @@ span>a:active {
min-height: 100vh; min-height: 100vh;
z-index: 1; z-index: 1;
background-color: #424242; background-color: #424242;
display: flex;
flex-direction: column;
align-items: center;
} }
#wrapper:before { #wrapper:before {
@ -170,7 +173,8 @@ section h1 {
margin-top: 0.5em; margin-top: 0.5em;
} }
section h2 { section h2,
#intro-title {
width: 100%; width: 100%;
font-size: 2.1em; font-size: 2.1em;
font-weight: bold; font-weight: bold;
@ -180,10 +184,6 @@ section h2 {
text-align: left; text-align: left;
} }
#intro-title {
width: 100%;
}
#intro-text { #intro-text {
text-align: center; text-align: center;
width: calc(50% - 8vw); width: calc(50% - 8vw);
@ -218,9 +218,8 @@ section h2 {
} }
#letter { #letter {
width: calc(100% - 2em); width: 100%;
margin: 0 1em; font-size: 1.2em;
font-size: 1.1em;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
color: #fff; color: #fff;

42
css/responsive.css
View File

@ -5,22 +5,16 @@
#banner>h1 { #banner>h1 {
display: none; display: none;
} }
#wrapper { #wrapper,
footer {
top: 48px; top: 48px;
} }
#intro-text {
margin: 0 5vw;
}
} }
@media screen and (max-width: 950px) { @media screen and (max-width: 1100px) {
#intro-text,
#intro-image,
#tweets,
#tweets,
#feedback {
width: 100%;
}
#letter {
font-size: 1.4em;
}
#dome:after { #dome:after {
background-position-y: 5vh; background-position-y: 5vh;
background-size: 100%; background-size: 100%;
@ -30,6 +24,7 @@
display: block; display: block;
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);
} }
#menu-toggle { #menu-toggle {
position: absolute; position: absolute;
@ -64,7 +59,7 @@
height: 100vh; height: 100vh;
top: 0; top: 0;
left: -30vw; left: -30vw;
padding-top: 10vh; padding-top: 5vh;
display: block; display: block;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
@ -74,6 +69,27 @@
} }
} }
@media screen and (max-width: 1000px) {
#intro-text,
#intro-image,
#tweets,
#feedback {
width: 100%;
}
section {
max-width: 750px;
}
}
@media screen and (min-width: 1100px) {
#intro-text,
#intro-image,
#tweets,
#feedback {
max-width: 550px;
}
}
@media screen and (min-width: 1800px) { @media screen and (min-width: 1800px) {
#letter { #letter {
font-size: 1.4em; font-size: 1.4em;

24
js/sidebar.js
View File

@ -3,12 +3,24 @@ var mb = document.querySelector("#menu-toggle"),
tb = document.querySelector("#banner h1"), tb = document.querySelector("#banner h1"),
wr = document.querySelector("#wrapper"); wr = document.querySelector("#wrapper");
mb.addEventListener("click", function(){toggleSidebar(true)}, false); mb.addEventListener("click", function () {
wr.addEventListener("click", function(){toggleSidebar(false)}, false); toggleSidebar(true)
tb.addEventListener("click", function(){toggleSidebar(false)}, false); }, false);
mb.addEventListener("touchleave", function(){toggleSidebar(true)}, false); wr.addEventListener("click", function () {
wr.addEventListener("touchleave", function(){toggleSidebar(false)}, false); toggleSidebar(false)
tb.addEventListener("touchleave", function(){toggleSidebar(false)}, false); }, false);
tb.addEventListener("click", function () {
toggleSidebar(false)
}, false);
mb.addEventListener("touchleave", function () {
toggleSidebar(true)
}, false);
wr.addEventListener("touchleave", function () {
toggleSidebar(false)
}, false);
tb.addEventListener("touchleave", function () {
toggleSidebar(false)
}, false);
sb.style.disabled = true; sb.style.disabled = true;