mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-20 19:20: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 {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
/*IMPORTANT TO CHANGE IF EXPANDING*/
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-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));
|
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 {
|
a {
|
||||||
color: #1976D2;
|
color: #1976D2;
|
||||||
text-decoration: none;
|
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 {
|
button.flip>i {
|
||||||
height: 3vh;
|
height: 3vh;
|
||||||
width: 3vh;
|
width: 3vh;
|
||||||
|
|
@ -361,80 +230,3 @@ section h2 {
|
||||||
#letter>p {
|
#letter>p {
|
||||||
margin: 0.5em 0;
|
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="theme-color" content="#1976D2" />
|
||||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
|
<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="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/main.css" rel="stylesheet" />
|
||||||
|
<link href="css/footer.css" rel="stylesheet" />
|
||||||
|
<link href="css/responsive.css" rel="stylesheet" />
|
||||||
<title>Home - TJSGA</title>
|
<title>Home - TJSGA</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div id="banner">
|
<div id="banner">
|
||||||
|
<button id="menu-toggle" class="fluid">
|
||||||
|
<i></i>
|
||||||
|
</button>
|
||||||
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
|
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
|
||||||
</div>
|
</div>
|
||||||
<nav id="menu">
|
<nav id="menu" class="fluid">
|
||||||
<a class="menu-item" href="index.html">
|
<a class="menu-item" href="index.html">
|
||||||
<button class="menu-item fluid">Home</button>
|
<button class="menu-item fluid">Home</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -104,6 +110,7 @@
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="js/sidebar.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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