Difference between revisions of "Template:Tsinghua-A/css/page-style"

 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
body{
 
body{
 
     background:#eee8aa60;
 
     background:#eee8aa60;
 +
    font-family: 'Lato', sans-serif;
 
}
 
}
  
 
div.content{
 
div.content{
 
     font-size:20px;
 
     font-size:20px;
 +
}
 +
div.content table{
 +
    margin: 30px auto;
 +
}
 +
div.content table *{
 +
    line-height: 200%;
 +
    font-size: 21px;
 +
}
 +
div.content table th,
 +
div.content table td{
 +
    padding: 0 15px;
 +
}
 +
div.content div.head-pic img{
 +
    width: 100%;
 +
}
 +
div.content div.anchor{
 +
    position: relative;
 +
    top: -100px;
 
}
 
}
 
div.content div.page-head{
 
div.content div.page-head{
Line 25: Line 44:
 
}
 
}
 
div.content div.page-content{
 
div.content div.page-content{
−
     margin:100px 60px;
+
     margin:100px 0px;
 
     text-align:left;
 
     text-align:left;
 
}
 
}
−
div.content div.page-content > p{
+
div.content div.page-content p,
 +
div.content div.page-content li{
 
     margin:15px 0;
 
     margin:15px 0;
 
     line-height:160%;
 
     line-height:160%;
 +
}
 +
div.content div.page-content a{
 +
    text-decoration: underline;
 +
    font-style: italic;
 +
    color: #005;
 +
}
 +
div.content div.page-content a:hover{
 +
    color: #00c;
 +
    font-size: 101%;
 +
}
 +
div.content div.page-content div.img{
 +
    width: 80%;
 +
    margin: 30px auto;
 +
}
 +
div.content div.page-content div.img div.imgcard{
 +
    margin: 20px auto;
 +
    width: 100%;
 +
    background: #fff;
 +
    overflow: hidden;
 +
    box-shadow:
 +
        0 4px 5px 0px rgba(0, 0, 0, 0.20),
 +
        0 1px 10px 0px rgba(0, 0, 0, 0.10),
 +
        0 2px 4px -1px rgba(0, 0, 0, 0.40);
 +
}
 +
div.content div.page-content div.img a{
 +
    text-decoration: none;
 +
    font-style: normal;
 +
    color: #333;
 +
    font-size: 100%;
 +
}
 +
div.content div.page-content div.img a,
 +
div.content div.page-content div.img a *{
 +
    transition:        0.2s all;
 +
    -webkit-transition: 0.2s all;
 +
    -moz-transition:    0.2s all;
 +
    -o-transition:      0.2s all;
 +
    -ms-transition:    0.2s all;
 +
}
 +
div.content div.page-content div.img a:hover *{
 +
    opacity: 0.8;
 +
}
 +
div.content div.page-content div.img a:hover div.imgcard{
 +
    box-shadow:
 +
        0 4px 5px 2px rgba(0, 0, 0, 0.50),
 +
        0 1px 10px 2px rgba(0, 0, 0, 0.40),
 +
        0 2px 4px 1px rgba(0, 0, 0, 0.70);
 +
}
 +
div.content div.page-content .left-col,
 +
div.content div.page-content .right-col,
 +
div.content div.page-content .col2{
 +
    width: 48%;
 +
    margin: 10px 0;
 +
    float: left;
 +
}
 +
div.content div.page-content .col2 + .col2{
 +
    margin-left: 4%;
 +
}
 +
div.content div.page-content div.col3{
 +
    width: 32%;
 +
    margin: 10px 0;
 +
    float: left;
 +
}
 +
div.content div.page-content div.col3 + div.col3{
 +
    margin-left: 2%;
 
}
 
}
  
 +
div.content div.page-content div.img div.imgcard p,
 +
div.content div.page-content div.img div.imgcard h2,
 +
div.content div.page-content div.img div.imgcard h3,
 +
div.content div.page-content div.img div.imgcard h4{
 +
    margin: 2%;
 +
}
 +
div.content div.page-content div.img div.imgcard p.comments{
 +
    color: #999;
 +
}
 +
div.content div.page-content img{
 +
    width: 100%;
 +
}
 +
 +
div.content div.page-content h1,
 +
