Difference between revisions of "Team:Uppsala/test666"

 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Uppsala/css_removal}}
 
{{Uppsala/css_removal}}
 
{{Uppsala/javascript/iGemRemoval_js}}
 
{{Uppsala/javascript/iGemRemoval_js}}
−
<!--{{Uppsala/main_css}}-->
+
{{Uppsala/main_css}}
  
 
<html>
 
<html>
Line 7: Line 7:
 
<style type="text/css" rel="stylesheet">
 
<style type="text/css" rel="stylesheet">
 
:root {
 
:root {
−
  --nav-mobile-width: 100%;
+
    --nav-mobile-width: 100%;
−
  --toggler-size: 6vmin;
+
    --toggler-size: 37px;
−
  --toggler-line-number: 3;
+
    --toggler-line-number: 3;
−
  --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));
+
    --toggler-line-size: 7px; 
−
  --toggler-offset-left: 18px;
+
/* --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1)); */   
−
  --toggler-offset-top: 38px;
+
--toggler-offset-left: 20px;    
−
  --toggler-color: Tomato;
+
--toggler-offset-top: 40px;    
−
  --toggler-color-hover: Wheat;
+
--toggler-color: Tomato;  
 +
/* --toggler-color-hover: #29363B; */
 +
--toggler-color-hover: wheat;  
 
}
 
}
 +
 +
 +
@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');
 +
 +
 +
html {
 +
      @import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');
 +
}
 +
  
 
* {
 
* {
Line 24: Line 35:
 
}
 
}
  
−
html {
+
 
−
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
 
−
  font-size: 0.8rem;
+
 
−
   text-decoration: none;
+
 
−
}
+
 
 +
 
 +
    
 +
 
 +
 
 +
 
 
@media screen and (min-width: 20em) {
 
@media screen and (min-width: 20em) {
−
   html {
+
  ul#menu-mobile  li.mobile-list-item   a.mobile-list-link    ul.mobile-nav-ul {
 
     font-size: calc(0.8rem + 0.4 * (100vw - 20em) / 55);
 
     font-size: calc(0.8rem + 0.4 * (100vw - 20em) / 55);
 
   }
 
   }
 
}
 
}
 
