containers, grid fixes, small fixes

pages/_data/menu.yml

@@ -51,32 +51,44 @@ base:
       title: Music
       url: music.html
 
-error:
-  title: Error pages
-  icon: file-minus
-  children:
-    400:
-      url: 400.html
-      title: 400 page
-    401:
-      url: 401.html
-      title: 401 page
-    403:
-      url: 403.html
-      title: 403 page
-    404:
-      url: 404.html
-      title: 404 page
-    500:
-      url: 500.html
-      title: 500 page
-    503:
-      url: 503.html
-      title: 503 page
-    maintenance:
-      url: maintenance.html
-      title: Maintenance page
+    authentication:
+      title: Authentication
+      children:
+        sign-in:
+          title: Sign in
+          url: sign-in.html
+        sign-up:
+          title: Sign up
+          url: sign-up.html
+        forgot-password:
+          title: Forgot password
+          url: forgot-password.html
 
+    error:
+      title: Error pages
+      icon: file-minus
+      children:
+        400:
+          url: 400.html
+          title: 400 page
+        401:
+          url: 401.html
+          title: 401 page
+        403:
+          url: 403.html
+          title: 403 page
+        404:
+          url: 404.html
+          title: 404 page
+        500:
+          url: 500.html
+          title: 500 page
+        503:
+          url: 503.html
+          title: 503 page
+        maintenance:
+          url: maintenance.html
+          title: Maintenance page
 a:
   title: A
   icon: menu

pages/_docs/divider.md

@@ -10,11 +10,11 @@ done: true
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% include ui/hr.html text="Left divider" %}
+{% include ui/hr.html text="Left divider" position="left" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% include ui/hr.html text="Centered divider" position="center" %}
+{% include ui/hr.html text="Centered divider"  %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>

pages/_includes/cards/music/tracks-list.html

@@ -21,10 +21,13 @@
 					{{ track.duration_ms | miliseconds_to_minutes }}
 				</div>
 				<div class="col-auto">
-					{% include ui/icon.html icon="heart" %}
+					<a href="#" class="link-secondary">{% include ui/icon.html icon="heart" %}</a>
 				</div>
 				<div class="col-auto">
-					{% include ui/icon.html icon="more-horizontal" %}
+					<div class="dropdown">
+						<a href="#" class="link-secondary" data-toggle="dropdown">{% include ui/icon.html icon="more-horizontal" %}</a>
+						{% include ui/dropdown-menu.html right=true %}
+					</div>
 				</div>
 			</div>
 		</div>

pages/_includes/cards/sign-in.html

@@ -1,5 +1,5 @@
-<form class="card" action="#" method="get">
-	<div class="card-body p-5">
+<form class="card card-md" action="#" method="get">
+	<div class="card-body">
 		<div class="card-title">Login to your account</div>
 
 		<div class="mb-3">
@@ -26,6 +26,15 @@
 			<button type="submit" class="btn btn-primary btn-block">Sign in</button>
 		</div>
 	</div>
+
+	{% include ui/hr.html text="or" %}
+
+	<div class="card-body">
+		<div class="btn-list">
+			{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
+			{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
+		</div>
+	</div>
 </form>
 
 <div class="text-center text-muted">

pages/_includes/layout/layouts.html

@@ -1,4 +1,4 @@
-<div class="card card-md">
+<div class="card card-lg">
 	<div class="card-body">
 		{% include layout/layouts-list.html %}
 	</div>

pages/_layouts/single.html

@@ -4,7 +4,7 @@ body-class: border-top-wide border-primary
 ---
 
 <div class="min-h-full d-flex flex-column justify-content-center">
-	<div class="container-sm py-6">
+	<div class="container-narrow py-6">
 		<div class="text-center mb-4">
 			<img src="{{ site.base }}/static/logo.svg" height="36" alt="">
 		</div>

scss/_variables.scss

@@ -158,11 +158,9 @@ $spacers: (
   2: $spacer * .5,
   3: $spacer,
   4: $spacer * 1.5,
-  5: $spacer * 3,
-  6: $spacer * 4.5,
-  7: $spacer * 6,
-  8: $spacer * 9,
-  9: $spacer * 12,
+  5: $spacer * 2.5,
+  6: $spacer * 4,
+  7: $spacer * 6
 ) !default;
 
 $size-spacers: (
@@ -196,6 +194,11 @@ $container-max-widths: (
   xl: 75.25rem
 ) !default;
 
+$container-variations: (
+  tight: 30rem,
+  narrow: 32.5rem,
+) !default;
+
 $embed-responsive-aspect-ratios: (
   '2by1': (
     x: 2,

scss/ui/_cards.scss

@@ -22,20 +22,6 @@
   }
 }
 
-.card-sm {
-  .card-body {
-    padding: map-get($spacers, 3);
-  }
-}
-
-.card-md {
-  .card-body {
-    @include media-breakpoint-up(md) {
-      padding: map-get($spacers, 6);
-    }
-  }
-}
-
 .card-group {
   margin-bottom: $card-group-margin;
 }
@@ -199,12 +185,24 @@
 }
 
 .card-body {
-  @media print {
-    padding: 0;
+  .card-sm & {
+    padding: map-get($spacers, 3);
   }
 
-  > :last-child {
-    margin-bottom: 0;
+  .card-md & {
+    @include media-breakpoint-up(md) {
+      padding: map-get($spacers, 5);
+    }
+  }
+
+  .card-lg & {
+    @include media-breakpoint-up(md) {
+      padding: map-get($spacers, 6);
+    }
+  }
+
+  @media print {
+    padding: 0;
   }
 
   & + & {

scss/ui/_grid.scss

@@ -2,6 +2,15 @@
   border-left: 1px solid $border-color;
 }
 
+.container {
+  @each $variation, $size in $container-variations {
+    &-#{$variation} {
+      @include make-container();
+      max-width: $size;
+    }
+  }
+}
+
 @each $name, $value in (0: 0, xs: .25rem, sm: .5rem, md: 1.5rem, lg: 3rem) {
   .row-#{$name} {
     margin-right: (-$value);

scss/ui/typo/_hr.scss

@@ -25,6 +25,7 @@ Hr text
   }
 
   &:before {
+    content: "";
     margin-right: .5rem;
   }
 
@@ -39,9 +40,9 @@ Hr text
     color: $text-muted;
   }
 
-  &.hr-text-center {
+  &.hr-text-left {
     &:before {
-      content: "";
+      content: none;
     }
 
     & > *:first-child {
@@ -64,6 +65,10 @@ Hr text
       padding-left: .5rem;
     }
   }
+
+  .card > & {
+    margin: 0;
+  }
 }
 
 .hr-text-spaceless {