div.content div.page-content h2,
 +
div.content div.page-content h3,
 +
div.content div.page-content h4,
 +
div.content div.page-content h5{
 +
    font-family: 'Monda', sans-serif;
 +
}
 +
div.content div.page-content h2{
 +
    font-size: 40px;
 +
    margin: 60px 0 30px;
 +
}
 +
div.content div.page-content h3{
 +
    font-size: 30px;
 +
    margin: 40px 0 20px;
 +
}
 +
div.content div.page-content h4{
 +
    font-size: 25px;
 +
    margin: 30px 0 15px;
 +
}
 +
 +
div.content div.page-content img.iconright,
 +
div.content div.page-content img.iconleft{
 +
    width: 130px;
 +
    margin: 30px;
 +
}
 +
div.content div.page-content img.iconright{
 +
    float: right;
 +
}
 +
div.content div.page-content img.iconleft{
 +
    float: left;
 +
}
 +
div.content div.page-content img.iconright + *,
 +
div.content div.page-content img.iconleft + *{
 +
    /*text*/
 +
}
  
 
div.pagefooter{
 
div.pagefooter{
Line 39: Line 171:
 
     margin-bottom: -20px;
 
     margin-bottom: -20px;
 
}
 
}
−
div.pagefooter div.footer-left-col,div.footer-right-col{
+
div.pagefooter div.footer-left-col,
 +
div.pagefooter div.footer-right-col{
 
     width:50%;
 
     width:50%;
 
     float:left;
 
     float:left;
Line 68: Line 201:
 
     color: #555;
 
     color: #555;
 
     background-color: #74bcf3;
 
     background-color: #74bcf3;
 +
}
 +
 +
div.attributionItem{
 +
    font-size: 20px;
 +
    margin: 20px 0;
 +
}
 +
div.attributionItem div .name{
 +
    font-style: italic;
 +
    font-weight: 700;
 +
    color: black;
 +
}
 +
div.attributionItem div .org{
 +
    font-weight: 700;
 +
}
 +
div.attributionItem div span.name + span.org{
 +
    margin-left: 20px;
 +
    font-size: 17px;
 +
}
 +
div#QA{
 +
    margin: 100px 0;
 +
    font-size: 24px;
 +
}
 +
div#QA > div.dialog{
 +
    margin: 20px 0;
 +
}
 +
div#QA > div.dialog > div.question{
 +
    margin: 5px 0;
 +
    font-style: italic;
 +
    color: #700;
 +
}
 +
div#QA > div.dialog > div.answer{
 +
    margin: 5px 0;
 
}
 
}

Latest revision as of 02:46, 18 October 2018

body{ 

   background:#eee8aa60;
   font-family: 'Lato', sans-serif;

}

div.content{ 

   font-size:20px;

} div.content table{ 

   margin: 30px auto;

} div.content table *{ 

   line-height: 200%;
   font-size: 21px;

} div.content table th, div.content table td{ 

   padding: 0 15px;

} div.content div.head-pic img{ 

   width: 100%;

} div.content div.anchor{ 

   position: relative;
   top: -100px;

} div.content div.page-head{ 

   margin:80px 0;
   text-align:right;
   border-right: 5px solid #393939;
   padding: 20px 20px 0px 0px;
   font-weight:700;
   text-transform:uppercase;

} div.content div.page-head .head-title{ 

   font-size:100px;
   line-height:100px;
   color:#9a6421;

} div.content div.page-head .head-subtitle{ 

   font-size:50px;
   line-height:50px;
   color:#000;

} div.content div.page-content{ 

   margin:100px 0px;
   text-align:left;

} div.content div.page-content p, div.content div.page-content li{ 

   margin:15px 0;
   line-height:160%;

} div.content div.page-content a{ 

   text-decoration: underline;
   font-style: italic;
   color: #005;

} div.content div.page-content a:hover{ 

   color: #00c;
   font-size: 101%;

} div.content div.page-content div.img{ 

   width: 80%;
   margin: 30px auto;

} div.content div.page-content div.img div.imgcard{ 

   margin: 20px auto;
   width: 100%;
   background: #fff;
   overflow: hidden;
   box-shadow:
       0 4px 5px 0px rgba(0, 0, 0, 0.20),
       0 1px 10px 0px rgba(0, 0, 0, 0.10),
       0 2px 4px -1px rgba(0, 0, 0, 0.40);

} div.content div.page-content div.img a{ 

   text-decoration: none;
   font-style: normal;
   color: #333;
   font-size: 100%;

} div.content div.page-content div.img a, div.content div.page-content div.img a *{ 

   transition:         0.2s all;
   -webkit-transition: 0.2s all;
   -moz-transition:    0.2s all;
   -o-transition:      0.2s all;
   -ms-transition:     0.2s all;

} div.content div.page-content div.img a:hover *{ 

   opacity: 0.8;

} div.content div.page-content div.img a:hover div.imgcard{ 

   box-shadow:
       0 4px 5px 2px rgba(0, 0, 0, 0.50),
       0 1px 10px 2px rgba(0, 0, 0, 0.40),
       0 2px 4px 1px rgba(0, 0, 0, 0.70);

} div.content div.page-content .left-col, div.content div.page-content .right-col, div.content div.page-content .col2{ 

   width: 48%;
   margin: 10px 0;
   float: left;

} div.content div.page-content .col2 + .col2{ 

   margin-left: 4%;

} div.content div.page-content div.col3{ 

   width: 32%;
   margin: 10px 0;
   float: left;

} div.content div.page-content div.col3 + div.col3{ 

   margin-left: 2%;

}

