diff --git a/layouts/custom/sc.data.html b/layouts/custom/sc.data.html index dbc2a2c3d8d32ce96126f2977c505cdeb630f0d4..792b71314b6069ff86e230158fc762e9f6de41cd 100644 --- a/layouts/custom/sc.data.html +++ b/layouts/custom/sc.data.html @@ -1,7 +1,5 @@ {{ partial "header.html" . }} -<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> - <div class="header"> <h1>{{ .Title }}</h1> <h2>{{ .Description }}</h2> @@ -12,6 +10,7 @@ margin: 0; max-width: none; } + .select { float: top; z-index: 1; @@ -19,26 +18,48 @@ overflow-x: hidden; padding: 8px 10px; } - .contents { + + .contentsFull { margin: 0; max-width: none; float: center; } - .column { + + .row:after { + content: ""; + display: table; + clear: both; + } + + .columnImg { + float: left; + text-align: center; + width: 50%; + } + + .columnNav { float: left; text-align: center; width: 50%; } + .img { max-width: 75%; height: auto; margin-left: auto; margin-right: auto; } - .huGenes {display:none;} - .muGenes {display:none;} + + .huGenes { + display: none; + } + + .muGenes { + display: none; + } + @media (max-width: 1000px) { - .column { + .column { width: 100%; } } @@ -46,21 +67,35 @@ <div class="cloud"> <div class="select"> - <div class="contents w3-content w3-display-container"> - <div class="column"> - <p class="w3-padding-5 w3-black huGenesName"></p> - <img class="huGenes img" src="/gene.cloud/Genes.hu.202005.png" alt="Human genes searched in May 2020"> - <img class="huGenes img" src="/gene.cloud/Genes.hu.202004.png" alt="Human genes searched in April 2020"> - <img class="huGenes img" src="/gene.cloud/Genes.hu.202003.png" alt="Human genes searched in March 2020"> + <div class="contentsFull"> + <div class="row"> + <div class="columnImg"> + <p class="huGenesName" style="background-color:black;"></p> + <img class="huGenes img" src="/gene.cloud/Genes.hu.202005.png" + alt="Human genes searched in May 2020"> + <img class="huGenes img" src="/gene.cloud/Genes.hu.202004.png" + alt="Human genes searched in April 2020"> + <img class="huGenes img" src="/gene.cloud/Genes.hu.202003.png" + alt="Human genes searched in March 2020"> + </div> + <div class="columnImg"> + <p class="muGenesName" style="background-color:black;"></p> + <img class="muGenes img" src="/gene.cloud/Genes.mu.202005.png" + alt="Mouse genes searched in May 2020"> + <img class="muGenes img" src="/gene.cloud/Genes.mu.202004.png" + alt="Mouse genes searched in April 2020"> + <img class="muGenes img" src="/gene.cloud/Genes.mu.202003.png" + alt="Mouse genes searched in March 2020"> + </div> + </div> + <div class="row"> + <div class="columnNav"> + <div style="font-size:50px" onclick="plusCloud(1)">❮</div> + </div> + <div class="columnNav"> + <div style="font-size:50px" onclick="plusCloud(-1)">❯</div> + </div> </div> - <div class="column"> - <p class="w3-padding-5 w3-black muGenesName"></p> - <img class="muGenes img" src="/gene.cloud/Genes.mu.202005.png" alt="Mouse genes searched in May 2020"> - <img class="muGenes img" src="/gene.cloud/Genes.mu.202004.png" alt="Mouse genes searched in April 2020"> - <img class="muGenes img" src="/gene.cloud/Genes.mu.202003.png" alt="Mouse genes searched in March 2020"> - </div> - <div class="w3-left" style="font-size:30px" onclick="plusCloud(1)">❮</div> - <div class="w3-right" style="font-size:30px"onclick="plusCloud(-1)">❯</div> </div> </div> </div> @@ -68,7 +103,7 @@ <hr> <br> {{ range where .Pages.ByWeight "Params.current" true }} - <li><b><a href="{{.Permalink}}">{{.Params.name}}</a></b></li> + <li><b><a href="{{.Permalink}}">{{.Params.name}}</a></b></li> {{ end }} <br> <hr> @@ -77,25 +112,25 @@ <script> var slideIndex = 1; showCloud(slideIndex); - + function plusCloud(n) { - showCloud(slideIndex += n); + showCloud(slideIndex += n); } function showCloud(n) { - var i; - var x = document.getElementsByClassName("huGenes"); - var y = document.getElementsByClassName("muGenes"); - if (n > x.length) {slideIndex = 1} - if (n < 1) {slideIndex = x.length} - for (i = 0; i < x.length; i++) { - x[i].style.display = "none"; - y[i].style.display = "none"; - } - x[slideIndex-1].style.display = "block"; - y[slideIndex-1].style.display = "block"; - document.getElementsByClassName("huGenesName")[0].innerHTML = x[slideIndex-1].alt; - document.getElementsByClassName("muGenesName")[0].innerHTML = y[slideIndex-1].alt; + var i; + var x = document.getElementsByClassName("huGenes"); + var y = document.getElementsByClassName("muGenes"); + if (n > x.length) { slideIndex = 1 } + if (n < 1) { slideIndex = x.length } + for (i = 0; i < x.length; i++) { + x[i].style.display = "none"; + y[i].style.display = "none"; + } + x[slideIndex - 1].style.display = "block"; + y[slideIndex - 1].style.display = "block"; + document.getElementsByClassName("huGenesName")[0].innerHTML = x[slideIndex - 1].alt; + document.getElementsByClassName("muGenesName")[0].innerHTML = y[slideIndex - 1].alt; } </script>