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

 
(626 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;
 
}
 
}
  
−
.navbar {
+
.ntnu_navbar {
 
     list-style-type: none;
 
     list-style-type: none;
−
    margin: 0;
 
−
    padding: 0;
 
−
    overflow: hidden;
 
−
    background-color: #333;
 
 
     color: #FFFFFF;
 
     color: #FFFFFF;
 
     text-decoration: none;
 
     text-decoration: none;
Line 25: Line 22:
 
}
 
}
  
−
a { color: inherit; }
+
ul.ntnu_navbar {
 +
    list-style-type: none;
 +
    flex-grow: 1;
 +
    margin-left: 50px;
 +
}
  
−
a:visited { color: white }
+
 
 +
.icon {
 +
  padding-left: 1rem;
 +
  padding-right: 1rem;
 +
}
 +
 
 +
.frontpage-text {
 +
  font-size: 30px !important;
 +
  text-align: center;
 +
  color: #61586f;
 +
  }
 +
 
 +
 
 +
a, .ntnu_navbar {
 +
    color: white;
 +
}
 +
 
 +
a.btn:visited {
 +
  color: #fafafa !important;
 +
}
 +
 
 +
a.ntnu_dropbtn:visited { color: white }
  
  
−
.menu_item {
+
.ntnu_menu_option {
 
     float: left;
 
     float: left;
 
}
 
}
  
−
.dropbtn {
+
.ntnu_dropbtn {
 
     display: inline-block;
 
     display: inline-block;
 
     color: white;
 
     color: white;
Line 40: Line 62:
 
     padding: 14px 16px;
 
     padding: 14px 16px;
 
     text-decoration: none !important;
 
     text-decoration: none !important;
−
    text-font: 1vw;
 
 
}
 
}
  
−
.dropdown:hover .dropbtn {
+
.ntnu_dropdown:hover .ntnu_dropbtn {
 
     background-color: rgba(0,0,0,0.1);
 
     background-color: rgba(0,0,0,0.1);
 
}
 
}
  
 
/* ---- 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;  }
  
−
.dropdown {
+
 
 +
.ntnu_dropdown {
 
     display: inline-block;
 
     display: inline-block;
 
}
 
}
  
−
.dropdown-content {
+
.ntnu_dropdown_content {
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
Line 69: Line 93:
 
}
 
}
  
−
.dropdown-content a {
+
.ntnu_dropdown_content a {
 
     color: black;
 
     color: black;
 
     padding: 12px 16px;
 
     padding: 12px 16px;
Line 77: Line 101:
 
}
 
}
  
−
.dropdown-content a:hover {
+
.ntnu_dropdown_content a:hover {background-color: #f1f1f1}
−
    background-color: #f1f1f1;
+
−
    text-decoration: none;
+
−
}
+
  
−
.dropdown:hover .dropdown-content {
+
.ntnu_dropdown:hover .ntnu_dropdown_content {
 
     display: block;
 
     display: block;
 
}
 
}
Line 89: Line 110:
 
   padding: 40px;
 
   padding: 40px;
 
   background: #ecf0f1;
 
   background: #ecf0f1;
 +
}
 +
 +
html, body {
 +
    max-width: 100%;
 
}
 
}
  
Line 94: Line 119:
 
     max-width: 100%;
 
     max-width: 100%;
 
     height: auto;
 
     height: auto;
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 
}
 
}
 +
 +
* {
 +
    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 {
 +
  float: left;
 +
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
 +
  padding: 0px; /* if you want space between the images */
 +
}
 +
 +
h1 {
 +
  text-align: center;
 +
  margin: 48px auto 0;
 +
  border-bottom: 0px;
 +
  font-size: 35px !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 ----*/
 +
 +
 +
.headertext {
 +
  font-size: 18px;
 +
  line-height: 30px;
 +
}
 +
 +
.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--------------------------------------------------------------*/
 +
 +
 +
 +
 +
nav {
 +
  background-color: #333 !important;
 +
}
 +
 +
div .nav-wrapper {
 +
  background-color: #1f1c24 !important;
 +
  opacity: 0.7;
 +
  display: flex !important;
 +
  flex-direction: column !important;
 +
  position: fixed; /* Set the navbar to fixed position */
 +
  top: 14px; /* Position the navbar at the top of the page */
 +
  width: 100%; /* Full width */
 +
  z-index: 7;
 +
 
 +
}
 +
 +
div .nav-wrapper.scrolled {
 +
  opacity: 0.7;
 +
  <!-- filter: alpha(opacity=70); -->
 +
}
 +
 +
div .nav-wrapper:hover {
 +
  opacity: 1 !important;
 +
  filter: alpha(opacity=100) !important;
 +
}
 +
 +
.page-footer {
 +
  background-color: #ecf0f1 !important;
 +
}
 +
 +
.footer-copyright {
 +
  background-color: ##ecf0e1 !important;
 +
}
 +
 +
.container {
 +
  padding-bottom: 70px !important;
 +
  width: 55% !important;
 +
}
 +
 +
nav {
 +
  background-color: #333 !important;
 +
    height: 46px !important;
 +
    line-height: 44px;
 +
}
 +
 +
.toggle {
 +
    width: auto;
 +
    padding: 10px 20px;
 +
    background: #1f1c20;
 +
    text-align: right;
 +
    box-sizing: border-box;
 +
    display: none;
 +
    margin-left: 0 !important;
 +
    position: fixed; /* Set the navbar to fixed position */
 +
    top: 16px; /* Position the navbar at the top of the page */
 +
    width: 100%; /* Full width */
 +
    opacity: 0.7 !important;
 +
    z-index: 7;
 +
}
 +
 +
.toggle:hover {
 +
    opacity: 1;
 +
}
 +
 +
 +
.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 {
 +
    display: block;
 +
}
 +
 +
ul.ntnu_navbar {
 +
    width: 100%;
 +
    float: none !important;
 +
    display: none;
 +
    height: auto !important;
 +
    position: fixed;
 +
    top: 50px;
 +
}
 +
 +
ul.ntnu_navbar li {
 +
    display: block;
 +
    text-align: center;
 +
    float: none;
 +
    height: auto;
 +
}
 +
 +
.ntnu_dropdown:hover .ntnu_dropdown_content {
 +
    height: auto;
 +
}
 +
 +
li.ntnu_menu_option {
 +
    width: 100%;
 +
}
 +
 +
li.ntnu_menu_option a {
 +
    width: 100%;
 +
    text-align: center;
 +
}
 +
 +
.ntnu_dropdown_content {
 +
    width: 100%;
 +
}
 +
 +
  div .nav-wrapper {
 +
    opacity: 1 !important;
 +
}
 +
 +
  .active {
 +
    display: block !important;
 +
    opacity: 1 !important;
 +
}
 +
 +
h1 {
 +
    font-size: 25px !important;
 +
}
 +
 +
h2 {
 +
    text-align: center;
 +
}
 +
 +
ul.ntnu_navbar {
 +
    background-color: #1f1c24;
 +
    margin-left: 0;
 +
}
 +
 +
.homebtn { display: none; }
 +
 +
.mobile-home { display: block; }
 +
 +
.timeline img {
 +
  padding: 0;
 +
}
 +
.container {
 +
  width: 90% !important;
 +
}
 +
 +
}
 +
 +
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 09:43, 15 October 2018