div.content div.page-content div.img div.imgcard p, div.content div.page-content div.img div.imgcard h2, div.content div.page-content div.img div.imgcard h3, div.content div.page-content div.img div.imgcard h4{ 

   margin: 2%;

} div.content div.page-content div.img div.imgcard p.comments{ 

   color: #999;

} div.content div.page-content img{ 

   width: 100%;

}

div.content div.page-content h1, div.content div.page-content h2, div.content div.page-content h3, div.content div.page-content h4, div.content div.page-content h5{ 

   font-family: 'Monda', sans-serif;

} div.content div.page-content h2{ 

   font-size: 40px;
   margin: 60px 0 30px;

} div.content div.page-content h3{ 

   font-size: 30px;
   margin: 40px 0 20px;

} div.content div.page-content h4{ 

   font-size: 25px;
   margin: 30px 0 15px;

}

div.content div.page-content img.iconright, div.content div.page-content img.iconleft{ 

   width: 130px;
   margin: 30px;

} div.content div.page-content img.iconright{ 

   float: right;

} div.content div.page-content img.iconleft{ 

   float: left;

} div.content div.page-content img.iconright + *, div.content div.page-content img.iconleft + *{ 

   /*text*/

}

div.pagefooter{ 

   text-align:left;
   background:#555;
   margin-bottom: -20px;

} div.pagefooter div.footer-left-col, div.pagefooter div.footer-right-col{ 

   width:50%;
   float:left;

} div.pagefooter div.footer-left-col{ } div.pagefooter div.footer-left-col img{ 

   margin-left:15%;

} div.pagefooter div.footer-right-col{ 

   text-align:center;

} div.pagefooter div.footer-right-col p{ 

   font-size:40px;
   color:#fff;

} div.pagefooter div.footer-right-col ul.contact-info{ 

   margin:20px;

} div.pagefooter div.footer-right-col li{ 

   color:#fff;

} div.pagefooter div.footer-right-col li a#mailto{ 

   color: #74bcf3;
   padding-right: 0;

} div.pagefooter div.footer-right-col li a#mailto:hover{ 

   color: #555;
   background-color: #74bcf3;

}

div.attributionItem{ 

   font-size: 20px;
   margin: 20px 0;

} div.attributionItem div .name{ 

   font-style: italic;
   font-weight: 700;
   color: black;

} div.attributionItem div .org{ 

   font-weight: 700;

} div.attributionItem div span.name + span.org{ 

   margin-left: 20px;
   font-size: 17px;

} div#QA{ 

   margin: 100px 0;
   font-size: 24px;

} div#QA > div.dialog{ 

   margin: 20px 0;

} div#QA > div.dialog > div.question{ 

   margin: 5px 0;
   font-style: italic;
   color: #700;

} div#QA > div.dialog > div.answer{ 

   margin: 5px 0;

}