Difference between revisions of "Template:Kobe"

Line 1: Line 1:
−
<html>
+
<html>
  
−
                        <head>
+
<head>
  
−
                                <!-- This tells the browser that your page is responsive -->
+
    <!-- This tells the browser that your page is responsive -->
−
                                <meta name="viewport" content="width=device-width, initial-scale=1"
+
    <meta name="viewport" content="width=device-width, initial-scale=1"
−
                                      charset="utf-8">
+
          charset="utf-8">
−
                                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  
−
                            </head>
+
</head>
  
−
                            <script>
+
<script>
  
 
     $(function () {
 
     $(function () {
Line 52: Line 52:
 
     });
 
     });
  
−
                            </script>
+
</script>
  
  
  
−
                            <style>
+
<style>
−
                                html {
+
    html {
−
                                    height: 100%
+
        height: 100%
−
                                }
+
    }
  
−
                                * {
+
    * {
−
                                    margin: 0;
+
        margin: 0;
−
                                    padding: 0;
+
        padding: 0;
−
                                }
+
    }
  
−
                                body {
+
    body {
−
                                    background: #C8E6C9;
+
        background: #C8E6C9;
−
                                    height: 100%;
+
        height: 100%;
−
                                }
+
    }
  
−
                                ul {
+
    ul {
−
                                    list-style: none;
+
        list-style: none;
−
                                }
+
    }
  
−
                                a {
+
    a {
−
                                    text-decoration: none;
+
        text-decoration: none;
−
                                }
+
    }
  
−
                                h2 {
+
    h2 {
−
                                    text-align: center;
+
        text-align: center;
−
                                    margin: 20px auto;
+
        margin: 20px auto;
−
                                    color: #fff;
+
        color: #fff;
−
                                }
+
    }
  
−
                                .accordion-menu {
+
    .accordion-menu {
−
                                    background: #fff;
+
        background: #fff;
−
                                    border-radius: 4px;
+
        border-radius: 4px;
−
                                    margin-top: 0px;
+
        margin-top: 0px;
−
                                    margin-left: 0px;
+
        margin-left: 0px;
−
                                }
+
    }
  
  
−
                                    .accordion-menu li.open .dropdownlink {
+
        .accordion-menu li.open .dropdownlink {
−
                                        color: #CDDC39;
+
            color: #CDDC39;
−
                                    }
+
        }
  
−
                                .fa-chevron-down {
+
    .fa-chevron-down {
−
                                    transform: rotate(180deg);
+
        transform: rotate(180deg);
−
                                }
+
    }
  
  
  
−
                                .accordion-menu li:last-child .dropdownlink {
+
    .accordion-menu li:last-child .dropdownlink {
−
                                    border-bottom: 0;
+
        border-bottom: 0;
−
                                }
+
    }
  
−
                                .dropdownlink {
+
    .dropdownlink {
−
                                    cursor: pointer;
+
        cursor: pointer;
−
                                    display: block;
+
        display: block;
−
                                    padding: 15px 15px 15px 45px;
+
        padding: 15px 15px 15px 45px;
−
                                    font-size: 18px;
+
        font-size: 18px;
−
                                    border-bottom: 1px solid #ccc;
+
        border-bottom: 1px solid #ccc;
−
                                    color: #212121;
+
        color: #212121;
−
                                    position: relative;
+
        position: relative;
−
                                    transition: all 0.4s ease-out;
+
        transition: all 0.4s ease-out;
−
                                }
+
    }
−
                                .main {
+
−
                                    background-color: #C8E6C9;
+
−
                                }
+
  
 +
    .main {
 +
        background-color: #C8E6C9;
 +
    }
  
−
                                #globalWrapper {
 
−
                                    background-color: #C8E6C9;
 
−
                                }
 
−
                                #content {
 
−
                                    background-color: #C8E6C9;
 
−
                                }
 
−
                               
 
−
                               
 
−
                                .dropdownlink i {
 
−
                                    position: absolute;
 
−
                                    top: 17px;
 
−
                                    left: 16px;
 
−
                                }
 
  
−
                                .fa-chevron-down {
+
    #globalWrapper {
−
                                    right: 12px;
+
        background-color: #C8E6C9;
−
                                    left: auto;
+
    }
