removed media, topmenu fixes

pages/_data/menu.yml

@@ -55,11 +55,11 @@ docs:
   icon: file-text
   url: docs.html
 
-changelog:
-  url: changelog.html
-  title: Changelog
-  icon: file-plus
-  label: v1.0
+#changelog:
+#  url: changelog.html
+#  title: Changelog
+#  icon: file-plus
+#  label: v1.0
 
 components:
   url: components.html

pages/_includes/layout/topmenu.html

@@ -0,0 +1,5 @@
+<div class="d-none d-lg-block navbar navbar-expand-md">
+   <div class="container">
+      {% include layout/menu.html top=true %}
+   </div>
+</div>

pages/_layouts/base.html

@@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="en"{% if page.rtl %} dir="rtl"{% endif %}>
 <head>
-	<meta charset="UTF-8"/>
-	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
-	<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+	<meta charset="utf-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1" />
+   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 	<meta http-equiv="Content-Language" content="en"/>
 
 	<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>

pages/_layouts/component.html

@@ -1,20 +1,21 @@
 ---
 layout: default
 menu: components
+page-title: Tabler components
 ---
 
 {% assign columns = page.columns | default: 0 %}
 
 <div class="row">
-   <div class="col-3">
+   <div class="col-lg-3">
       <div class="list-group list-group-transparent mb-0">
          {% for component in site.components %}
          <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
          {% endfor %}
       </div>
    </div>
-   <div class="col-9">
-      <div class="d-flex align-items-center justify-content-center p-5" style="min-height: 50vh">
+   <div class="col-lg-9">
+      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh">
          <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
             {{ content }}
          </div>

pages/_layouts/default.html

@@ -9,12 +9,7 @@ layout: base
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
-
-      <div class="navbar navbar-expand-md">
-         <div class="container">
-            {% include layout/menu.html top=true %}
-         </div>
-      </div>
+      {% include layout/topmenu.html %}
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}

scss/tabler.scss

@@ -35,7 +35,6 @@
 @import "ui/lists";
 @import "ui/loaders";
 @import "ui/login";
-@import "ui/media";
 @import "ui/modals";
 @import "ui/nav";
 @import "ui/pagination";

scss/ui/_media.scss

@@ -1,158 +0,0 @@
-// stylelint-disable property-no-vendor-prefix
-
-.media {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  padding: 0;
-  overflow: hidden;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-
-  &:not(:first-child):not(:last-child):not(:only-child) {
-    border-radius: 0;
-  }
-}
-
-.media-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.media-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  color: #fff;
-
-  &.overlay-top {
-    bottom: auto;
-  }
-
-  &.overlay-bottom {
-    top: auto;
-  }
-}
-
-.media-action {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 3;
-
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity .3s;
-  transform: translate(-50%, -50%);
-
-  &.active {
-    opacity: 1;
-  }
-
-  &.media-action-overlay {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    height: 100%;
-    padding: 0 5%;
-    color: #fff;
-    background-color: rgba(0, 0, 0, .2);
-
-    .btn {
-      flex-shrink: 0;
-    }
-  }
-}
-
-.list-item:hover,
-.list-item:active,
-.media:hover,
-.media:active,
-.active > .media {
-  .media-action {
-    pointer-events: initial;
-    opacity: 1;
-  }
-}
-
-.media iframe,
-.media-content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: $body-bg;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: cover;
-  border: 0;
-  border-radius: inherit;
-}
-
-.media-21x9::after {
-  padding-top: 42.857143%;
-}
-
-.media-16x9::after {
-  padding-top: 56.25%;
-}
-
-.media-4x3::after {
-  padding-top: 75%;
-}
-
-.media-2x3::after {
-  padding-top: 150%;
-}
-
-.media-3x4::after {
-  padding-top: 133.33333%;
-}
-
-.media-1x2::after {
-  padding-top: 200%;
-}
-
-.media-2x1::after {
-  padding-top: 50%;
-}
-
-.media-1x1::after {
-  padding-top: 100%;
-}
-
-.media-3x1::after {
-  padding-top: 33%;
-}
-
-.media-4x1::after {
-  padding-top: 25%;
-}
-
-.media-1-4::after {
-  min-height: 10rem;
-  padding-top: 25vh;
-}
-
-.media-1-3::after {
-  min-height: 12.5rem;
-  padding-top: 33vh;
-}
-
-.media-1-2::after {
-  min-height: 15rem;
-  padding-top: 50vh;
-}