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

 
(37 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
@charset "utf-8";
+
/*--------------------------------------------------------------
−
html,
+
>>> TABLE OF CONTENTS:
−
body,
+
----------------------------------------------------------------
−
div,
+
1.0 Reset
−
span,
+
2.0 Typography
−
h1,
+
3.0 Elements
−
h2,
+
4.0 Forms
−
h3,
+
5.0 Navigation
−
h4,
+
5.1 Links
−
h5,
+
5.2 Menus
−
h6,
+
6.0 Accessibility
−
p,
+
7.0 Alignments
−
a,
+
8.0 Clearings
−
ul,
+
9.0 Widgets
−
li{
+
10.0 Content
−
    border: 0;
+
10.1 Posts and pages
−
    font-family: inherit;
+
10.2 Asides
−
    font-size: 100%;
+
10.3 Comments
−
    font-style: inherit;
+
11.0 Infinite scroll
−
    font-weight: inherit;
+
12.0 Media
−
    margin: 0;
+
12.1 Captions
−
    outline: 0;
+
12.2 Galleries
−
    padding: 0;
+
--------------------------------------------------------------*/
−
    vertical-align: baseline;
+
−
}
+
−
 
+
 
html {
 
html {
 
     font-size: 62.5%;
 
     font-size: 62.5%;
−
    /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
+
     overflow-x:hidden;
−
     overflow-y: scroll;
+
−
    /* Keeps page centered in all browsers regardless of content height */
+
−
    -webkit-text-size-adjust: 100%;
+
−
    /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
+
−
    -ms-text-size-adjust: 100%;
+
−
    /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
+
−
}/* CSS Document */
+
−
 
+
−
article,
+
−
header,
+
−
main,
+
−
section {
+
−
    display: block;
+
 
}
 
}
  
−
ol,
 
−
ul {
 
−
    list-style: none;
 
−
}
 
−
html,
 
−
body {
 
−
    height: 100%;
 
−
}
 
  
−
#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 */
 
−
}
 
−
.home header {
 
−
    margin-top: -50px;
 
−
}
 
−
.dividingline{
 
−
background:#e8f1f5 ;
 
−
width:500px;
 
−
hight:200px;
 
−
padding:4px;
 
−
border:1px thin #1D1B1B;
 
−
}
 
−
.divide img{
 
−
margin:0px 48% 80px 48%;
 
−
width:4.8rem;
 
−
 
−
}
 
 
/*--------------------------------------------------------------
 
/*--------------------------------------------------------------
 
2.0 Typography
 
2.0 Typography
 
--------------------------------------------------------------*/
 
--------------------------------------------------------------*/
  
−
body,
+
body {
−
button,
+
−
input,
+
−
select,
+
−
textarea {
+
 
     font-family: "futura pt", "futura-pt", arial, sans-serif;
 
     font-family: "futura pt", "futura-pt", arial, sans-serif;
 
     font-style: normal;
 
     font-style: normal;
Line 94: Line 43:
  
 
body {
 
body {
−
     background-color:#e8f1f5; ;
+
     background-color:#e8f1f5;  
 
}
 
}
  
 
h1,
 
h1,
−
h2,
 
 
h3,
 
h3,
 
h4,
 
h4,
Line 106: Line 54:
 
     margin-bottom: 1.500em;
 
     margin-bottom: 1.500em;
 
     line-height: 1.3;
 
     line-height: 1.3;
 +
   
 +
 
}
 
}
 +
 +
h2{
 +
    clear: both;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.3;
 +
  text-align:center;
 +
 +
}
 +
  
 
h1 {
 
h1 {
−
     font-size: 1.750em;
+
     font-size: 2.7 em;
−
     font-weight: 700;
+
     font-weight: normal;
 +
    text-align:center;
 
}
 
}
  
Line 119: Line 79:
  
 
h3 {
 
h3 {
−
     font-size: 1.250em;
+
     font-size: 0.85em;
 
     font-weight: 700;
 
     font-weight: 700;
 
}
 
}
Line 131: Line 91:
 
     font-size: 0.750em;
 
     font-size: 0.750em;
 
     font-weight: 400;
 
     font-weight: 400;
−
    letter-spacing: 0.6px;
 
−
    text-transform: uppercase;
 
 
}
 
}
  
Line 140: Line 98:
 
     line-height: 1.3;
 
     line-height: 1.3;
 
     font-weight: 400;
 
     font-weight: 400;
 +
text-align:justify;
 +
 
}
 
}
−
 
+
/************************字体*******************************/
−
small {
+
−
    font-size: 1rem
+
−
}
+
−
 
+
 
@media screen and (min-width: 600px) {
 
@media screen and (min-width: 600px) {
 
     h1 {
 
     h1 {
−
         font-size: 2.000em;
+
         font-size: 2.800em;
 
     }
 
     }
 
}
 
}
Line 154: Line 110:
 
