Team:SJTU-BioX-Shanghai/CSS:article

From 2014.igem.org

(Difference between revisions)
(Created page with "@charset "UTF-8"; - →CSS Document: @font-face { font-family: Rancho; src: url('../fonts/Rancho.ttf'); } @font-face { font-family: OpenSans-Regular; src: url('../fonts/Open_...")
 
Line 2: Line 2:
/* CSS Document */
/* CSS Document */
@font-face {
@font-face {
-
font-family: Rancho;
+
    font-family: Rancho;
-
src: url('../fonts/Rancho.ttf');
+
    src: url('../fonts/Rancho.ttf');
}
}
@font-face {
@font-face {
-
font-family: OpenSans-Regular;
+
    font-family: OpenSans-Regular;
-
src: url('../fonts/Open_Sans/OpenSans-Regular.ttf');
+
    src: url('../fonts/Open_Sans/OpenSans-Regular.ttf');
}
}
@font-face {
@font-face {
-
font-family: OpenSans-Bold;
+
    font-family: OpenSans-Bold;
-
src: url('../fonts/Open_Sans/OpenSans-Bold.ttf');
+
    src: url('../fonts/Open_Sans/OpenSans-Bold.ttf');
}
}
body
body
{
{
-
margin: 0;
+
    margin: 0;
-
padding: 0;
+
    padding: 0;
-
box-sizing: border-box;
+
    box-sizing: border-box;
}
}
Line 24: Line 24:
#headBanner
#headBanner
{
{
-
width: 100%;
+
    width: 100%;
-
background-image: url('../img/header.jpg');
+
    background-image: url('../img/header.jpg');
-
background-size: 100%;
+
    background-size: 100%;
-
overflow: auto;
+
    overflow: auto;
}
}
#headBanner h1
#headBanner h1
{
{
-
font-family: Rancho, sans-serif;
+
    font-family: Rancho, sans-serif;
-
font-size: 4em;
+
    font-size: 4em;
-
float: left;
+
    float: left;
-
color: #b9bfa7;
+
    color: #b9bfa7;
-
margin: 5% 5%;
+
    margin: 5% 5%;
-
font-weight: normal;
+
    font-weight: normal;
}
}
.logo
.logo
{
{
-
float: right;
+
    float: right;
-
width: 270px;
+
    width: 270px;
}
}
Line 49: Line 49:
#overview
#overview
{
{
-
background-color: #edecec;
+
    background-color: #edecec;
-
background-image: url('../img/back.png');
+
    background-image: url('../img/back.png');
-
background-repeat: repeat;  
+
    background-repeat: repeat;  
-
-webkit-columns: 2;
+
    -webkit-columns: 2;
-
-moz-columns: 2;
+
    -moz-columns: 2;
-
column-fill: balance;
+
    column-fill: balance;
-
-webkit-column-gap: 2em;
+
    -webkit-column-gap: 2em;
-
-moz-column-gap: 2em;
+
    -moz-column-gap: 2em;
-
column-gap: 2em;
+
    column-gap: 2em;
-
text-align: justify;
+
    text-align: justify;
-
padding: 3% 8%;
+
    padding: 3% 8%;
-
font-family: OpenSans-Regular;
+
    font-family: OpenSans-Regular;
-
line-height: 1.7em;
+
    line-height: 1.7em;
}
}
#overview h2
#overview h2
{
{
-
color: #8bcfd8;
+
    color: #8bcfd8;
-
text-shadow: 0px 0px 6px #FFFFFF;
+
    text-shadow: 0px 0px 6px #FFFFFF;
-
margin: 6px 3px 2px 3px;
+
    margin: 6px 3px 2px 3px;
-
+
   
}
}
#overview ol
#overview ol
{
{
-
margin-bottom: 1em;
+
    margin-bottom: 1em;
-
list-style-type: disc;
+
    list-style-type: disc;
}
}
Line 82: Line 82:
.fixed
.fixed
{
{
-
position: fixed;
+
    position: fixed;
-
top: 0;
+
    top: 0;
}
}
.right
.right
{
{
-
float: right;
+
    float: right;
}
}
article
article
{
{
-
margin: 3% 8%;
+
    margin: 3% 8%;
}
}
article p
article p
{
{
-
font-family:OpenSans-Regular, sans-serif;
+
    font-family:OpenSans-Regular, sans-serif;
-
text-align: justify;
+
    text-align: justify;
-
text-indent: 3em;
+
    text-indent: 3em;
-
word-spacing: 0.2em;
+
    word-spacing: 0.2em;
-
-moz-columns: 2;
+
    -moz-columns: 2;
-
-moz-column-gap: 2em;
+
    -moz-column-gap: 2em;
-
-webkit-column-count: 2;
+
    -webkit-column-count: 2;
-
-webkit-column-gap: 2em;
+
    -webkit-column-gap: 2em;
}
}
h2
h2
{
{
-
font-family: Rancho, sans-serif;
+
    font-family: Rancho, sans-serif;
-
font-size: 2em;
+
    font-size: 2em;
}
}
Line 116: Line 116:
nav.scroll-nav
nav.scroll-nav
{
{
-
margin: 0;
+
    margin: 0;
-
width: 15%;
+
    width: 15%;
-
box-sizing: border-box;
+
    box-sizing: border-box;
-
position: fixed;
+
    position: fixed;
-
left: 0;
+
    left: 0;
-
top: 40%;
+
    top: 40%;
-
width: 8%;
+
    width: 8%;
-
overflow: hidden;
+
    overflow: hidden;
}
}
nav.scroll-nav
nav.scroll-nav
{
{
-
padding: 15px 5px;
+
    padding: 15px 5px;
}
}
ol.scroll-nav__list{
ol.scroll-nav__list{
-
list-style-position: inside;
+
    list-style-position: inside;
-
padding-left: 15px;
+
    padding-left: 15px;
-
padding-right: 15px;
+
    padding-right: 15px;
-
padding-bottom: 0;
+
    padding-bottom: 0;
-
padding-top: 0;
+
    padding-top: 0;
-
white-space:nowrap;
+
    white-space:nowrap;
-
font-size: 14px;
+
    font-size: 14px;
-
line-height: 1.4em;
+
    line-height: 1.4em;
}
}
/*nav.scroll-nav
/*nav.scroll-nav
{
{
-
font-variant: small-caps;
+
    font-variant: small-caps;
}*/
}*/
span.scroll-nav__heading
span.scroll-nav__heading
{
{
-
color:#8E8E8E;
+
    color:#8E8E8E;
-
text-align:center;
+
    text-align:center;
-
width:inherit;
+
    width:inherit;
-
display:block;
+
    display:block;
}
}
.in-view
.in-view
{
{
-
font-weight:bold;
+
    font-weight:bold;
-
color: #14869f;
+
    color: #14869f;
}
}
a.scroll-nav__link:link
a.scroll-nav__link:link
{
{
-
text-decoration:none;
+
    text-decoration:none;
-
color:inherit;
+
    color:inherit;
}
}
ol.scroll-nav__list
ol.scroll-nav__list
{
{
-
color:#8E8E8E;
+
    color:#8E8E8E;
}
}
/* @end */
/* @end */

