mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-21 11:40:17 -04:00
seperate css and make everything super responsive
This commit is contained in:
William Zhang
parent
b869b954fc
commit
3a58e03e70
56
css/footer.css
Normal file
56
css/footer.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(2.75em + 42px);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #212121;
|
||||
z-index: 10;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
footer>span {
|
||||
width: 100vw;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#contact {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
button.social {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button.social#fb {
|
||||
background: url('../icons/fb.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button.social#tw {
|
||||
background: url('../icons/tw.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button.social#flickr {
|
||||
background: url('../icons/flickr.png');
|
||||
background-size: cover;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
button.social#mail {
|
||||
background: url('../icons/mail.png');
|
||||
background-size: cover;
|
||||
}
|
||||
119
css/header.css
Normal file
119
css/header.css
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/*height: calc(10vh + 50px);*/
|
||||
}
|
||||
|
||||
#banner {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
text-align: center;
|
||||
display: table;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#banner h1 {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-toggle:active {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
|
||||
#menu-toggle>i {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: block;
|
||||
background-image: url('../icons/menu.svg');
|
||||
}
|
||||
|
||||
nav#menu {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #b71c1c;
|
||||
box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
|
||||
}
|
||||
|
||||
a.menu-item {
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
flex-basis: calc(100vw / 4);
|
||||
}
|
||||
|
||||
button.menu-item {
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.menu-item:hover {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
button.menu-item:active {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
#dome:before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#dome {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
color: #000;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
#dome:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #010318;
|
||||
background-image: url('../img/bg.jpg');
|
||||
background-size: cover;
|
||||
background-position-x: center;
|
||||
background-position-y: 7.5vh;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
z-index: -2;
|
||||
}
|
||||
208
css/main.css
208
css/main.css
|
|
@ -27,7 +27,6 @@ html {
|
|||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
/*IMPORTANT TO CHANGE IF EXPANDING*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
|
@ -58,141 +57,11 @@ hr {
|
|||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/*height: calc(10vh + 50px);*/
|
||||
}
|
||||
|
||||
#banner {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
text-align: center;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#banner h1 {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav#menu {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #b71c1c;
|
||||
box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
|
||||
}
|
||||
|
||||
a.menu-item {
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
flex-basis: calc(100vw / 4);
|
||||
}
|
||||
|
||||
button.menu-item {
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.menu-item:hover {
|
||||
background-color: #7f0000;
|
||||
}
|
||||
|
||||
button.menu-item:active {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#dome:before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#dome {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
color: #000;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
#dome:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #010318;
|
||||
background-image: url('../img/bg.jpg');
|
||||
background-size: cover;
|
||||
background-position-x: center;
|
||||
background-position-y: 7.5vh;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1976D2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button.social {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button.social#fb {
|
||||
background: url('../icons/fb.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button.social#tw {
|
||||
background: url('../icons/tw.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button.social#flickr {
|
||||
background: url('../icons/flickr.png');
|
||||
background-size: cover;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
button.social#mail {
|
||||
background: url('../icons/mail.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button.flip>i {
|
||||
height: 3vh;
|
||||
width: 3vh;
|
||||
|
|
@ -361,80 +230,3 @@ section h2 {
|
|||
#letter>p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(2.75em + 42px);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #212121;
|
||||
z-index: 10;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
footer>span {
|
||||
width: 100vw;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#contact {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
#intro-text,
|
||||
#intro-image,
|
||||
#tweets,
|
||||
#tweets,
|
||||
#feedback {
|
||||
width: 100%;
|
||||
}
|
||||
#letter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#dome:after {
|
||||
background-position-y: 20vh;
|
||||
background-size: 100%;
|
||||
}
|
||||
#dome {
|
||||
display: none;
|
||||
}
|
||||
#menu>a {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
flex-basis: auto;
|
||||
}
|
||||
#menu button {
|
||||
font-size: 2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
nav#menu {
|
||||
width: 30vw;
|
||||
height: 100vh;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
left: -30vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1800px) {
|
||||
#letter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
#dome:after {
|
||||
background-position-y: 20vh;
|
||||
background-size: 100%;
|
||||
}
|
||||
*/
|
||||
81
css/responsive.css
Normal file
81
css/responsive.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@media screen and (max-width: 480px) {
|
||||
#dome {
|
||||
display: none;
|
||||
}
|
||||
#banner > h1 {
|
||||
display: none;
|
||||
}
|
||||
#wrapper {
|
||||
top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
#intro-text,
|
||||
#intro-image,
|
||||
#tweets,
|
||||
#tweets,
|
||||
#feedback {
|
||||
width: 100%;
|
||||
}
|
||||
#letter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#dome:after {
|
||||
background-position-y: 5vh;
|
||||
background-size: 100%;
|
||||
}
|
||||
#banner {
|
||||
height: 48px;
|
||||
display: block;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
#menu-toggle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#banner>h1 {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
width: calc(100% - 48px);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#menu>a {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
flex-basis: auto;
|
||||
}
|
||||
button.menu-item {
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
button.menu-item:hover {
|
||||
color: #fff;
|
||||
background-color: #7f0000;
|
||||
}
|
||||
button.menu-item:active {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
nav#menu {
|
||||
width: 30vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: -30vw;
|
||||
padding-top: 10vh;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
}
|
||||
#menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1800px) {
|
||||
#letter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
4
icons/menu.svg
Normal file
4
icons/menu.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 209 B |
|
|
@ -8,16 +8,22 @@
|
|||
<meta name="theme-color" content="#1976D2" />
|
||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
|
||||
<link href="icons/favicon.ico" rel="icon" type="image/ico">
|
||||
<link href="css/header.css" rel="stylesheet" />
|
||||
<link href="css/main.css" rel="stylesheet" />
|
||||
<link href="css/footer.css" rel="stylesheet" />
|
||||
<link href="css/responsive.css" rel="stylesheet" />
|
||||
<title>Home - TJSGA</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="banner">
|
||||
<button id="menu-toggle" class="fluid">
|
||||
<i></i>
|
||||
</button>
|
||||
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<nav id="menu" class="fluid">
|
||||
<a class="menu-item" href="index.html">
|
||||
<button class="menu-item fluid">Home</button>
|
||||
</a>
|
||||
|
|
@ -104,6 +110,7 @@
|
|||
</button>
|
||||
</a>
|
||||
</footer>
|
||||
<script src="js/sidebar.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
js/sidebar.js
Normal file
23
js/sidebar.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
var mb = document.querySelector("#menu-toggle"),
|
||||
sb = document.querySelector("nav#menu"),
|
||||
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);
|
||||
sb.style.disabled = true;
|
||||
|
||||
|
||||
function toggleSidebar(toggleOpenAllowed) {
|
||||
if((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
|
||||
sb.style.disabled = false;
|
||||
sb.style.left = "0px";
|
||||
} else {
|
||||
sb.style.disabled = true;
|
||||
sb.style.left = "-30vw";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user