Blog horizontal

imagem







Cada vez mais sites de notícias e blogs estão se transformando em um longo footcloth que tem que ser enrolado verticalmente por um longo tempo de artigo em artigo. Para facilitar a rolagem, alguns sites escondem parte do artigo sob o spoiler. Outros sites exibem parte do artigo no feed e para lê-lo são forçados a ir para uma página separada.







Eu pensei por que não usar horizontal? Os desenvolvedores de navegadores deram ferramentas CSS suficientes para alinhar artigos horizontalmente e fazer uma transição perfeita entre eles.







Criei uma demonstração mínima que funciona com CSS e tem as seguintes propriedades:







  1. Os artigos são organizados horizontalmente.
  2. Parte do artigo não precisa ser escondida sob o spoiler, uma vez que a rolagem vertical para cada artigo é individual.
  3. Você pode ir para o próximo artigo de qualquer lugar no anterior, rolando a roda do mouse enquanto mantém pressionada a tecla Shift ou deslizando o artigo para a esquerda no tablet.


Neste artigo, vou detalhar o CSS usado para um blog horizontal.







HTML de exemplo
<html>
    <head>
        <title>horizontal blog demo</title>
        <link href="horizontal-blog.css" rel="stylesheet" media="screen">
        <link href="css-min-fix.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div class="hb-viewport">
            <div class="hb-container">
                <article class="hb-page">
                    <h1>Lorem ipsum dolor sit amet</h1>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus...
                </article>
                <article class="hb-page">
                    <h1>Consectetur a erat nam at lectus urna duis</h1>
                    Consectetur a erat nam at lectus urna duis. Cursus vitae congue mauris rhoncus aenean. Quis auctor elit sed vulputate mi sit amet mauris commodo. Odio pellentesque diam volutpat commodo sed...
                </article>  
            </div>
        </div>
    </body>
</html>
      
      





Analisar CSS



horizontal-blog.css :

/*





É a janela através da qual o usuário lê o conteúdo do artigo. Inicialmente, suas funções eram executadas por: o elemento raiz, mas decidi me livrar da estrutura do documento html.

*/









.hb-viewport{
      
      





/*





Livre-se da indentação padrão do corpo sem tocar nos estilos css do corpo.

*/









    position: absolute;
    top: 0;
    left: 0;
      
      





/*





Definimos o tamanho da janela de visualização para o tamanho da área visível da janela para poder rolar horizontalmente.

*/









    width: 100vw;
    height: 100vh;
      
      





/*





.

*/









    overflow-x: auto;
    overflow-y: hidden;
      
      





/*





.

*/









    scroll-snap-type: x mandatory;
      
      





/*





Firefox . .hb-viewport .

*/









    scrollbar-width: none;
}
      
      





/*





. .hb-viewport

*/









.hb-viewport:hover{
    scrollbar-width: auto;
}

      
      





/*





display: flex;



.hb-container .

*/










.hb-container{
    display: flex;
}

      
      





/*





.hb-page .

*/










.hb-page{
      
      





/*





.

*/









    max-height: 100vh;
      
      





/*





.

*/









    overflow-y: auto;
      
      





/*





.hb-page.

*/









    scroll-snap-align: center;
      
      





/*





80 100vw.

*/









    min-width: min(80ch, 100vw);
    padding: 0 calc((100vw - 80ch) / 2);
}
      
      





CSS



Firefox Android 68.11. css min()



. @supports



@media



.







css-min-fix.css:

/*





min.

*/









@supports not (min-width: min(80ch, 100vw)) {
      
      





/*





100vw.

*/









    .hb-page{
        min-width: 100vw;
    }
      
      





/*





80 80 .

*/









    @media screen and (min-width: 80ch) {
      .hb-page{
          min-width: 80ch;
      }
    }
}
      
      







Agora, os artigos do blog estão alinhados horizontalmente e você pode passar de um artigo para outro girando da esquerda para a direita. Bem, os artigos em si são rolados para cima e para baixo independentemente e de qualquer parte do artigo anterior você pode ir para o início do próximo.







Links






All Articles