Difference between revisions of "Template:NCKU Tainan/css/hardware"

Line 1: Line 1:
   .knob{
+
.CO2img {
 +
    margin-top: 30px;
 +
}
 +
 
 +
   .knob {
 
       margin-top: 30px;
 
       margin-top: 30px;
      }  
+
  }
+
  
.list-group-item {
+
 
 +
  .list-group-item {
 
       margin: 10px 0 !important;
 
       margin: 10px 0 !important;
                    }
+
  }
  
   .reference{
+
   .reference {
 
       margin-top: 600px !important;
 
       margin-top: 600px !important;
          }
+
  }
  
  
   .result{
+
   .result {
 
       margin-right: 300px !important;
 
       margin-right: 300px !important;
 
       margin-left: 300px !important;
 
       margin-left: 300px !important;
        }
+
  }
  
   .pic1{
+
   .pic1 {
 
       padding-left: 130px;
 
       padding-left: 130px;
      }  
+
  }
  
   .pic4{
+
   .pic4 {
 
       padding-left: none !important;
 
       padding-left: none !important;
      }  
+
  }
  
   .pic3{
+
   .pic3 {
 
       padding-left: 150px;
 
       padding-left: 150px;
      }  
+
  }
  
   .pic5{
+
   .pic5 {
 
       padding-left: 150px;
 
       padding-left: 150px;
      }  
+
  }
  
   .pic6{
+
   .pic6 {
 
       padding-left: 200px;
 
       padding-left: 200px;
      }  
+
  }
  
  
  #HQ_page p {
+
  #HQ_page p {
    font-size: 20px;
+
      font-size: 20px;
    margin: 0;
+
      margin: 0;
    background-color: #010E00;
+
      background-color: #010E00;
    color: white;
+
      color: white;
  }
+
  }
  
  body {
+
  body {
    background-color: #272625;
+
      background-color: #272625;
  }
+
  }
  
  /*header*/
+
  /*header*/
 
   .carousel-item {
 
   .carousel-item {
    height: 100vh;
+
      height: 100vh;
    min-height: 300px;
+
      min-height: 300px;
    background: no-repeat center center scroll;
+
      background: no-repeat center center scroll;
    -webkit-background-size: cover;
+
      -webkit-background-size: cover;
    -moz-background-size: cover;
+
      -moz-background-size: cover;
    -o-background-size: cover;
+
      -o-background-size: cover;
    background-size: cover;
+
      background-size: cover;
    }
+
  }
  
 
   .head2 {
 
   .head2 {
    color: white;
+
      color: white;
    width: 30%;
+
      width: 30%;
    font-size: 50px;
+
      font-size: 50px;
    font-weight: 700;
+
      font-weight: 700;
    border-bottom: 10px solid #7ae26f !important;
+
      border-bottom: 10px solid #7ae26f !important;
    position: relative;
+
      position: relative;
 
   }
 
   }
  
 
   .head4 {
 
   .head4 {
    color: white;
+
      color: white;
    width: 40%;
+
      width: 40%;
    font-size: 50px;
+
      font-size: 50px;
    font-weight: 700;
+
      font-weight: 700;
    border-bottom: 10px solid #7ae26f !important;
+
      border-bottom: 10px solid #7ae26f !important;
    position: relative;
+
      position: relative;
 
   }
 
   }
  
 
   /* paragraph content*/
 
   /* paragraph content*/
  
   #pt{
+
   #pt {
    padding-top: 10px;
+
      padding-top: 10px;
 
   }
 
   }
  
 
   h10 {
 
   h10 {
    color: white;
+
      color: white;
    font-size: 1.4rem;
+
      font-size: 1.4rem;
    line-height: 150%;
+
      line-height: 150%;
 
   }
 
   }
  
 
   h8 {
 
   h8 {
    color: white;
+
      color: white;
    font-size: 1.8rem;
+
      font-size: 1.8rem;
    line-height: 150%;
+
      line-height: 150%;
 
   }
 
   }
 +
 
   h3 {
 
   h3 {
    color: white;
+
      color: white;
    font-size: 35px;
+
      font-size: 35px;
    line-height: 50px;
+
      line-height: 50px;
 
   }
 
   }
  
 
   .navbar {
 
   .navbar {
    padding-top: 10px;
+
      padding-top: 10px;
    margin-bottom: 0;
+
      margin-bottom: 0;
 
   }
 
   }
 +
 
   .navbar-brand {
 
   .navbar-brand {
    font-size: 30px;
+
      font-size: 30px;
 
   }
 
   }
 +
 
   .nav-link {
 
   .nav-link {
    font-size: 20px;
+
      font-size: 20px;
 
   }
 
   }
 +
 
   a.dropdown-item {
 
   a.dropdown-item {
    color: #4F7F52;
+
      color: #4F7F52;
 
   }
 
   }
 +
 
   a.dropdown-item:active {
 
   a.dropdown-item:active {
    background-color: #4F7F52;
+
      background-color: #4F7F52;
 
   }
 
   }
 +
 
   .caret {
 
   .caret {
    display: inline-block;
+
      display: inline-block;
    width: 0;
+
      width: 0;
    height: 0;
+
      height: 0;
    margin-left: 2px;
+
      margin-left: 2px;
    vertical-align: middle;
+
      vertical-align: middle;
    border-top: 4px solid;
+
      border-top: 4px solid;
    border-right: 4px solid transparent;
+
      border-right: 4px solid transparent;
    border-left: 4px solid transparent;
+
      border-left: 4px solid transparent;
 
   }
 
   }
 