@media screen and (min-width: 75em) {
 
@media screen and (min-width: 75em) {
−
   html {
+
  ul#menu-mobile  li.mobile-list-item   a.mobile-list-link    ul.mobile-nav-ul {
 
     font-size: 1.2rem;
 
     font-size: 1.2rem;
 
   }
 
   }
Line 44: Line 60:
 
.wrapper-for-mobile {
 
.wrapper-for-mobile {
 
   min-width: 100vw;
 
   min-width: 100vw;
−
   background: AliceBlue;
+
   background: transparent;
 
   display: flex;
 
   display: flex;
 
}
 
}
Line 82: Line 98:
  
 
.mobile-list-link {
 
.mobile-list-link {
−
  color: white;
+
    font-family: 'Roboto', sans-serif;
−
  font-weight: 80;
+
    color: white;
 +
    font-weight: 80;
 
   text-decoration: none;
 
   text-decoration: none;
 
   list-style: none;
 
   list-style: none;
Line 107: Line 124:
 
}
 
}
  
−
.menu-toggler-line {
+
 
−
  height: var(--toggler-line-size);
+
.menu-toggler-line {    
−
  background: var(--toggler-color);
+
height: 6px;    
−
  position: absolute;
+
background: var(--toggler-color);    
−
  border-radius: calc(var(--toggler-line-size) / 2);
+
position: absolute;    
−
  left: 0;
+
border-radius: 10px;    
−
  right: 0;
+
left: 0;    
−
  transition: all .25s ease-out;
+
right: 0;    
−
}
+
transition: all .25s ease-out;  
 +
}  
 +
 
 +
 
 +
 
 
.menu-toggler-line:nth-child(1) {
 
.menu-toggler-line:nth-child(1) {
 
   top: calc(var(--toggler-line-size) * 1 + (var(--toggler-line-size) * (1 - 2)));
 
   top: calc(var(--toggler-line-size) * 1 + (var(--toggler-line-size) * (1 - 2)));
Line 155: Line 176:
 
   height: calc(100vh - 50px);
 
   height: calc(100vh - 50px);
 
}
 
}
 +
 +
 +
ul.mobile-nav-ul > li {
 +
      color: white;
 +
}
 +
 +
 +
ul.mobile-nav-ul > li a {
 +
    font-family: 'Railway', sans-serif;
 +
    color: white;
 +
    font-size: calc(2vw + 1em);
 +
    line-height: initial;
 +
    padding-left: calc(2vw - -10px);
 +
    margin-left: 0px;
 +
}
 +
 +
.nav-text-style {
 +
    /* font-family: 'Roboto', sans-serif; */
 +
      text-shadow: 0px 0px 1px #eee;
 +
  /* font-family: 'Raleway', sans-serif; */
 +
}
 +
 +
a.mobile-list-link {
 +
      text-shadow: 0px 0px 1px #eee;
 +
}
 +
 +
 +
a.mobile-list-link:visited {
 +
    color: white;
 +
}
 +
 +
  
 
</style>
 
</style>
 +
 +
 
</head>
 
</head>
 +
 +
 +
  
 
<body>
 
<body>
  
 
<div class="wrapper-for-mobile">
 
<div class="wrapper-for-mobile">
−
  <input type="checkbox" id="nav-mobile-toggle" class="input-nav-toggler" value="1" />
+
      <input type="checkbox" id="nav-mobile-toggle" class="input-nav-toggler" value="1" />
 +
 
 
   <label for="nav-mobile-toggle" id="nav-mobile-toggleLabel" class="menu-toggler" role="button" aria-pressed="false" aria-expanded="false" aria-label="Navigation button">
 
   <label for="nav-mobile-toggle" id="nav-mobile-toggleLabel" class="menu-toggler" role="button" aria-pressed="false" aria-expanded="false" aria-label="Navigation button">
−
    <span class="menu-toggler-line"></span>
+
      <span class="menu-toggler-line"></span>
−
    <span class="menu-toggler-line"></span>
+
      <span class="menu-toggler-line"></span>
−
    <span class="menu-toggler-line"></span>
+
      <span class="menu-toggler-line"></span>
 
   </label>
 
   </label>
 +
 +
 
   <!-- Navigation for mobile -->
 
   <!-- Navigation for mobile -->
−
   <nav id="nav-mobile" class="nav-mobile" role="navigation" aria-labelledby="nav-mobile-toggleLabel" aria-hidden="true">
+
   <nav id="nav-mobile" class="nav-mobile" role="navigation" aria-labelledby="nav-mobile-toggleLabel" hidden="true">
 
     <ul id="menu-mobile" class="menu-nav-mobile" role="menu-mobile" aria-orientation="vertical">
 
     <ul id="menu-mobile" class="menu-nav-mobile" role="menu-mobile" aria-orientation="vertical">
−
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="www.2018.igem.org" role="menuitem" tabindex="-1"> Project </a></li>
+
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Project </a></li>
 
       <ul class="mobile-nav-ul">
 
       <ul class="mobile-nav-ul">
−
            <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
            <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
 
     </ul>
 
     </ul>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Team </a></li>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Team </a></li>
 
       <ul class="mobile-nav-ul">
 
       <ul class="mobile-nav-ul">
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
            <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts  </a></li>
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
            <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
 +
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
 
     </ul>
 
     </ul>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Modelling </a></li>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Modelling </a></li>
 
         <ul class="mobile-nav-ul">
 
         <ul class="mobile-nav-ul">
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
 
     </ul>
 
     </ul>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Notebook </a></li>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Notebook </a></li>
 
     <ul class="mobile-nav-ul">
 
     <ul class="mobile-nav-ul">
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
 
     </ul>
 
     </ul>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
 
       <ul class="mobile-nav-ul">
 
       <ul class="mobile-nav-ul">
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
            <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
 
     </ul>
 
     </ul>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Human Practice </a></li>
 
       <li class="mobile-list-item" role"none"><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Human Practice </a></li>
 
       <ul class="mobile-nav-ul">
 
       <ul class="mobile-nav-ul">
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
          <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>             
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>
+
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
−
             <li><a class="mobile-list-link" href="#" role="menuitem" tabindex="-1"> Parts </a></li>  
+
 
         </ul>
 
         </ul>
 
     </ul>
 
     </ul>
Line 236: Line 291:
  
  
−
<style>
 
  
−
ul.mobile-nav-ul > li {
 
−
    color: red;
 
−
}
 
  
  
−
ul.mobile-nav-ul > li a {
 
−
    font-size: 24px;
 
−
    line-height: 30px;
 
−
}
 
  
−
 
−
/*
 
−
.mobile-ul-hidden {
 
−
  display: none;
 
−
font-size: inherit;
 
−
}
 
−
 
−
.mobile-ul-visible {
 
−
 
−
}
 
−
 
−
*/
 
−
 
−
</style>
 
  
 
<script>
 
<script>

Latest revision as of 23:58, 11 October 2018