error pages, border utilities

54d61431 · codecalm · 81eb1abd · 54d61431 · 54d61431 · 54d61431
9 changed file
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -12,6 +12,32 @@ forms:
  badge: New
  badge-color: red

+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
+
 base:
  title: Base
  icon: package

--- a/pages/_includes/ui/button.html
+++ b/pages/_includes/ui/button.html
@@ -3,7 +3,7 @@
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
+<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include_cached ui/icon.html icon=include.icon use-svg=true %}{% endif %}

--- a/pages/_includes/ui/empty.html
+++ b/pages/_includes/ui/empty.html
@@ -18,6 +18,6 @@
   <div class="empty-action">
      {% assign button-text = include.button-text | default: "Search again" %}
      {% assign button-icon = include.button-icon | default: "search" %}
-      {% include_cached ui/button.html text=button-text color="primary" icon=button-icon %}
+      {% include_cached ui/button.html text=button-text color="primary" icon=button-icon href="index.html" %}
   </div>
 </div>
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -23,27 +23,24 @@
   <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>

   {% if page.description %}
-   <meta name="description" content="{{ page.description | escape }}"/>
+      <meta name="description" content="{{ page.description | escape }}"/>
   {% endif %}

   {% include_cached layout/og.html show=layout.og-component %}
-
   {% include_cached layout/css.html %}

   <style>body { display: none; }</style>
 </head>
-<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

-{{ content}}
+	{{ content }}

-{% include_cached layout/js.html %}
-{% include layout/js-capture.html %}
+	{% include_cached layout/js.html %}
+	{% include layout/js-capture.html %}

-{% if site.debug %}
-{% if jekyll.environment == 'development' %}
-{% include_cached layout/debug.html %}
-{% endif %}
-{% endif %}
+	{% if site.debug and jekyll.environment == 'development' %}
+		{% include_cached layout/debug.html %}
+	{% endif %}

 <script>document.body.style.display = 'block';</script>
 </body>

--- a/pages/_layouts/error.html
+++ b/pages/_layouts/error.html
 ---
 layout: base
-body-class: border-top-2 border-primary
+body-class: border-top-wide border-primary
 ---

 <div class="d-flex align-items-center justify-content-center min-vh-100">

--- a/pages/_layouts/single.html
+++ b/pages/_layouts/single.html
 ---
 layout: base
-body-class: border-top-2 border-primary
+body-class: border-top-wide border-primary
 ---

 <div class="d-flex h-auto min-h-full justify-content-center">

--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -66,4 +66,44 @@ $utilities: (
      black: 900,
    )
  ),
+  "border": (
+    property: border,
+    values: (
+      null: $border-width solid $border-color,
+      wide: $border-width-wide solid $border-color,
+      0: 0,
+    )
+  ),
+  "border-top": (
+    property: border-top,
+    values: (
+      null: $border-width solid $border-color,
+      wide: $border-width-wide solid $border-color,
+      0: 0,
+    )
+  ),
+  "border-right": (
+    property: border-right,
+    values: (
+      null: $border-width solid $border-color,
+      wide: $border-width-wide solid $border-color,
+      0: 0,
+    )
+  ),
+  "border-bottom": (
+    property: border-bottom,
+    values: (
+      null: $border-width solid $border-color,
+      wide: $border-width-wide solid $border-color,
+      0: 0,
+    )
+  ),
+  "border-left": (
+    property: border-left,
+    values: (
+      null: $border-width solid $border-color,
+      wide: $border-width-wide solid $border-color,
+      0: 0,
+    )
+  ),
 ) !default;
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -107,6 +107,8 @@ $font-size-base: 1rem !default;
 $line-height-base: 1.5 !default;
 $body-letter-spacing: null !default;

+$border-width: 1px !default;
+$border-width-wide: 2px !default;
 $border-radius: 3px !default;

 //Typography
@@ -221,7 +223,7 @@ $card-border-radius: $border-radius !default;
 $card-cap-bg: $min-black !default;

 $card-active-border-color: $primary !default;
-$card-status-size: 2px !default;
+$card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;

 $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;

--- a/scss/utils/_border.scss
+++ b/scss/utils/_border.scss
-// stylelint-disable declaration-no-important
-$border-sizing: () !default;
-$border-sizing: map-merge(
-  (
-    2: 2,
-    4: 4
-  ),
-  $border-sizing
-) !default;
-
-@each $size, $value in $border-sizing {
-
-  .border-#{$size} {
-    border-width: $border-width * $value !important;
-  }
-
-  .border-top-#{$size} {
-    border-top-style: solid;
-    border-top-width: $border-width * $value !important;
-  }
-
-  .border-right-#{$size} {
-    border-right-style: solid;
-    border-right-width: $border-width * $value !important;
-  }
-
-  .border-bottom-#{$size} {
-    border-bottom-style: solid;
-    border-bottom-width: $border-width * $value !important;
-  }
-
-  .border-left-#{$size} {
-    border-left-style: solid;
-    border-left-width: $border-width * $value !important;
-  }
-}
-
 .border-dashed {
  border-style: dashed !important;
 }