Difference between revisions of "Template:Peking/NavBar"

 
(47 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
     <style>
 
     <style>
−
        /********************************* DEFAULT WIKI SETTINGS ********************************/
 
−
        #sideMenu,
 
−
        #top_title {
 
−
            display: none;
 
−
        }
 
  
−
        #content {
 
−
            padding: 0px;
 
−
            width: 100%;
 
−
        }
 
  
−
         body {
+
         /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
            background-color: white;
+
−
            width: 100%;
+
−
        }
+
  
−
         #bodyContent h1,
+
         /* Clear the default wiki settings */
−
        #bodyContent h2,
+
−
        #bodyContent h3,
+
−
        #bodyContent h4,
+
−
        #bodyContent h5 {
+
−
            margin-bottom: 0px;
+
−
        }
+
  
−
         #bodyContent {
+
         #home_logo, #sideMenu {
−
             padding-right: 0px;
+
             display: none;
 
         }
 
         }
  
−
         #globalWrapper {
+
         #sideMenu, #top_title, .patrollink {
−
             font-size: 100%;
+
             display: none;
−
            padding: 0px;
+
−
            margin: -10px -20px -20px -20px;
+
 
         }
 
         }
  
−
        .navbar-collapse {
+
         #content {
−
            padding-left: 0px;
+
             width: 100%;
−
        }
+
−
 
+
−
         #banner {
+
−
            margin-top: 50px;
+
−
        }
+
−
 
+
−
        #sideMenu {
+
−
            margin-top: 10px;
+
−
        }
+
−
 
+
−
        .dropdown-menu li:hover .sub-menu {
+
−
            visibility: visible;
+
−
        }
+
−
 
+
−
        .dropdown:hover .dropdown-menu {
+
−
            display: block;
+
−
        }
+
−
 
+
−
        .navbar-nav .dropdown-menu,
+
−
        .navbar .dropdown-menu {
+
−
            margin-top: 0;
+
−
        }
+
−
 
+
−
        /********************************* CONTENT OF THE PAGE ********************************/
+
−
 
+
−
        /* Wrapper for the content */
+
−
 
+
−
        .content_wrapper {
+
−
             width: 85%;
+
−
            margin-left: 150px;
+
 
             padding: 0px;
 
             padding: 0px;
−
             float: left;
+
             margin-top: -7px;
−
             background-color: white;
+
             margin-left: 0px;
 
         }
 
         }
  
−
         /*LAYOUT */
+
         body {
−
 
+
−
        .column {
+
−
            padding: 10px 0px;
+
−
            float: left;
+
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
  
−
         .full_size {
+
         #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
−
             width: 100%;
+
             margin-bottom: 0px;
 
         }
 
         }
  
−
        .full_size img {
+
    </style>
−
            padding: 10px 15px;
+
−
            width: 96.5%;
+
−
        }
+
  
−
        .half_size {
+
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
−
            width: 50%;
+
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
−
        }
+
action=raw&ctype=text/javascript"></script>
 +
    <link href="https://2017.igem.org/Template:Peking/mdl/component?action=raw&ctype=text/css" rel="stylesheet">
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/mdl/componentjs?action=raw&ctype=text/javascript"></script>
  
−
        .half_size img {
+
    <link rel="stylesheet" type="text/css"
−
            padding: 10px 15px;
+
          href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
−
            width: 93%;
+
−
        }
+
  
−
        .img:hover {
 
−
            opacity: 1.0 !important;
 
−
        }
 
  
−
        .clear {
 
−
            clear: both;
 
−
        }
 
  
−
        .highlight {
 
−
            width: 90%;
 
−
            margin: auto;
 
−
            padding: 15px 5px;
 
−
            background-color: #f2f2f2;
 
−
        }
 
  
−
        .judges-will-not-evaluate {
 
−
            border: 4px solid #72c9b6;
 
−
            display: block;
 
−
            margin: 5px 15px;
 
−
            width: 95%;
 
−
            font-weight: bold;
 
−
        }
 
  
−
        /********************************* RESPONSIVE STYLING ********************************/
+
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/main?action=raw&ctype=text/css">
 +
    <!-- Fonts -->
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/fonts?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/icon?action=raw&ctype=text/css">
  
−
        /* IF THE SCREEN IS LESS THAN 1000PX */
 
  
−
        @media only screen and (max-width: 1000px) {
+
</head>
−
            #content {
+
−
                width: 100%;
+
−
            }
+
  
−
            .menu_wrapper {
 
−
                width: 15%;
 
−
            }
 
  
−
            .content_wrapper {
 
−
                margin-left: 15%;
 
−
            }
 
  
−
            .menu_item {
 
−
                display: block;
 
−
            }
 
  
−
            .icon {
 
−
                display: none;
 
−
            }
 
  
−
            .highlight {
+
<body>
−
                padding: 10px 0px;
+
−
            }
+
−
        }
+
  
−
        /* IF THE SCREEN IS LESS THAN 680PX */
 
  