−
                                }
+
  
 +
    #content {
 +
        background-color: #C8E6C9;
 +
    }
  
  
−
                                .submenuItems {
+
    .dropdownlink i {
−
                                    display: none;
+
        position: absolute;
−
                                    background: #C8E6C9;
+
        top: 17px;
−
                                }
+
        left: 16px;
 +
    }
  
−
                                    .submenuItems li {
+
    .fa-chevron-down {
−
                                        border-bottom: 1px solid #B6B6B6;
+
        right: 12px;
−
                                    }
+
        left: auto;
 +
    }
  
  
−
                                    .submenuItems a {
 
−
                                        display: block;
 
−
                                        color: #727272;
 
−
                                        padding: 12px 12px 12px 45px;
 
−
                                        transition: all 0.4s ease-out;
 
−
                                    }
 
  
−
                                    .submenuItems :hover {
+
    .submenuItems {
−
                                        background-color: #CDDC39;
+
        display: none;
−
                                        color: #fff;
+
        background: #C8E6C9;
−
                                    }
+
    }
  
 +
        .submenuItems li {
 +
            border-bottom: 1px solid #B6B6B6;
 +
        }
  
  
−
                                .teamlogo {
+
        .submenuItems a {
−
                                    width: 100%;
+
            display: block;
−
                                    margin-top: 0px;
+
            color: #727272;
−
                                }
+
            padding: 12px 12px 12px 45px;
 +
            transition: all 0.4s ease-out;
 +
        }
  
−
                                .directlink {
+
        .submenuItems :hover {
−
                                    cursor: pointer;
+
            background-color: #CDDC39;
−
                                    display: block;
+
            color: #fff;
−
                                    padding: 15px 15px 15px 45px;
+
        }
−
                                    font-size: 18px;
+
−
                                    border-bottom: 1px solid #ccc;
+
−
                                    color: #212121;
+
−
                                    position: relative;
+
−
                                }
+
  
  
  
 +
    .teamlogo {
 +
        width: 100%;
 +
        margin-top: 0px;
 +
    }
  
 +
    .directlink {
 +
        cursor: pointer;
 +
        display: block;
 +
        padding: 15px 15px 15px 45px;
 +
        font-size: 18px;
 +
        border-bottom: 1px solid #ccc;
 +
        color: #212121;
 +
        position: relative;
 +
    }
  
−
                                .main p {
 
−
                                    padding: 15px 20px;
 
−
                                    margin: 0;
 
−
                                }
 
  
−
                                .main h1 {
 
−
                                    text-align: center
 
−
                                }
 
  
−
                                #home_logo, #sideMenu {
 
−
                                    display: none;
 
−
                                }
 
  
−
                                #sideMenu, #top_title, .patrollink {
 
−
                                    display: none;
 
−
                                }
 
  
−
                                #content {
+
    .main p {
−
                                    width: 100%;
+
        padding: 15px 20px;
−
                                    padding: 0px;
+
        margin: 0;
−
                                    margin-top: -7px;
+
    }
−
                                    margin-left: 0px;
+
−
                                }
+
  
 +
    .main h1 {
 +
        text-align: center
 +
    }
  
 +
    #home_logo, #sideMenu {
 +
        display: none;
 +
    }
  
−
                                #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
    #sideMenu, #top_title, .patrollink {
−
                                    margin-bottom: 0px;
+
        display: none;
−
                                }
+
    }
  
−
                                #bodyContent {
+
    #content {
−
                                    margin-top: 0px;
+
        width: 100%;
−
                                    margin-left: 0px;
+
        padding: 0px;
−
                                }
+
        margin-top: -7px;
 +
        margin-left: 0px;
 +
    }
  
−
                                #HQ_page {
 
−
                                    margin-top: 0px;
 
−
                                    margin-left: 0px;
 
−
                                }
 
  
  
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
    }
  
−
                                table {
+
    #bodyContent {
−
                                    border-collapse: collapse;
+
        margin-top: 0px;
−
                                    text-align: left;
+
        margin-left: 0px;
−
                                    line-height: 1.5;
+
    }
−
                                }
+
  
