Improve important links layout (#11)

Improve mportant links layout

Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/11
Reviewed-by: Etzelia <etzelia@hotmail.com>
main
klutz 2020-10-30 04:01:15 +01:00 committed by Etzelia
parent 5d562a2319
commit edcd382cf6
4 changed files with 106 additions and 105 deletions

View File

@ -65,15 +65,7 @@ p {
margin: 0 0 _size(element-margin) 0; margin: 0 0 _size(element-margin) 0;
&.content { &.content {
-moz-columns: 20em 2; text-align: left;
-webkit-columns: 20em 2;
-ms-columns: 20em 2;
columns: 20em 2;
-moz-column-gap: _size(element-margin);
-webkit-column-gap: _size(element-margin);
-ms-column-gap: _size(element-margin);
column-gap: _size(element-margin);
text-align: justify;
} }
} }

View File

@ -41,14 +41,6 @@ ul {
} }
} }
@include breakpoint(">small") {
ul.content,
ol.content {
columns: 2;
column-gap: 2em;
}
}
ul p, ul p,
li p { li p {
margin-bottom: 0; margin-bottom: 0;

View File

@ -11,6 +11,13 @@ article {
&.special { &.special {
text-align: center; text-align: center;
} }
&.two-column {
@include breakpoint(">small") {
columns: 2;
column-gap: 2em;
}
}
} }
header { header {

View File

@ -159,6 +159,8 @@
</li> </li>
</ul> --> </ul> -->
<section class="two-column">
<div style="break-inside: avoid">
<h3>Important documents</h3> <h3>Important documents</h3>
<ul class="content"> <ul class="content">
<li> <li>
@ -187,7 +189,9 @@
</p> </p>
</li> </li>
</ul> </ul>
</div>
<div style="break-inside: avoid">
<h3>Server IPs</h3> <h3>Server IPs</h3>
<ul class="content"> <ul class="content">
<li> <li>
@ -201,7 +205,9 @@
</p> </p>
</li> </li>
</ul> </ul>
</div>
<div style="break-inside: avoid">
<h3>Fun stuff</h3> <h3>Fun stuff</h3>
<ul class="content"> <ul class="content">
<li> <li>
@ -222,7 +228,9 @@
</p> </p>
</li> </li>
</ul> </ul>
</div>
<div style="break-inside: avoid">
<h3>Social links</h3> <h3>Social links</h3>
<ul class="content"> <ul class="content">
<li> <li>
@ -250,6 +258,8 @@
</p> </p>
</li> </li>
</ul> </ul>
</div>
</section>
<h3>Donations</h3> <h3>Donations</h3>
<p> <p>