Jonarod

1. Create an hetzner server using Ubuntu
2. Go to the Hetzner's Server dashboard > Images
3. Click on "Mount" over the alpine-linux-extended.iso image
4. Shutdown the server
5. Start the server
6. Click the "Console" icon from the dashboard to open an interactive terminal session
7. Login is root
8. Configure the interface using the command setup-interfaces
9. Pick to setup default eth0
10. Custom config: no

Jonarod

/* GLOBAL RESET */
@import url("https://gistcdn.githack.com/Jonarod/ab4e61a97aadd79db994c8dea3492a69/raw/49bac14b46470fd7933007fcdbedf219f173d087/reset.css");

/* TYPOGRAPHY */
@import url("https://gistcdn.githack.com/Jonarod/eed956dc8bd45fd90407de3eb740ec80/raw/a721babaa516b56e67bfb83b8d33c28a8f53120d/typography.css");

/* HELPERS */
@import url("https://gistcdn.githack.com/Jonarod/27e396f8b90498763e640ba9a6e27659/raw/c9a2cd4cc2ebdf8e1a17eed60de278639ca15454/helpers.css");

/* GRID */

Jonarod

@media (min-width: 1200px) {
    .contain-fluid__slim--xl { width: 70%; }
    .contain-fluid__medium--xl { width: 80%; }
    .contain-fluid__wide--xl { width: 90%; }
    .contain { width: 1000px; }
    .contain__slim, .contain__slim--xl { width: 800px; }
    .contain__medium, .contain__medium--xl { width: 900px; }
    .contain__wide, .contain__wide--xl { width: 1020px; }

    .items__start--xl { align-items: flex-start; }

Jonarod

/* Large screens: big screens */
@media (min-width: 992px) {
    .contain-fluid__slim--lg { width: 70%; }
    .contain-fluid__medium--lg { width: 80%; }
    .contain-fluid__wide--lg { width: 90%; }
    .contain { width: 900px; }
    .contain__slim, .contain__slim--lg { width: 700px; }
    .contain__medium, .contain__medium--lg { width: 800px; }
    .contain__wide, .contain__wide--lg { width: 920px; }

Jonarod

/* Medium screens: desktops */
@media (min-width: 768px) {
    .contain { width: 700px; }
    .contain-fluid__slim--md { width: 70%; }
    .contain-fluid__medium--md { width: 80%; }
    .contain-fluid__wide--md { width: 90%; }
    .contain__slim, .contain__slim--md { width: 500px; }
    .contain__medium, .contain__medium--md { width: 600px; }
    .contain__wide, .contain__wide--md { width: 720px; }

Jonarod

/* Small screens: tablets */
@media (min-width: 576px) {
    .contain { width: 500px; }
    .contain-fluid__slim--sm { width: 70%; }
    .contain-fluid__medium--sm { width: 80%; }
    .contain-fluid__wide--sm { width: 90%; }
    .contain__slim, .contain__slim--sm { width: 300px; }
    .contain__medium, .contain__medium--sm { width: 400px; }
    .contain__wide, .contain__wide--sm { width: 520px; }

Jonarod

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: -15px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: -15px;
}
.row > .col,
.row > [class*="col__"] {

Jonarod

.shadow-1 {box-shadow: 0 1px 3px hsla(0,0%,0%,.12), 0 1px 2px hsla(0,0%,0%,.24);}
.shadow-2 {box-shadow: 0 3px 6px hsla(0,0%,0%,.15), 0 2px 4px hsla(0,0%,0%,.12);}
.shadow-3 {box-shadow: 0 10px 20px hsla(0,0%,0%,.15), 0 3px 6px hsla(0,0%,0%,.10);}
.shadow-4 {box-shadow: 0 15px 25px hsla(0,0%,0%,.15), 0 5px 10px hsla(0,0%,0%,.05);}
.shadow-5 {box-shadow: 0 20px 40px hsla(0,0%,0%,.2);}

.hide {display:none}
.invisible {vibility: hidden;}
.visible {visibility: visible;}

Jonarod

.fs-1 {font-size:12px;}
.fs-2 {font-size:14px;}
.fs-3 {font-size:16px;}
.fs-4 {font-size:18px;}
.fs-5 {font-size:20px;}
.fs-6 {font-size:24px;}
.fs-7 {font-size:30px;}
.fs-8 {font-size:36px;}
.fs-9 {font-size:48px;}
.fs-10 {font-size:60px;}

Jonarod

.p-0 {padding: 0px !important;}
.p-1 {padding: 4px !important;}
.p-2 {padding: 8px !important;}
.p-3 {padding: 12px !important;}
.p-4 {padding: 16px !important;}
.p-5 {padding: 24px !important;}
.p-6 {padding: 32px !important;}
.p-7 {padding: 48px !important;}
.p-8 {padding: 64px !important;}
.p-9 {padding: 96px !important;}