@@ Line 24: / Line 24: @@
      padding: 0;
      margin: 0;
-    background-color: white;
 }
@@ Line 50: / Line 49: @@
 }
 /* set all basic objects to neutral formatting, removes all padding, margins, etc and sets the fontsize to 100%*/
 h1,
 h2,
 h3,
-h4,
+h4
-h5,
+ {
-h6 {
      font-family: 'Arial', sans-serif;
      color: black;
@@ Line 62: / Line 61: @@
      font-weight: normal;
      margin-bottom: 0;
-     padding: 0;
+     text-align: left;
      overflow: visible;
+    border: none;
 }
 /*as a script gets a paragraph, by default, no formatting for p */
-.caption {
+.caption-justify {
+  text-align: justify;
+  margin: 0 auto;
+  width: 70%;
+  font-style: italic;
+  font-size: 16px;
 }
 .reference {
+    font-family: Arial;
+    font-size: 16px;
+    font-weight: 100;
+    line-height: 22px;
+    text-align: left;
+}
+.all-wrapper{
+  max-width: 1200px;
+  position: relative;
+  margin: auto;
+  background-color: rgba(255, 255, 255, 1.0);
+}
+.content-wrapper{
+  width: 90%;
+  position: relative;
+  margin: auto;
+}
+.header{
+  width: 55%;
+  height: auto;
+  margin: auto;
+  display: block;
+}
+.header:hover {
+  animation: shake 0.5s;
+  animation-iteration-count: infinite;
+}
+@keyframes shake {
+% { transform: translate(1px, 1px) rotate(0deg); }
+% { transform: translate(-1px, -2px) rotate(-1deg); }
+% { transform: translate(-3px, 0px) rotate(1deg); }
+% { transform: translate(3px, 2px) rotate(0deg); }
+% { transform: translate(1px, -1px) rotate(1deg); }
+% { transform: translate(-1px, 2px) rotate(-1deg); }
+% { transform: translate(-3px, 1px) rotate(0deg); }
+% { transform: translate(3px, 1px) rotate(-1deg); }
+% { transform: translate(-1px, -1px) rotate(1deg); }
+% { transform: translate(1px, 2px) rotate(0deg); }
+% { transform: translate(1px, -2px) rotate(-1deg); }
 }
@@ Line 85: / Line 132: @@
       font-style: normal;
       font-variant: normal;
-      font-weight: 100;
+      font-weight: 700;
-      line-height: 36px;
+      line-height: 38px;
-     color: black;
-     border: none;
 }
   h2 {
       font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
-      font-size: 27px;
+      font-size: 28px;
       font-style: normal;
       font-variant: normal;
       font-weight: 700;
-      line-height: 36px;
+      line-height: 34px;
-     color: black;
 }
   h3 {
       font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
-      font-size: 27px;
+      font-size: 24px;
       font-style: normal;
       font-variant: normal;
       font-weight: 700;
-      line-height: 36px;
+      line-height: 29px;
 }
-  p{
+h4 {
+     font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+     font-size: 20px;
+     font-style: normal;
+     font-variant: normal;
+     font-weight: 700;
+     line-height: 29px;
+}
+  p, p~ul li, p~ol li, .row ul li{
       font-family: Arial;
       font-size: 20px;
@@ Line 116: / Line 171: @@
       text-align: justify;
 }
-ul li, ol li {
-}
   blockquote {
@@ Line 137: / Line 188: @@
       line-height: 36px;
 }
+.quote {
+     font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+     font-size: 24px;
+     font-style: italic;
+     font-variant: small-caps;
+     font-weight: 400;
+     line-height: 36px;
+     width: 75%;
+     padding: 12px;
+     margin: auto auto;
+     text-align: center;
+     border-radius: 5%;
+     border: 1px solid #e2e2e2;
+     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+.quote:before{
+     font-family:FontAwesome;
+     content: "\f10d";
+     float: left;
+     font-size: 32px;
+}
+.quote:after{
+     font-family:FontAwesome;
+     content: "\f10e";
+     float: right;
+     font-size: 32px;
+}
+@media only screen and (max-width: 700px) {
+h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
+h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
+h3 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
+h4{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13.5px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 19px; }
+p, p~ul li, p~ol li, .row ul li { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 19px; }
+blockquote { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 19px; }
+pre { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 19px; }
+.accordion{
+font-size: 12px !important;
+padding: 10px;
+}
+.accordion:after {
+  font-size: 20px !important;
+}
+.active,
+.accordion:hover {
+  font: bold 12px "Montserrat", sans-serif;
+  background-color: #2980b9;
+}
+.accordion-closer{
+  padding: 5px;
+  width: 12.0%;
+  font-size: 12px !important;
+  margin: 6px 0px;
+}
+.accordion-closer:hover {
+  font: bold 12px "Montserrat", sans-serif;
+  background-color: #a80d31;
+}
+.accordion-closer:after{
+  font-size: 20px !important;
+}
+table{
+  font-size: 10px !important;
+}
+.figures2 figcaption, .figures figcaption{
+  font-size: 11px;
+}
+}
 /********************** CSS FROM DESIGN *****************************************************/
@@ Line 145: / Line 272: @@
      margin: auto auto;
      max-width: 80%;
+    }
+    .figures img{
+    display: inline-block;
+    }
+    .figures2{
+    margin: auto auto;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    max-width: 85%;
+    }
+    .figures2 figcaption{
+    margin: 12px;
+    font-size: 16px;
+    text-align: center;
+    font-style: italic;
+    }
+    .figures2{
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      }
      .figures figcaption{
-     font-size: 12px;
+    margin: 12px;
+     font-size: 16px;
      text-align: center;
      font-style: italic;
+    }
+    .no-italics {
+    font-style: normal;
      }
@@ Line 157: / Line 310: @@
 /* The accordion is the class given to the drop-down menu thingy */
 .accordion {
-   background-color: rgba(242,242,242,0.6);
+   background-color: #3498db;
-   color: black;
+   color: #fff;
    cursor: pointer;
    padding: 15px;
@@ Line 164: / Line 317: @@
    text-align: left;
    border: none;
+   -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
+  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
    outline: none;
    /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
    /*   transition: 0.4s linear;    */
    font-family: "Montserrat", sans-serif;
-   font-weight: 300;
+   font-weight: 400;
    font-size: 20px;
+  margin-bottom: 6px;
 }
@@ Line 176: / Line 333: @@
 .accordion:hover {
    font: bold 20px "Montserrat", sans-serif;
-   background-color: #e6e6e6;
+   background-color: #2980b9;
 }
@@ Line 182: / Line 339: @@
 .panel {
    background-color: transparent;
-   text-align: center;
+   text-align: justify;
-   margin-top: 10px;
+   margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
+  max-width: 100%;
 }
-.panel-inside{
-  display: inline-block;
-  max-width: 85%;
-  text-align: justify;
-}
 .accordion:after {
-   content: "+";
+   font-family: FontAwesome;
-   font-size: 13px;
+   font-size: 27px;
-   color: #777;
+  font-weight: 800;
+   color: #fff;
+  content: "\f067";
    float: right;
    margin-left: 5px;
 }
-/* Not sure why this function does not work. Need to check */
 .active:after {
-   content: "-";
+  font-family: FontAwesome;
+   content: "\f068";
+}
+.accordion-closer{
+  background-color: #ed1144;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  padding: 8px;
+  width: 12.0%;
+  border-radius: 25px;
+  text-align: left;
+  border-color: transparent;
+   -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
+  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  margin: 6px 0px;
+}
+.accordion-closer:hover {
+  font: bold 20px "Montserrat", sans-serif;
+  background-color: #a80d31;
+}
+.accordion-closer:after{
+  font-family: FontAwesome;
+  font-size: 27px;
+  content:"\f00d";
+  float: right;
+  margin-left: 5px;
 }
 table,
 th,
@@ Line 213: / Line 396: @@
 }
 table {
-   font-family: "Lora";
+   font-family: "Arial";
-   font-size: 13px;
+   font-size: 18px;
-   word-spacing: 0.5em;
+   margin-left: auto;
+  margin-right: auto;
+  max-width: 95%;
 }
@@ Line 228: / Line 413: @@
    margin-left: auto;
    margin-right: auto;
+  max-width:100%;
 }
