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:
- Os artigos são organizados horizontalmente.
- Parte do artigo não precisa ser escondida sob o spoiler, uma vez que a rolagem vertical para cada artigo é individual.
- 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>
<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.