Add style

wpmetabox · Oct 21, 2017 · bb450b4 · bb450b4
commit bb450b4
Show file tree

Hide file tree

Showing 25 changed files with 1,547 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+_site
+.sass-cache
+.jekyll-metadata
diff --git a/404.md b/404.md
@@ -0,0 +1,5 @@
+---
+title: Not Found
+---
+
+Looks like something is wrong :(
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,10 @@
+title: Meta Box Documentation
+sass:
+  style: compressed
+permalink: pretty
+defaults:
+  -
+    scope:
+      path: ""
+    values:
+      layout: "default"
diff --git a/_data/docs.yml b/_data/docs.yml
@@ -0,0 +1,110 @@
+- title: Basics
+  items:
+  - title: Getting Started
+    url: /getting-started/
+  - title: Register Meta Boxes
+    url: /registering-meta-boxes/
+  - title: Define Fields
+    url: /define-fields/
+  - title: Get Meta Value
+    url: /docs/get-meta-value/
+  - title: Custom attributes for inputs
+    url: /custom-attributes-for-inputs/
+  - title: Display map in the front end
+    url: /display-map-in-the-front-end/
+  - title: Include Meta Box Plugin In Themes/Plugins
+    url: /include-meta-box-plugin-themes/
+  - title: Shortcode
+    url: /shortcode/
+  - title: Validation
+    url: /validation/
+- title: Extensions
+  items:
+    - title: How to update extensions
+      url: /update-extensions/
+    - title: Include extensions in themes or plugins
+      url: /include-extensions-themes-plugins/
+    - title: MB Admin Columns
+      url: /mb-admin-columns/
+    - title: MB Custom Table
+      url: /mb-custom-table/
+    - title: MB Frontend Submission
+      url: /mb-frontend-submission/
+    - title: MB Revision
+      url: /mb-revision/
+    - title: MB Settings Page
+      url: /mb-settings-page/
+    - title: MB Term Meta
+      url: /mb-term-meta/
+    - title: MB User Meta
+      url: /mb-user-meta/
+    - title: Meta Box AIO
+      url: /meta-box-aio/
+    - title: Meta Box Builder
+      url: /meta-box-builder/
+    - title: Meta Box Columns
+      url: /meta-box-columns/
+    - title: Meta Box Conditional Logic
+      url: /meta-box-conditional-logic/
+    - title: Geolocation
+      url: /meta-box-geolocation/
+    - title: Group
+      url: /meta-box-group/
+    - title: Include Exclude
+      url: /meta-box-include-exclude/
+    - title: Show Hide
+      url: /extensions/show-hide/
+    - title: Tabs
+      url: /extensions/tabs/
+    - title: Template
+      url: /extensions/template/
+    - title: Tooltip
+      url: /extensions/tooltip/
+    - title: Updater
+      url: /extensions/updater/
+- title: Advanced
+  items:
+    - title: Create Your Own Field Type
+      url: /create-field-type/
+    - title: Edit / remove meta boxes added by a parent theme / plugin?
+      url: /edit-remove-meta-boxes/
+    - title: How post meta is saved in the database?
+      url: /how-post-meta-is-saved-in-the-database/
+    - title: How to create Columns in Meta Box Builder?
+      url: /how-to-create-meta-box-columns-in-meta-box-builder/
+    - title: How to create nested array field with Meta Box Builder
+      url: /how-to-create-nested-array-field-with-meta-box-builder/
+    - title: Looping through meta box’s fields
+      url: /looping-meta-box-fields/
+- title: References
+  items:
+    - title: Actions
+      url: /actions/
+    - title: Filters
+      url: /filters/
+    - title: RWMB_Field Class
+      url: /rwmb-field-class/
+- title: Tutorials
+  items:
+    - title: Conditional Logic &amp; Taxonomies
+      url: /conditional-logic-taxonomies/
+    - title: Custom Select / Checkbox Tree
+      url: /custom-select-checkbox-tree/
+    - title: Display date in one format and save in another format
+      url: /display-date-in-one-format-and-save-in-another-format/
+    - title: Hide Group with Conditional Logic
+      url: /hide-group-conditional-logic/
+    - title: Hide Tabs with Conditional Logic
+      url: /hide-meta-box-tabs-conditional-logic/
+    - title: How to display value of radio or checkbox list field?
+      url: /display-value-radio-checkbox-list-field/
+    - title: How to save WYSIWYG content as post content
+      url: /save-wysiwyg-content-post-content/
+    - title: How to set a field as read only?
+      url: /how-to-set-a-field-as-read-only/
+    - title: The difference between Include Exclude, Show Hide and Conditional Logic extensions
+      url: /difference-include-exclude-show-hide-conditional-logic-extensions/
+    - title: Using custom HTML field with callback to output anything
+      url: /using-custom-html-field-callback-output-anything/
+    - title: Using Meta Box with Composer
+      url: /using-meta-box-composer/
diff --git a/_includes/docs-navigation.html b/_includes/docs-navigation.html
@@ -0,0 +1,15 @@
+<nav class="docs-navigation" role="navigation">
+	<input type="text" class="docs-navigation__filter" placeholder="Filter documentation">
+	<ul class="docs-navigation__menu">
+		{% for cat in site.data.docs %}
+			<li class="docs-navigation__cat">
+				<h4 class="docs-navigation__heading">{{ cat.title }}</h4>
+				<ul class="docs-navigation__list">
+					{% for item in cat.items %}
+						<li class="docs-navigation__item"><a class="docs-navigation__link" href="{{ item.url }}">{{ item.title }}</a></li>
+					{% endfor %}
+				</ul>
+			</li>
+		{% endfor %}
+	</ul>
+</nav>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,30 @@
+	<footer id="colophon" class="site-footer" role="contentinfo">
+		<div class="container">
+			<nav class="social-navigation" role="navigation" aria-label="Social Links Menu">
+				<ul class="menu">
+					<li class="menu-item"><a href="https://www.facebook.com/wpmetabox"><svg class="icon icon-facebook" aria-hidden="true" role="img"><use href="#icon-facebook" xlink:href="#icon-facebook"></use></svg></a></li>
+					<li class="menu-item"><a href="https://twitter.com/wpmetabox"><svg class="icon icon-twitter" aria-hidden="true" role="img"><use href="#icon-twitter" xlink:href="#icon-twitter"></use></svg></a></li>
+					<li class="menu-item"><a href="https://github.com/wpmetabox/meta-box"><svg class="icon icon-github" aria-hidden="true" role="img"><use href="#icon-github" xlink:href="#icon-github"></use></svg></a></li>
+				</ul>
+			</nav>
+			<div class="credit">Copyright 2017 Meta Box.</div>
+			<a class="company" href="https://elightup.com"><img src="https://mb-static.surge.sh/elightup.png" alt="elightup"></a>
+		</div>
+	</footer>
+</div>
+<svg style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<symbol id="icon-facebook" viewBox="0 0 24 24">
+		<path d="M20.007,3H3.993C3.445,3,3,3.445,3,3.993v16.013C3,20.555,3.445,21,3.993,21h8.621v-6.971h-2.346v-2.717h2.346V9.31 c0-2.325,1.42-3.591,3.494-3.591c0.993,0,1.847,0.074,2.096,0.107v2.43l-1.438,0.001c-1.128,0-1.346,0.536-1.346,1.323v1.734h2.69 l-0.35,2.717h-2.34V21h4.587C20.555,21,21,20.555,21,20.007V3.993C21,3.445,20.555,3,20.007,3z"/>
+	</symbol>
+	<symbol id="icon-github" viewBox="0 0 24 24">
+		<path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"/>
+	</symbol>
+	<symbol id="icon-twitter" viewBox="0 0 24 24">
+		<path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"/>
+	</symbol>
+</svg>
+<script src="/assets/js/navigation.js"></script>
+<script src="/assets/js/tocbot.min.js"></script>
+<script src="/assets/js/script.js"></script>
+</body>
+</html>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+	{% if page.description %}<meta name="description" content="{{ page.description }}">{% endif %}
+	<link rel="stylesheet" href="/assets/css/style.css">
+</head>
+<body>
+<div class="site">
+	<div class="top-bar">
+		<nav class="header-navigation top-bar-navigation" role="navigation">
+			<ul class="menu">
+				<li class="menu-item"><a href="http://demo.metabox.io">Demo</a></li>
+				<li class="menu-item"><a href="https://metabox.io/online-generator/">Online Generator</a></li>
+			</ul>
+		</nav>
+		<nav class="header-navigation top-bar-navigation" role="navigation">
+			<ul class="menu">
+				<li class="menu-item"><a href="https://metabox.io/my-account/">My Account</a></li>
+			</ul>
+		</nav>
+	</div>
+	<header id="masthead" class="site-header" role="banner">
+		<div class="site-branding">
+			<a href="https://metabox.io/" class="logo" rel="home"><img src="/assets/images/logo.png" class="logo" alt="Meta Box" width="46" height="46"></a>
+			<h1 class="site-title"><a href="https://metabox.io" rel="home">Meta Box</a></h1>
+		</div>
+
+		<nav id="site-navigation" class="main-navigation header-navigation" role="navigation">
+			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
+			<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
+				<li class="menu-item"><a href="https://metabox.io/meta-box/">Features</a></li>
+				<li class="menu-item"><a href="https://metabox.io/pricing/">Pricing</a></li>
+				<li class="menu-item"><a href="https://metabox.io/plugins/">Extensions</a></li>
+				<li class="menu-item current-menu-item menu-item-has-children"><a href="#">Support</a>
+					<ul class="sub-menu">
+						<li class="menu-item current-menu-item"><a href="/">Documentation</a></li>
+						<li class="menu-item"><a href="https://metabox.io/support/">Support Forum</a></li>
+					</ul>
+				</li>
+				<li class="menu-item"><a href="https://metabox.io/blog/">Blog</a></li>
+				<li class="menu-item"><a href="https://metabox.io/contact/">Contact</a></li>
+			</ul>
+		</nav>
+	</header>
diff --git a/_includes/installation.html b/_includes/installation.html
@@ -0,0 +1,12 @@
+## Installation
+Before installing the extension, you need to install Meta Box plugin first.
+
+1. Go to *Plugins &rarr; Add New* and search for **Meta Box**
+1. Click **Install Now** button to install the plugin
+1. After installing, click **Activate Plugin** to activate the plugin
+
+The extension is just a WordPress plugin, you can install it like a normal WordPress plugin.
+
+1. Go to *Plugins*, click **Add new**, then click **Upload plugin**.
+1. Choose the `.zip` file you downloaded and click **Install now**
+1. After finishing upload, click **Activate** to finish.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,17 @@
+{% include header.html %}
+
+<main id="main" class="site-content" role="main">
+	{% include docs-navigation.html %}
+	<article class="content">
+		<h1 class="page-title">{{ page.title }}</h1>
+		{{ content }}
+	</article>
+	<aside class="toc">
+		<div class="toc-wrapper">
+			<h4 class="toc-heading">Table Of Content</h4>
+			<nav class="toc-navigation" role="navigation"></nav>
+		</div>
+	</aside>
+</main>
+
+{% include footer.html %}
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -0,0 +1,115 @@
+* {
+	box-sizing: border-box;
+}
+html {
+	font-size: 62.5%;
+}
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.6rem;
+	line-height: 1.7;
+	color: #2c3e50;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	background: #e6e6e6;
+}
+h1, h2, h3, h4 {
+	clear: both;
+	line-height: 1.2;
+	margin: 2.5em 0 1em;
+
+	.wf-active & {
+		font-family: "Roboto Slab", sans-serif;;
+	}
+}
+h1 {
+	font-size: 3rem;
+}
+h2 {
+	font-size: 2.4rem;
+}
+h3 {
+	font-family: inherit;
+	font-size: 1.6rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+}
+p, ul, ol, table {
+	margin: 0 0 1.7em;
+}
+a {
+	color: #00b1b3;
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+table {
+	width: 100%;
+	font-size: 1.4rem;
+	border-collapse: collapse;
+}
+th,
+td {
+	border-bottom: 1px solid #ddd;
+	padding: 5px 20px 5px 0;
+	text-align: left;
+
+	&:last-child {
+		padding-right: 0;
+	}
+}
+th {
+	border-width: 0 0 3px 0;
+}
+button {
+	display: inline-block;
+	border: 2px solid #2c3e50;
+	border-radius: 4px;
+	background: #2c3e50;
+	color: #fff;
+	line-height: 1;
+	padding: 14px 18px;
+	text-transform: uppercase;
+	font-weight: bold;
+	text-align: center;
+	white-space: nowrap;
+	transition: all .2s;
+	cursor: pointer;
+
+	&:hover {
+		text-decoration: none;
+		opacity: .9;
+	}
+}
+pre, code {
+	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, .125);
+	border-radius: 3px;
+}
+code {
+	background: #f8f8f8;
+	padding: 2px 4px;
+	color: #d14;
+	font-size: 1.3rem;
+}
+pre {
+	font-size: 1.4rem;
+	padding: 1em;
+	margin: 0 0 1.7em;
+}
+pre code {
+	padding: 0;
+	box-shadow: none;
+	background: none;
+}
+img {
+	max-width: 100%;
+	height: auto;
+}
+::placeholder {
+	color: #999;
+}