Difference between revisions of "Team:Tianjin/Resources/CSS:maincss"

 
(7 intermediate revisions by 2 users not shown)
Line 22: Line 22:
 
12.2 Galleries
 
12.2 Galleries
 
--------------------------------------------------------------*/
 
--------------------------------------------------------------*/
 +
html {
 +
    font-size: 62.5%;
 +
    overflow-x:hidden;
 +
}
  
  
 +
/*--------------------------------------------------------------
 +
2.0 Typography
 +
--------------------------------------------------------------*/
 +
 +
body {
 +
    font-family: "futura pt", "futura-pt", arial, sans-serif;
 +
    font-style: normal;
 +
    font-weight: 300;
 +
    font-size: 16px;
 +
    font-size: 1.6rem;
 +
    line-height: 1.3;
 +
    color: #2f353c;
 +
}
 +
 +
body {
 +
    background-color:#e8f1f5;
 +
}
 +
 +
h1,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    clear: both;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.3;
 +
   
 +
 +
}
 +
 +
h2{
 +
    clear: both;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.3;
 +
  text-align:center;
 +
 +
}
 +
 +
 +
h1 {
 +
    font-size: 2.7 em;
 +
    font-weight: normal;
 +
    text-align:center;
 +
}
 +
 +
h2 {
 +
    font-size: 1.500em;
 +
    font-weight: 700;
 +
}
 +
 +
h3 {
 +
    font-size: 0.85em;
 +
    font-weight: 700;
 +
}
 +
 +
h4 {
 +
    font-size: 1em;
 +
    font-weight: 700;
 +
}
 +
 +
h5 {
 +
    font-size: 0.750em;
 +
    font-weight: 400;
 +
}
 +
 +
p {
 +
    font-size: 1.125em;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.3;
 +
    font-weight: 400;
 +
text-align:justify;
 +
 +
}
 +
/************************字体*******************************/
 +
@media screen and (min-width: 600px) {
 +
    h1 {
 +
        font-size: 2.800em;
 +
    }
 +
}
 +
 +
@media screen and (min-width: 1200px) {
 +
    h1 {
 +
        font-size: 3.85em;
 +
    }
 +
    h5 {
 +
        font-size: 0.875em;
 +
    }
 +
    p {
 +
        font-size: 1.250em;
 +
    }
 +
}
 +
 +
small {
 +
    font-size: 75%;
 +
}
 +
 +
big {
 +
    font-size: 125%;
 +
}
  
 +
 +
/*--------------------------------------------------------------
 +
3.0 Elements
 +
--------------------------------------------------------------*/
 +
 +
hr {
 +
    background-color: #ccc;
 +
    border: 0;
 +
    height: 1px;
 +
    margin-bottom: 1.5em;
 +
}
 +
 +
ul,
 +
ol {
 +
    margin: 0;
 +
}
 +
 +
ul {
 +
    list-style: none;
 +
}
 +
 +
ol {
 +
    list-style: decimal;
 +
}
 +
 +
li>ul,
 +
li>ol {
 +
    margin-bottom: 0;
 +
    margin-left: 1.5em;
 +
}
 +
 +
figure {
 +
    margin: 0;
 +
}
 +
 +
/*--------------------------------------------------------------
 +
4.0 Forms
 +
--------------------------------------------------------------*/
 +
 +
textarea {
 +
    overflow: auto;
 +
    /* Removes default vertical scrollbar in IE6/7/8/9 */
 +
    padding-left: 3px;
 +
    vertical-align: top;
 +
    /* Improves readability and alignment in all browsers */
 +
    width: 100%;
 +
}
 +
 +
#pdfviewer{
 +
margin:auto
 +
}
  
 
/*--------------------------------------------------------------
 
/*--------------------------------------------------------------
 
10.1 Posts and pages
 
10.1 Posts and pages
 
--------------------------------------------------------------*/
 
--------------------------------------------------------------*/
 +
 +
#primary {
 +
    background-color: #e8f1f5;<!--背景颜色-->
 +
    float: left;
 +
    width: 90%;
 +
    height: 100%;
 +
    padding: 50px 10px 0;
 +
    margin:0 auto;
 +
}
 +
 +