Latest revision as of 12:58, 7 October 2014

@charset "UTF-8"; /* CSS Document */ @font-face { 

   font-family: Rancho;
   src: url('../fonts/Rancho.ttf');

} @font-face { 

   font-family: OpenSans-Regular;
   src: url('../fonts/Open_Sans/OpenSans-Regular.ttf');

} @font-face { 

   font-family: OpenSans-Bold;
   src: url('../fonts/Open_Sans/OpenSans-Bold.ttf');

}

body { 

   margin: 0;
   padding: 0;
   box-sizing: border-box;

}


  1. headBanner

{ 

   width: 100%;
   background-image: url('../img/header.jpg');
   background-size: 100%;
   overflow: auto;

}

  1. headBanner h1

{ 

   font-family: Rancho, sans-serif;
   font-size: 4em;
   float: left;
   color: #b9bfa7;
   margin: 5% 5%;
   font-weight: normal;

} .logo { 

   float: right;
   width: 270px;

}


/* @group overview */

  1. overview

{ 

   background-color: #edecec;
   background-image: url('../img/back.png');
   background-repeat: repeat; 
   -webkit-columns: 2;
   -moz-columns: 2;
   column-fill: balance;
   -webkit-column-gap: 2em;
   -moz-column-gap: 2em;
   column-gap: 2em;
   text-align: justify;
   padding: 3% 8%;
   font-family: OpenSans-Regular;
   line-height: 1.7em;

}

  1. overview h2

{ 

   color: #8bcfd8;
   text-shadow: 0px 0px 6px #FFFFFF;
   margin: 6px 3px 2px 3px;

}

  1. overview ol

{ 

   margin-bottom: 1em;
   list-style-type: disc;

}


/* @end */


.fixed { 

   position: fixed;
   top: 0;

} .right { 

   float: right;

}

article { 

   margin: 3% 8%;

} article p { 

   font-family:OpenSans-Regular, sans-serif;
   text-align: justify;
   text-indent: 3em;
   word-spacing: 0.2em;
   -moz-columns: 2;
   -moz-column-gap: 2em;
   -webkit-column-count: 2;
   -webkit-column-gap: 2em;

}

h2 { 

   font-family: Rancho, sans-serif;
   font-size: 2em;

}

/* @group nav */

nav.scroll-nav { 

   margin: 0;
   width: 15%;
   box-sizing: border-box;
   position: fixed;
   left: 0;
   top: 40%;
   width: 8%;
   overflow: hidden;

}

nav.scroll-nav { 

   padding: 15px 5px;

} ol.scroll-nav__list{ 

   list-style-position: inside;
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 0;
   padding-top: 0;
   white-space:nowrap;
   font-size: 14px;
   line-height: 1.4em;

} /*nav.scroll-nav { 

   font-variant: small-caps;

}*/ span.scroll-nav__heading { 

   color:#8E8E8E;
   text-align:center;
   width:inherit;
   display:block;

} .in-view { 

   font-weight:bold;
   color: #14869f;

} a.scroll-nav__link:link { 

   text-decoration:none;
   color:inherit;

} ol.scroll-nav__list { 

   color:#8E8E8E;

}

/* @end */

Retrieved from "http://2014.igem.org/Team:SJTU-BioX-Shanghai/CSS:article"