-.discussion_graph,
+.graph,
 .measurement_table {
    width: 70%;
@@ Line 261: / Line 447: @@
 .left {
-   width: 50%;
+   width: 48%;
-   padding-left: 5%;
+   margin-right: 2%;
-  padding-right: 2.5%;
 }
 .right {
-   width: 50%;
+   width: 48%;
-   padding-left: 2.5%;
+   margin-left: 2%;
-  padding-right: 5%;
 }
@@ Line 277: / Line 461: @@
    display: table;
    clear: both;
+}
+.video-landscape{
+width: 80%;
+height: auto;
+margin: auto auto;
+}
+.video-portrait{
+width: 30%;
+height: auto;
+margin: auto auto;
+}
+video{
+width: 100%;
+height: auto;
+}
+/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 800px) {
+    .column {
+        width: 100%;
+        margin: 15px;
+    }
 }
@@ Line 297: / Line 503: @@
      }
-    .notebook-header{
-        width: 50%;
-        height: auto;
-        margin: auto;
-    }
      .tablinks{
      cursor: pointer;
@@ Line 323: / Line 524: @@
      }
-/* Style the main tab content */
-.tabcontent {
-    display: none;
-    border: none;
-    margin: none;
-    -webkit-animation: fadeEffect 1s;
-    animation: fadeEffect 1s;
-    min-height: 500px;
-}
 /* Fade in tabs */