+
 
 
   .head {
 
   .head {
    color: white;
+
      color: white;
    width: 50%;
+
      width: 50%;
    font-size: 50px;
+
      font-size: 50px;
    font-weight: 700 !important;
+
      font-weight: 700 !important;
    border-bottom: 10px solid #7ae26f !important;
+
      border-bottom: 10px solid #7ae26f !important;
    position: relative;
+
      position: relative;
 
   }
 
   }
 +
 
   .container.content {
 
   .container.content {
    margin-top: 80px;
+
      margin-top: 80px;
 
   }
 
   }
  
 
   /*folded-corner*/
 
   /*folded-corner*/
 
   .post {
 
   .post {
    position: relative;
+
      position: relative;
 
   }
 
   }
 +
 
   .folded-corner {
 
   .folded-corner {
    position: absolute;
+
      position: absolute;
    bottom: 0px;
+
      bottom: 0px;
    right: 0px;
+
      right: 0px;
    border-width: 0;
+
      border-width: 0;
    border-style: solid;
+
      border-style: solid;
    background: hsla(260,100%,100%,0.2);
+
      background: hsla(260, 100%, 100%, 0.2);
    box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
+
      box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3), -1px -4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 15px 0 0 0;
+
      border-radius: 15px 0 0 0;
    border-color: transparent #B9DEBB transparent transparent;
+
      border-color: transparent #B9DEBB transparent transparent;
    transition: border-width 0.2s ease-out;
+
      transition: border-width 0.2s ease-out;
 
   }
 
   }
 +
 
   .post:hover .folded-corner {
 
   .post:hover .folded-corner {
    border-width: 40px 40px 0 0;
+
      border-width: 40px 40px 0 0;
 
   }
 
   }
 +
 
   .photo .folded-corner {
 
   .photo .folded-corner {
    background: hsla(260,5%,75%,0.5);
+
      background: hsla(260, 5%, 75%, 0.5);
 
   }
 
   }
  
 
   [class*="col-"] {
 
   [class*="col-"] {
    float: left;
+
      float: left;
    padding: 13px;
+
      padding: 13px;
 
   }
 
   }
 +
 
   a.list-group-item:visited {
 
   a.list-group-item:visited {
    color: white;
+
      color: white;
 
   }
 
   }
 +
 
   a:hover {
 
   a:hover {
    background-color: transparent;
+
      background-color: transparent;
 
   }
 
   }
 +
 
   .list-group {
 
   .list-group {
    margin-top: 100px;
+
      margin-top: 100px;
 
   }
 
   }
 +
 
   .col-2.side {
 
   .col-2.side {
    padding: 0;
+
      padding: 0;
 
   }
 
   }
 +
 
   .list-group-item {
 
   .list-group-item {
    padding: .55rem .35rem;
+
      padding: .55rem .35rem;
    background-color: #272625;
+
      background-color: #272625;
    color: white;
+
      color: white;
    border: none;
+
      border: none;
    font-size: 19px;
+
      font-size: 19px;
 
   }
 
   }
 +
 
   a.list-group-item.list-group-item-action {
 
   a.list-group-item.list-group-item-action {
    background-color: transparent;
+
      background-color: transparent;
 
   }
 
   }
 +
 
   a.list-group-item.list-group-item-action:hover {
 
   a.list-group-item.list-group-item-action:hover {
    color: #98CC9B;
+
      color: #98CC9B;
 
   }
 
   }
 +
 
   a.list-group-item.list-group-item-action.active {
 
   a.list-group-item.list-group-item-action.active {
    background-color: transparent;
+
      background-color: transparent;
    color: #7ae26f;
+
      color: #7ae26f;
 
   }
 
   }
   .scrollspy-example h4{
+
 
    font-size: 2rem;
+
   .scrollspy-example h4 {
 +
      font-size: 2rem;
 
   }
 
   }
  
 
+
 
  
 
   img.contentimg {
 
   img.contentimg {
Line 207: Line 230:
 
       margin: 20px 0;
 
       margin: 20px 0;
 
   }
 
   }
 +
 
   a.link {
 
   a.link {
 
       font-size: 30px;
 
       font-size: 30px;
 
       color: #4F7F52;
 
       color: #4F7F52;
 
   }
 
   }
   #list-item-1, #list-item-2, #list-item-3, #list-item-4, #list-item-5 {
