Difference between revisions of "Template:NCKU Tainan/Style"

 
(18 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
   <style>
 
   <style>
 
   /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
   /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
@import url("https://fonts.googleapis.com/css?family=Roboto|Open+Sans|Raleway|Montserrat:300|Noto+Sans|Noto+Serif|Kalam");
+
 
  
 
   /* Clear the default wiki settings */
 
   /* Clear the default wiki settings */
Line 9: Line 9:
 
   #sideMenu, #top_title, .patrollink  {display:none;}
 
   #sideMenu, #top_title, .patrollink  {display:none;}
 
   #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px; background-color: transparent;}
 
   #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px; background-color: transparent;}
−
   body { background-color:#eee; }
+
   body { background-color:#fbfbfb; }
 
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
   html {
 
   html {
 
     top: 0;
 
     top: 0;
 
   }
 
   }
−
    
+
   #HQ_page {
−
 
+
    margin-top: -12px;
 +
    background-color: #fbfbfb;
 +
  }
 
   #HQ_page h1,h2,h3,h4,h5 {
 
   #HQ_page h1,h2,h3,h4,h5 {
−
     font-family: 'Noto Serif', serif;
+
     font-family: 'Raleway', sans-serif;
 +
    padding: 0;
 
   }
 
   }
 
   #HQ_page p {
 
   #HQ_page p {
−
     font-family: 'Noto Serif', serif;
+
     font-family: 'Raleway', sans-serif;
 
   }
 
   }
 +
  #paragraph h1,h2,h3,h4,h5 {
 +
    padding: 0;
 +
  }
 +
 
 +
 +
 +
 +
 
   .vertical-container {
 
   .vertical-container {
−
    height: 100vh;
+
  height: 100vh;
−
    display: -webkit-flex;
+
  display: -webkit-flex;
−
    display:        flex;
+
  display:        flex;
−
    -webkit-align-items: center;
+
  -webkit-align-items: center;
−
            align-items: center;
+
          align-items: center;
−
    -webkit-justify-content: center;
+
  -webkit-justify-content: center;
−
            justify-content: center;
+
          justify-content: center;
  
  
−
    background-size: cover;
+
  background-size: cover;
−
    background-repeat: no-repeat;
+
  background-repeat: no-repeat;
−
    background-attachment: scroll;
+
  /*background-attachment: scroll;*/
−
    background-position: center;
+
  background-position: center;
−
  }
+
}
  
−
  #category{
+
#category{
−
    height: 100vh;
+
  height: 100vh;
−
    text-align: center;
+
  text-align: center;
−
    /*border: 2px solid rgb(228, 159, 5);*/
+
}
−
  }  
+
#category h1{
 +
  margin: auto;
 +
  color: #eee;
 +
  font-size: 120px;
 +
  font-family: 'Montserrat', sans-serif;
 +
  border: solid #eee;
 +
  border-width: 7px 0;
 +
}
 +
#category .dry {
 +
  color: #75deff;
 +
  border-color: #75deff;
 +
}
 +
#category .wet {
 +
  color: #93edd4;
 +
  border-color: #93edd4;
 +
}
 +
#category .hp {
 +
  color: #f9cb8f;
 +
  border-color: #f9cb8f;
 +
}
 +
#category h3 {
 +
  position: absolute;
 +
  left: 1vw;
 +
  top: 650px;
 +
  display: block;
 +
  z-index: 1;
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-style: italic;
 +
  color: #eee;
 +
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
 +
}
 +
 
 +
@media (max-width: 768px) {
 
   #category h1{
 
   #category h1{
−
    margin: auto;
+
     font-size: 48px;
−
    color: #eee;
+
−
     font-size: 120px;
+
−
    font-style: bolder;
+
−
    font-family: 'Kalam', cursive;
+
−
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
+
 
   }
 
   }
 +
  #category h3 {
 +
    display: none;
 +
  }
 +
  #paragraph h3 {
 +
    text-align: center;
 +
  }
 +
  #paragraph hr {
 +
    margin-left: 35%;
 +
    margin-right: 35%;
 +
  }
 +
  #paragraph .headinghr {
 +
    margin-left: 10%;
 +
    margin-right: 10%;
 +
  }
 +
}
 +
@media (min-width: 768px) {
 +
  #paragraph h1{
 +
    font-size: 54px;
 +
  }
 +
  #paragraph h2{
 +
    /*font-size: 40px;*/
 +
  }
 +
  #paragraph p, h3 {
 +
    text-align: justify;
 +
    padding-left: 30px
 +
  }
 +
  #paragraph ul, ol {
 +
    padding-left: 50px;
 +
  }
 +
  #paragraph hr {
 +
    margin-left: 45%;
 +
    margin-right: 45%;
 +
  }
 +
  #paragraph .headinghr {
 +
    margin-left: 20%;
 +
    margin-right: 20%;
 +
  }
 +
  #paragraph .padding_left {
 +
    padding-left: 3em;
 +
  }
 +
  #paragraph .leftbar::before {
 +
    content: '';
 +
    width: 0;
 +
    height: 50%;
 +
    position: absolute;
 +
    margin-top: 8%;
 +
    margin-left: 30px;
 +
    background-color: #75deff;
 +
    border: 5px solid #75deff;
 +
    top: 0;
 +
  }
 +
}
 +
 +
