layout demos

2026-07-24 03:54:42 +04:00 · 2020-04-10 22:36:22 +02:00
parent 7f30e0b663
commit 141a619cd8
16 changed files with 124 additions and 10 deletions
@@ -11,7 +11,7 @@ mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ

 debug: false

-dark-theme: false
+layout-dark: false

 plugins:
  - jekyll-random
@@ -133,6 +133,39 @@ extra:
    music:
      title: Music
      url: music.html
+
+layout:
+  icon: layout-2
+  title: Layout
+  children:
+    horizontal:
+      url: layout-horizontal.html
+      title: Horizontal
+    vertical:
+      url: layout-vertical.html
+      title: Vertical
+    vertical-right:
+      url: layout-vertical-right.html
+      title: Right vertical
+    condensed:
+      url: layout-condensed.html
+      title: Condensed
+    condensed-dark:
+      url: layout-condensed-dark.html
+      title: Condensed dark
+    combo:
+      url: layout-combo.html
+      title: Combined
+    navbar-dark:
+      url: layout-navbar-dark.html
+      title: Navbar dark
+    dark-mode:
+      url: layout-dark.html
+      title: Dark mode
+    fluid:
+      url: layout-fluid.html
+      title: Fluid
+
 docs:
  title: Docs
  icon: file-text
@@ -1,5 +1,5 @@
 {% assign breakpoint = include.breakpoint | default: 'md' %}
-{% assign secondary = include.secondary | default: false %}
+{% assign condensed = include.condensed | default: false %}

 <header class="navbar navbar-expand-{{ breakpoint }}{% unless include.transparent %} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endunless %}{% if include.sticky %} sticky-top{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
 	<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}">
@@ -11,7 +11,7 @@

 		{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %}

-		{% unless secondary %}
+		{% if condensed %}
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			{% if include.hide-search %}
 				{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
@@ -30,11 +30,11 @@
 				</div>
 			{% endif %}
 		</div>
-		{% endunless %}
+		{% endif %}
 	</div>
 </header>

-{% if secondary %}
+{% unless condensed %}
 <div class="navbar-expand-{{ breakpoint }}">
 	<div class="navbar collapse navbar-collapse {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}" id="navbar-menu">
 		<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}">
@@ -43,4 +43,4 @@
 		</div>
 	</div>
 </div>
-{% endif %}
+{% endunless %}
@@ -13,9 +13,11 @@
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			{% include layout/navbar-menu.html class="pt-lg-3" %}

+			{% comment %}
 			<div class="d-none d-{{ breakpoint }}-flex mt-auto">
 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, cupiditate doloribus dolorum impedit labore magni nisi nostrum rerum tempora! Accusantium asperiores cum, est eum quas quia similique sunt ullam vel!
 			</div>
+			{% endcomment %}
 		</div>
 	</div>
 </aside>
@@ -44,8 +44,8 @@
 	</style>
 </head>

-{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
-<body class="antialiased{% if dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+{% assign layout-dark = page.layout-dark | default: site.layout-dark %}
+<body class="antialiased{% if layout-dark %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

 	{{ content }}

@@ -2,8 +2,15 @@
 layout: base
 ---

+{% if page.layout-sidebar %}
+	{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right %}
+{% endif %}
+
 <div class="page">
-	{% include layout/navbar.html secondary=true %}
+	{% unless page.layout-hide-topbar %}
+		{% include layout/navbar.html condensed=page.layout-navbar-condensed dark=page.layout-navbar-dark hide-brand=page.layout-navbar-hide-brand hide-menu=page.layout-navbar-hide-menu class=page.layout-navbar-class %}
+	{% endunless %}
+
 	{% include layout/content.html %}
 </div>

@@ -0,0 +1,12 @@
+---
+page-header: Combo layout
+menu: layout.combo
+layout-sidebar: true
+layout-sidebar-dark: true
+layout-navbar-hide-brand: true
+layout-navbar-hide-menu: true
+layout-navbar-class: "d-none d-lg-flex"
+layout-navbar-condensed: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,8 @@
+---
+page-header: Condensed dark layout
+menu: layout.condensed-dark
+layout-navbar-condensed: true
+layout-navbar-dark: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,7 @@
+---
+page-header: Condensed layout
+menu: layout.condensed
+layout-navbar-condensed: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,7 @@
+---
+page-header: Dark mode
+menu: layout.dark-mode
+layout-dark: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,7 @@
+---
+page-header: Fluid layout
+menu: layout.fluid
+layout-fluid: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,6 @@
+---
+page-header: Horizontal layout
+menu: layout.horizontal
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,7 @@
+---
+page-header: Navbar dark
+menu: layout.navbar-dark
+layout-navbar-dark: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,9 @@
+---
+page-header: Right vertical layout
+menu: layout.vertical-right
+layout-sidebar: true
+layout-sidebar-right: true
+layout-hide-topbar: true
+---
+
+{% include layout/homepage.html %}
@@ -0,0 +1,9 @@
+---
+page-header: Vertical layout
+menu: layout.vertical
+layout-sidebar: true
+layout-sidebar-dark: true
+layout-hide-topbar: true
+---
+
+{% include layout/homepage.html %}
@@ -62,7 +62,7 @@
 }

 .nav-link-icon {
-  width: 1.5rem;
+  width: 1.25rem;
  height: 1rem;
  font-size: 1rem;