+
 
 +
   #list-item-1,
 +
  #list-item-2,
 +
  #list-item-3,
 +
  #list-item-4,
 +
  #list-item-5 {
 
       padding-top: 20px;
 
       padding-top: 20px;
       text-align:justify;
+
       text-align: justify;
 
   }
 
   }
   #Motivation, #Experiments, #Wiring, #Reference {
+
 
    padding-top: 80px;
+
   #Motivation,
 +
  #Experiments,
 +
  #Wiring,
 +
  #Reference {
 +
      padding-top: 80px;
 
   }
 
   }
 
+
 
 
   a.reference {
 
   a.reference {
    color: #4F7F52;
+
      color: #4F7F52;
 
   }
 
   }

Revision as of 10:12, 13 October 2018

.CO2img {

   margin-top: 30px;

}

 .knob {
     margin-top: 30px;
 }


 .list-group-item {
     margin: 10px 0 !important;
 }
 .reference {
     margin-top: 600px !important;
 }


 .result {
     margin-right: 300px !important;
     margin-left: 300px !important;
 }
 .pic1 {
     padding-left: 130px;
 }
 .pic4 {
     padding-left: none !important;
 }
 .pic3 {
     padding-left: 150px;
 }
 .pic5 {
     padding-left: 150px;
 }
 .pic6 {
     padding-left: 200px;
 }


 #HQ_page p {
     font-size: 20px;
     margin: 0;
     background-color: #010E00;
     color: white;
 }
 body {
     background-color: #272625;
 }
 /*header*/
 .carousel-item {
     height: 100vh;
     min-height: 300px;
     background: no-repeat center center scroll;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
 }
 .head2 {
     color: white;
     width: 30%;
     font-size: 50px;
     font-weight: 700;
     border-bottom: 10px solid #7ae26f !important;
     position: relative;
 }
 .head4 {
     color: white;
     width: 40%;
     font-size: 50px;
     font-weight: 700;
     border-bottom: 10px solid #7ae26f !important;
     position: relative;
 }
 /* paragraph content*/
 #pt {
     padding-top: 10px;
 }
 h10 {
     color: white;
     font-size: 1.4rem;
     line-height: 150%;
 }
 h8 {
     color: white;
     font-size: 1.8rem;
     line-height: 150%;
 }
 h3 {
     color: white;
     font-size: 35px;
     line-height: 50px;
 }
 .navbar {
     padding-top: 10px;
     margin-bottom: 0;
 }
 .navbar-brand {
     font-size: 30px;
 }
 .nav-link {
     font-size: 20px;
 }
 a.dropdown-item {
     color: #4F7F52;
 }
 a.dropdown-item:active {
     background-color: #4F7F52;
 }
 .caret {
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
     border-top: 4px solid;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
 }
 .head {
     color: white;
     width: 50%;
     font-size: 50px;
     font-weight: 700 !important;
     border-bottom: 10px solid #7ae26f !important;
     position: relative;
 }
 .container.content {
     margin-top: 80px;
 }
 /*folded-corner*/
 .post {
     position: relative;
 }
 .folded-corner {
     position: absolute;
     bottom: 0px;
     right: 0px;
     border-width: 0;
     border-style: solid;
     background: hsla(260, 100%, 100%, 0.2);
     box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3), -1px -4px 0px rgba(0, 0, 0, 0.1);
     border-radius: 15px 0 0 0;
     border-color: transparent #B9DEBB transparent transparent;
     transition: border-width 0.2s ease-out;
 }
 .post:hover .folded-corner {
     border-width: 40px 40px 0 0;
 }
 .photo .folded-corner {
     background: hsla(260, 5%, 75%, 0.5);
 }
 [class*="col-"] {
     float: left;
     padding: 13px;
 }
 a.list-group-item:visited {
     color: white;
 }
 a:hover {
     background-color: transparent;
 }
 .list-group {
     margin-top: 100px;
 }
 .col-2.side {
     padding: 0;
 }
 .list-group-item {
     padding: .55rem .35rem;
     background-color: #272625;
     color: white;
     border: none;
     font-size: 19px;
 }
 a.list-group-item.list-group-item-action {
     background-color: transparent;
 }
 a.list-group-item.list-group-item-action:hover {
     color: #98CC9B;
 }
 a.list-group-item.list-group-item-action.active {
     background-color: transparent;
     color: #7ae26f;
 }
 .scrollspy-example h4 {
     font-size: 2rem;
 }


 img.contentimg {
     width: 100%;
     margin: 20px 0;
 }
 a.link {
     font-size: 30px;
     color: #4F7F52;
 }
 #list-item-1,
 #list-item-2,
 #list-item-3,
 #list-item-4,
 #list-item-5 {
     padding-top: 20px;
     text-align: justify;
 }
 #Motivation,
 #Experiments,
 #Wiring,
 #Reference {
     padding-top: 80px;
 }
 a.reference {
     color: #4F7F52;
 }