New "columns" display mode (#371)

This commit is contained in:
Zenoo
2021-06-09 13:44:12 +02:00
committed by GitHub
parent f5b879434c
commit 71214a45b5
8 changed files with 27 additions and 2 deletions

View File

@@ -1,10 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : 480 %>" height="99999" class="<%= large ? 'large' : '' %> <%= !animated ? 'no-animations' : '' %>">
<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? 'auto' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">
<defs><style><%= fonts %></style></defs>
<style><%= style %></style>
<foreignObject x="0" y="0" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
<% for (const partial of [...partials]) { %>
<%- await include(`partials/${partial}.ejs`) %>
<% } %>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -35,6 +35,23 @@
width: 50%;
}
/* Columns display */
svg.columns .items-wrapper{
column-count: 2;
column-gap: 10px;
}
svg.columns .items-wrapper>*{
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
@media (max-width: 850px){
svg.columns .items-wrapper{
column-count: 1;
}
}
/* Headers */
h1, h2, h3 {
margin: 8px 0 2px;