Difference between revisions of "Team:NTNU Trondheim/Style"

 
(417 intermediate revisions by 3 users not shown)
Line 10: Line 10:
  
 
body {
 
body {
   font-family: 'PT Sans', Arial, Verdana;
+
   font-family: 'Roboto', sans-serif;
 
   background-color: #eee;
 
   background-color: #eee;
 
   margin-bottom: 0px;
 
   margin-bottom: 0px;
Line 17: Line 17:
 
.ntnu_navbar {
 
.ntnu_navbar {
 
     list-style-type: none;
 
     list-style-type: none;
    margin: 0;
 
    padding: 0;
 
    background-color: #333;
 
 
     color: #FFFFFF;
 
     color: #FFFFFF;
 
     text-decoration: none;
 
     text-decoration: none;
Line 26: Line 23:
  
 
ul.ntnu_navbar {
 
ul.ntnu_navbar {
    padding: 0px;
 
    margin: 0px;
 
 
     list-style-type: none;
 
     list-style-type: none;
 
     flex-grow: 1;
 
     flex-grow: 1;
 +
    margin-left: 50px;
 
}
 
}
  
 +
 +
.icon {
 +
  padding-left: 1rem;
 +
  padding-right: 1rem;
 +
}
 +
 +
.frontpage-text {
 +
  font-size: 30px !important;
 +
  text-align: center;
 +
  color: #61586f;
 +
  }
 
    
 
    
  
Line 38: Line 45:
 
}
 
}
  
a:visited { color: white }
+
a.btn:visited {
 +
  color: #fafafa !important;
 +
}
 +
 
 +
a.ntnu_dropbtn:visited { color: white }
  
  
Line 58: Line 69:
  
 
/* ---- HOVER COLORS NAVIGATION BAR ---- */
 
/* ---- HOVER COLORS NAVIGATION BAR ---- */
li #menu-home:hover {  background-color: red;  }
+
li #menu-home:hover { background-color: #7C8093; }
li #menu-team:hover {  background-color: #ff8a23;  }
+
li #menu-team:hover {  background-color: #ff4a38;  }
li #menu-project:hover {  background-color: #f8b732;  }
+
li #menu-project:hover {  background-color: #ff8a23;  }
 +
li #menu-lab:hover {  background-color: #f8b732;  }
 
li #menu-parts:hover {  background-color: #4CAF50;  }
 
li #menu-parts:hover {  background-color: #4CAF50;  }
li #menu-safety:hover {  background-color: #5bc7d8;  }
+
li #menu-interlabs:hover {  background-color: #5bc7d8;  }
 
li #menu-hp:hover {  background-color: #4286f4;  }
 
li #menu-hp:hover {  background-color: #4286f4;  }
li #menu-awards:hover {  background-color: #a851db;  }
+
li #menu-acknowledge:hover {  background-color: #a851db;  }
 +
li #menu-jamboree:hover {  background-color: #a53255;  }
 +
 
  
 
.ntnu_dropdown {
 
.ntnu_dropdown {
Line 96: Line 110:
 
   padding: 40px;
 
   padding: 40px;
 
   background: #ecf0f1;
 
   background: #ecf0f1;
 +
}
 +
 +
html, body {
 +
    max-width: 100%;
 
}
 
}
  
Line 109: Line 127:
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
}
 
}
 +
 +
/* just for jsfiddle */
 +
@font-face {
 +
  font-family: 'Material Icons';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
 +
}
 +
 +
