Difference between revisions of "Template:HSNU-TAIPEI/main"

Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
/******************************
+
/**********************
 
GENERAL
 
GENERAL
−
******************************/
+
**********************/
  
 
* {
 
* {
−
  box-sizing: border-box;
+
box-sizing: border-box;
 
}
 
}
  
−
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
html,
−
    display:none;
+
body {
 +
margin: 0;
 +
width: 100%;
 +
}
  
 +
.wrapper {
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
background: #f7f7f7;
 
}
 
}
−
#top-section {
+
 
−
    border: none;
+
header {
−
    height: 0px;
+
width: 100%;
 +
height: 80px;
 +
border-bottom: 1px solid #d0d0d0;
 +
background: #fff;
 
}
 
}
  
−
#content {
+
.is-nav-active {
−
    border: none;
+
overflow-y: scroll;
−
    font-size: 1rem;
+
position: fixed;
 
}
 
}
  
−
#content,
+
/**********************
−
#bodyContent {
+
NAVIGATION
−
  width: 100%;
+
**********************/
−
  padding: 0;
+
 
−
  margin-top: -8px;
+
.cell {
 +
margin: 0 20px;
 
}
 
}
  
−
.wrapper {
+
.cell::after {
−
  min-height: 100vh;
+
content: "";
 +
clear: both;
 +
display: block;
 
}
 
}
  
−
.wrapper {
+
.logo {
−
  width: 100%;
+
float: left;
−
  background: #f2f2e8;
+
width: 25%;
 
}
 
}
  
−
.main-content {
+
.logo a {
−
  /*width: 80%;*/
+
display: block;
−
  width: 100%;
+
width: 180px;
−
  margin: 0 auto;
+
margin-top: 10px;
−
  padding: 110px 5% 5%;
+
 
}
 
}
  
−
.main-content h1 {
+
.logo img {
−
  font-weight: bold;
+
width: 100%;
−
  font-size: 4rem;
+
−
  text-align: center;
+
−
  margin: 0 auto 30px;
+
−
  border: none;
+
 
}
 
}
  
−
.sec {
+
.header-right {
−
  width: 100%;
+
float: left;
 +
width: 75%;
 
}
 
}
  
−
.sec > h2 {
+
.header-right::after {
−
  font-weight: bold;
+
content: "";
−
  border-bottom: 2px solid #aaa;
+
clear: both;
 +
display: block;
 
}
 
}
  
−
article p {
+
.nav {
−
  font-size: 1.1rem;
+
margin-top: 18px;
−
  line-height: 1.5;
+
 
}
 
}
  
−
article img {
+
.nav-btn {
−
  width: 100%;
+
float: right;
−
   float: right;
+
display: block;
 +
text-decoration: none;
 +
width: 48px;
 +
}
 +
 
 +
.nav-btn img {
 +
width: 100%;
 +
}
 +
 
 +
.main-nav {
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
 
 +
.close-btn {
 +
display: none;
 +
position: absolute;
 +
top: 20px;
 +
right: 20px;
 +
width: 32px;
 +
z-index: 100;
 +
}
 +
 
 +
.list-item {
 +
list-style: none;
 +
margin: 10px;
 +
padding: 0;
 +
}
 +
 
 +
.list-item a {
 +
text-decoration: none;
 +
font-size: 1.1em;
 +
font-family: "Open Sans", sans-serif;
 +
font-weight: 600;
 +
color: #bbb;
 +
}
 +
 
 +
.open-nav {
 +
display: block !important;
 +
position: fixed;
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(39, 137, 152, 0.95);
 +
top: 0;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
}
 +
 
 +
.open-nav li {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
.open-nav a {
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
margin: 0;
 +
padding: 30px;
 +
font-size: 150%;
 +
color: #fff;
 +
}
 +
 
 +
.open-nav a:active {
 +
   background: #297d89;
 +
}
 +
 
 +
.sub-nav {
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
z-index: 50;
 +
}
 +
 
 +
/**********************
 +
MAIN PART
 +
**********************/
 +
 
 +
.mc-container {
 +
width: 100%;
 +
}
 +
 
 +
.section {
 +
padding: 5%;
 +
width: 100%;
 +
}
 +
 
 +
.blue {
 +
background: steelblue;
 +
height: 300px;
 +
}
 +
 
 +
.green {
 +
background: mediumseagreen;
 +
height: 500px;
 +
}
 +
 
 +
 
 +
 
 +
@media only screen and (min-width:768px) {
 +
.main-nav {
 +
display: flex;
 +
justify-content: flex-end;
 +
}
 +
 
 +
.nav-btn {
 +
display: none !important;
 +
}
 +
 
 +
.has-sub-nav {
 +
position: relative;
 +
}
 +
 
 +
.sub-nav {
 +
  border: 1px solid  #bbb;
 +
border-radius: 3px;
 +
  background: #fff;
 +
}
 +
 +
.sub-nav::before {
 +
content: "";
 +
width: 0;
 +
height: 0;
 +
border-left: 10px solid transparent;
 +
border-right: 10px solid transparent;
 +
border-bottom: 10px solid #bbb;
 +
position: absolute;
 +
top: -10px;
 +
right: 20px;
 +
}
 +
 
 +
.open-nav {
 +
position: absolute;
 +
width: 180px;
 +
height: auto;
 +
top: 40px;
 +
right: 0;
 +
bottom: auto;
 +
left: auto;
 +
}
 +
 +
.open-nav li {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
.open-nav a {
 +
display: block;
 +
width: 100%;
 +
margin: 0;
 +
padding: 15px;
 +
font-size: 100%;
 +
color: #bbb;
 +
}
 +
 +
.open-nav a:active {
 +
  background: #297d89;
 +
}
 +
 
 
}
 
}
  
−
@media screen and (min-width: 1024px) {
+
@media screen and (min-width:960px) {
−
  .main-content {
+
.mc-container {
−
    width: 90%;
+
width: 960px;
−
  }
+
margin-left: auto;
−
  article p {
+
margin-right: auto;
−
    font-size: 1.25rem;
+
}
−
  }
+
−
  article img {
+
−
    width: 50%;
+
−
  }
+
 
}
 
}
  

Revision as of 06:27, 11 June 2015