More and more news sites and blogs are turning into a long footcloth that has to be wound vertically for a long time from article to article. To facilitate scrolling, some sites hide part of the article under the spoiler. Other sites display part of the article in the feed and for reading it are forced to go to a separate page.
I thought why not use horizontal? Browser developers have given enough CSS tools to line up articles horizontally and easily transition between them.
I created a minimal demo that works with CSS and has the following properties:
- Articles are arranged horizontally.
- Part of the article does not need to be hidden under the spoiler, since vertical scrolling for each article is individual.
- You can go to the next article from anywhere in the previous one by scrolling the mouse wheel while holding down Shift or by swiping the article to the left on the tablet.
In this article, I will break down the CSS used for a horizontal blog.
<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>
Parse CSS
horizontal-blog.css :
/*
This is the window through which the user reads the content of the article. Initially, its functions were performed by: root element, but I decided to get rid of the structure of the html document.
*/
.hb-viewport{
/*
Get rid of the default indentation of the body without touching the body css styles.
*/
position: absolute;
top: 0;
left: 0;
/*
Set the size of the viewport to the size of the visible area of the window so that horizontal scrolling is possible.
*/
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;
}
}
}
Now blog articles are lined up horizontally and you can move from article to article by winding left to right. Well, the articles themselves are scrolled up and down independently and from any part of the previous article you can go to the beginning of the next one.