.site-main {
 +
    padding: 0px 20px 0;
 +
}
 +
 +
article {
 +
    width: 100%;
 +
    max-width: 1160px;
 +
    height: 100%;
 +
    margin: 10px auto 0 auto;
 +
    padding: 0;
 +
}
 +
 +
article img {
 +
    max-width: 100%;
 +
}
 +
 +
.entry-header {
 +
    text-align: center;
 +
    ;
 +
}
 +
 +
.entry-title {
 +
    font-size: 2.625em;
 +
    font-weight: 700;
 +
    line-height: 1;
 +
    margin: 20px 0 40px;
 +
    color: #004a7c;
 +
 +
}
 +
<!--title颜色-->
 +
.entry-header p {
 +
    font-size: 1.5em;
 +
    line-height: 1.3;
 +
    margin: 0 auto 0.833em;
 +
    width: 100%;
 +
    max-width: 580px;
 +
}
 +
 +
.entry-header hr {
 +
    background-color: #2f353c;
 +
    border: 0 none;
 +
    width: 64px;
 +
    height: 12px;
 +
    margin: 0 auto 40px;
 +
}
 +
 +
hr.short {
 +
    display: inline-block;
 +
    background-color: #2f353c;
 +
    border: 0 none;
 +
    width: 31px;
 +
    height: 7px;
 +
    margin-bottom: 1.500em;
 +
}
 +
 +
.form-content {
 +
    width: 50%;
 +
    margin: 1.5em auto 0;
 +
}
 +
 +
article .entry-content img {
 +
    margin-bottom: 1em;
 +
}
 +
 +
.text-center {
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 580px;
 +
}
 +
 +
.about-main {
 +
    width: 80%;
 +
    max-width: 1200px;
 +
    height: 100%;
 +
    margin: 0 auto;
 +
    padding: 0 20px;
 +
}
 +
 +
.about-main article hr,
 +
.contact .contact-header hr {
 +
    background-color: #2f353c;
 +
    border: 0 none;
 +
    height: 12px;
 +
    margin: 1.3em auto;
 +
    width: 64px;
 +
}
 +
 +
.hello {
 +
    text-align: center;
 +
}
 +
 +
.services,
 +
.approach {
 +
    text-align: center;
 +
    margin-bottom: 180px;
 +
}
 +
 +
.process {
 +
    text-align: center;
 +
    margin-bottom: 90px;
 +
}
 +
 +
#hello h1 {
 +
    font-size: 2.625em;
 +
    font-weight: 700;
 +
    line-height: 1;
 +
    margin-top: 20px;
 +
    text-align: center;
 +
    color: #004a7c;
 +
}
 +
 +
#hello p{
 +
font-size: 1.325em;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.5;
 +
    font-weight: 400;
 +
text-align:justify;
 +
}
 +
 +
 +
.services p,
 +
.approach p,
 +
.process p {
 +
    font-size: 1.5em;
 +
    line-height: 1.3;
 +
    letter-spacing: 0.2px;
 +
    max-width: 550px;
 +
    margin: 0 auto 1.3em;
 +
}
 +
 +
.services .content-column p,
 +
.approach .content-column p,
 +
.process .content-column p {
 +
    font-size: 1em;
 +
}
 +
 +
.services .content-column,
 +
.approach .content-column,
 +
.process .content-column {
 +
    text-align: left;
 +
}
 +
 +
#hello h2{
 +
clear: both;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.5;
 +
text-align:left;
 +
color: #004a7c;
 +
}
 +
 +
.process h2 {
 +
    font-size: 4.250em;
 +
    font-weight: 700;
 +
}
 +
 +
.services h2,
 +
.approach h2,
 +
.process h3 {
 +
    font-size: 1.500em;
 +
    font-weight: 700;
 +
    border-top: 1px solid #c8c4bb;
 +
    border-bottom: 1px solid #c8c4bb;
 +
    padding: 10px 0;
 +
    margin-bottom: 10px;
 +
}
 +
 +
 +
