Team:NCTU Formosa/style.css

/* --------------------------------

Primary style

---

*/

html

• {

 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing:grayscale;

}

• , *:after, *:before {

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

body {

 font-size: 100%;
 font-family: "Ubuntu", sans-serif;
 color: #f35535;
 background-color: #2e313d;

}

a {

 text-decoration: none;

}

/* --------------------------------

Modules - reusable parts of our design

---

*/

.cd-container {

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */

 width: 90%;
 max-width: 768px;
 margin: 0 auto;

} .cd-container::after {

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}

/* --------------------------------

Main components

---

*/

.cd-header {

 position: fixed;
 top: 10;
 left: 0;
 width: 100%;
 height: 50px;
 background: #f35535;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 z-index: 3;

} .cd-header:after {

 content: "";
 display: table;
 clear: both;

} .cd-header #cd-logo {

 float: left;
 margin: 13px 0 0 5%;

} .cd-header #cd-logo img {

 display: block;

} @media only screen and (min-width: 768px) {

 .cd-header {
   height: 70px;
 }
 .cd-header #cd-logo {
   margin: 23px 0 0 5%;
 }

}

.cd-main-nav {

 float: right;
 margin-right: 5%;
 width: 44px;
 height: 100%;
 background: url("../img/cd-icon-menu.svg") no-repeat center center;
 background-size: 44px 44px;
 cursor: pointer;

} .cd-main-nav ul {

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 -o-transform: translateY(-100%);
 transform: translateY(-100%);

} .cd-main-nav ul.is-visible {

 -webkit-transform: translateY(50px);
 -moz-transform: translateY(50px);
 -ms-transform: translateY(50px);
 -o-transform: translateY(50px);
 transform: translateY(50px);

} .cd-main-nav a {

 display: block;
 height: 50px;
 line-height: 50px;
 padding-left: 5%;
 background: #2e313d;
 border-top: 1px solid #353846;
 color: #FFF;

} @media only screen and (min-width: 768px) {

 .cd-main-nav {
   width: auto;
   height: auto;
   background: none;
   cursor: auto;
 }
 .cd-main-nav ul {
   position: static;
   width: auto;
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
   line-height: 70px;
 }
 .cd-main-nav ul.is-visible {
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
 }
 .cd-main-nav li {
   display: inline-block;
   margin-left: 1em;
 }
 .cd-main-nav a {
   display: inline-block;
   height: auto;
   line-height: normal;
   background: transparent;
   padding: .6em 1em;
   border-top: none;
   font-size: 13px;
   font-size: 0.8125rem;
   font-weight: bold;
   text-transform: uppercase;
 }

}

1. cd-intro {

 position:absolute;
 height: 300px;
 margin-top: 60px;
 z-index: 1;

}

1. cd-intro #cd-intro-background {

 height:100%;
 width: 100%;
 background: url("") no-repeat center center;
 background-size: cover;
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);

}

1. cd-intro #cd-intro-tagline {

 position: absolute;
 width: 90%;
 max-width: 1170px;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

}

1. cd-intro h1 {

 text-transform: uppercase;
 font-size: 24px;
 font-size: 1.5rem;
 text-align: center;
 color: #FFF;
 text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

} @media only screen and (min-width: 768px) {

 #cd-intro {
   height: 400px;
   margin-top: 70px;
 }
 #cd-intro h1 {
   font-size: 30px;
   font-size: 1.875rem;
 }

} @media only screen and (min-width: 1170px) {

 #cd-intro {
   position: fixed;
   /* do not overlap the header */
   top: 70px;
   left: 0;
   width: 100%;
   height: 500px;
   margin-top: 0;
 }
 #cd-intro h1 {
   font-size: 32px;
   font-size: 2rem;
 }

}

.cd-content {

 position: relative;
 padding: 2em 0;
 line-height: 1.6;
 color: #65676f;
 background-color: #f0f1e7;
 z-index: 2;

} .cd-content::before {

 /* subtle gradient right above the main content */
 content: ;
 position: absolute;
 bottom: 100%;
 left: 0;
 width: 100%;
 height: 50px;
 background: -webkit-linear-gradient( bottom , rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));
 background: linear-gradient(to top, rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));

} .no-cssgradients .cd-content::before {

 /* use Modernizr to detect whether the browser supports or not css gradients */
 display: none;

} .cd-content h2 {

 font-size: 20px;
 font-size: 1.25rem;

} .cd-content p {

 margin: 1em 0;

} @media only screen and (min-width: 768px) {

 .cd-content {
   line-height: 1.8;
 }
 .cd-content h2 {
   font-size: 30px;
   font-size: 1.875rem;
 }

} @media only screen and (min-width: 1170px) {

 .cd-content {
   padding: 4em 0;
   margin-top: 570px;
 }
 .cd-content p {
   font-size: 20px;
   font-size: 1.25rem;
 }

}