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

Line 207: Line 207:
 
     padding: 50px 10px 0;
 
     padding: 50px 10px 0;
 
     margin:0 auto;
 
     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;
 
    }
 
 
}
 
}

Revision as of 00:52, 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


*/


/*-------------------------------------------------------------- 1.0 Reset


*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a{

   border: 0;
   font-family: inherit;
   font-size: 100%;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;

}

html {

   font-size: 62.5%;
   overflow-y: scroll;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   

}

  • ,
    before,
    after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

article{

   display: block;

}

a img {

   border: 0;

}

  • {
   margin: 0;

}

html, body {

   height: 100%;

}

  1. page {
   min-height: 100%;
   height: auto !important;
   /* This line and the next line are not necessary unless you need IE6 support */
   height: 100%;
   margin: 0px auto -87px;
   /* the bottom margin is the negative value of the footer's height */

}

/*-------------------------------------------------------------- 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%;

}


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


*/


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

}