#paragraph {
 +
  font-family: 'Raleway', sans-serif;
 +
}
 +
#paragraph h1 {
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-weight: 300;
 +
  text-align: center;
 +
}
 +
#paragraph h2 {
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-weight: 500;
 +
  text-align: center;
 +
  line-height:40px;
 +
}
 +
#paragraph hr {
 +
  height: 5px;
 +
  border: 0;
 +
  padding: 0;
 +
  background-color: #93edd4;
 +
  margin-bottom: 45px;
 +
}
 +
#paragraph .bluehr {
 +
  background-color: #75deff;
 +
}
 +
#paragraph .orangehr {
 +
  background-color: #f9cb8f;
 +
}
 +
#paragraph h3 {
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-weight: 400;
 +
  margin-bottom: 50px;
 +
}
 +
#paragraph h4 {
 +
  font-family: 'Raleway', sans-serif;
 +
  font-weight: 400;
 +
  line-height: 25px;
 +
}
 +
#paragraph p {
 +
  font-family: 'Raleway', sans-serif;
 +
  font-size: 20px;
 +
  line-height: 30px;
 +
  margin-bottom: 40px;
 +
}
 +
#paragraph .margin_bottom {
 +
  margin-bottom: 100px;
 +
}
 +
/*leftline class start*/
 +
#paragraph .leftline {
 +
  border-left: 3px solid #93edd4;
 +
  position: relative;
 +
}
 +
#paragraph .leftline::before {
 +
  position: absolute;
 +
  left: -6px;
 +
  height: 10px;
 +
  width: 10px;
 +
  background: #93edd4;
 +
  content: "";
 +
  border-radius: 5px;
 +
}
 +
#paragraph .leftline::after {
 +
  position: absolute;
 +
  bottom: 0px;
 +
  left: -6px;
 +
  height: 10px;
 +
  width: 10px;
 +
  background: #93edd4;
 +
  content: "";
 +
  border-radius: 5px;
 +
  margin-left: 30px;
 +
}
 +
/*leftline class end*/
 +
#paragraph .imagerow {
 +
  margin-bottom: 10px;
 +
}
 +
#paragraph .imagerow p {
 +
  text-align: center;
 +
  font-size: 16px;
 +
  font-weight: 700;
 +
}
 +
#paragraph .underline {
 +
  border-style: solid;
 +
  border-width: 0 0 5px 0;
 +
  border-color: #00b3ea;
 +
}
 +
#paragraph ul, ol {
 +
  font-family: 'Raleway', sans-serif;
 +
  font-size: 20px;
 +
  line-height: 30px;
 +
  margin-bottom: 40px;
 +
}
 +
#paragraph a {
 +
  color: #93edd4;
 +
  font-weight: 900;
 +
}
 +
#paragraph .img-responsive {
 +
  display: block;
 +
  margin: 0 auto;
 +
}
 +
 +
@media (max-width: 992px) {
 +
  #sidemenu {
 +
    display: none;
 +
  }
 +
}
 +
 +
#sidemenu {
 +
  background-color: transparent;
 +
  margin-top: 30px;
 +
  padding-top: 10px;
 +
  padding-bottom: 10px;
 +
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
 +
  /*border-radius: 20px;
 +
  border-style: solid;
 +
  border-color: #93edd4;
 +
  border-width: 5px;*/
 +
  margin-left: 10px;
 +
  text-align: center;
 +
}
 +
 +
#sidemenu .list-group {
 +
  margin: auto;
 +
  line-height: 19px;
 +
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
 +
}
 +
 +
#sidemenu a {
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-size: 18px;
 +
  cursor: pointer;
 +
  color: #777;
 +
  background-color: transparent;
 +
  border: none;
 +
}
 +
#sidemenu i {
 +
  color: #93edd4;
 +
  cursor: pointer;
 +
}
 +
#sidemenu .dryarrow {
 +
  color: #75deff;
 +
}
 +
#sidemenu i:hover {
 +
  color: #555;
 +
}
 +
#sidemenu .top {
 +
  cursor: default;
 +
}
 +
#sidemenu a:hover {
 +
  background-color: #fcfcfc;
 +
  color: #555;
 +
  font-weight: bold;
 +
}
  
 +
#sidemenu hr {
 +
  height: 4px;
 +
  border: 0;
 +
  padding: 0;
 +
  background-color: #93edd4;
 +
  margin-top: -4px;
 +
  margin-bottom: 5px;
 +
  margin-left: 40%;
 +
  margin-right: 40%;
 +
}
 +
#sidemenu .dry {
 +
  background-color: #75deff;
 +
}
  
 +
.paragraph {
 +
  margin-top: 30px;
 +
  padding-top: 10px;
 +
  padding-bottom: 20px;
 +
  border-color: #333;
 +
  border-width: 5px;
 +
}
 
   </style>
 
   </style>
 
</html>
 
</html>

Latest revision as of 14:40, 1 November 2017