joeyahines
/
website
forked from Minecraft/website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki 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>
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
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;
&.content {
-moz-columns: 20em 2;
-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;
text-align: left;
}
}

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,
li p {
margin-bottom: 0;

7
src/assets/sass/components/_section.scss
View File

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

186
src/index.html
View File

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