New "columns" display mode (#371)
This commit is contained in:
@@ -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 |
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user