−
                                    table th {
+
    #HQ_page {
−
                                        padding: 10px;
+
        margin-top: 0px;
−
                                        font-weight: bold;
+
        margin-left: 0px;
−
                                        vertical-align: top;
+
    }
−
                                        border: 1px solid #ccc;
+
−
                                    }
+
  
−
                                    table td {
 
−
                                        padding: 10px;
 
−
                                        vertical-align: top;
 
−
                                        border: 1px solid #ccc;
 
−
                                        width: 100px;
 
−
                                    }
 
  
−
                                .empty {
 
−
                                    background-image: linear-gradient(to top right, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
 
−
                                }
 
  
−
                                .mw-content-ltr ul {
+
    table {
−
                                    margin: 0px !important;
+
        border-collapse: collapse;
−
                                }
+
        text-align: left;
 +
        line-height: 1.5;
 +
    }
  
 +
        table th {
 +
            padding: 10px;
 +
            font-weight: bold;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
  
−
                                table {
+
        table td {
−
                                    border-collapse: collapse;
+
            padding: 10px;
−
                                    text-align: left;
+
            vertical-align: top;
−
                                    line-height: 1.5;
+
            border: 1px solid #ccc;
−
                                }
+
            width: 100px;
 +
        }
  
−
                                    table th {
+
    .empty {
−
                                        width: 100px;
+
        background-image: linear-gradient(to top right, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
−
                                        padding: 10px;
+
    }
−
                                        font-weight: bold;
+
−
                                        vertical-align: top;
+
−
                                        border: 1px solid #ccc;
+
−
                                    }
+
  
−
                                    table td {
+
    .mw-content-ltr ul {
−
                                        padding: 10px;
+
        margin: 0px !important;
−
                                        vertical-align: top;
+
    }
−
                                        border: 1px solid #ccc;
+
−
                                    }
+
  
  
−
                                main > p {
+
    table {
−
                                    font-size: 30px;
+
        border-collapse: collapse;
−
                                }
+
        text-align: left;
−
                            </style>
+
        line-height: 1.5;
 +
    }
  
 +
        table th {
 +
            width: 100px;
 +
            padding: 10px;
 +
            font-weight: bold;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
  
 +
        table td {
 +
            padding: 10px;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
  
−
                            <head>
 
  
−
                                <!-- This tells the browser that your page is responsive -->
+
    .main > p {
−
                                <meta name="viewport" content="width=device-width, initial-scale=1">
+
        font-size: 30px;
 +
    }
 +
</style>
  
  
−
                                <style>
 
−
                                    .main h1 .main h2 .main h3 .main h4 {
 
−
                                        margin: 0 auto;
 
−
                                    }
 
  
−
                                    .menu-title {
+
<head>
−
                                        display: block;
+
−
                                    }
+
  
−
                                    .dropdownlink::before {
+
    <!-- This tells the browser that your page is responsive -->
−
                                        content: "+";
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
                                    }
+
  
−
                                    @media screen and (min-width: 800px) {
 
−
                                        /* 表示領域が800px以上の場合に適用するスタイル */
 
−
                                        .menu-title {
 
−
                                            display: none;
 
−
                                        }
 
  
−
                                        .accordion-menu {
+
    <style>
−
                                            width: 20%;
+
        .main h1 .main h2 .main h3 .main h4 {
−
                                            max-height: 100%;
+
            margin: 0 auto;
−
                                            position: fixed;
+
        }
−
                                            max-width: 350px;
+
−
                                            overflow: scroll;
+
−
                                            margin-right: auto
+
−
                                        }
+
  
−
                                        .main {
+
        .menu-title {
−
                                            margin-left: 35%;
+
            display: block;
−
                                            margin-right: 15%;
+
        }
−
                                            margin-top: 10px;
+
−
                                            margin-bottom: 10px;
+
−
                                        }
+
−
                                    }
+
  
−
                                    @media only screen and (max-width: 800px) {
+
        .dropdownlink::before {
−
                                        #open, .teamlogo {
+
            content: "+";
−
                                            display: none;
+
        }
−
                                        }
+
  
−
                                        .accordion-menu, .main {
+
        @media screen and (min-width: 800px) {
−
                                            width: 100%
+
            /* 表示領域が800px以上の場合に適用するスタイル */
−
                                        }
+
            .menu-title {
 +
                display: none;
 +
            }
  
−
                                        .menu-title {
+
            .accordion-menu {
−
                                            cursor: pointer;
+
                width: 20%;
−
                                            display: block;
+
                max-height: 100%;
−
                                            padding: 15px 15px 15px 45px;
+
                position: fixed;
−
                                            font-size: 18px;
+
                max-width: 350px;
−
                                            border-bottom: 1px solid #ccc;
+
                overflow: scroll;
−
                                            color: #212121;
+
                margin-right: auto
−
                                            position: relative;
+
            }
−
                                        }
+
 
−
                                    }
+
            .main {
−
                                </style>
+
                margin-left: 35%;
−
                            </head>
+
                margin-right: 15%;
 +
                margin-top: 10px;
 +
                margin-bottom: 10px;
 +
            }
 +
        }
 +
 
 +
        @media only screen and (max-width: 800px) {
 +
            #open, .teamlogo {
 +
                display: none;
 +
            }
 +
 
 +
            .accordion-menu, .main {
 +
                width: 100%
 +
            }
 +
 
 +
            .menu-title {
 +
                cursor: pointer;
 +
                display: block;
 +
                padding: 15px 15px 15px 45px;
 +
                font-size: 18px;
 +
                border-bottom: 1px solid #ccc;
 +
                color: #212121;
 +
                position: relative;
 +
            }
 +
        }
 +
    </style>
 +
</head>
  
−
                            <body>
+
<body>
  
−
                                <ul class="accordion-menu">
+
    <ul class="accordion-menu">
−
                                    <li>
+
        <li>
  
−
                                        <img class="teamlogo" src=https://static.igem.org/mediawiki/2017/c/c0/T--Kobe--teamlogo.jpg>
+
            <img class="teamlogo" src=https://static.igem.org/mediawiki/2017/c/c0/T--Kobe--teamlogo.jpg>
  
−
                                    </li>
+
        </li>
−
                                    <li class="menu-title">
+
        <li class="menu-title">
−
                                        <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
+
            <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
−
                                            <a style="cursor:pointer;">MENU</a>
+
                <a style="cursor:pointer;">MENU</a>
−
                                        </div>
+
            </div>
−
                                    </li>
+
        </li>
  
  
−
                                    <div id="open">
+
        <div id="open">
−
                                        <li>
+
            <li>
  
−
                                        <li class="directlink">
+
            <li class="directlink">
−
                                            <a href="https://2017.igem.org/Team:Kobe">
+
                <a href="https://2017.igem.org/Team:Kobe">
−
                                                HOME
+
                    HOME
−
                                            </a>
+
                </a>
−
                                        </li>
+
            </li>
  
  
−
                                        <div class="dropdownlink">
+
            <div class="dropdownlink">
−
                                            <i aria-hidden="true"></i>
+
                <i aria-hidden="true"></i>
−
                                            PROJECT
+
                PROJECT
−
                                            <i aria-hidden="true"></i>
+
                <i aria-hidden="true"></i>
−
                                        </div>
+
            </div>
  
−
                                        <ul class="submenuItems">
+
            <ul class="submenuItems">
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Background">
+
                    <a href="https://2017.igem.org/Team:Kobe/Background">
−
                                                    Background
+
                        Background
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Overview">
+
                    <a href="https://2017.igem.org/Team:Kobe/Overview">
−
                                                    Overview
+
                        Overview
  
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Design">
+
                    <a href="https://2017.igem.org/Team:Kobe/Design">
−
                                                    Design
+
                        Design
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Parts">
+
                    <a href="https://2017.igem.org/Team:Kobe/Parts">
−
                                                    Parts
+
                        Parts
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Experiments">
+
                    <a href="https://2017.igem.org/Team:Kobe/Experiments">
−
                                                    Experiments
+
                        Experiments
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
  
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Results&amp;Discussion">
+
                    <a href="https://2017.igem.org/Team:Kobe/Results&amp;Discussion">
−
                                                    Results &amp; Discussion
+
                        Results &amp; Discussion
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
  
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/Notebook">
+
                    <a href="https://2017.igem.org/Team:Kobe/Notebook">
−
                                                    Notebook
+
                        Notebook
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                        </ul>
+
            </ul>
−
                                        </li>
+
            </li>
  
−
                                        <li class="directlink">
+
            <li class="directlink">
−
                                            <a href="https://2017.igem.org/Team:Kobe/Safety">
+
                <a href="https://2017.igem.org/Team:Kobe/Safety">
−
                                                SAFETY
+
                    SAFETY
−
                                            </a>
+
                </a>
−
                                        </li>
+
            </li>
  
−
                                        <div class="dropdownlink">
+
            <div class="dropdownlink">
−
                                            <i aria-hidden="true"></i>
+
                <i aria-hidden="true"></i>
−
                                            HUMAN PRACTICE
+
                HUMAN PRACTICE
−
                                            <i aria-hidden="true"></i>
+
                <i aria-hidden="true"></i>
−
                                        </div>
+
            </div>
  
−
                                        <ul class="submenuItems">
+
            <ul class="submenuItems">
  
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/HP/Gold_Integrated">
+
                    <a href="https://2017.igem.org/Team:Kobe/HP/Gold_Integrated">
−
                                                    Integrated Human Practice
+
                        Integrated Human Practice
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                            <li>
+
                <li>
−
                                                <a href="https://2017.igem.org/Team:Kobe/HP/Silver">
+
                    <a href="https://2017.igem.org/Team:Kobe/HP/Silver">
−
                                                    Education and Public Engagement
+
                        Education and Public Engagement
−
                                                </a>
+
                    </a>
−
                                            </li>
+
                </li>
−
                                        </ul>
+
            </ul>
  
−
                                        <li class="directlink">
+
            <li class="directlink">
−
                                            <a href="https://2017.igem.org/Team:Kobe/InterLab">
+
                <a href="https://2017.igem.org/Team:Kobe/InterLab">
−
                                                INTERLAB
+
                    INTERLAB
−
                                            </a>
+
                </a>
−
                                        </li>
+
            </li>
  
  
  
  
−
                                        <li>
+
            <li>
  
−
                                            <div class="dropdownlink">
+
                <div class="dropdownlink">
−
                                                <i aria-hidden="true"></i>
+
                    <i aria-hidden="true"></i>
−
                                                ABOUT US
+
                    ABOUT US
−
                                                <i aria-hidden="true"></i>
+
                    <i aria-hidden="true"></i>
−
                                            </div>
+
                </div>
  
−
                                            <ul class="submenuItems">
+
                <ul class="submenuItems">
−
                                                <li>
+
                    <li>
−
                                                    <a href="https://2017.igem.org/Team:Kobe/Team">
+
                        <a href="https://2017.igem.org/Team:Kobe/Team">
−
                                                        Meet the Team
+
                            Meet the Team
−
                                                    </a>
+
                        </a>
−
                                                </li>
+
                    </li>
−
                                                <li>
+
                    <li>
−
                                                    <a href="https://2017.igem.org/Team:Kobe/Attributions">
+
                        <a href="https://2017.igem.org/Team:Kobe/Attributions">
−
                                                        Attributions
+
                            Attributions
−
                                                    </a>
+
                        </a>
−
                                                </li>
+
                    </li>
  
−
                                                <li>
+
                    <li>
−
                                                    <a href="https://2017.igem.org/Team:Kobe/Collaborations">
+
                        <a href="https://2017.igem.org/Team:Kobe/Collaborations">
−
                                                        Collaborations
+
                            Collaborations
  
−
                                                    </a>
+
                        </a>
−
                                                </li>
+
                    </li>
  
−
                                                <li>
+
                    <li>
−
                                                    <a href="https://2017.igem.org/Team:Kobe/Acknowledgement">
+
                        <a href="https://2017.igem.org/Team:Kobe/Acknowledgement">
−
                                                        Acknowledgement and Sponsor
+
                            Acknowledgement and Sponsor
  
−
                                                    </a>
+
                        </a>
−
                                                </li>
+
                    </li>
  
−
                                            </ul>
+
                </ul>
−
                                        </li>
+
            </li>
  
−
                                    </div>
+
        </div>
  
−
                                </ul>
+
    </ul>
  
−
                            </body>
+
</body>

Revision as of 08:26, 30 October 2017