@media screen and (max-width: 768px) {
 +
    .process .one_fourth {
 +
        height: 300px;
 +
    }
 +
    .layer2,
 +
    .layer3 {
 +
        display: none;
 +
    }
 +
    .layer4 {
 +
        display: block;
 +
        position: absolute;
 +
        top: 50px;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        z-index: 902;
 +
        text-align: center;
 +
    }
 +
    #content {
 +
        margin: 70px auto 0;
 +
    }
 +
    .form-content {
 +
        width: 100%;
 +
    }
 +
    .menu-categories-container ul {
 +
        margin: 80px 0 30px;
 +
    }
 +
   
 +
   
 +
}
 +
 +
 +
 +
@media screen and (max-width: 640px) {
 +
    .layer4 {
 +
        display: none;
 +
    }
 +
    .layer6 {
 +
        display: block;
 +
        position: absolute;
 +
        top: 50px;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        z-index: 902;
 +
    }
 +
    .intro-text {
 +
        max-width: 640px;
 +
        padding: 20px;
 +
    }
 +
    .overview-testimonial,
 +
    .overview-credits {
 +
        width: 100%;
 +
    }
 +
    .overview-overview h2,
 +
    .overview-overview p,
 +
    .overview-testimonial h2,
 +
    .overview-testimonial p,
 +
    .overview-credits h2 {
 +
        margin: 0 0 20px 0;
 +
    }
 +
    .entry-header p {
 +
        width: 100%;
 +
    }
 +
    .full_width,
 +
    .one_half,
 +
    .one_third,
 +
    .two_third,
 +
    .one_fourth,
 +
    .three_fourth,
 +
    .one_fifth,
 +
    .two_fifth,
 +
    .three_fifth,
 +
    .four_fifth,
 +
    .one_sixth,
 +
    .five_sixth {
 +
        clear: both;
 +
        margin-bottom: 1em;
 +
        margin-left: 0;
 +
        margin-right: 0;
 +
        width: 100% !important;
 +
        height: 100% !important;
 +
    }
 +
    .one_half>div {
 +
        padding: 20px 0 !important;
 +
    }
 +
    .one_third>div {
 +
        padding: 0 20px 30px !important;
 +
    }
 +
    .contact-details,
 +
    .contact-text {
 +
        padding: 0;
 +
        width: 100%;
 +
    }
 +
    #pod-content {
 +
        padding: 10px 0;
 +
    }
 +
    .site-main {
 +
        padding: 50px 0 0;
 +
    }
 +
    .overview-credits p {
 +
        margin-left: 0;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 480px) {
 +
    .overview-header {
 +
        height: auto;
 +
    }
 +
    .work-pod,
 +
    .news-pod,
 +
    .tweet-pod {
 +
        width: 100%
 +
    }
 +
    .news-summary-image,
 +
    .news-summary-text {
 +
        width: 260px;
 +
    }
 +
    .news-pod .news-inner,
 +
    .tweet-pod .tweet-inner {
 +
        float: none;
 +
        margin: 0 auto;
 +
        width: 260px;
 +
    }
 +
    .hello {
 +
        margin: 60px 0 100px;
 +
    }
 +
    .services,
 +
    .approach {
 +
        margin-bottom: 100px;
 +
    }
 +
    .news-summary-text .date {
 +
        display: none;
 +
    }
 +
    .news-summary-text h2 {
 +
        margin-top: 1em;
 +
    }
 +
    .contact-details,
 +
    .contact-text,
 +
    .contact-map {
 +
        padding: 0;
 +
    }
 +
    .overlay {
 +
        display: none;
 +
    }
 +
    .contact-details p,
 +
    .contact-text h2 {
 +
        font-size: 1.250em;
 +
    }
 +
    .phone:before,
 +
    email:before,
 +
    .address:before {
 +
        background: none;
 +
    }
 +
    .phone,
 +
    .email,
 +
    .address {
 +
        padding-left: 0;
 +
    }
 +
    .footer-content {
 +
        display: none;
 +
    }
 +
    .footer-mobile {
 +
        display: block;
 +
    }
 +
}

Latest revision as of 08:41, 27 October 2017