.material-icons {
 +
  font-family: 'Material Icons';
 +
  font-weight: normal;
 +
  font-style: normal;
 +
  font-size: 24px;
 +
  line-height: 1;
 +
  letter-spacing: normal;
 +
  text-transform: none;
 +
  display: inline-block;
 +
  white-space: nowrap;
 +
  word-wrap: normal;
 +
  direction: ltr;
 +
  -moz-font-feature-settings: 'liga';
 +
  -moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
.middle-indicator{
 +
  position:absolute;
 +
  top:50%;
 +
  }
 +
  .middle-indicator-text{
 +
  font-size: 4.2rem;
 +
  }
 +
  a.middle-indicator-text{
 +
    color:#86858a !important;
 +
  }
 +
.content-indicator{
 +
    width: 64px;
 +
    height: 64px;
 +
    background: none;
 +
    -moz-border-radius: 50px;
 +
    -webkit-border-radius: 50px;
 +
    border-radius: 50px;
 +
  }
 +
  
 
.ntnu_block {
 
.ntnu_block {
Line 117: Line 179:
  
 
h1 {
 
h1 {
  color: #2c3e50;
 
  text-transform: uppercase;
 
 
   text-align: center;
 
   text-align: center;
  line-height: 21px;
 
 
   margin: 48px auto 0;
 
   margin: 48px auto 0;
 
   border-bottom: 0px;
 
   border-bottom: 0px;
   letter-spacing: 3px;
+
   font-size: 35px !important;
   font-size: 50px !important;
+
   font-family: 'Lora', serif !important;
 +
  font-style: italic;
 +
  display: inline;
 +
  width: 100%;
 
}
 
}
  
 +
h2 {
 +
  margin: 48px auto 0;
 +
  font-size: 30px !important;
 +
  font-family: 'Lora', serif !important;
 +
  font-style: italic;
 +
  padding: 5px 0 5px 0;
 +
  width: auto;
 +
  text-align: center;
 +
}
 +
 +
h3 {
 +
  font-family: 'Lora', serif !important;
 +
}
 +
 +
h2.modal {
 +
  font-size: 20px !important;
 +
}
 +
 +
h2 span {
 +
  color: #fff;
 +
  font-weight: bold;
 +
  padding: 5px;
 +
}
 +
 +
.italic {
 +
  font-style: italic;
 +
}
 +
 +
.team-color { color: #FF5144 }
 +
.project-color { color: #ff8a23 }
 +
.lab-color { color: #f8b732 }
 +
.parts-color { color: #4CAF50 }
 +
.interlabs-color { color: #5bc7d8 }
 +
.hp-color { color: #006194 }
 +
.ack-color { color: #A293A5 }
 +
.jamboree-color { color: #a53255 }
 +
.timeline-color-left { color: #16a9b4; background-color: white; line-height: 140% !important; }
 +
.timeline-color-right { color: #006194; background-color: white; line-height: 140% !important;}
 +
.gold-color { color: #D4AF37 }
 +
.silver-color {color: #b3b3b3 }
 +
.bronze-color {color: #cd7f32 }
 +
 +
h2 span.timeline-color-left { text-align: left }
 +
h2 span.timeline-color-right { text-align: left }
 +
 +
/* Vanessa tester styles --------------------------------------------------------------*/
 +
 +
.heading {
 +
  font-family: Courier New, serif !important;
 +
  color: #5F7C87;
 +
  font-weight: bold;
 +
}  /* I prinsippet den samme som h3 ----*/
  
/* Vanessa tester--------------------------------------------------------------*/
 
  
 
.headertext {
 
.headertext {
 
   font-size: 18px;
 
   font-size: 18px;
  letter-spacing: 2px;
 
 
   line-height: 30px;
 
   line-height: 30px;
 
}
 
}
  
/* Vanessa tester--------------------------------------------------------------*/
+
.paragraphtext {
 +
  font-size: 17px;
 +
  line-height: 25px;
 +
}
 +
 
 +
img.sponsorlogo {
 +
  float: right;
 +
  width: 350px;
 +
  height: auto;
 +
  padding-left: 20px;
 +
  border: none;
 +
}
 +
 
 +
a.linkcolor {
 +
  color: blue;
 +
}
 +
 
 +
/* Vanessa tester styles--------------------------------------------------------------*/
  
  
Line 146: Line 275:
  
 
div .nav-wrapper {
 
div .nav-wrapper {
   background-color: #333 !important;
+
   background-color: #1f1c24 !important;
 
   opacity: 0.7;
 
   opacity: 0.7;
  <!-- filter: alpha(opacity=70); -->
 
 
   display: flex !important;
 
   display: flex !important;
 
   flex-direction: column !important;
 
   flex-direction: column !important;
Line 154: Line 282:
 
   top: 14px; /* Position the navbar at the top of the page */
 
   top: 14px; /* Position the navbar at the top of the page */
 
   width: 100%; /* Full width */
 
   width: 100%; /* Full width */
   z-index: 99999;
+
   z-index: 7;
 +
 
 
}
 
}
  
Line 176: Line 305:
  
 
.container {
 
.container {
  padding-top: 100px !important;
 
 
   padding-bottom: 70px !important;
 
   padding-bottom: 70px !important;
 +
  width: 55% !important;
 
}
 
}
  
Line 189: Line 318:
 
     width: auto;
 
     width: auto;
 
     padding: 10px 20px;
 
     padding: 10px 20px;
     background: #333;
+
     background: #1f1c20;
 
     text-align: right;
 
     text-align: right;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
Line 198: Line 327:
 
     width: 100%; /* Full width */
 
     width: 100%; /* Full width */
 
     opacity: 0.7 !important;
 
     opacity: 0.7 !important;
     z-index: 99999;
+
     z-index: 7;
 
}
 
}
  
Line 205: Line 334:
 
}
 
}
  
@media only screen and (max-width: 793px) {
+
 
 +
.footer {
 +
  padding: 20px;
 +
}
 +
 
 +
.header-img {
 +
  position: relative;
 +
  top: -10px;
 +
  left: 0;
 +
 +
  /* Preserve aspet ratio */
 +
  min-width: 100%;
 +
  min-height: 100%;
 +
 
 +
  object-fit: scale-down;
 +
 
 +
  z-index: -1;
 +
}
 +
 
 +
 
 +
body, html {
 +
    height: 100%;
 +
    margin: 0;
 +
}
 +
 
 +
.homebtn {
 +
    z-index: 9;
 +
    position: fixed;
 +
    top: 25px;
 +
    right: 40px;
 +
    height: 70px;
 +
    width: auto;
 +
}
 +
 
 +
.mobile-home {
 +
    display: none;
 +
}
 +
 
 +
.floating { 
 +
    animation-name: floating;
 +
    animation-duration: 2s;
 +
    animation-iteration-count: infinite;
 +
    animation-timing-function: ease-in-out;
 +
}
 +
 
 +
@keyframes floating {
 +
    from { transform: translate(0,  0px); }
 +
    65%  { transform: translate(0, 15px); }
 +
    to  { transform: translate(0, -0px); }   
 +
}
 +
 
 +
 
 +
.centered {
 +
    position: absolute;
 +
    top: 43%;
 +
    left: 48%;
 +
    transform: translate(-50%, -50%);
 +
    z-index: 6 !important;
 +
}
 +
 
 +
.centered-mobile {
 +
    position: absolute;
 +
    top: 47%;
 +
    left: 48%;
 +
    transform: translate(-50%, -50%);
 +
    z-index: 6 !important;
 +
}
 +
 
 +
.centered, .centered-mobile i {
 +
  color: #7A7D89;
 +
  width: auto;
 +
}
 +
 
 +
.clickable {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 
 +
.card {
 +
 
 +
}
 +
 
 +
.enlarged {
 +
  font-size: 200% !important;
 +
  color: #FFF;
 +
  line-height: 1em;
 +
  padding: 0;
 +
}
 +
 
 +
.link {
 +
  padding: 7px;
 +
  display: inline-block;
 +
  color: #e6e6e6;
 +
}
 +
 
 +
.link:visited {
 +
  color: #e6e6e6;
 +
}
 +
 
 +
.link:hover {
 +
  color: #FF5144;
 +
  text-decoration: none !important;
 +
}
 +
 
 +
.home-box {
 +
  padding: 50px 20px 50px 20px;
 +
  border-bottom: solid 0.5px #1f1c24;
 +
}
 +
 
 +
.home-text {
 +
  text-align: justify;
 +
  -moz-text-align-last: center;
 +
  text-align-last: center;
 +
  color: #1f1c24;
 +
  font-size: 16px;
 +
}
 +
 
 +
.home-box-2 {
 +
  border: 20px solid #FF5144;
 +
  padding: 50px;
 +
}
 +
 
 +
p {
 +
  margin-top: 10px !important;
 +
  font-size: 16px !important;
 +
  font-family: 'Roboto', sans-serif !important;
 +
}
 +
 
 +
.timeline-header-left {
 +
  position: absolute;
 +
  top: 45%;
 +
  right: 75%;
 +
  z-index: 1;
 +
  display: flex;
 +
}
 +
 
 +
.timeline-header-right{
 +
  position: absolute;
 +
  top: 0%;
 +
  left: 75%;
 +
  z-index: 1;
 +
  display: flex;
 +
}
 +
 
 +
.timeline img {
 +
  padding: 0 15% 0 15%;
 +
}
 +
 
 +
.gold {
 +
  color: #EDB350;
 +
}
 +
 
 +
timeline-header-left div {
 +
  float: left;
 +
}
 +
 
 +
ul.modal-list li {
 +
  list-style-type: disc !important;
 +
  list-style-image: none !important;
 +
}
 +
 
 +
.protocol-category {
 +
  font-size: 20px;
 +
  font-weight: bold;
 +
}
 +
 
 +
.protocol-title {
 +
  font-size: 18px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****** WRITE ALL NON-MEDIA CODE ABOVE THIS LINE *****/
 +
 
 +
@media screen and (max-width: 713px) {
 
  .toggle {
 
  .toggle {
 
     display: block;
 
     display: block;
Line 216: Line 522:
 
     height: auto !important;
 
     height: auto !important;
 
     position: fixed;
 
     position: fixed;
     top: 60px;
+
     top: 50px;
 
  }
 
  }
  
Line 241: Line 547:
 
  .ntnu_dropdown_content {
 
  .ntnu_dropdown_content {
 
     width: 100%;
 
     width: 100%;
 +
}
 +
 +
  div .nav-wrapper {
 +
    opacity: 1 !important;
 
  }
 
  }
  
Line 250: Line 560:
 
  h1 {
 
  h1 {
 
     font-size: 25px !important;
 
     font-size: 25px !important;
}
+
}
  
}
+
h2 {
 +
    text-align: center;
 +
}
  
.footer {
+
ul.ntnu_navbar {
   padding: 20px;
+
    background-color: #1f1c24;
}
+
    margin-left: 0;
 +
}
 +
 
 +
.homebtn { display: none; }
 +
 
 +
.mobile-home { display: block; }
 +
 +
.timeline img {
 +
   padding: 0;
 +
}
 +
.container {
 +
  width: 90% !important;
 +
}
  
.p {
 
  letter-spacing: 2px !important;
 
 
}
 
}
 +
 +
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 09:43, 15 October 2018