@@ Line 345: / Line 537: @@
 /**************************THIS IS CSS FOR SAFETY*************************************/
-.safety-header{
-  width: 47.5%;
-  height: auto;
-  margin: auto;
-}
 .pictures{
    width: 50px;
    height: 50px;
-   background-colour: grey;
+   background-color: grey;
 }
 /*****************************CSS FROM EXPERT INT *******************************************/
 .carousel-3d-slide {
@@ Line 379: / Line 566: @@
 }
 /***********************************END OF STYLING FOR CAROUSEL*******************************/
-.ihp-header{
-  width: 47.5%;
-  height: auto;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-    }
      /* Style the tab */
@@ Line 392: / Line 572: @@
 .sponsor-boxes{
    vertical-align: 50%;
+  margin: auto auto;
    outline: none;
    border: none;
@@ Line 408: / Line 589: @@
 /* Create an active/current tablink class */
 .sponsors-overview-rows button.active {
-     background-color: #ccc;
+     background-color: transparent;
 }
 .tabcontent-wrapper{
-   text-align: center;
+   text-align: justify;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
 }
 /* Style the tab content */
 .tabcontent {
      display: none;
      max-width: 85%;
+    height: auto;
      margin: auto auto;
-    padding: 6px 12px;
-/*
-    border-radius: 12px;
-    background-color: rgba(255, 255, 255, 0.6);
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-*/
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
 }
 .sponsor-pic{
    display: flex;
    width: 235px;
    max-width: 235px;
-  min-width: 235px;
    height: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .sponsor-description{
    display: flex;
-   margin-left: 24px;
+   margin-left: 16px;
-  font-family: "Lora", sans-serif;
-  font-weight: 400;
-  font-size: 1.25em;
    line-height: normal;
    text-align: justify;
@@ Line 452: / Line 624: @@
 /*************************************CSS FOR COLLAB *********************************/
-.tabcontent p{
-font-size: 1.25em;
-}
 .collab-content{
    text-align: justify;
@@ Line 467: / Line 636: @@
 /*********************************CSS FOR PUBLIC ENGAGEMENT*****************************/
-.outreach-header{
-  max-width: 65%;
-  height: auto;
-}
      .button-things{
@@ Line 483: / Line 648: @@
      outline: inherit;
      }
      .column {
@@ Line 627: / Line 793: @@
 /* Modal Content/Box */
 .profile-content {
-     margin: 10% auto; /* 15% from the top and centered */
+     margin: 5% auto; /* 10% from the top and centered */
-     padding: 20px;
+     padding: 2.5%;
      border: 2px solid
         rgba(133,133,133,.15);
@@ Line 635: / Line 801: @@
      -webkit-box-shadow: 0 0 8px rgba(0,0,0,.09);
      box-shadow: 0 0 8px rgba(0,0,0,.09);
-     width: 80%; /* Could be more or less, depending on screen size */
+     width: 100%; /* Could be more or less, depending on screen size */
 }
 .the-middle {
@@ Line 710: / Line 876: @@
 }
 .portrait1{
-   height: 300px;
+   height: 360px;
-   width: 200px;
+   width: 250px;
    border: 1px solid #aaa;
    border-radius: .5%;
-   background-size:cover;
+   background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
@@ Line 779: / Line 945: @@
 }
 .portrait_beatrix{
-   background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--NUS_Singapore-A--Beatrix_formal.jpg");
+   background-image: url("https://static.igem.org/mediawiki/2018/8/87/T--NUS_Singapore-A--Beatrix2.jpg");
 }
 .portrait_beatrix:hover{
@@ Line 840: / Line 1,006: @@
    flex: 1;
    flex-direction: column;
+}
+.intro-item h2, .intro-item p{
    text-align: center;
+  margin-right: 0px;
+  margin-left: 0px;
 }
@@ Line 864: / Line 1,034: @@
 /*******************************************CSS FOR SPONSORS ******************************/
-.sponsorship-header{
-  width: 47.5%;
-  height: auto;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-    }
 .sponsors-wrapper{
    width: 80%;
 }
 .sponsors-overview{
-   display: flex;
+   display: block;
-  flex-direction: column;
    border-bottom: 1px solid black;
    text-align: center;
@@ Line 886: / Line 1,048: @@
    display: block;
    font-family: "Montserrat" ,serif;
+  font-size: 30px;
    font-weight: 600;
    margin-left: auto;
@@ Line 894: / Line 1,057: @@
 }
 .sponsors-overview-rows{
-   display: flex;
+   display: inline-block;
-  flex-direction: row;
-  justify-content: space-evenly;
    margin: 15px 0px 15px 0px;
+   text-align: center;
+}
+.sponsors-overview-rows button{
+display: inline-block;
+vertical-align:middle;
 }
 /* Style the tab */
 /* Style the tab boxes */
-.sponsor-boxes1{
+.sponsor-boxes1,.sponsor-boxes2,.sponsor-boxes3{
-   display: flex;
+   display: inline-block;
    margin: 15px;
-   color: #000;
+   color: #fff;
    text-align: center;
    vertical-align: 0%;
@@ Line 914: / Line 1,078: @@
    cursor: pointer;
    background-color: inherit;
+}
+.sponsor-boxes1{
+  max-width:50%;
+  height:auto;
+}
+.sponsor-boxes2{
+  max-width:40%;
+  height:auto;
+}
+.sponsor-boxes3{
+  max-width:30%;
+  height:auto;
 }
 /* Change background color of buttons on hover */
@@ Line 930: / Line 1,105: @@
 /***********************************CSS For Medals ***************************************/
-.medals-header{
-  width: 42.5%;
-  height: auto;
-  margin: auto;
-}
 .checklist {
    margin: auto 5%;

Difference between revisions of "Team:NUS Singapore-A/Templates/Style"

Latest revision as of 01:48, 18 October 2018