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

 
(318 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 28: Line 28:
 
}
 
}
  
 +
 +
.icon {
 +
  padding-left: 1rem;
 +
  padding-right: 1rem;
 +
}
 +
 +
.frontpage-text {
 +
  font-size: 30px !important;
 +
  text-align: center;
 +
  color: #61586f;
 +
  }
 
    
 
    
  
Line 34: Line 45:
 
}
 
}
  
−
a:visited { color: white }
+
a.btn:visited {
 +
  color: #fafafa !important;
 +
}
 +
 
 +
a.ntnu_dropbtn:visited { color: white }
  
  
Line 54: Line 69:
  
 
/* ---- HOVER COLORS NAVIGATION BAR ---- */
 
/* ---- HOVER COLORS NAVIGATION BAR ---- */
 +
li #menu-home:hover { background-color: #7C8093; }
 
li #menu-team:hover {  background-color: #ff4a38;  }
 
li #menu-team:hover {  background-color: #ff4a38;  }
 
li #menu-project:hover {  background-color: #ff8a23;  }
 
li #menu-project:hover {  background-color: #ff8a23;  }
Line 61: Line 77:
 
li #menu-hp:hover {  background-color: #4286f4;  }
 
li #menu-hp:hover {  background-color: #4286f4;  }
 
li #menu-acknowledge:hover {  background-color: #a851db;  }
 
li #menu-acknowledge:hover {  background-color: #a851db;  }
−
li #menu-jamboree:hover {  background-color: #ff5796;  }
+
li #menu-jamboree:hover {  background-color: #a53255;  }
  
  
Line 94: Line 110:
 
   padding: 40px;
 
   padding: 40px;
 
   background: #ecf0f1;
 
   background: #ecf0f1;
 +
}
 +
 +
html, body {
 +
    max-width: 100%;
 
}
 
}
  
Line 107: 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 115: 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 {
Line 133: Line 248:
 
}
 
}
  
−
/* 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 151: Line 283:
 
   width: 100%; /* Full width */
 
   width: 100%; /* Full width */
 
   z-index: 7;
 
   z-index: 7;
 +
 
 
}
 
}
  
Line 172: Line 305:
  
 
.container {
 
.container {
−
  padding-top: 100px !important;
 
 
   padding-bottom: 70px !important;
 
   padding-bottom: 70px !important;
 +
  width: 55% !important;
 
}
 
}
  
Line 239: Line 372:
 
}
 
}
  
−
h3 {
+
.floating {
−
     font-family: 'Scope One', serif !important;
+
     animation-name: floating;
−
     color: #5F7C87;
+
     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 *****/
 
/****** WRITE ALL NON-MEDIA CODE ABOVE THIS LINE *****/
Line 295: Line 560:
 
  h1 {
 
  h1 {
 
     font-size: 25px !important;
 
     font-size: 25px !important;
−
}
+
}
 +
 
 +
h2 {
 +
    text-align: center;
 +
}
  
 
  ul.ntnu_navbar {
 
  ul.ntnu_navbar {
 
     background-color: #1f1c24;
 
     background-color: #1f1c24;
 
     margin-left: 0;
 
     margin-left: 0;
−
}
+
}
  
 
  .homebtn { display: none; }
 
  .homebtn { display: none; }
  
 
  .mobile-home { display: block; }
 
  .mobile-home { display: block; }
 +
 +
.timeline img {
 +
  padding: 0;
 +
}
 +
.container {
 +
  width: 90% !important;
 +
}
  
 
}
 
}

Latest revision as of 09:43, 15 October 2018