@media screen and (min-width: 1200px) {
 
@media screen and (min-width: 1200px) {
 
     h1 {
 
     h1 {
−
         font-size: 2.625em;
+
         font-size: 3.85em;
 
     }
 
     }
 
     h5 {
 
     h5 {
Line 162: Line 118:
 
         font-size: 1.250em;
 
         font-size: 1.250em;
 
     }
 
     }
−
}
 
−
 
−
b,
 
−
strong {
 
−
    font-weight: bold;
 
−
}
 
−
 
−
dfn,
 
−
cite,
 
−
em,
 
−
i {
 
−
    font-style: italic;
 
−
}
 
−
 
−
blockquote {
 
−
    margin: 0 1.5em;
 
−
}
 
−
 
−
address {
 
−
    margin: 0 0 1.5em;
 
−
}
 
−
 
−
pre {
 
−
    background: #eee;
 
−
    font-family: "Courier 10 Pitch", Courier, monospace;
 
−
    font-size: 15px;
 
−
    font-size: 1.5rem;
 
−
    line-height: 1.6;
 
−
    margin-bottom: 1.6em;
 
−
    max-width: 100%;
 
−
    overflow: auto;
 
−
    padding: 1.6em;
 
−
}
 
−
 
−
code,
 
−
kbd,
 
−
tt,
 
−
var {
 
−
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 
−
    font-size: 15px;
 
−
    font-size: 1.5rem;
 
−
}
 
−
 
−
abbr,
 
−
acronym {
 
−
    border-bottom: 1px dotted #666;
 
−
    cursor: help;
 
−
}
 
−
 
−
mark,
 
−
ins {
 
−
    background: #fff9c0;
 
−
    text-decoration: none;
 
−
}
 
−
 
−
sup,
 
−
sub {
 
−
    font-size: 75%;
 
−
    height: 0;
 
−
    line-height: 0;
 
−
    position: relative;
 
−
    vertical-align: baseline;
 
−
}
 
−
 
−
sup {
 
−
    bottom: 1ex;
 
−
}
 
−
 
−
sub {
 
−
    top: .5ex;
 
 
}
 
}
  
Line 273: Line 159:
 
}
 
}
  
−
dt {
+
figure {
−
     font-weight: bold;
+
     margin: 0;
 
}
 
}
  
−
dd {
+
/*--------------------------------------------------------------
−
     margin: 0 1.5em 1.5em;
+
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
 +
}
  
−
/* img {
+
/*--------------------------------------------------------------
−
height: auto;
+
10.1 Posts and pages
−
max-width: 100%;
+
--------------------------------------------------------------*/
−
} */
+
  
−
figure {
+
#primary {
−
     margin: 0;
+
    background-color: #e8f1f5;<!--背景颜色-->
 +
    float: left;
 +
    width: 90%;
 +
    height: 100%;
 +
    padding: 50px 10px 0;
 +
     margin:0 auto;
 
}
 
}
  
−
table {
+
.site-main {
−
     margin: 0 0 1.5em;
+
     padding: 0px 20px 0;
 +
}
 +
 
 +
article {
 
     width: 100%;
 
     width: 100%;
 +
    max-width: 1160px;
 +
    height: 100%;
 +
    margin: 10px auto 0 auto;
 +
    padding: 0;
 
}
 
}
  
−
th {
+
article img {
−
     font-weight: bold;
+
     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 {
 
.hello {
 
     text-align: center;
 
     text-align: center;
Line 314: Line 295:
 
}
 
}
  
−
.hello h1,
+
#hello h1 {
−
.services h1,
+
−
.approach h1,
+
−
.process h1,
+
−
.contact h1 {
+
 
     font-size: 2.625em;
 
     font-size: 2.625em;
 
     font-weight: 700;
 
     font-weight: 700;
Line 327: Line 304:
 
}
 
}
  
−
.hello p,
+
#hello p{
 +
font-size: 1.325em;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.5;
 +
    font-weight: 400;
 +
text-align:justify;
 +
}
 +
 +
 
 
.services p,
 
.services p,
 
.approach p,
 
.approach p,
Line 348: Line 333:
 
.process .content-column {
 
.process .content-column {
 
     text-align: left;
 
     text-align: left;
 +
}
 +
 +
#hello h2{
 +
clear: both;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1.5;
 +
text-align:left;
 +
color: #004a7c;
 
}
 
}
  
Line 355: Line 348:
 
}
 
}
  
−
.hello h2,
 
 
.services h2,
 
.services h2,
 
.approach h2,
 
.approach h2,
Line 367: Line 359:
 
}
 
}
  
−
.contact-header {
 
−
    text-align: center;
 
−
}
 
  
−
.contact-map {
+
@media screen and (max-width: 768px) {
−
     float: left;
+
     .process .one_fourth {
−
     width: 33%;
+
        height: 300px;
−
     padding: 0 1.25em 0 0;
+
    }
 +
    .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;
 +
    }
 +
   
 +
   
 
}
 
}
  
−
.contact-text {
 
−
    float: left;
 
−
    width: 33%;
 
−
    padding: 0 0.75em 0;
 
−
}
 
  
−
.contact-details {
 
−
    float: left;
 
−
    width: 33%;
 
−
    padding: 0 0 0 1.25em;
 
−
}
 
  
−
.contact-map {
+
@media screen and (max-width: 640px) {
−
     height: 350px;
+
    .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;
 +
    }
 
}
 
}
  

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;
   }

}