Skip to content
Snippets Groups Projects
Commit 036530f4 authored by Allan Blanchard's avatar Allan Blanchard
Browse files

Simpler side menu for publications

parent 77b7685f
No related branches found
No related tags found
1 merge request!11publis
Pipeline #28419 passed
Stage: test
    Stage: deploy
      Hide whitespace changes
      Inline Side-by-side
      assets/css/publications.css
      + 47
      − 93
      View file @ 036530f4
      ......@@ -2,52 +2,27 @@
      /* Colors */
      /* Global Media Queries */
      /* Direction */
      .pagePublications {
      display:block;
      padding-top: 30px;
      padding-top: 40px;
      }
      @media (min-width: 768px) {
      .pagePublications {
      padding-top: 60px;
      padding-top: 70px;
      }
      }
      .wrap {
      max-width: 1260px;
      .pagePublications > .wrap {
      position: relative;
      margin: 0 auto;
      padding: 0 25px;
      padding: 0 25px 0 95px;
      z-index: 2;
      }
      .publicationWrap > .publicationMenu > .pageTitle {
      text-align: center;
      display: block;
      margin: 25px 0;
      width: 100%;
      }
      .publicationWrap > .publicationMenu ,
      .publicationWrap > .publicationZone {
      display: block;
      }
      @media(min-width: 768px) {
      .publicationWrap {
      display: flex;
      }
      .publicationWrap > .publicationMenu {
      margin: 0 auto auto 0;
      overflow: auto;
      }
      .publicationWrap > .publicationMenu > nav {
      position: fixed;
      }
      .publicationWrap > .publicationZone {
      width: 80%;
      padding-left: 25px;
      }
      .publicationWrap > .publicationZone > h1:first {
      margin-top: 0;
      }
      .publicationWrap > .publicationMenu > .pageTitle {
      padding: 0;
      /* 1260 + navigation margins (25*2) + 70px*/
      @media (min-width: 1380px) {
      .pagePublications > .wrap {
      max-width: 1260px;
      margin: 0 auto;
      padding: 0 25px;
      }
      }
      ......@@ -72,30 +47,31 @@ summary {
      color: black !important;
      }
      .menu-button {
      display: block;
      text-align: center;
      background: none;
      cursor: pointer;
      transition: border-bottom 1s ease-in-out;
      -webkit-transition: border-bottom 1s ease-in-out;
      }
      .menu-button[attr="end"] {
      display: none;
      cursor: pointer;
      border-right: 4px solid #f7931c;
      border-left: 4px solid #f7931c;
      padding: 10px;
      }
      .nav-check:checked ~ .menu-button[attr="end"] {
      margin-top: 0;
      display: block;
      .nav-check:checked ~ .menu-button {
      border-left: none;
      }
      .nav-check {
      display: none;
      }
      .navigation {
      overflow: hidden;
      height: 0;
      transition: 0 0.5s ease-in-out;
      display: block;
      overflow-y: auto;
      overflow-x: visible;
      height: 100%;
      width: 0;
      padding: 0 ;
      }
      .navigation li,
      .navigation ul {
      text-align: center;
      text-align: left;
      margin-left: 0;
      padding-left: 0;
      }
      ......@@ -114,54 +90,32 @@ summary {
      color: #484848;
      }
      .navigation a:hover {
      color: #f7931c;
      text-decoration: underline;
      }
      .nav-check:checked ~ .navigation {
      height: 100%;
      transition: 500px 0.5s ease-in-out;
      }
      @media(min-width: 768px){
      .navigation {
      height: 100%;
      }
      .navigation li,
      .navigation ul {
      margin-top: 0;
      text-align: left;
      }
      }
      label h2 {
      margin: 0 auto;
      padding-bottom: 0;
      padding: 30px 15px 0 25px ;
      width: 100%;
      min-width: 230px;
      }
      label h2:before,
      label h2:after {
      content: '↓';
      label:after {
      content: '>';
      font-weight: bolder;
      display: inline-block;
      /* customize below */
      font-size: 1em;
      padding-right: 0.6em;
      padding-left: 0.6em;
      width: 1.6em;
      line-height: 1.6em;
      position: relative;
      top: 50%;
      font-size: 1.4em;
      text-align: center;
      border-radius: 50%;
      color: #f7931c;
      }
      .nav-check:checked ~ label h2:before,
      .nav-check:checked ~ label h2:after {
      content: '↑';
      .nav-check:checked ~ label:after {
      content: '<';
      left: unset;
      }
      .sideMenu {
      position: fixed;
      height: 100vh;
      display: inline-flex;
      padding-top: 65px;
      background: white;
      z-index: 3;
      }
      @media(min-width: 768px){
      label h2:before,
      label h2:after,
      .nav-check:checked ~ label h2:before,
      .nav-check:checked ~ label h2:after,
      label h2 {
      content: '';
      overflow: hidden;
      height: 0;
      }
      }
      \ No newline at end of file
      html/publications.html
      + 62
      − 67
      View file @ 036530f4
      ......@@ -5,82 +5,77 @@ css: publications
      ---
      <body class="page-template page-template-page-documentation page-template-page-documentation-php page page-id-20 nonTouch">
      <div id="wrapper" class="hfeed">
      <div class="sideMenu">
      <input class="nav-check" id="nav-check" type="checkbox">
      <nav class="navigation">
      <ul>
      <li><a href="#general">Frama-C General</a></li>
      {% for category in site.data.publications %}
      <li>
      <a href="#{{ category.id }}">
      {% if category.short %}
      {{ category.short }}
      {% else %}
      {{ category.name }}
      {% endif %}
      </a><br/>
      <ul>
      {% for plugin in category.plugins %}
      <li>
      <a href="#{{ plugin.id }}">
      {% if plugin.short %}
      {{ plugin.short }}
      {% else %}
      {{ plugin.name }}
      {% endif %}
      </a>
      </li>
      {% endfor %}
      </ul>
      </li>
      {% endfor %}
      </ul>
      </nav>
      <label for="nav-check" class="menu-button"></label>
      </div>
      <div id="wrapper" class="hfeed">
      {% include headers.html header="documentation" %}
      <div id="container" class="mainContainer">
      <div class="pagePublications pages">
      <div class="wrap">
      <h1 class="pageTitle">Publications</h1>
      <div class="publicationWrap">
      <div class="publicationMenu">
      <input class="nav-check" id="nav-check" type="checkbox">
      <label for="nav-check" class="menu-button"><h2>Quick Access</h2></label>
      <nav class="navigation">
      <ul>
      <li><a href="#general">Frama-C General</a></li>
      {% for category in site.data.publications %}
      <li>
      <a href="#{{ category.id }}">
      {% if category.short %}
      {{ category.short }}
      {% else %}
      {{ category.name }}
      {% endif %}
      </a><br/>
      <ul>
      {% for plugin in category.plugins %}
      <li>
      <a href="#{{ plugin.id }}">
      {% if plugin.short %}
      {{ plugin.short }}
      {% else %}
      {{ plugin.name }}
      {% endif %}
      </a>
      </li>
      {% endfor %}
      </ul>
      </li>
      {% endfor %}
      </ul>
      </nav>
      <label for="nav-check" class="menu-button" attr="end"><h2>Close</h2></label>
      </div>
      <div class="publicationZone">
      <h1 id="general" class="anchor"> Frama-C General </h1>
      {% include publication-entries.html
      title="Manuals" category="manuals" plugin="general" %}
      {% include publication-entries.html
      title="Foundational" category="foundational" plugin="general" %}
      {% include publication-entries.html
      title="About the Frama-C Kernel" category="kernel" plugin="general" %}
      {% include publication-entries.html
      title="Tutorials" category="tutorials" plugin="general" %}
      {% for category in site.data.publications %}
      <h1 id="{{ category.id }}" class="anchor"> {{ category.name }} </h1>
      {% for plugin in category.plugins %}
      <h3 id="{{ plugin.id }}" class="anchor"> {{ plugin.name }} </h3>
      {% include publication-entries.html
      title="Manuals" category="manuals" plugin=plugin.id %}
      {% include publication-entries.html
      title="Theses" category="thesis" plugin=plugin.id %}
      {% include publication-entries.html
      title="Foundational" category="foundational" plugin=plugin.id %}
      {% include publication-entries.html
      title="Tutorials" category="tutorials" plugin=plugin.id %}
      {% include publication-entries.html
      title="Others" category="other" plugin=plugin.id %}
      {% endfor %}
      <h1 id="general" class="anchor"> Frama-C General </h1>
      {% include publication-entries.html
      title="Manuals" category="manuals" plugin="general" %}
      {% include publication-entries.html
      title="Foundational" category="foundational" plugin="general" %}
      {% include publication-entries.html
      title="About the Frama-C Kernel" category="kernel" plugin="general" %}
      {% include publication-entries.html
      title="Tutorials" category="tutorials" plugin="general" %}
      {% for category in site.data.publications %}
      <h1 id="{{ category.id }}" class="anchor"> {{ category.name }} </h1>
      {% for plugin in category.plugins %}
      <h3 id="{{ plugin.id }}" class="anchor"> {{ plugin.name }} </h3>
      {% include publication-entries.html
      title="Manuals" category="manuals" plugin=plugin.id %}
      {% include publication-entries.html
      title="Theses" category="thesis" plugin=plugin.id %}
      {% include publication-entries.html
      title="Foundational" category="foundational" plugin=plugin.id %}
      {% include publication-entries.html
      title="Tutorials" category="tutorials" plugin=plugin.id %}
      {% include publication-entries.html
      title="Others" category="other" plugin=plugin.id %}
      {% endfor %}
      </div>
      {% endfor %}
      </div>
      </div>
      </div>
      ......
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment