Difference between revisions of "Team:SDU-Denmark/testnavfp"

 
(45 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
#navbarPosition {
 
#navbarPosition {
 
   position:absolute;
 
   position:absolute;
−
   width: 60vw;
+
   width: 65vw;
−
   left:20vw;
+
   left:15vw;
−
}
+
−
 
+
−
@media only screen and (max-width: 1500px) {
+
−
  #navbarPosition {
+
−
    width: 70vw;
+
−
    left:10vw !important;
+
−
  }
+
−
 
+
−
  #highlightToggle {
+
−
  right:2vw !important;
+
−
  }
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1000px) {
+
−
  #navbarPosition {
+
−
    width: 80vw;
+
−
    left:2vw !important;
+
−
  }
+
−
 
+
−
  #highlightToggle {
+
−
  right:0vw !important;
+
−
  }
+
 
}
 
}
  
Line 53: Line 31:
 
     border-radius: 50%;
 
     border-radius: 50%;
 
     bottom: 2px;
 
     bottom: 2px;
 +
    position:absolute;
 
     content: "";
 
     content: "";
 
     height: 12px;
 
     height: 12px;
 
     left: 2px;
 
     left: 2px;
−
    position: absolute;
 
 
     -webkit-transition: .2s;
 
     -webkit-transition: .2s;
 
     transition: .2s;
 
     transition: .2s;
Line 78: Line 56:
 
/****************HIGHLIGHT BUTTON*****************/
 
/****************HIGHLIGHT BUTTON*****************/
 
#highlightToggle {
 
#highlightToggle {
−
     position: absolute;
+
     position: fixed;
−
     top:10px;
+
     top:30px;
 
     right:5vw;
 
     right:5vw;
 +
    overflow:visible;
 
}
 
}
  
 
#editorsHighlights {
 
#editorsHighlights {
 +
    position:relative;
 
     left: 0px;
 
     left: 0px;
−
    position: relative;
 
 
     top: -30px;
 
     top: -30px;
 
     width: 100px;
 
     width: 100px;
Line 146: Line 125:
 
#navbar {
 
#navbar {
 
   position:fixed;
 
   position:fixed;
 +
  overflow:visible;
 
   left:0;
 
   left:0;
 
   top:16px;
 
   top:16px;
 
   right:0;
 
   right:0;
 
   height:72px;
 
   height:72px;
−
  overflow:hidden;
 
 
   background: #f8f8f8;
 
   background: #f8f8f8;
 
   z-index:102;
 
   z-index:102;
Line 400: Line 379:
 
   transition: width .0s ease;
 
   transition: width .0s ease;
 
}
 
}
 +
 +
 +
 +
 +
 +
@media only screen and (max-width: 1600px) {
 +
  #navbarPosition {
 +
    width: 80vw;
 +
    left:7vw !important;
 +
  }
 +
 +
  #highlightToggle {
 +
  right:0vw !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
  }
 +
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 1024px) {
 +
  #navbarPosition {
 +
    width: 95vw;
 +
    left:1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
    padding-left:-15px;
 +
    padding-right:-15px;
 +
  }
 +
 +
  .nav-tabs > li > a {
 +
    font-size:14px;
 +
  }
 +
 +
HQ_page h5 {
 +
    font-size:1.1rem;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 768px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:-1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -3px;
 +
    margin-right: -3px;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
@media only screen and (max-width: 480px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:0vw !important;
 +
  }
 +
}
 +
 +
 +
  
  
Line 406: Line 463:
  
 
<body>
 
<body>
−
 
  
  
Line 522: Line 578:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
 
−
 
  
 
<div id="highlightToggle">
 
<div id="highlightToggle">
Line 531: Line 585:
  
 
<div id="editorsHighlights"><p><i>editors <span class="highlighted">highlights</span>.</i></p></div>
 
<div id="editorsHighlights"><p><i>editors <span class="highlighted">highlights</span>.</i></p></div>
 +
</div>
  
−
</div>
 
 
</header>
 
</header>
  

Latest revision as of 15:45, 16 September 2017