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

44
css/responsive.css
View File

@ -2,25 +2,19 @@
#dome {
display: none;
}
#banner > h1 {
#banner>h1 {
display: none;
}
#wrapper {
#wrapper,
footer {
top: 48px;
}
#intro-text {
margin: 0 5vw;
}
}
@media screen and (max-width: 950px) {
#intro-text,
#intro-image,
#tweets,
#tweets,
#feedback {
width: 100%;
}
#letter {
font-size: 1.4em;
}
@media screen and (max-width: 1100px) {
#dome:after {
background-position-y: 5vh;
background-size: 100%;
@ -30,6 +24,7 @@
display: block;
top: 0;
position: fixed;
box-shadow: 0 28rem 79rem 0 rgba(91, 194, 182, .08), 0 40rem 32rem 0 rgba(0, 0, 0, .04);
}
#menu-toggle {
position: absolute;
@ -64,7 +59,7 @@
height: 100vh;
top: 0;
left: -30vw;
padding-top: 10vh;
padding-top: 5vh;
display: block;
position: fixed;
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) {
#letter {
font-size: 1.4em;

26
js/sidebar.js
View File

@ -3,17 +3,29 @@ var mb = document.querySelector("#menu-toggle"),
tb = document.querySelector("#banner h1"),
wr = document.querySelector("#wrapper");
mb.addEventListener("click", function(){toggleSidebar(true)}, false);
wr.addEventListener("click", function(){toggleSidebar(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);
mb.addEventListener("click", function () {
toggleSidebar(true)
}, false);
wr.addEventListener("click", function () {
toggleSidebar(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;
function toggleSidebar(toggleOpenAllowed) {
if((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
if ((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
sb.style.disabled = false;
sb.style.left = "0px";
} else {