/*-------------------------------------------------------------- >>> TABLE OF CONTENTS:

1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Infinite scroll 12.0 Media 12.1 Captions 12.2 Galleries

*/

html { 

   font-size: 62.5%;
   overflow-x:hidden;

}


/*-------------------------------------------------------------- 2.0 Typography

*/

body { 

   font-family: "futura pt", "futura-pt", arial, sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.3;
   color: #2f353c;

}

body { 

   background-color:#e8f1f5;

}

h1, h3, h4, h5, h6 { 

   clear: both;
   margin-bottom: 1.500em;
   line-height: 1.3;

}

h2{ 

   clear: both;
   margin-bottom: 1.500em;
   line-height: 1.3;
  text-align:center;

}


h1 { 

   font-size: 2.7 em;
   font-weight: normal;
   text-align:center;

}

h2 { 

   font-size: 1.500em;
   font-weight: 700;

}

h3 { 

   font-size: 0.85em;
   font-weight: 700;

}

h4 { 

   font-size: 1em;
   font-weight: 700;

}

h5 { 

   font-size: 0.750em;
   font-weight: 400;

}

p { 

   font-size: 1.125em;
   margin-bottom: 1.500em;
   line-height: 1.3;
   font-weight: 400;

text-align:justify;

} /************************字体*******************************/ @media screen and (min-width: 600px) { 

   h1 {
       font-size: 2.800em;
   }

}

@media screen and (min-width: 1200px) { 

   h1 {
       font-size: 3.85em;
   }
   h5 {
       font-size: 0.875em;
   }
   p {
       font-size: 1.250em;
   }

}

small { 

   font-size: 75%;

}

big { 

   font-size: 125%;

}


/*-------------------------------------------------------------- 3.0 Elements

*/

hr { 

   background-color: #ccc;
   border: 0;
   height: 1px;
   margin-bottom: 1.5em;

}

ul, ol { 

   margin: 0;

}

ul { 

   list-style: none;

}

ol { 

   list-style: decimal;

}

li>ul, li>ol { 

   margin-bottom: 0;
   margin-left: 1.5em;

}

figure { 

   margin: 0;

}

/*-------------------------------------------------------------- 4.0 Forms

*/

textarea { 

   overflow: auto;
   /* Removes default vertical scrollbar in IE6/7/8/9 */
   padding-left: 3px;
   vertical-align: top;
   /* Improves readability and alignment in all browsers */
   width: 100%;

}

  1. pdfviewer{

margin:auto }

/*-------------------------------------------------------------- 10.1 Posts and pages

*/
  1. primary {
   background-color: #e8f1f5;
   float: left;
   width: 90%;
   height: 100%;
   padding: 50px 10px 0;
   margin:0 auto;

}

.site-main { 

   padding: 0px 20px 0;

}

article { 

   width: 100%;
   max-width: 1160px;
   height: 100%;
   margin: 10px auto 0 auto;
   padding: 0;

}

article img { 

   max-width: 100%;

}

.entry-header { 

   text-align: center;
   ;

}

.entry-title { 

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin: 20px 0 40px;
   color: #004a7c;

} .entry-header p { 

   font-size: 1.5em;
   line-height: 1.3;
   margin: 0 auto 0.833em;
   width: 100%;
   max-width: 580px;

}

.entry-header hr { 

   background-color: #2f353c;
   border: 0 none;
   width: 64px;
   height: 12px;
   margin: 0 auto 40px;

}

hr.short { 

   display: inline-block;
   background-color: #2f353c;
   border: 0 none;
   width: 31px;
   height: 7px;
   margin-bottom: 1.500em;

}

.form-content { 

   width: 50%;
   margin: 1.5em auto 0;

}

article .entry-content img { 

   margin-bottom: 1em;

}

.text-center { 

   margin: 0 auto;
   width: 100%;
   max-width: 580px;

}

.about-main { 

   width: 80%;
   max-width: 1200px;
   height: 100%;
   margin: 0 auto;
   padding: 0 20px;

}

.about-main article hr, .contact .contact-header hr { 

   background-color: #2f353c;
   border: 0 none;
   height: 12px;
   margin: 1.3em auto;
   width: 64px;

}

.hello { 

   text-align: center;

}

