Minecraft
/
website
6
0
Fork 1
Code Issues Pull Requests Releases 1 Activity

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>
pull/1/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/sass/base/_typography.scss
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;
} }
} }

8
src/assets/sass/components/_list.scss
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;

7
src/assets/sass/components/_section.scss
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 {

186
src/index.html
View File

@ -159,97 +159,107 @@
</li> </li>
</ul> --> </ul> -->
<h3>Important documents</h3> <section class="two-column">
<ul class="content"> <div style="break-inside: avoid">
<li> <h3>Important documents</h3>
<p class="content"> <ul class="content">
Make sure to read our <li>
<a href="http://birbmc.com/rules">rules</a> before you join! <p class="content">
</p> Make sure to read our
</li> <a href="http://birbmc.com/rules">rules</a> before you join!
<li> </p>
<p class="content"> </li>
Learn about <li>
<a href="https://birbmc.com/land_claims">land claims</a> <p class="content">
</p> Learn about
</li> <a href="https://birbmc.com/land_claims">land claims</a>
<li> </p>
<p class="content"> </li>
Help reduce <a href="https://birbmc.com/lag">lag</a> and keep <li>
the server running smoothly <p class="content">
</p> Help reduce <a href="https://birbmc.com/lag">lag</a> and keep
</li> the server running smoothly
<li> </p>
<p class="content"> </li>
Set up your <li>
<a href="https://birbmc.com/nether">nether</a> portal, and <p class="content">
connect to the tunnel system Set up your
</p> <a href="https://birbmc.com/nether">nether</a> portal, and
</li> connect to the tunnel system
</ul> </p>
</li>
</ul>
</div>
<h3>Server IPs</h3> <div style="break-inside: avoid">
<ul class="content"> <h3>Server IPs</h3>
<li> <ul class="content">
<p class="content"> <li>
Survival server: <strong>play.birbmc.com</strong> <p class="content">
</p> Survival server: <strong>play.birbmc.com</strong>
</li> </p>
<li> </li>
<p class="content"> <li>
Creative server: <strong>creative.birbmc.com</strong> <p class="content">
</p> Creative server: <strong>creative.birbmc.com</strong>
</li> </p>
</ul> </li>
</ul>
</div>
<h3>Fun stuff</h3> <div style="break-inside: avoid">
<ul class="content"> <h3>Fun stuff</h3>
<li> <ul class="content">
<p class="content"> <li>
Take a look around our <p class="content">
<a href="http://map.birbmc.com/">dynmap</a> Take a look around our
</p> <a href="http://map.birbmc.com/">dynmap</a>
</li> </p>
<li> </li>
<p class="content"> <li>
<a href="https://stats.birbmc.com/">Stats.</a> So many stats. <p class="content">
</p> <a href="https://stats.birbmc.com/">Stats.</a> So many stats.
</li> </p>
<li> </li>
<p class="content"> <li>
Learn about <a href="https://birbmc.com/discord">Geoffrey</a>, <p class="content">
our shop & location bot. Learn about <a href="https://birbmc.com/discord">Geoffrey</a>,
</p> our shop & location bot.
</li> </p>
</ul> </li>
</ul>
</div>
<h3>Social links</h3> <div style="break-inside: avoid">
<ul class="content"> <h3>Social links</h3>
<li> <ul class="content">
<p class="content"> <li>
Join us on <a href="https://birbmc.com/discord">Discord</a>! <p class="content">
</p> Join us on <a href="https://birbmc.com/discord">Discord</a>!
</li> </p>
<li> </li>
<p class="content"> <li>
Follow us on <a href="https://twitter.com/birb_mc">Twitter</a>! <p class="content">
</p> Follow us on <a href="https://twitter.com/birb_mc">Twitter</a>!
</li> </p>
<li> </li>
<p class="content"> <li>
Give us some updoots on <p class="content">
<a href="https://www.reddit.com/r/BirbMC/">Reddit</a> Give us some updoots on
</p> <a href="https://www.reddit.com/r/BirbMC/">Reddit</a>
</li> </p>
<li> </li>
<p class="content"> <li>
Join our <p class="content">
<a href="https://steamcommunity.com/groups/BirbMC" Join our
>Steam Group</a <a href="https://steamcommunity.com/groups/BirbMC"
> >Steam Group</a
</p> >
</li> </p>
</ul> </li>
</ul>
</div>
</section>
<h3>Donations</h3> <h3>Donations</h3>
<p> <p>