Feat: Added Development.md

.gitignore

@@ -5,3 +5,8 @@ _site/
 # Ignore folders generated by Bundler
 .bundle/
 vendor/
+Gemfile.lock
+
+.DS_Store
+
+*/.DS_Store

DEVELOPMENT.md

@@ -0,0 +1,42 @@
+# Development
+
+This site is built using [Jekyll](https://jekyllrb.com).
+
+
+## Local Development
+If you want to develop locally, you first have to change some configuration.
+
+In `_config.yaml` you can comment out the `url` and `baseurl` keys. These are needed for GitHub pages to create urls.
+
+you can use the [Docker Compose](./docker-compose.yml) file.
+
+```bash
+docker-compose up -d
+```
+
+This runs the Jekyll engine and watches for any changes. After changing a file, you can simply reload the webbrowser to see the changes.
+
+> **_NOTE:_**  Changes made to `_config.yaml` require a restart from docker-compose.
+
+
+## Structure
+
+### Includes
+The includes folder contains HTML and MarkDown partials that can be reused and included into layouts.
+
+### Layouts
+The layouts folder contains the HTML layout for any page. To use a layout, you can add FrontMatter to a page or post specifying the layout (without extension).
+
+```
+---
+layout: default
+---
+```
+### Assets
+The assets folder contains static assets that are loaded by layouts and/or pages.
+
+### Collections
+The collections folder contain collections that are used by Jekyll. If you want to add a new guide, simply create a new MarkDown file in `collections/_guides`.
+
+### Pages
+The pages folder contains static pages that are rendered by Jekyll into HTML. This folder can contain MarkDown files as well as HTML files.

_config.yml

@@ -11,8 +11,8 @@ description: > # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
   line in _config.yml. It will appear in your document head meta (for
   Google search results) and in your feed.xml site description.
-baseurl: "/Documentation" # the subpath of your site, e.g. /blog
-url: "https://openscd.github.io" # the base hostname & protocol for your site
+#baseurl: "/Documentation" # the subpath of your site, e.g. /blog
+#url: "https://openscd.github.io" # the base hostname & protocol for your site
 collections_dir: collections
 
 # Markdown settings

_includes/footer.html

@@ -0,0 +1,20 @@
+<footer class="footer">
+    <div class="container container--row">
+        <div class="flex">
+            Left
+        </div>
+        <div class="flex">
+            Middle
+        </div>
+        <div class="flex">
+            Right
+            <h4>
+                Contact
+            </h4>
+            <div class="contact__container">
+                <img class="contact__logo contact__logo--github" src="/assets/images/github.svg" />
+                <img class="contact__logo" src="/assets/images/slack.svg" />
+            </div>
+        </div>
+    </div>
+</footer>

_includes/header.html

@@ -1,9 +1,37 @@
 <header class="header {% if page.hide_landing %} header--sticky {% endif %}">
     <img src="{{ 'assets/images/logo.png' | relative_url }}" class="logo" />
+    <h1 class="brand">
+        OpenSCD
+    </h1>
+    <span class="flex"></span>
+    <input type="checkbox" id="nav__toggle" class="nav__toggle" />
+    <label class="nav__toggle__target" for="nav__toggle">
+        <span class="material-symbols-outlined">menu</span>
+    </label>
     <nav class="nav">
         <a class="nav__item" href="{{ '/' | relative_url }}">
             Home
         </a>
+        <span class="nav__item" href="{{ 'pages/documentation' | relative_url }}">
+            Documentation
+            <ul>
+                <li>
+                    <a class="nav__item" href="{{ '/' | relative_url }}">
+                        Home
+                    </a>
+                </li>
+                <li>
+                    <a class="nav__item" href="{{ 'pages/plugins' | relative_url }}">
+                        Plugins
+                    </a>
+                </li>
+                <li>
+                    <a class="nav__item">
+                        Sub Item 3
+                    </a>
+                </li>
+            </ul>
+        </span>
         <a class="nav__item" href="{{ 'pages/guides' | relative_url }}">
             Guides
         </a>
@@ -14,10 +42,10 @@
 </header>
 
 {% unless page.hide_landing %}
-<section class="landing">
+<section class="hero">
     <div class="img {{ page.cover }}"></div>
     <div class="gradient"></div>
-    <h1 class="brand">
+    <h1 class="title">
         {{ page.title }}
     </h1>
     <h4 class="subtitle">

_layouts/default.html

@@ -8,6 +8,7 @@
     <main class="main" aria-label="Content">
         {{ content }}
     </main>  
+    {% include footer.html %}
   </body>
 
 </html>

assets/css/components.css

@@ -0,0 +1,3 @@
+@import 'components/header.css';
+@import 'components/hero.css';
+@import 'components/button.css';

assets/css/components/button.css

@@ -0,0 +1,92 @@
+.button {
+    border: none;
+    padding: 8px 16px;
+    display: inline-flex;
+    text-decoration: none;
+    border-radius: 5px;
+}
+
+.button--cta {
+    color: var(--primary-color);
+    background: #FFFFFF;
+    font-weight: 500;
+    font-size: 1.2em;
+    position: relative;
+    padding: 0;
+    transition: all 0.3s ease;
+
+}
+
+.button--cta span {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 12px 24px;
+  }
+
+.button--cta:before,
+.button--cta:after {
+    position: absolute;
+    content: "";
+    right: 0;
+    bottom: 0;
+    background: #FFFFFF;
+    transition: all 0.3s ease;
+}
+
+.button--cta:before{
+    height: 0%;
+    width: 2px;
+}
+
+.button--cta:after {
+    width: 0%;
+    height: 2px;
+}
+
+.button--cta:hover:before {
+    height: 100%;
+}
+
+.button--cta:hover:after {
+    width: 100%;
+}
+
+.button--cta:hover{
+    background: transparent;
+}
+
+
+
+.button--cta span:hover{
+    color: #FFFFFF;
+  }
+
+.button--cta span:before,
+.button--cta span:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    background: #FFFFFF;
+    transition: all 0.3s ease;
+}
+
+.button--cta span:before {
+    width: 2px;
+    height: 0%;
+}
+
+.button--cta span:after {
+    height: 2px;
+    width: 0%;
+}
+
+.button--cta span:hover:before {
+    height: 100%;
+  }
+
+.button--cta span:hover:after {
+    width: 100%;
+  }