.services, .approach { 

   text-align: center;
   margin-bottom: 180px;

}

.process { 

   text-align: center;
   margin-bottom: 90px;

}

  1. hello h1 {
   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin-top: 20px;
   text-align: center;
   color: #004a7c;

}

  1. hello p{

font-size: 1.325em; 

   margin-bottom: 1.500em;
   line-height: 1.5;
   font-weight: 400;

text-align:justify; }


.services p, .approach p, .process p { 

   font-size: 1.5em;
   line-height: 1.3;
   letter-spacing: 0.2px;
   max-width: 550px;
   margin: 0 auto 1.3em;

}

.services .content-column p, .approach .content-column p, .process .content-column p { 

   font-size: 1em;

}

.services .content-column, .approach .content-column, .process .content-column { 

   text-align: left;

}

  1. hello h2{

clear: both; 

   margin-bottom: 1.500em;
   line-height: 1.5;

text-align:left; color: #004a7c; }

.process h2 { 

   font-size: 4.250em;
   font-weight: 700;

}

.services h2, .approach h2, .process h3 { 

   font-size: 1.500em;
   font-weight: 700;
   border-top: 1px solid #c8c4bb;
   border-bottom: 1px solid #c8c4bb;
   padding: 10px 0;
   margin-bottom: 10px;

}


@media screen and (max-width: 768px) { 

   .process .one_fourth {
       height: 300px;
   }
   .layer2,
   .layer3 {
       display: none;
   }
   .layer4 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
       text-align: center;
   }
   #content {
       margin: 70px auto 0;
   }
   .form-content {
       width: 100%;
   }
   .menu-categories-container ul {
       margin: 80px 0 30px;
   }

}


@media screen and (max-width: 640px) { 

   .layer4 {
       display: none;
   }
   .layer6 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
   }
   .intro-text {
       max-width: 640px;
       padding: 20px;
   }
   .overview-testimonial,
   .overview-credits {
       width: 100%;
   }
   .overview-overview h2,
   .overview-overview p,
   .overview-testimonial h2,
   .overview-testimonial p,
   .overview-credits h2 {
       margin: 0 0 20px 0;
   }
   .entry-header p {
       width: 100%;
   }
   .full_width,
   .one_half,
   .one_third,
   .two_third,
   .one_fourth,
   .three_fourth,
   .one_fifth,
   .two_fifth,
   .three_fifth,
   .four_fifth,
   .one_sixth,
   .five_sixth {
       clear: both;
       margin-bottom: 1em;
       margin-left: 0;
       margin-right: 0;
       width: 100% !important;
       height: 100% !important;
   }
   .one_half>div {
       padding: 20px 0 !important;
   }
   .one_third>div {
       padding: 0 20px 30px !important;
   }
   .contact-details,
   .contact-text {
       padding: 0;
       width: 100%;
   }
   #pod-content {
       padding: 10px 0;
   }
   .site-main {
       padding: 50px 0 0;
   }
   .overview-credits p {
       margin-left: 0;
   }

}

@media screen and (max-width: 480px) { 

   .overview-header {
       height: auto;
   }
   .work-pod,
   .news-pod,
   .tweet-pod {
       width: 100%
   }
   .news-summary-image,
   .news-summary-text {
       width: 260px;
   }
   .news-pod .news-inner,
   .tweet-pod .tweet-inner {
       float: none;
       margin: 0 auto;
       width: 260px;
   }
   .hello {
       margin: 60px 0 100px;
   }
   .services,
   .approach {
       margin-bottom: 100px;
   }
   .news-summary-text .date {
       display: none;
   }
   .news-summary-text h2 {
       margin-top: 1em;
   }
   .contact-details,
   .contact-text,
   .contact-map {
       padding: 0;
   }
   .overlay {
       display: none;
   }
   .contact-details p,
   .contact-text h2 {
       font-size: 1.250em;
   }
   .phone:before,
   email:before,
   .address:before {
       background: none;
   }
   .phone,
   .email,
   .address {
       padding-left: 0;
   }
   .footer-content {
       display: none;
   }
   .footer-mobile {
       display: block;
   }

}