bundle update
.bundle exec jekyll build
.github-pages
ou jekyll
versão gem: jekyll 3.2.1Oi, obrigado pelo excelente trabalho.
Eu tentei (e falhei) para fazer o cabeçalho aderir.
Tentei atualizar o _masterhead.scss
para torná-lo fixed
e então joguei com as margens do contêiner sidebar
e main
, mas os pergaminhos e sticky
sidebar js fica mexendo com o cabeçalho.
Gostaria de saber se você pode me indicar como tornar isso possível ou adicioná-lo ao modelo como um recurso.
Aqui estão algumas dicas para você começar:
.masthead {
- position: relative;
+ position: fixed;
+ top: 0;
border-bottom: 1px solid #f2f3f3;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
z-index: 20;
+ width: 100%;
+ background: white; // set a color to hide content that may appear below masthead
+ height: 85px; // need a magic number here which may break in different viewports
}
Isso colocará o menu no cabeçalho no lugar certo. Mas vai se sobrepor ao conteúdo do corpo. Para corrigir isso, você precisa adicionar algum preenchimento na parte superior que corresponda à altura do masthead (ou maior) para que fique claro.
body {
margin: 0;
- padding: 0;
+ padding: 85px 0 0; // padding-top equal to masthead height or greater
color: #494e52;
font-family: -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
line-height: 1.5;
}
Esperançosamente, isso deve estar bem próximo do que você precisa. A barra lateral do autor está "presa" com um script sticky
polyfill. Ele faz algum vodu clonando-o, calculando sua posição e, em seguida, reposicionando as coisas para falsificar position: sticky
para navegadores que não suportam a propriedade.
Estou pensando que assim que você ajustar o outro CSS para o cabeçalho fixo, ele ajustará a barra lateral do autor de acordo. Do contrário, talvez você precise brincar com esse script. https://github.com/wilddeer/stickyfill
No meu site pessoal , tenho um cabeçalho posicionado fixo. A base de código não é 1: 1 para este tema, mas compartilha muitos dos mesmos scripts e coisas. Poderia procurar aqui algumas idéias para fazê-lo funcionar, se as sugestões acima não derem certo.
Obrigado!
Na verdade, verificar o seu site ajudou muito! Eu estava faltando o plano de fundo e o preenchimento da barra lateral.
Pergunta rápida, não apliquei o preenchimento ao corpo, mas sim ao contêiner #main
. Existe alguma diferença em relação ao estilo?
Aqui está a diferença final, caso alguém queira usá-la. As linhas podem não ser 100% semelhantes ao commit original conforme eu modifiquei a base, mas não devem ser difíceis de encontrar.
.masthead {
- position: relative;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: $masthead-height;
+
border-bottom: 1px solid $border-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
@@ -16,6 +20,7 @@
<strong i="10">@include</strong> clearfix;
padding: 0.1em 0.1em 0.1em;
font-family: $sans-serif-narrow;
+ background-color: #fff;
<strong i="11">@include</strong> breakpoint($x-large) {
max-width: $x-large;
diff --git a/_sass/_page.scss b/_sass/_page.scss
index e95f07d..487c5c7 100644
--- a/_sass/_page.scss
+++ b/_sass/_page.scss
@@ -6,6 +6,7 @@
<strong i="12">@include</strong> container;
<strong i="13">@include</strong> clearfix;
margin-top: 2em;
+ padding-top: $masthead-height;
padding-left: 1em;
padding-right: 1em;
animation: intro 0.3s both;
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 9df17ea..712498a 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -8,6 +8,7 @@
.sidebar {
<strong i="14">@include</strong> clearfix();
+ padding-top: $masthead-height;
margin-bottom: 1em;
<strong i="15">@include</strong> breakpoint($large) {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index d14acf0..eec32ee 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -139,3 +139,5 @@ $box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
$navicon-width : 28px;
$navicon-height : 4px;
$global-transition : all 0.2s ease-in-out;
+
+$masthead-height : 50px;
Depende do conteúdo e de como as coisas são estruturadas. Se todo o conteúdo principal estiver em principal, então não haverá problema em adicionar o preenchimento. Experimente e veja o que acontece. Provavelmente, você precisará de algumas tentativas e erros para acertar. Pelo menos eu costumo fazer: wink:
Comentários muito úteis
Obrigado!
Na verdade, verificar o seu site ajudou muito! Eu estava faltando o plano de fundo e o preenchimento da barra lateral.
Pergunta rápida, não apliquei o preenchimento ao corpo, mas sim ao contêiner
#main
. Existe alguma diferença em relação ao estilo?Aqui está a diferença final, caso alguém queira usá-la. As linhas podem não ser 100% semelhantes ao commit original conforme eu modifiquei a base, mas não devem ser difíceis de encontrar.