−
        @media only screen and (max-width: 680px) {
 
−
            .collapsable_menu_control {
 
−
                display: block;
 
−
            }
 
  
−
            .menu_item {
+
<!-- Always shows a header, even in smaller screens. -->
−
                display: none;
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
−
             }
+
    <header class="mdl-layout__header">
 +
        <div class="mdl-layout__header-row">
 +
             <!-- Title -->
 +
            <a href="https://2017.igem.org/Team:Peking"><img src="https://static.igem.org/mediawiki/2017/c/cf/Peking_TeamLogoClassical.png" height="35"></a>
  
−
             .menu_wrapper {
+
             <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking" style="color: #000000; font-size: x-large"><strong>Peking iGEM </strong> 2017</a>
−
                 width: 100%;
+
            <!-- Add spacer, to align navigation to the right -->
−
                height: 15%;
+
            <div class="mdl-layout-spacer"></div>
−
                 position: relative;
+
            <!-- Navigation. We hide it in small screens. -->
−
             }
+
            <nav class="mdl-navigation mdl-layout--large-screen-only">
 +
                 <style>
 +
                    a:link {text-decoration: none;}
 +
                    a:visited {text-decoration: none;}
 +
                    a:active {text-decoration: none;}
 +
                    a:hover {}
 +
                </style>
 +
                 <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking">Home</a>
 +
                <a class="mdl-navigation__link" href="" style="color: #000; font-weight: 500 ">Project</a>
 +
                <a class="mdl-navigation__link" href="">Modelling</a>
 +
                <a class="mdl-navigation__link" href="">Software</a>
 +
                <a class="mdl-navigation__link" href="">Hardware</a>
 +
                <a class="mdl-navigation__link" href="">Lab</a>
 +
                <a class="mdl-navigation__link" href="">Practices</a>
 +
                <a class="mdl-navigation__link" href="">Parts</a>
 +
                <a class="mdl-navigation__link" href="">Team</a>
 +
             </nav>
 +
        </div>
 +
    </header>
 +
</div>
  
−
            .content_wrapper {
 
−
                width: 100%;
 
−
                margin-left: 0px;
 
−
            }
 
  
−
            .column.half_size {
+
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col" style="padding-top: 60px;">
−
                width: 100%;
+
    <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
−
            }
+
  
−
            .column img {
+
        <a href="https://getmdl.io/components/index.html#Background"
−
                width: 100%;
+
          class="mdl-components__link mdl-component Background">
−
                padding: 5px 0px;
+
            <div class="mdl-components__link-image"
−
             }
+
                style="background-image: url(&#39;../assets/comp_badges.png&#39;)">
 +
             </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Background</span>
 +
        </a>
  
−
            .icon {
+
        <a href="https://getmdl.io/components/index.html#Introduction"
−
                display: block;
+
          class="mdl-components__link mdl-component Introduction">
−
             }
+
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_buttons.png&#39;)">
 +
             </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Introduction</span>
 +
        </a>
  
−
            .highlight {
+
        <a href="https://getmdl.io/components/index.html#Flip-flop"
−
                padding: 15px 5px;
+
          class="mdl-components__link mdl-component FF">
−
             }
+
            <div class="mdl-components__link-image"
−
        }
+
                style="background-image: url(&#39;../assets/comp_cards.png&#39;)">
−
    </style>
+
             </div>
 +
            <span class="mdl-components__link-text"style="font-size: medium">Flip-flop</span>
 +
        </a>
  
−
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
        <a href="https://getmdl.io/components/index.html#Controller"
−
    <link rel="stylesheet" type="text/css"
+
          class="mdl-components__link mdl-component CU">
−
          href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
+
            <div class="mdl-components__link-image"
−
    <link rel="stylesheet" type="text/css"
+
                style="background-image: url(&#39;../assets/comp_chips.png&#39;)">
−
          href="https://2017.igem.org/Template:Peking/mdl/main?action=raw&ctype=text/css">
+
            </div>
−
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
+
            <span class="mdl-components__link-text"style="font-size: medium">Controller</span>
−
action=raw&ctype=text/javascript"></script>
+
        </a>
  
 +
        <a href="https://getmdl.io/components/index.html#Clock"
 +
          class="mdl-components__link mdl-component Clock">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_dialog.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Clock</span>
 +
        </a>
  
−
</head>
+
        <a href="https://getmdl.io/components/index.html#Demonstrate"
 +
          class="mdl-components__link mdl-component Demonstrate">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_layout.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Demonstrate</span>
 +
        </a>
  
 +
        <a href="https://getmdl.io/components/index.html#Prospect"
 +
          class="mdl-components__link mdl-component Prospect">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_lists.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Prospect</span>
 +
        </a>
  
 +
    </aside>
  
 +
    <section id="Background" class="mdl-components__page mdl-grid">
 +
        <p>1223</p>
 +
    </section>
 +
    <section id="Introduction" class="mdl-components__page mdl-grid">
 +
        <p>2334</p>
 +
    </section>
 +
</div>
  
  
−
<!-- The drawer is always open in large screens. The header is always shown,
 
−
  even in small screens. -->
 
  
−
 
−
<body>
 
−
 
−
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
 
−
            mdl-layout--fixed-header" style=" padding-top: 20px;">
 
−
 
−
    <div class="mdl-layout__drawer" >
 
−
        <span class="mdl-layout-title">Title</span>
 
−
        <nav class="mdl-navigation">
 
−
            <a class="mdl-navigation__link" href="">Link</a>
 
−
            <a class="mdl-navigation__link" href="">Link</a>
 
−
            <a class="mdl-navigation__link" href="">Link</a>
 
−
            <a class="mdl-navigation__link" href="">Link</a>
 
−
        </nav>
 
−
    </div>
 
−
    <main class="mdl-layout__content">
 
−
        <div class="page-content">233333</div>
 
−
    </main>
 
−
</div>
 
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 04:18, 17 October 2017

Peking iGEM 2017

1223

2334