Как скрыть оглавление на мобильных устройствах - PullRequest
Новая
       52

Как скрыть оглавление на мобильных устройствах

0 голосов
/ 14 октября 2019

Я делаю свои первые неуклюжие шаги по настройке блога (с Хьюго, через blogdown / R) и борюсь с моим плавающим оглавлением. После длительных проб и ошибок я смог настроить его, однако я не могу скрыть оглавление при использовании мобильного устройства.

Стилизация сайта происходит через tachyons.io / css , и до сих пор я решил, что мне нужно установить 'float right, not small' (fl-ns) (см. здесь ). К сожалению, это было безрезультатно, и я не знаю, как действовать.

Вот код, определяющий оглавление: 

    {{ if .Params.toc | default true}}
  <div class="fr-ns fr-nm" id="sidebar-wrapper">
    <div id="sidebar">      
      <ul class="nav nav-pills nav-stacked fr-ns fr-nm" style="list-style:none;">
         <!-- ignore empty links with + -->
        {{ $headers := findRE "<h[1-3].*?>(.|\n])+?</h[1-3]>" .Content }}
        <!-- at least one header to link to -->
        {{ $has_headers := ge (len $headers) 1 }}
        {{ if $has_headers }}
          {{ range $headers }}
            {{ $header := . }}
            {{ range first 1 (findRE "<h[1-3]" $header 1) }}
              {{ range findRE "[1-3]" . 1 }}
                {{ $head_level := (int .) }}
                {{ $base := ($.Page.File.LogicalName) }}
                {{ $anchorId := ($header | plainify | htmlEscape | urlize | safeURL) }}
                <li class="toc-h{{ $head_level }} no-underline"><a href="#{{ $anchorId }}">
                    {{ $header | plainify | htmlEscape }}
                </a></li>
              {{end}}
            {{end}}
          {{ end }}
        {{ end }}
      </ul>
    </div>
  </div>
{{end}}

Вот соответствующая часть в стиле. Файл CSS: 

#sidebar-wrapper {
    max-width: 20px;
}

#sidebar {
    position: fixed; 
    top: 140px;
    /*background-color:gray;*/
}

@media (--breakpoint-not-small) {
  fr-ns {float: right; _display: inline; }
}

#sidebar > ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.nav-stacked>li>a {
    list-style-type:none;
    text-decoration:none;
    margin: 0px;
    color:black;
    text-align:left;
}



.toc-h1 {
    font-size: 100%;
    font-color:orange;
    text-decoration:none;
}

.toc-h2 {
  font-size: 90%;
  padding-left: 20px;
}

.toc-h3 {
  font-size: 90%;
  padding-left: 40px;
}

Код всего блога виден здесь .

Я знаю, что это далеко, но если у кого-то есть идея - большое спасибо!

1 Ответ

0 голосов
/ 14 октября 2019

Думаю, я понял. Если экран меньше 600 пикселей, ToC не будет отображаться. 

@media screen and (max-width: 600px) {
  #sidebar {
    display: none;
  }
}
...