├── index.js
├── .gitattributes
├── site
    ├── src
    │   ├── env.d.ts
    │   ├── components
    │   │   ├── OnoffCanvasToggler.astro
    │   │   ├── BaseHead.astro
    │   │   ├── ElkFooter.astro
    │   │   ├── ElkHeader.astro
    │   │   ├── ElkSidebar.astro
    │   │   └── basicHtml.md
    │   ├── pages
    │   │   ├── no-footers.md
    │   │   ├── app-side-is-mini.md
    │   │   ├── app-side-is-hoverable.md
    │   │   ├── app-is-fixed.md
    │   │   ├── app-side-is-fixed.md
    │   │   ├── no-headers.md
    │   │   ├── app-side-is-fixed-is-hoverable.md
    │   │   ├── no-headers-footers.md
    │   │   ├── main-is-fixed.md
    │   │   ├── app-side-is-sticky.md
    │   │   ├── sticky-footer.md
    │   │   ├── app-side-is-sticky-is-mini.md
    │   │   ├── app-side-is-sticky-is-hoverable.md
    │   │   ├── sticky-header.md
    │   │   ├── index.astro
    │   │   └── sticky-header-2.md
    │   ├── config.ts
    │   └── layouts
    │   │   ├── MdLayout.astro
    │   │   └── MainLayout.astro
    └── public
    │   ├── assets
    │       ├── js
    │       │   ├── changetheme.js
    │       │   ├── elektron.min.js
    │       │   ├── elektron.js
    │       │   ├── elektron.min.js.map
    │       │   └── elektron.js.map
    │       ├── css
    │       │   ├── elektron.css.map
    │       │   ├── prism.css
    │       │   └── elektron.css
    │       └── img
    │       │   └── logo.svg
    │   └── favicon.svg
├── .gitignore
├── scss
    ├── _elk-root.scss
    ├── _elk-side-toggler.scss
    ├── elektron.scss
    ├── _elk-variables.scss
    ├── _elk-layout-fixed.scss
    ├── _elk-side-menu.scss
    ├── _elk-side-is-hoverable.scss
    ├── _elk-layout.scss
    ├── _elk-side.scss
    ├── _elk-theme-variables.scss
    ├── _elk-utility.scss
    ├── _elk-side-is-mini.scss
    ├── _elk-header-menu.scss
    └── _elk-theme.scss
├── .editorconfig
├── astro.config.mjs
├── .eslintrc.js
├── .vscode
    └── settings.json
├── rollup.config.js
├── .github
    ├── issue_template.md
    ├── workflows
    │   └── deploy.yml
    └── contributing.md
├── document.md
├── js
    └── elektron.js
├── package.json
├── README.md
└── changelog.md


/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/site/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | 
4 | templates/includes/ads.hbs
5 | public/*.gz
6 | 


--------------------------------------------------------------------------------
/scss/_elk-root.scss:
--------------------------------------------------------------------------------
1 | :where(html) {
2 |   block-size: 100%;
3 | }
4 | 
5 | :where(body) {
6 |   min-block-size: 100%;
7 | }
8 | 


--------------------------------------------------------------------------------
/scss/_elk-side-toggler.scss:
--------------------------------------------------------------------------------
1 | .onoffcanvas-toggler {
2 |   // display: inline-block !important;
3 |   // outline-width: 0;
4 | }
5 | 


--------------------------------------------------------------------------------
/site/src/components/OnoffCanvasToggler.astro:
--------------------------------------------------------------------------------
1 | <a class="onoffcanvas-toggler is-animated" href="#elk-side" data-toggle="onoffcanvas"></a>


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | end_of_line = lf
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/scss/elektron.scss:
--------------------------------------------------------------------------------
 1 | @import "elk-variables";
 2 | @import "elk-root";
 3 | 
 4 | @import "elk-layout";
 5 | @import "elk-layout-fixed";
 6 | 
 7 | @import "elk-side";
 8 | @import "elk-side-menu";
 9 | @import "elk-side-is-mini";
10 | @import "elk-side-is-hoverable";
11 | 
12 | @import "elk-header-menu";
13 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | 
 3 | export default defineConfig({
 4 |   root: './site',
 5 |   srcDir: './site/src',
 6 |   publicDir: './site/public',
 7 |   site: 'https://onokumus.github.io',
 8 |   base: '/elektron/',
 9 |   markdown: {
10 |     syntaxHighlight: 'prism'
11 |   }
12 | });
13 | 


--------------------------------------------------------------------------------
/site/src/pages/no-footers.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: No Footers
 3 | layout: ../layouts/MdLayout.astro
 4 | elkAppClasses: elk-test
 5 | elkMainClasses: elk-test
 6 | elkSideClasses: elk-test
 7 | hasElkHeader: true
 8 | hasElkFooter: false
 9 | ---
10 | 
11 | ## Code
12 | 
13 | ```html
14 | <body class="elk-app">
15 |   ...
16 | </body>
17 | ```


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-mini.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-mini
 3 | description: is-mini
 4 | layout: ../layouts/MdLayout.astro
 5 | hasElkFooter: true
 6 | hasElkHeader: true
 7 | elkAppClasses: elk-test
 8 | elkMainClasses: elk-test
 9 | elkSideClasses: is-mini
10 | ---
11 | 
12 | ```html
13 | <aside class="elk-side is-mini">
14 |   ...
15 | </aside>
16 | ```
17 | 


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-hoverable.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-hoverable
 3 | description: is-hoverable
 4 | layout: ../layouts/MdLayout.astro
 5 | hasElkFooter: true
 6 | hasElkHeader: true
 7 | elkAppClasses: elk-test
 8 | elkMainClasses: elk-test
 9 | elkSideClasses: is-hoverable
10 | ---
11 | 
12 | 
13 | ```html
14 | <aside class="elk-side is-hoverable">
15 |   ...
16 | </aside>
17 | ```
18 | 


--------------------------------------------------------------------------------
/site/public/assets/js/changetheme.js:
--------------------------------------------------------------------------------
 1 | const body = document.body;
 2 | const themeSwitch = document.querySelector('.elk-switch-input[name=dark]');
 3 | 
 4 | function changeTheme() {
 5 |     if (themeSwitch.checked) {
 6 |         body.dataset.theme = 'dark';
 7 |     } else {
 8 |         body.dataset.theme = '';
 9 |     }
10 | }
11 | changeTheme();
12 | themeSwitch.addEventListener('change', changeTheme);


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es6": true
 5 |     },
 6 |     "extends": "airbnb-base",
 7 |     "globals": {
 8 |         "Atomics": "readonly",
 9 |         "SharedArrayBuffer": "readonly"
10 |     },
11 |     "parserOptions": {
12 |         "ecmaVersion": 2021,
13 |         "sourceType": "module"
14 |     },
15 |     "rules": {
16 |     }
17 | };
18 | 


--------------------------------------------------------------------------------
/site/src/components/BaseHead.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   title: string;
 4 | }
 5 | 
 6 | const { title } = Astro.props;
 7 | ---
 8 | 
 9 | <!-- Global Metadata -->
10 | <meta charset="utf-8" />
11 | <meta name="viewport" content="width=device-width" />
12 | <meta name="generator" content={Astro.generator} />
13 | 
14 | <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15 | 
16 | <title>Elektron {title}</title>
17 | 


--------------------------------------------------------------------------------
/scss/_elk-variables.scss:
--------------------------------------------------------------------------------
 1 | /*! elektron v0.7.2 | MIT License | github.com/onokumus/elektron */
 2 | // Variables
 3 | $enable-transitions: true !default;
 4 | $transition-duration: 0.3s !default;
 5 | $transition-timing-function: ease-out !default;
 6 | $elk-side-breakpoint: 992px !default;
 7 | 
 8 | :root {
 9 |   --elk-side-width: 16rem;
10 |   --elk-side-is-mini-width: 4rem;
11 |   --elk-side-z-index: 2;
12 |   --elk-side-is-open-z-index: 2;
13 |   --elk-side-breakpoint: 992px;
14 | }
15 | 


--------------------------------------------------------------------------------
/scss/_elk-layout-fixed.scss:
--------------------------------------------------------------------------------
 1 | // fixed layout
 2 | /*
 3 | * <body class="elk-app is-fixed">
 4 | *
 5 | */
 6 | 
 7 | .elk-app.is-fixed {
 8 |   height: 100%;
 9 |   .elk-container,
10 |   .elk-side,
11 |   .elk-main {
12 |     overflow-y: auto;
13 |   }
14 | }
15 | 
16 | /*
17 | * <body class="elk-app is-fixed">
18 | *   <div class="elk-main is-fixed">
19 | *     ...
20 | *   </div>
21 | * </body>
22 | */
23 | 
24 | .elk-app.is-fixed .elk-main.is-fixed {
25 |   .elk-main-content {
26 |     overflow-y: auto;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "cssvar.files": [
 3 |       "./node_modules/open-props/open-props.min.css",
 4 |       // if you have an alternative path to where your styles are located
 5 |       // you can add it in this array of files
 6 |       "assets/styles/variables.css"
 7 |     ],
 8 |   
 9 |     // Do not ignore node_modules css files, which is ignored by default
10 |     "cssvar.ignore": [],
11 |   
12 |     // add support for autocomplete in JS or JS like files
13 |     "cssvar.extensions": [
14 |       "css", "html", "jsx", "tsx", "astro"
15 |     ]
16 |   }


--------------------------------------------------------------------------------
/site/src/config.ts:
--------------------------------------------------------------------------------
 1 | // This is the type of the frontmatter you put in the docs markdown files.
 2 | export type Frontmatter = {
 3 |   title: string;
 4 |   description: string;
 5 |   layout: string;
 6 |   dir?: "ltr" | "rtl";
 7 |   elkAppClasses?: string;
 8 |   elkMainClasses?: string;
 9 |   elkHeaderClasses?: string;
10 |   elkFooterClasses?: string;
11 |   elkSideClasses?: string;
12 |   elkSideHeaderClasses?: string;
13 |   elkSideContentClasses?: string;
14 |   elkSideFooterClasses?: string;
15 | 
16 |   hasElkHeader?: boolean;
17 |   hasElkFooter?: boolean;
18 | };
19 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from '@rollup/plugin-node-resolve';
 2 | import pkg from './package.json';
 3 | 
 4 | const banner = `/*! ${pkg.name} v${pkg.version} | MIT License | https://github.com/onokumus/${pkg.name} */`;
 5 | const production = !process.env.ROLLUP_WATCH;
 6 | 
 7 | export default [
 8 |   {
 9 |     input: 'js/elektron.js',
10 |     output: [
11 |       {
12 |         name: 'elektron',
13 |         banner,
14 |         file: production ? pkg.browser : 'public/assets/js/elektron.js',
15 |         format: 'umd',
16 |         sourcemap: true,
17 |       },
18 |     ],
19 |     plugins: [resolve()],
20 |   },
21 | ];
22 | 


--------------------------------------------------------------------------------
/site/src/components/ElkFooter.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   elkFooterClasses?: string;
 4 | }
 5 | 
 6 | const { elkFooterClasses } = Astro.props;
 7 | ---
 8 | 
 9 | <!-- begin .elk-footer -->
10 | <footer class:list={["elk-footer", elkFooterClasses]}>
11 |   Elektron v0.7.2 2021
12 | </footer>
13 | <!-- END: .elk-footer -->
14 | 
15 | <style lang="scss">
16 |   .elk-footer {
17 |     padding: var(--size-fluid-1);
18 |     text-align: center;
19 |     font-size: var(--font-size-fluid-0);
20 |     background-color: var(--gray-1);
21 |     border-block-start: 1px solid var(--surface-3);
22 |     @media (prefers-color-scheme:dark) {
23 |       background-color: var(--gray-8);
24 |     }
25 |   }
26 | </style>


--------------------------------------------------------------------------------
/site/src/pages/app-is-fixed.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: App is Fixed
 3 | description: App is Fixed
 4 | layout: ../layouts/MdLayout.astro
 5 | hasElkFooter: true
 6 | hasElkHeader: true
 7 | elkAppClasses: is-fixed
 8 | ---
 9 | <h4>Code</h4>
10 | 
11 | ```html
12 | <body class="elk-app is-fixed">
13 | ...
14 | </body>
15 | ```
16 | 
17 | > lorem
18 | 
19 | > lorem
20 | 
21 | lorem
22 | 
23 | lorem
24 | 
25 | lorem
26 | 
27 | lorem
28 | 
29 | lorem
30 | 
31 | lorem
32 | 
33 | lorem
34 | 
35 | lorem
36 | 
37 | lorem
38 | 
39 | lorem
40 | 
41 | lorem
42 | 
43 | lorem
44 | 
45 | lorem
46 | 
47 | lorem
48 | 
49 | lorem
50 | 
51 | lorem
52 | 
53 | lorem
54 | 
55 | lorem
56 | 
57 | lorem
58 | 
59 | <script>
60 |     console.log('app-is-fixed');
61 | </script>


--------------------------------------------------------------------------------
/.github/issue_template.md:
--------------------------------------------------------------------------------
 1 | Welcome to the elektron issues!
 2 | 
 3 | Please take a moment to:
 4 | 
 5 | - Read the Contributing Guide (found at https://github.com/onokumus/elektron/tree/master/.github/contributing.md)
 6 | - Review the project readme (you might find advice about creating new issues)
 7 | 
 8 | 
 9 | Once have reviewed both documents, please delete everything up to and including this line and provide the following details.
10 | 
11 | 
12 | ## Version
13 | 
14 | _(note the version of elektron you were using when you experienced the issue (this is **required** for bug reports)
15 | 
16 | **version**:
17 | 
18 | ## Description
19 | 
20 | 
21 | 
22 | ## Error message
23 | 
24 | ```sh
25 | # please paste any error messages here
26 | ```
27 | 


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-fixed.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: app-side fixed
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: is-fixed elk-test
 7 | elkMainClasses: elk-test
 8 | elkSideClasses: elk-test
 9 | ---
10 | 
11 | <pre><code class="language-html">&lt;body class=&quot;elk-app is-fixed&quot;&gt;
12 |   ...
13 | &lt;/body&gt;
14 | </code></pre>
15 | 
16 | 
17 | 
18 | lorem
19 | 
20 | lorem
21 | 
22 | lorem
23 | 
24 | lorem
25 | 
26 | lorem
27 | 
28 | lorem
29 | 
30 | lorem
31 | 
32 | lorem
33 | 
34 | lorem
35 | 
36 | lorem
37 | 
38 | lorem
39 | 
40 | lorem
41 | 
42 | lorem
43 | 
44 | lorem
45 | 
46 | lorem
47 | 
48 | lorem
49 | 
50 | lorem
51 | 
52 | lorem
53 | 
54 | lorem
55 | 
56 | lorem
57 | 
58 | lorem
59 | 


--------------------------------------------------------------------------------
/site/src/components/ElkHeader.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import OnoffCanvasToggler from './OnoffCanvasToggler.astro';
 3 | 
 4 | export interface Props {
 5 |   elkHeaderClasses?: string;
 6 | }
 7 | 
 8 | const { elkHeaderClasses } = Astro.props;
 9 | ---
10 | <!-- BEGIN .elk-header -->
11 | <header class:list={["elk-header", elkHeaderClasses]}>
12 |   <OnoffCanvasToggler />
13 |   <img src="/elektron/assets/img/logo.svg" alt="Elektron" class="elk-logo">
14 | </header>
15 | <!-- END:  .elk-header -->
16 | 
17 | <style lang="scss">
18 |   .elk-header {
19 |     display: flex;
20 |     gap: 1rem;
21 |     align-items: center;
22 |     background-color: var(--surface-2);
23 |     border-block-end: 1px solid var(--surface-3);
24 |     padding-inline: 1rem;
25 |     padding-block: 0.5rem;
26 |   }
27 |   .elk-logo {
28 |     fill: none;
29 |   }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/site/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
 2 |   <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
 3 |   <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
 4 |   <defs>
 5 |     <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
 6 |       <stop stop-color="#000"/>
 7 |       <stop offset="1" stop-color="#000" stop-opacity="0"/>
 8 |     </linearGradient>
 9 |   </defs>
10 | 	<style>
11 |     @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
12 |   </style>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/site/public/assets/js/elektron.min.js:
--------------------------------------------------------------------------------
1 | /*! elektron v0.7.2 | MIT License | https://github.com/onokumus/elektron */
2 | !function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";var e=(n,t=0)=>{let i;return(...e)=>{clearTimeout(i),i=setTimeout(n,t,...e)}};const n=()=>window.innerWidth<993;var t=e=>{n()?e.hide():e.show()};const i=document.querySelector(".elk-side");if(null!==i){var s=new OnoffCanvas(i,{hideByEsc:n(),createDrawer:n()});t(s),i.classList.contains("disable-resize")||window.addEventListener("resize",e(t(s),250));const o=document.querySelector(".elk-switch-input");function r(){var e="is-"+o.getAttribute("name");o.checked?i.classList.add(e):i.classList.remove(e)}null!==o&&(r(),o.addEventListener("change",r));var s=document.querySelector(".elk-side-nav .metismenu");null!==s&&new MetisMenu(s)}const c=document.querySelector(".elk-top-nav");null!==c&&(t(s=new OnoffCanvas(".elk-top-nav",{hideByEsc:!1,createDrawer:!1})),window.addEventListener("resize",e(t(s),250)),new MetisMenu(c.querySelector(".metismenu")))});
3 | //# sourceMappingURL=elektron.min.js.map


--------------------------------------------------------------------------------
/site/src/pages/no-headers.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: no headers
 3 | description: no headers
 4 | layout: ../layouts/MdLayout.astro
 5 | elkAppClasses: elk-test
 6 | elkMainClasses: elk-test
 7 | elkSideClasses: elk-test
 8 | hasElkHeader: false
 9 | hasElkFooter: true
10 | ---
11 | 
12 | <a href="#elk-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded=false></a>
13 | <p>lorem</p>
14 | <p>lorem</p>
15 | <p>lorem</p>
16 | <p>lorem</p>
17 | <p>lorem</p>
18 | <p>lorem</p>
19 | <p>lorem</p>
20 | <p>lorem</p>
21 | <p>lorem</p>
22 | <p>lorem</p>
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | 


--------------------------------------------------------------------------------
/scss/_elk-side-menu.scss:
--------------------------------------------------------------------------------
 1 | .elk-side-nav ul {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     list-style: none;
 5 | }
 6 | 
 7 | .elk-side-nav .metismenu {
 8 |     display: flex;
 9 |     flex-direction: column;
10 | }
11 | 
12 | .elk-side-nav .metismenu li {
13 |   margin-top: .25rem;
14 | }
15 | .elk-side-nav .metismenu li:first-child {
16 |   padding-top: .25rem;
17 | }
18 | .elk-side-nav .metismenu li:last-child {
19 |   padding-bottom: .25rem;
20 | }
21 | 
22 | .elk-side-nav .metismenu > li {
23 |     position: relative;
24 | }
25 | .elk-side-nav .metismenu a {
26 |     position: relative;
27 |     display: flex;
28 |     flex-direction: row;
29 |     align-items: center;
30 |     outline-width: 0;
31 |     cursor: pointer;
32 |     @if $enable-transitions {
33 |       transition: all $transition-duration $transition-timing-function;
34 |     }
35 | 
36 |     &:active,
37 |     &:focus,
38 |     &:hover {
39 |       text-decoration: none;
40 |     }
41 | }
42 | 
43 | .elk-side-nav .metismenu a {
44 |     padding: .5rem 1rem;
45 | }
46 | 
47 | .elk-side-nav .metismenu ul a {
48 |     padding: .5rem;
49 |     padding-inline-start: 3rem;
50 | }
51 | 
52 | .elk-side-nav .metismenu ul ul a {
53 |     padding-inline-start: 4rem;
54 | }
55 | 


--------------------------------------------------------------------------------
/scss/_elk-side-is-hoverable.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | * .elk-side.is-hoverable
 3 | */
 4 | @media (min-width: $elk-side-breakpoint) {
 5 |   .elk-side.is-hoverable {
 6 |     transition: all 0.3s ease;
 7 |     width: var(--elk-side-is-mini-width);
 8 |   }
 9 | 
10 |   // .elk-side.is-hoverable.is-open ~ .elk-main {
11 |   //   margin-left: var(--elk-side-is-mini-width);
12 |   // }
13 | 
14 |   .elk-side.is-hoverable {
15 | 
16 |     .metismenu > li > a:not(:hover) {
17 |       &.has-arrow::after {
18 |         transition: none;
19 |         border-width: 0;
20 |       }
21 |     }
22 | 
23 |     .metismenu > li > ul.mm-collapse.mm-show:not(.mm-collapsing) {
24 |       display: none;
25 |     }
26 | 
27 |     .nav-title {
28 |       transition: transform 0.3s ease;
29 |       transform: translate3d(-10000%, 0, 0);
30 |       white-space: nowrap;
31 |     }
32 |   }
33 | 
34 |   .elk-side.is-hoverable:hover {
35 |     width: var(--elk-side-width);
36 | 
37 |     .nav-title {
38 |       transform: translate3d(0, 0, 0);
39 |     }
40 | 
41 |     .metismenu > li > ul.mm-collapse.mm-show {
42 |       display: block;
43 |     }
44 | 
45 |     .metismenu > li > a {
46 |       &.has-arrow::after {
47 |         // border-width: 1px 0 0 1px;
48 |       }
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/scss/_elk-layout.scss:
--------------------------------------------------------------------------------
 1 | // layout
 2 | 
 3 | .elk-app {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 | }
 7 | 
 8 | /**
 9 | * deprecated
10 | */
11 | .elk-wrap {
12 |   flex: 1 1 auto;
13 |   display: flex;
14 |   flex-direction: column;
15 |   min-height: 100vh;
16 |   position: relative;
17 |   width: 100%;
18 | }
19 | 
20 | .elk-header {
21 |   position: relative;
22 |   &.is-sticky {
23 |     position: sticky;
24 |     top: 0;
25 |     z-index: var(--elk-side-z-index);
26 |   }
27 | }
28 | 
29 | .elk-container {
30 |   display: flex;
31 |   flex: 1 1 auto;
32 |   flex-basis: auto;
33 |   flex-direction: row;
34 |   position: relative;
35 | }
36 | 
37 | .elk-main {
38 |   position: relative;
39 |   display: flex;
40 |   flex-direction: column;
41 |   flex: 1 1 auto;
42 |   overflow-x: auto;
43 |   @if $enable-transitions {
44 |     transition: margin $transition-duration $transition-timing-function;
45 |   }
46 | }
47 | 
48 | .elk-main-content {
49 |   position: relative;
50 |   margin-bottom: auto;
51 |   flex: 1 1 auto;
52 | }
53 | 
54 | .elk-side {
55 |   display: flex;
56 |   flex-flow: column nowrap;
57 |   margin: 0;
58 | }
59 | 
60 | .elk-footer.is-sticky {
61 |   position: sticky;
62 |   bottom: 0;
63 |   z-index: var(--elk-side-is-open-z-index);
64 | }
65 | 


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-fixed-is-hoverable.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: App Side is Fixed is Hoverable
  3 | description: App Side is Fixed is Hoverable
  4 | layout: ../layouts/MdLayout.astro
  5 | hasElkFooter: true
  6 | hasElkHeader: true
  7 | elkAppClasses: is-fixed elk-test
  8 | elkMainClasses: elk-test
  9 | elkSideClasses: is-hoverable
 10 | ---
 11 | 
 12 | ```html
 13 | <body class="elk-app is-fixed">
 14 |   ...
 15 |   <aside class="elk-side is-hoverable">
 16 |     ...
 17 |   </aside>
 18 |   ...
 19 | </body>
 20 | ```
 21 | 
 22 | > lorem
 23 | 
 24 | lorem
 25 | 
 26 | lorem
 27 | 
 28 | lorem
 29 | 
 30 | lorem
 31 | 
 32 | lorem
 33 | 
 34 | lorem
 35 | 
 36 | lorem
 37 | 
 38 | lorem
 39 | 
 40 | lorem
 41 | 
 42 | lorem
 43 | 
 44 | lorem
 45 | 
 46 | lorem
 47 | 
 48 | lorem
 49 | 
 50 | lorem
 51 | 
 52 | lorem
 53 | 
 54 | lorem
 55 | 
 56 | lorem
 57 | 
 58 | lorem
 59 | 
 60 | lorem
 61 | 
 62 | lorem
 63 | 
 64 | lorem
 65 | 
 66 | lorem
 67 | 
 68 | lorem
 69 | 
 70 | lorem
 71 | 
 72 | lorem
 73 | 
 74 | lorem
 75 | 
 76 | lorem
 77 | 
 78 | lorem
 79 | 
 80 | lorem
 81 | 
 82 | lorem
 83 | 
 84 | lorem
 85 | 
 86 | lorem
 87 | 
 88 | lorem
 89 | 
 90 | lorem
 91 | 
 92 | lorem
 93 | 
 94 | lorem
 95 | 
 96 | lorem
 97 | 
 98 | lorem
 99 | 
100 | lorem
101 | 
102 | lorem


--------------------------------------------------------------------------------
/site/src/pages/no-headers-footers.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: no headers & footers
 3 | layout: ../layouts/MdLayout.astro
 4 | elkAppClasses: elk-test
 5 | elkMainClasses: elk-test
 6 | elkSideClasses: elk-test
 7 | hasElkFooter: false
 8 | hasElkHeader: false
 9 | ---
10 | 
11 | 
12 | <a href="#elk-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded=false></a>
13 | 
14 | 
15 | <p>lorem</p>
16 | <p>lorem</p>
17 | <p>lorem</p>
18 | <p>lorem</p>
19 | <p>lorem</p>
20 | <p>lorem</p>
21 | <p>lorem</p>
22 | <p>lorem</p>
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | 


--------------------------------------------------------------------------------
/scss/_elk-side.scss:
--------------------------------------------------------------------------------
 1 | // elk-side
 2 | /*
 3 | * elk-side : inspired .onoffcanvas.is-left
 4 | *
 5 | * available classess: is-open
 6 | */
 7 | .elk-side {
 8 |   width: 100%;
 9 |   @media (min-width: $elk-side-breakpoint) {
10 |     width: var(--elk-side-width);
11 |   }
12 |   position: absolute;
13 |   top: 0;
14 |   bottom: 0;
15 |   inset-inline-start: 0;
16 |   z-index: var(--elk-side-z-index);
17 |   transform: translate3d(-100%, 0, 0);
18 |   @if $enable-transitions {
19 |     transition: transform $transition-duration $transition-timing-function;
20 |   }
21 | }
22 | /*
23 | * show elk-side
24 | */
25 | .elk-side.is-open {
26 |   transform: translate3d(0, 0, 0);
27 |   flex-shrink: 0;
28 | 
29 |   @media (min-width: $elk-side-breakpoint) {
30 |     position: relative;
31 |   }
32 | }
33 | 
34 | /*
35 | * side-content
36 | *
37 | * available classess: is-sticky
38 | */
39 | @media (min-width: $elk-side-breakpoint) {
40 |   .elk-side-content {
41 |     margin-bottom: auto;
42 |     &.is-sticky {
43 |       margin-bottom: initial;
44 |       position: sticky;
45 |       top: 0;
46 |       z-index: var(--elk-side-is-open-z-index);
47 |     }
48 |   }
49 |   .elk-side:not(.is-mini) .elk-side-content.is-sticky {
50 |     overflow-y: auto;
51 |   }
52 | }
53 | 
54 | .elk-side-header {
55 |   padding: 0.5rem;
56 |   text-align: right;
57 | }
58 | .onoffcanvas-drawer.is-open {
59 |   z-index: 1;
60 | }
61 | 


--------------------------------------------------------------------------------
/scss/_elk-theme-variables.scss:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   // main-content padding
 3 |   --main-content-padding: 1rem;
 4 | 
 5 |   --side-nav-a-font-size : 1rem;
 6 |   --top-nav-a-font-size  : 1rem;
 7 | 
 8 |   --elk-side-bg-color: #fff;
 9 |   --elk-side-border-color: #dee2e6;
10 |   --side-nav-a-color: #495057;
11 |   --side-nav-a-hover-color:  #0c8599;
12 |   --side-nav-a-hover-bg-color: #e9ecef;
13 | 
14 |   --elk-header-bg-color: #fff;
15 |   --elk-header-border-color: #dee2e6;
16 |   --top-nav-a-color: #495057;
17 |   --top-nav-a-hover-color : #0c8599;
18 |   --top-nav-a-hover-bg-color: #e9ecef;
19 | 
20 |   --elk-switch-indicator-bg: #e9ecef;
21 |   --elk-switch-indicator-border: #dee2e6;
22 |   --elk-switch-indicator-before: #fff;
23 |   --elk-switch-indicator-checked-bg: #e9ecef;
24 | }
25 | 
26 | [data-theme="dark"] {
27 |   --elk-side-bg-color: #2b303b;
28 |   --elk-side-border-color: #495057;
29 |   --side-nav-a-color: #788195;
30 |   --side-nav-a-hover-color:  #fff;
31 |   --side-nav-a-hover-bg-color: #212529;
32 | 
33 |   --elk-header-bg-color: #272b35;
34 |   --elk-header-border-color: #232730;
35 |   --top-nav-a-color: #868e96;
36 |   --top-nav-a-hover-color : #fff;
37 |   --top-nav-a-hover-bg-color: #212529;
38 | 
39 |   --elk-switch-indicator-bg: #adb5bd;
40 |   --elk-switch-indicator-border: #343a40;
41 |   --elk-switch-indicator-before: #fff;
42 |   --elk-switch-indicator-checked-bg: #adb5bd;
43 | }
44 | 


--------------------------------------------------------------------------------
/scss/_elk-utility.scss:
--------------------------------------------------------------------------------
 1 | .has-icon {
 2 |   width: 1.5rem;
 3 |   flex: 0 0 1.5rem;
 4 |   font-size: 1.5rem;
 5 |   display: inline-flex;
 6 |   align-items: center;
 7 |   justify-content: center;
 8 |   flex-direction: column;
 9 |   margin-inline-end: .5rem;
10 | }
11 | 
12 | .onoffcanvas {
13 |   visibility: hidden;
14 |   &.is-open {
15 |     visibility: visible;
16 |   }
17 | }
18 | 
19 | .elk-switch {
20 |   user-select: none;
21 |   cursor: default;
22 |   display: none;
23 |   align-items: center;
24 |   margin: 0;
25 | }
26 | 
27 | .elk-switch-indicator {
28 |   display: inline-block;
29 |   height: 1.25rem;
30 |   width: 2.25rem;
31 |   border-radius: 50px;
32 |   position: relative;
33 |   vertical-align: bottom;
34 |   transition: .3s border-color, .3s background-color;
35 | }
36 | 
37 | .elk-switch-indicator::before {
38 |   content: '';
39 |   position: absolute;
40 |   height: calc(1.25rem - 4px);
41 |   width: calc(1.25rem - 4px);
42 |   top: 1px;
43 |   left: 1px;
44 |   border-radius: 50%;
45 |   transition: .3s left;
46 |   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
47 | }
48 | 
49 | .elk-switch-input {
50 |   position: absolute;
51 |   z-index: var(--elk-side-is-open-z-index);
52 |   opacity: 0;
53 | }
54 | 
55 | .elk-switch-input:checked~.elk-switch-indicator::before {
56 |   left: calc(1rem + 1px);
57 | }
58 | 
59 | 
60 | @media(min-width: $elk-side-breakpoint) {
61 |   .elk-switch{
62 |     display: inline-flex;
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/site/src/pages/main-is-fixed.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: main is fixed
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: is-fixed
 7 | elkMainClasses: is-fixed
 8 | elkSideClasses: elk-test
 9 | ---
10 | <h4>Code</h4>
11 | 
12 | 
13 |   ```html
14 | <body class="elk-app is-fixed">
15 |     <div class="elk-main is-fixed">
16 |       ...
17 |     </div>
18 | <!-- /.elk-main is-fixed -->
19 | </body>
20 | <!-- /.elk-app is-fixed -->
21 |   ```
22 | 
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Github Pages Astro CI
 2 | 
 3 | on:
 4 |   # Trigger the workflow every time you push to the `master` branch
 5 |   # Using a different branch name? Replace `master` with your branch’s name
 6 |   push:
 7 |     branches: [ master ]
 8 |   # Allows you to run this workflow manually from the Actions tab on GitHub.
 9 |   workflow_dispatch:
10 |   
11 | # Allow this job to clone the repo and create a page deployment
12 | permissions:
13 |   contents: read
14 |   pages: write
15 |   id-token: write
16 | 
17 | jobs:
18 |   build:
19 |     runs-on: ubuntu-latest
20 |     steps:
21 |       - name: Checkout your repository using git
22 |         uses: actions/checkout@v2          
23 |       - name: Install, build, and upload your site
24 |         uses: withastro/action@v0
25 |         # with:
26 |             # path: . # The root location of your Astro project inside the repository. (optional)
27 |             # node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional)
28 |             # package-manager: yarn # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
29 | 
30 | 
31 |   deploy:
32 |     needs: build
33 |     runs-on: ubuntu-latest
34 |     environment:
35 |       name: github-pages
36 |       url: ${{ steps.deployment.outputs.page_url }}
37 |     steps:
38 |       - name: Deploy to GitHub Pages
39 |         id: deployment
40 |         uses: actions/deploy-pages@v1


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-sticky.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-sticky
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: elk-test
 7 | elkMainClasses: elk-test
 8 | elkSideContentClasses: is-sticky
 9 | ---
10 | <p>Supported browser : <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a></p>
11 | 
12 | ```html
13 | <aside class="elk-side">
14 |   <div class="elk-side-content is-sticky">
15 |     ...
16 |   </div>
17 | </aside>
18 | ```
19 | 
20 | <p>lorem</p>
21 | <p>lorem</p>
22 | <p>lorem</p>
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | <p>lorem</p>
80 | <p>lorem</p>
81 | <p>lorem</p>
82 | <p>lorem</p>
83 | <p>lorem</p>
84 | <p>lorem</p>
85 | <p>lorem</p>
86 | <p>lorem</p>
87 | <p>lorem</p>
88 | <p>lorem</p>
89 | <p>lorem</p>
90 | 


--------------------------------------------------------------------------------
/site/src/pages/sticky-footer.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: sticky footer
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: elk-test
 7 | elkMainClasses: elk-test
 8 | elkSideClasses: elk-test
 9 | elkFooterClasses: is-sticky
10 | ---
11 | <style media="screen">
12 |   .elk-footer {
13 |     background: #212529;
14 |   }
15 | </style>
16 | <h4>Code</h4>
17 | <p>Supported browser : <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a></p>
18 | <h5>HTML</h5>
19 | 
20 | ```html
21 |   <!-- begin .elk-footer -->
22 |   <footer class="elk-footer is-sticky">
23 |     <p>
24 |       {{pkg.name}} v{{pkg.version}} 2017
25 |     </p>
26 |   </footer>
27 |   <!-- END: .elk-footer -->
28 | ```
29 | 
30 | 
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | <p>lorem</p>
80 | <p>lorem</p>
81 | <p>lorem</p>
82 | <p>lorem</p>
83 | <p>lorem</p>
84 | <p>lorem</p>
85 | <p>lorem</p>
86 | <p>lorem</p>
87 | 


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-sticky-is-mini.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-sticky is-mini
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: elk-test
 7 | elkMainClasses: elk-test
 8 | elkSideClasses: is-mini is-sticky
 9 | ---
10 | <p>Supported browser : <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a></p>
11 | 
12 | ```html
13 | <aside class="elk-side is-mini">
14 |   <div class="elk-side-content is-sticky">
15 |     ...
16 |   </div>
17 | </aside>
18 | ```
19 | 
20 | <p>lorem</p>
21 | <p>lorem</p>
22 | <p>lorem</p>
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | <p>lorem</p>
80 | <p>lorem</p>
81 | <p>lorem</p>
82 | <p>lorem</p>
83 | <p>lorem</p>
84 | <p>lorem</p>
85 | <p>lorem</p>
86 | <p>lorem</p>
87 | <p>lorem</p>
88 | <p>lorem</p>
89 | <p>lorem</p>
90 | 


--------------------------------------------------------------------------------
/site/src/pages/app-side-is-sticky-is-hoverable.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: is-sticky is-hoverable
 3 | layout: ../layouts/MdLayout.astro
 4 | hasElkFooter: true
 5 | hasElkHeader: true
 6 | elkAppClasses: elk-test
 7 | elkMainClasses: elk-test
 8 | elkSideClasses: is-hoverable is-sticky
 9 | ---
10 | <p>Supported browser : <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a></p>
11 | 
12 | 
13 | ```html
14 | <aside class="elk-side is-hoverable">
15 |   <div class="elk-side-content is-sticky">
16 |     ...
17 |   </div>
18 | </aside>
19 | ```
20 | 
21 | <p>lorem</p>
22 | <p>lorem</p>
23 | <p>lorem</p>
24 | <p>lorem</p>
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | <p>lorem</p>
80 | <p>lorem</p>
81 | <p>lorem</p>
82 | <p>lorem</p>
83 | <p>lorem</p>
84 | <p>lorem</p>
85 | <p>lorem</p>
86 | <p>lorem</p>
87 | <p>lorem</p>
88 | <p>lorem</p>
89 | <p>lorem</p>
90 | 


--------------------------------------------------------------------------------
/document.md:
--------------------------------------------------------------------------------
 1 | ### Class structure
 2 | | class | required                                              | multiple |
 3 | |-------|-------------------------------------------------------|----------|
 4 | | .elk-app  | required | no       |
 5 | | .elk-header | no                                    | yes      |
 6 | | .elk-container | required | no |
 7 | | .elk-footer | no | yes |
 8 | | .elk-side | no | yes|
 9 | | .elk-side-header | no | yes|
10 | | .elk-side-content | no (required, if .app-side ) | no|
11 | | .elk-side-footer | no | no |
12 | | .elk-main | required | no |
13 | | .elk-main-header | no | yes |
14 | | .elk-main-content | required | no |
15 | | .elk-main-footer | no | yes |
16 | 
17 | ### Fixed Page Options
18 | 
19 | #### elk-app fixed
20 | Elektron is fluid by default. Can be used as fixed on will. All that's needed to be done is to add `.is-fixed` class to `elk-app` element.
21 | 
22 | ```html
23 | <body class="elk-app is-fixed">
24 |   ...
25 | </body>
26 | ```
27 | 
28 | #### elk-main fixed
29 | All that's needed to be done is to add `.is-fixed` class to `elk-app` and `is-fixed` class to `elk-main` elements. For example :
30 | 
31 | ```html
32 | <body class="elk-app is-fixed">
33 |   <div class="elk-main is-fixed">
34 |     ...
35 |   </div>
36 | </body>
37 | ```
38 | 
39 | #### sticky top bar
40 | 
41 | ```html
42 | <!-- BEGIN .elk-header -->
43 | <header class="elk-header is-sticky">
44 |     <a href="#elk-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded=false></a>
45 |     <span>APP HEADER</span>
46 | </header>
47 | <!-- END:  .elk-header -->
48 | ```
49 | 
50 | #### sticky bottom bar
51 | ```html
52 | <!-- begin .elk-footer -->
53 |  <footer class="elk-footer is-sticky">
54 |     <p>
55 |       elektron v0.5.2 2018
56 |     </p>
57 | </footer>
58 | <!-- END: .elk-footer -->
59 | ```
60 | 


--------------------------------------------------------------------------------
/site/public/assets/css/elektron.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../../../scss/_elk-variables.scss","../../../scss/_elk-root.scss","../../../scss/_elk-layout.scss","../../../scss/_elk-layout-fixed.scss","../../../scss/_elk-side.scss","../../../scss/_elk-side-menu.scss","../../../scss/_elk-side-is-mini.scss","../../../scss/_elk-side-is-hoverable.scss","../../../scss/_elk-header-menu.scss"],"names":[],"mappings":"AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;ACZF;EACE;;;AAGF;EACE;;;ACHF;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC7DF;AAAA;AAAA;AAAA;AAKA;EACE;;AACA;AAAA;AAAA;EAGE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE;EACE;;;ACxBJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EAEE;;AAVF;EAFF;IAGI;;;;AAYJ;AAAA;AAAA;AAGA;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;;EACA;IACE;IACA;IACA;IACA;;EAGJ;IACE;;;AAIJ;EACE;EACA;;;AAEF;EACE;;;AC1DF;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEE;;AAGF;EAGE;;;AAIN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;ACpDJ;AAAA;AAAA;AAGA;EACE;IACE;IACA;;EAQA;IACE;;EAGF;IACE;;EAIA;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EACA;IACE;;EAGF;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;;EAGF;IACE;IACA;;;ACtER;AAAA;AAAA;AAGA;EACE;IACE;IACA;;EAUE;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;IACA;;EAIJ;IACE;;EAEA;IACE;;EAGF;IACE;;;ACzCN;EACE;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAEF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAEF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"elektron.css"}


--------------------------------------------------------------------------------
/site/src/pages/sticky-header.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: sticky header
 3 | layout: ../layouts/MdLayout.astro
 4 | elkAppClasses: elk-test
 5 | elkMainClasses: elk-test
 6 | elkSideClasses: elk-test
 7 | hasElkFooter: true
 8 | hasElkHeader: true
 9 | elkHeaderClasses: is-sticky
10 | ---
11 | <h4>Code</h4>
12 | <p>Supported browser : <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a></p>
13 | <h5>HTML</h5>
14 | 
15 | ```html
16 |   <!-- BEGIN .elk-header -->
17 |   <header class="elk-header is-sticky">
18 |     <a href="#elk-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded=false></a>
19 |     <span>APP HEADER</span>
20 |   </header>
21 |   <!-- END:  .elk-header -->
22 | ```
23 | 
24 | 
25 | <p>lorem</p>
26 | <p>lorem</p>
27 | <p>lorem</p>
28 | <p>lorem</p>
29 | <p>lorem</p>
30 | <p>lorem</p>
31 | <p>lorem</p>
32 | <p>lorem</p>
33 | <p>lorem</p>
34 | <p>lorem</p>
35 | <p>lorem</p>
36 | <p>lorem</p>
37 | <p>lorem</p>
38 | <p>lorem</p>
39 | <p>lorem</p>
40 | <p>lorem</p>
41 | <p>lorem</p>
42 | <p>lorem</p>
43 | <p>lorem</p>
44 | <p>lorem</p>
45 | <p>lorem</p>
46 | <p>lorem</p>
47 | <p>lorem</p>
48 | <p>lorem</p>
49 | <p>lorem</p>
50 | <p>lorem</p>
51 | <p>lorem</p>
52 | <p>lorem</p>
53 | <p>lorem</p>
54 | <p>lorem</p>
55 | <p>lorem</p>
56 | <p>lorem</p>
57 | <p>lorem</p>
58 | <p>lorem</p>
59 | <p>lorem</p>
60 | <p>lorem</p>
61 | <p>lorem</p>
62 | <p>lorem</p>
63 | <p>lorem</p>
64 | <p>lorem</p>
65 | <p>lorem</p>
66 | <p>lorem</p>
67 | <p>lorem</p>
68 | <p>lorem</p>
69 | <p>lorem</p>
70 | <p>lorem</p>
71 | <p>lorem</p>
72 | <p>lorem</p>
73 | <p>lorem</p>
74 | <p>lorem</p>
75 | <p>lorem</p>
76 | <p>lorem</p>
77 | <p>lorem</p>
78 | <p>lorem</p>
79 | <p>lorem</p>
80 | <p>lorem</p>
81 | <p>lorem</p>
82 | <p>lorem</p>
83 | <p>lorem</p>
84 | <p>lorem</p>
85 | <p>lorem</p>
86 | <p>lorem</p>
87 | <p>lorem</p>
88 | <p>lorem</p>
89 | 


--------------------------------------------------------------------------------
/scss/_elk-side-is-mini.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | * .elk-side.is-mini
 3 | */
 4 | @media (min-width: $elk-side-breakpoint) {
 5 |   .elk-side.is-mini {
 6 |     width: var(--elk-side-is-mini-width);
 7 |     border-width: 0 !important;
 8 |   }
 9 | 
10 |   // .elk-side.is-mini.is-open ~ .elk-main {
11 |   //   margin-left: var(--elk-side-is-mini-width);
12 |   // }
13 | 
14 |   .elk-side.is-mini {
15 |     .metismenu li:last-child {
16 |       padding-bottom: 0;
17 |     }
18 | 
19 |     .metismenu > li > a.has-arrow::after {
20 |       transition-duration: .1s;
21 |     }
22 | 
23 |     .metismenu > li:not(:hover) > a {
24 |       &.has-arrow::after {
25 |         border-width: 0;
26 |       }
27 |     }
28 | 
29 |     .nav-title {
30 |       display: none;
31 |       margin-inline-start: 1.5rem;
32 |     }
33 | 
34 |     .metismenu ul ul a {
35 |       padding-inline-start: 2.5rem;
36 |     }
37 | 
38 |     .metismenu > li > ul {
39 |       position: absolute;
40 |       top: 100%;
41 |       inset-inline-start: 100%;
42 |       &.mm-collapse.mm-show:not(.mm-collapsing) {
43 |         display: none;
44 |       }
45 | 
46 |       > li > a {
47 |         padding: 0.5em 0.5em 0.5em 1.5em;
48 |       }
49 |     }
50 | 
51 |     .metismenu > li > ul.mm-collapsing {
52 |       visibility: collapse;
53 |       transition-duration: .1s;
54 |     }
55 | 
56 |     .metismenu > li:hover > ul.mm-collapse.mm-show:not(.mm-collapsing) {
57 |       display: block;
58 |       min-width: calc(var(--elk-side-width) - var(--elk-side-is-mini-width) + 1px);
59 |       height: auto !important;
60 |     }
61 | 
62 |     .metismenu > li:hover {
63 |       > a {
64 |         display: flex;
65 |         flex-direction: row;
66 |         min-width: calc(var(--elk-side-width) + 1px);
67 |       }
68 | 
69 |       .nav-title {
70 |         display: inline-block;
71 |         align-self: center;
72 |       }
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/scss/_elk-header-menu.scss:
--------------------------------------------------------------------------------
 1 | .elk-top-nav {
 2 |   padding: 0 1rem;
 3 |   &.is-open {
 4 |     position: relative;
 5 |   }
 6 | }
 7 | 
 8 | .elk-top-nav ul {
 9 |   padding: 0;
10 |   margin: 0;
11 |   list-style: none;
12 | }
13 | 
14 | .elk-top-nav .metismenu {
15 |   display: flex;
16 |   flex-direction: column;
17 | }
18 | 
19 | .elk-top-nav .metismenu .has-icon {
20 |   height: auto;
21 | }
22 | 
23 | .elk-top-nav .metismenu > li {
24 |   display: flex;
25 |   flex-direction: column;
26 |   position: relative;
27 | }
28 | 
29 | .elk-top-nav .metismenu a {
30 |   position: relative;
31 |   display: block;
32 |   padding: .75rem 1rem;
33 |   outline-width: 0;
34 |   transition: all 0.3s ease-out;
35 |   cursor: pointer;
36 | }
37 | 
38 | .elk-top-nav .metismenu ul a {
39 |   padding: .5rem;
40 | }
41 | 
42 | .elk-top-nav .metismenu a:active,
43 | .elk-top-nav .metismenu a:focus,
44 | .elk-top-nav .metismenu a:hover {
45 |   text-decoration: none;
46 | }
47 | @media (min-width: $elk-side-breakpoint) {
48 |   .elk-top-nav .metismenu {
49 |     flex-direction: row;
50 |   }
51 | 
52 |   .elk-top-nav .metismenu > li >a {
53 |     padding-inline-end: 2rem;
54 |   }
55 | 
56 |   .elk-top-nav .metismenu > li {
57 |     flex-direction: column;
58 |   }
59 |   .elk-top-nav .metismenu ul a {
60 |     padding: .625rem 1rem;
61 |   }
62 | 
63 |   .elk-top-nav .metismenu > li > ul {
64 |     position: absolute;
65 |     top: 100%;
66 |     min-width: 256px;
67 |     z-index: var(--elk-side-z-index);;
68 |   }
69 | 
70 |   .elk-top-nav .metismenu > li:last-child > ul {
71 |     inset-inline-end: 0;
72 |   }
73 | 
74 |   .elk-top-nav.is-hoverable .metismenu > li > ul {
75 |     height: auto !important;
76 |   }
77 | 
78 |   .elk-top-nav.is-hoverable .metismenu > li:hover > ul {
79 |     display: block;
80 |   }
81 | 
82 |   .elk-top-nav.is-hoverable .metismenu > li:hover > a.has-arrow:after {
83 |     transform: rotate(-45deg);
84 |   }
85 | }
86 | 
87 | 


--------------------------------------------------------------------------------
/js/elektron.js:
--------------------------------------------------------------------------------
 1 | /* global OnoffCanvas, MetisMenu */
 2 | 
 3 | const debounce = (func, wait = 0) => {
 4 |   let timer;
 5 |   return (...args) => {
 6 |     clearTimeout(timer);
 7 |     timer = setTimeout(func, wait, ...args);
 8 |   };
 9 | };
10 | 
11 | const isMobile = () => window.innerWidth < 993;
12 | 
13 | const showHideOnoffCanvas = (oc) => {
14 |   if (isMobile()) {
15 |     oc.hide();
16 |   } else {
17 |     oc.show();
18 |   }
19 | };
20 | 
21 | const elkSide = document.querySelector('.elk-side');
22 | 
23 | if (elkSide !== null) {
24 |   const elkSideNavOnoffCanvas = new OnoffCanvas(elkSide, {
25 |     hideByEsc: isMobile(),
26 |     createDrawer: isMobile(),
27 |   });
28 | 
29 |   showHideOnoffCanvas(elkSideNavOnoffCanvas);
30 | 
31 |   // eslint-disable-next-line no-unused-expressions
32 |   elkSide.classList.contains('disable-resize')
33 |     || window.addEventListener('resize', debounce(showHideOnoffCanvas(elkSideNavOnoffCanvas), 250));
34 | 
35 |   const esi = document.querySelector('.elk-switch-input');
36 | 
37 |   /* eslint-disable-next-line no-inner-declarations */
38 |   function changeElkSide() {
39 |     const className = `is-${esi.getAttribute('name')}`;
40 |     if (esi.checked) {
41 |       elkSide.classList.add(className);
42 |     } else {
43 |       elkSide.classList.remove(className);
44 |     }
45 |   }
46 |   if (esi !== null) {
47 |     changeElkSide();
48 |     esi.addEventListener('change', changeElkSide);
49 |   }
50 | 
51 |   const elkSideMM = document.querySelector('.elk-side-nav .metismenu');
52 |   if (elkSideMM !== null) {
53 |     // eslint-disable-next-line no-new
54 |     new MetisMenu(elkSideMM);
55 |   }
56 | }
57 | 
58 | const elkTopNav = document.querySelector('.elk-top-nav');
59 | let elkTopNavCanvas;
60 | 
61 | if (elkTopNav !== null) {
62 |   elkTopNavCanvas = new OnoffCanvas('.elk-top-nav', {
63 |     hideByEsc: false,
64 |     createDrawer: false,
65 |   });
66 | 
67 |   showHideOnoffCanvas(elkTopNavCanvas);
68 |   window.addEventListener('resize', debounce(showHideOnoffCanvas(elkTopNavCanvas), 250));
69 | 
70 |   // eslint-disable-next-line no-new
71 |   new MetisMenu(elkTopNav.querySelector('.metismenu'));
72 | }
73 | 


--------------------------------------------------------------------------------
/scss/_elk-theme.scss:
--------------------------------------------------------------------------------
 1 | // elk-header
 2 | .elk-header {
 3 |   background: var(--elk-header-bg-color);
 4 |   border-bottom: 1px solid var(--elk-header-border-color);
 5 | }
 6 | 
 7 | /* .elk-top-nav colors */
 8 | 
 9 | .elk-header .elk-top-nav {
10 |   a,
11 |   li,
12 |   ul {
13 |     background: var(--elk-header-bg-color);
14 |   }
15 |   .metismenu a {
16 |     color: var(--top-nav-a-color);
17 |     &:active,
18 |     &:focus,
19 |     &:hover {
20 |       color: var(--top-nav-a-hover-color);
21 |       // background: var(--top-nav-a-hover-bg-color);
22 |     }
23 |   }
24 |   .metismenu li:hover > a,
25 |   .metismenu li.active > a,
26 |   .metismenu li > a.active {
27 |     color: var(--top-nav-a-hover-color);
28 |     // background: var(--top-nav-a-hover-bg-color);
29 |   }
30 | }
31 | 
32 | .elk-top-nav .metismenu a {
33 |   font-size: var(--top-nav-a-font-size);
34 | }
35 | 
36 | // elk-side
37 | .elk-side {
38 |   background: var(--elk-side-bg-color);
39 |   &.is-open {
40 |     border-right: 1px solid var(--elk-side-border-color);
41 |   }
42 | }
43 | 
44 | /* .elk-side-nav colors */
45 | 
46 | .elk-side .elk-side-nav {
47 |   a,
48 |   li,
49 |   ul {
50 |     background: var(--elk-side-bg-color);
51 |   }
52 |   .metismenu a {
53 |     color: var(--side-nav-a-color);
54 |     &:active,
55 |     &:focus,
56 |     &:hover {
57 |       color: var(--side-nav-a-hover-color);
58 |       // background: var(--side-nav-a-hover-bg-color);
59 |     }
60 |   }
61 |   .metismenu li:hover > a,
62 |   .metismenu li.active > a,
63 |   .metismenu li > a.active {
64 |     color: var(--side-nav-a-hover-color);
65 |     // background: var(--side-nav-a-hover-bg-color);
66 |   }
67 | }
68 | 
69 | .elk-side-nav .metismenu a {
70 |   font-size: var(--side-nav-a-font-size);
71 | }
72 | 
73 | // elk-switch
74 | .elk-switch-indicator {
75 |   background: var(--elk-switch-indicator-bg);
76 |   border: 1px solid var(--elk-switch-indicator-border);
77 | }
78 | 
79 | .elk-switch-indicator::before {
80 |   background: var(--elk-switch-indicator-before);
81 | }
82 | 
83 | .elk-switch-input:checked~.elk-switch-indicator {
84 |   background: var(--elk-switch-indicator-checked-bg);
85 | }
86 | 
87 | // elk-main-content
88 | .elk-main-content {
89 |   padding: var(--main-content-padding);
90 | }
91 | 


--------------------------------------------------------------------------------
/site/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import MainLayout from "../layouts/MainLayout.astro";
 3 | import {Content as BasicHtml} from '../components/basicHtml.md';
 4 | import {Content as BasicCss} from '../../../document.md';
 5 | ---
 6 | 
 7 | 
 8 | <MainLayout title="Dashboard">
 9 | 
10 | 
11 | <h1>Elektron: <small>An Admin Layout</small></h1>
12 | 
13 | <!-- Place this tag where you want the button to render. -->
14 | <a class="github-button" href="https://github.com/onokumus/elektron" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star onokumus/elektron on GitHub">Star</a>
15 | 
16 | <a class="github-button" href="https://github.com/onokumus/elektron/fork" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork onokumus/elektron on GitHub">Fork</a>
17 | 
18 | <a class="github-button" href="https://github.com/onokumus/elektron/archive/HEAD.zip" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-download" data-size="large" aria-label="Download onokumus/elektron on GitHub">Download</a>
19 | 
20 | <a class="github-button" href="https://github.com/sponsors/onokumus" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @onokumus on GitHub">Sponsor</a>
21 | <h2>Install</h2>
22 | 
23 | <pre class="language-bash" tabindex="0"><code class="language-bash">npm i elektron</code></pre>
24 | <p>OR</p>
25 | <pre class="language-bash" tabindex="0"><code class="language-bash">yarn add elektron</code></pre>
26 | 
27 | 
28 | 
29 | <h2>Download</h2>
30 | <a href="https://github.com/onokumus/elektron/archive/master.zip" target="_blank">Download Link</a>
31 | 
32 | 
33 | <h2>HTML Structure</h2>
34 | <p>
35 |   <code>.elk-app</code> class should be added to div element inside the body tag.
36 |  </p>
37 | 
38 | <h3>Basic Template</h3>
39 | <span>Start with this basic HTML template.</span>
40 | 
41 | <BasicHtml />
42 | 
43 | <BasicCss />
44 | 
45 | <!-- Place this tag in your head or just before your close body tag. -->
46 | <script is:inline async defer src="https://buttons.github.io/buttons.js"></script>
47 | 
48 | 
49 | 
50 | </MainLayout>


--------------------------------------------------------------------------------
/site/public/assets/js/elektron.js:
--------------------------------------------------------------------------------
 1 | /*! elektron v0.7.2 | MIT License | https://github.com/onokumus/elektron */
 2 | (function (factory) {
 3 |   typeof define === 'function' && define.amd ? define(factory) :
 4 |   factory();
 5 | })((function () { 'use strict';
 6 | 
 7 |   /* global OnoffCanvas, MetisMenu */
 8 | 
 9 |   const debounce = (func, wait = 0) => {
10 |     let timer;
11 |     return (...args) => {
12 |       clearTimeout(timer);
13 |       timer = setTimeout(func, wait, ...args);
14 |     };
15 |   };
16 | 
17 |   const isMobile = () => window.innerWidth < 993;
18 | 
19 |   const showHideOnoffCanvas = (oc) => {
20 |     if (isMobile()) {
21 |       oc.hide();
22 |     } else {
23 |       oc.show();
24 |     }
25 |   };
26 | 
27 |   const elkSide = document.querySelector('.elk-side');
28 | 
29 |   if (elkSide !== null) {
30 |     const elkSideNavOnoffCanvas = new OnoffCanvas(elkSide, {
31 |       hideByEsc: isMobile(),
32 |       createDrawer: isMobile(),
33 |     });
34 | 
35 |     showHideOnoffCanvas(elkSideNavOnoffCanvas);
36 | 
37 |     // eslint-disable-next-line no-unused-expressions
38 |     elkSide.classList.contains('disable-resize')
39 |       || window.addEventListener('resize', debounce(showHideOnoffCanvas(elkSideNavOnoffCanvas), 250));
40 | 
41 |     const esi = document.querySelector('.elk-switch-input');
42 | 
43 |     /* eslint-disable-next-line no-inner-declarations */
44 |     function changeElkSide() {
45 |       const className = `is-${esi.getAttribute('name')}`;
46 |       if (esi.checked) {
47 |         elkSide.classList.add(className);
48 |       } else {
49 |         elkSide.classList.remove(className);
50 |       }
51 |     }
52 |     if (esi !== null) {
53 |       changeElkSide();
54 |       esi.addEventListener('change', changeElkSide);
55 |     }
56 | 
57 |     const elkSideMM = document.querySelector('.elk-side-nav .metismenu');
58 |     if (elkSideMM !== null) {
59 |       // eslint-disable-next-line no-new
60 |       new MetisMenu(elkSideMM);
61 |     }
62 |   }
63 | 
64 |   const elkTopNav = document.querySelector('.elk-top-nav');
65 |   let elkTopNavCanvas;
66 | 
67 |   if (elkTopNav !== null) {
68 |     elkTopNavCanvas = new OnoffCanvas('.elk-top-nav', {
69 |       hideByEsc: false,
70 |       createDrawer: false,
71 |     });
72 | 
73 |     showHideOnoffCanvas(elkTopNavCanvas);
74 |     window.addEventListener('resize', debounce(showHideOnoffCanvas(elkTopNavCanvas), 250));
75 | 
76 |     // eslint-disable-next-line no-new
77 |     new MetisMenu(elkTopNav.querySelector('.metismenu'));
78 |   }
79 | 
80 | }));
81 | //# sourceMappingURL=elektron.js.map
82 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "elektron",
 3 |   "version": "0.7.2",
 4 |   "description": "An Admin Layout",
 5 |   "main": "dist/elektron.js",
 6 |   "browser": "dist/elektron.js",
 7 |   "unpkg": "dist/elektron.min.js",
 8 |   "jsdelivr": "dist/elektron.min.js",
 9 |   "style": "dist/elektron.css",
10 |   "sass": "scss/elektron.scss",
11 |   "type":"module",
12 |   "scripts": {
13 |     "css": "sass scss/elektron.scss dist/elektron.css -s compressed",
14 |     "css:dev": "sass scss:public/assets/css -w",
15 |     "js": "npm-run-all js-lint js-compile js-minify",
16 |     "js-lint": "eslint js",
17 |     "js-compile": "rollup -c",
18 |     "js:dev": "rollup -c -w",
19 |     "js-minify": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/elektron.js.map,includeSources,url=elektron.min.js.map\" --output dist/elektron.min.js dist/elektron.js",
20 |     "dist": "npm-run-all --parallel css js",
21 |     "watch": "npm-run-all --parallel watch-css watch-js",
22 |     "watch-css": "nodemon --ignore docs/ --ignore js --ignore dist/ -e scss -x \"npm run css\"",
23 |     "watch-js": "nodemon --ignore scss/ --ignore scss --ignore dist/ -e js -x \"npm run js\"",
24 |     "dev": "astro dev",
25 |     "start": "astro dev",
26 |     "build": "astro build",
27 |     "preview": "astro preview",
28 |     "astro": "astro"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/onokumus/elektron.git"
33 |   },
34 |   "keywords": [
35 |     "admin",
36 |     "layout",
37 |     "elektron"
38 |   ],
39 |   "author": "Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)",
40 |   "contributors": [
41 |     "githubwyj <githubwyj@qq.com> (https://github.com/githubwyj)"
42 |   ],
43 |   "license": "MIT",
44 |   "bugs": {
45 |     "url": "https://github.com/onokumus/elektron/issues"
46 |   },
47 |   "homepage": "https://github.com/onokumus/elektron#readme",
48 |   "files": [
49 |     "dist/",
50 |     "js/",
51 |     "scss/",
52 |     "README.md"
53 |   ],
54 |   "engines": {
55 |     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
56 |   },
57 |   "dependencies": {
58 |     "astro": "^2.9.0",
59 |     "metismenujs": "^1.4.0",
60 |     "onoffcanvas": "^2.3.1",
61 |     "open-props": "^1.5.10"
62 |   },
63 |   "devDependencies": {
64 |     "@rollup/plugin-node-resolve": "^15.1.0",
65 |     "eslint": "^8.45.0",
66 |     "eslint-config-airbnb-base": "^15.0.0",
67 |     "eslint-plugin-import": "^2.27.5",
68 |     "nodemon": "^3.0.1",
69 |     "npm-run-all": "^4.1.5",
70 |     "rollup": "^3.26.3",
71 |     "sass": "^1.64.0",
72 |     "uglify-js": "^3.17.4"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/site/src/layouts/MdLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import BaseHead from "../components/BaseHead.astro";
 3 | import ElkSidebar from "../components/ElkSidebar.astro";
 4 | import * as CONFIG from "../config";
 5 | type Props = {
 6 |   frontmatter: CONFIG.Frontmatter;
 7 | };
 8 | 
 9 | const { frontmatter } = Astro.props as Props;
10 | 
11 | const currentPage = Astro.url.pathname;
12 | 
13 | import "open-props/style";
14 | import "open-props/normalize";
15 | 
16 | import "../../../scss/elektron.scss";
17 | import ElkHeader from "../components/ElkHeader.astro";
18 | import ElkFooter from "../components/ElkFooter.astro";
19 | ---
20 | 
21 | <!DOCTYPE html>
22 | <html lang="en" dir={frontmatter.dir ?? "ltr"}>
23 |   <head>
24 |     <BaseHead title={frontmatter.title} />
25 |     <link
26 |       rel="stylesheet"
27 |       href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
28 |     />
29 |     <link
30 |       rel="stylesheet"
31 |       href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css"
32 |     />
33 |     <link
34 |       rel="stylesheet"
35 |       href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css"
36 |     />
37 | 
38 |     <link rel="stylesheet" href="/elektron/assets/css/prism.css" />
39 |   </head>
40 |   <body class:list={["elk-app", frontmatter.elkAppClasses]}>
41 |     {
42 |       frontmatter.hasElkHeader && (
43 |         <ElkHeader elkHeaderClasses={frontmatter.elkHeaderClasses} />
44 |       )
45 |     }
46 |     <!-- BEGIN .elk-container -->
47 |     <div class="elk-container">
48 |       <ElkSidebar
49 |         elkSideClasses={frontmatter.elkSideClasses}
50 |         elkSideContentClasses={frontmatter.elkSideContentClasses}
51 |       />
52 | 
53 |       <!-- BEGIN .elk-main -->
54 |       <div class:list={["elk-main", frontmatter.elkMainClasses]}>
55 |         <!-- BEGIN .elk-main-heading -->
56 |         <header class="elk-main-header">...</header>
57 |         <!-- END: .elk-main-header -->
58 |         <!-- BEGIN .elk-main-content -->
59 |         <div class="elk-main-content">
60 |           <slot />
61 |         </div>
62 |         <!-- END: .elk-main-content -->
63 |         <!-- BEGIN .elk-main-footer -->
64 |         <footer class="elk-main-footer">...</footer>
65 | 
66 |         <!-- END: .elk-main-footer -->
67 |       </div>
68 |       <!-- END: .elk-main -->
69 |     </div>
70 |     <!-- END: .elk-container -->
71 | 
72 |     {
73 |       frontmatter.hasElkFooter && (
74 |         <ElkFooter elkFooterClasses={frontmatter.elkFooterClasses} />
75 |       )
76 |     }
77 | 
78 |     <script is:inline src="https://cdn.jsdelivr.net/npm/metismenujs"></script>
79 |     <script is:inline src="https://cdn.jsdelivr.net/npm/onoffcanvas"></script>
80 |     <script is:inline src="https://cdn.jsdelivr.net/npm/prismjs"></script>
81 |     <script is:inline async defer src="https://buttons.github.io/buttons.js"
82 |     ></script>
83 |     <script is:inline src="/elektron/assets/js/elektron.js"></script>
84 |     <!-- <script is:inline src="/elektron/assets/js/changetheme.js"></script> -->
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/site/public/assets/js/elektron.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../js/elektron.js"],"sourcesContent":["/* global OnoffCanvas, MetisMenu */\n\nconst debounce = (func, wait = 0) => {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\nconst isMobile = () => window.innerWidth < 993;\n\nconst showHideOnoffCanvas = (oc) => {\n  if (isMobile()) {\n    oc.hide();\n  } else {\n    oc.show();\n  }\n};\n\nconst elkSide = document.querySelector('.elk-side');\n\nif (elkSide !== null) {\n  const elkSideNavOnoffCanvas = new OnoffCanvas(elkSide, {\n    hideByEsc: isMobile(),\n    createDrawer: isMobile(),\n  });\n\n  showHideOnoffCanvas(elkSideNavOnoffCanvas);\n\n  // eslint-disable-next-line no-unused-expressions\n  elkSide.classList.contains('disable-resize')\n    || window.addEventListener('resize', debounce(showHideOnoffCanvas(elkSideNavOnoffCanvas), 250));\n\n  const esi = document.querySelector('.elk-switch-input');\n\n  /* eslint-disable-next-line no-inner-declarations */\n  function changeElkSide() {\n    const className = `is-${esi.getAttribute('name')}`;\n    if (esi.checked) {\n      elkSide.classList.add(className);\n    } else {\n      elkSide.classList.remove(className);\n    }\n  }\n  if (esi !== null) {\n    changeElkSide();\n    esi.addEventListener('change', changeElkSide);\n  }\n\n  const elkSideMM = document.querySelector('.elk-side-nav .metismenu');\n  if (elkSideMM !== null) {\n    // eslint-disable-next-line no-new\n    new MetisMenu(elkSideMM);\n  }\n}\n\nconst elkTopNav = document.querySelector('.elk-top-nav');\nlet elkTopNavCanvas;\n\nif (elkTopNav !== null) {\n  elkTopNavCanvas = new OnoffCanvas('.elk-top-nav', {\n    hideByEsc: false,\n    createDrawer: false,\n  });\n\n  showHideOnoffCanvas(elkTopNavCanvas);\n  window.addEventListener('resize', debounce(showHideOnoffCanvas(elkTopNavCanvas), 250));\n\n  // eslint-disable-next-line no-new\n  new MetisMenu(elkTopNav.querySelector('.metismenu'));\n}\n"],"names":["debounce","func","wait","let","timer","args","clearTimeout","setTimeout","isMobile","window","innerWidth","showHideOnoffCanvas","oc","hide","show","elkSide","document","querySelector","elkSideNavOnoffCanvas","OnoffCanvas","hideByEsc","createDrawer","classList","contains","addEventListener","esi","changeElkSide","className","getAttribute","checked","add","remove","elkSideMM","MetisMenu","elkTopNav","elkTopNavCanvas"],"mappings":";0FAEA,IAAMA,EAAW,CAACC,EAAMC,EAAO,KAC7BC,IAAIC,EACJ,MAAO,IAAIC,KACTC,aAAaF,GACbA,EAAQG,WAAWN,EAAMC,KAASG,KAItC,MAAMG,EAAW,IAAMC,OAAOC,WAAa,IAE3C,IAAMC,EAAsB,IACtBH,IACFI,EAAGC,OAEHD,EAAGE,QAIP,MAAMC,EAAUC,SAASC,cAAc,aAEvC,GAAgB,OAAZF,EAAkB,CACpB,IAAMG,EAAwB,IAAIC,YAAYJ,EAAS,CACrDK,UAAWZ,IACXa,aAAcb,MAGhBG,EAAoBO,GAGpBH,EAAQO,UAAUC,SAAS,mBACtBd,OAAOe,iBAAiB,SAAUxB,EAASW,EAAoBO,GAAwB,MAE5F,MAAMO,EAAMT,SAASC,cAAc,qBAGnC,SAASS,IACP,IAAMC,EAAY,MAAMF,EAAIG,aAAa,QACrCH,EAAII,QACNd,EAAQO,UAAUQ,IAAIH,GAEtBZ,EAAQO,UAAUS,OAAOJ,GAGjB,OAARF,IACFC,IACAD,EAAID,iBAAiB,SAAUE,IAGjC,IAAMM,EAAYhB,SAASC,cAAc,4BACvB,OAAde,GAEF,IAAIC,UAAUD,GAIlB,MAAME,EAAYlB,SAASC,cAAc,gBAGvB,OAAdiB,IAMFvB,EALAwB,EAAkB,IAAIhB,YAAY,eAAgB,CAChDC,WAAW,EACXC,cAAc,KAIhBZ,OAAOe,iBAAiB,SAAUxB,EAASW,EAAoBwB,GAAkB,MAGjF,IAAIF,UAAUC,EAAUjB,cAAc"}


--------------------------------------------------------------------------------
/site/src/components/ElkSidebar.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   elkSideClasses?:string;
 4 |   elkSideContentClasses?:string;
 5 | };
 6 | const { elkSideClasses, elkSideContentClasses } = Astro.props as Props;
 7 | ---
 8 | 
 9 | <!-- BEGIN .elk-side -->
10 | <aside class:list={["elk-side", elkSideClasses ]} id="elk-side">
11 |   <!-- BEGIN .elk-side-content -->
12 |   <div class:list={["elk-side-content", elkSideContentClasses]}>
13 |     <!-- BEGIN .elk-side-nav -->
14 |     <nav class="elk-side-nav">
15 |       <!-- BEGIN: elk-side-nav-content -->
16 |       <ul class="metismenu" id="metismenu">
17 |         <li>
18 |           <a href="/">
19 |             <span class="has-icon"><i class="fa fa-cogs"></i></span>
20 |             <span class="nav-title">Dashboard</span>
21 |           </a>
22 |         </li>
23 | 
24 |         <li>
25 |           <a href="#" class="has-arrow">
26 |             <span class="has-icon"><i class="fa fa-pagelines"></i></span>
27 |             <span class="nav-title">Blank Pages</span>
28 |           </a>
29 |           <ul>
30 |             <li><a href="no-footers">No Footers</a></li>
31 |             <li><a href="no-headers">No Headers</a></li>
32 |             <li><a href="no-headers-footers">No Headers&Footers</a></li>
33 |             <li><a href="app-is-fixed">App Fixed</a></li>
34 |             <li><a href="main-is-fixed">Main Fixed</a></li>
35 |             <li><a href="sticky-header">Sticky Header</a></li>
36 |             <li><a href="sticky-header-2">Sticky Header 2</a></li>
37 |             <li><a href="sticky-footer">Sticky Footer</a></li>
38 |           </ul>
39 |         </li>
40 | 
41 |         <li>
42 |           <a href="#" class="has-arrow">
43 |             <span class="has-icon"><i class="fa fa-list"></i></span>
44 |             <span class="nav-title">elk-side</span>
45 |           </a>
46 |           <ul>
47 |             <li><a href="app-side-is-mini">is-mini</a></li>
48 |             <li><a href="app-side-is-hoverable">is-hoverable</a></li>
49 |             <li>
50 |               <a href="#" class="has-arrow">is-fixed</a>
51 |               <ul>
52 |                 <li><a href="app-side-is-fixed">Default</a></li>
53 |                 <li><a href="app-side-is-fixed-is-hoverable">Hoverable</a></li>
54 |               </ul>
55 |             </li>
56 | 
57 |             <li>
58 |               <a href="#" class="has-arrow">is-sticky</a>
59 |               <ul>
60 |                 <li><a href="app-side-is-sticky">Default</a></li>
61 |                 <li><a href="app-side-is-sticky-is-mini">mini</a></li>
62 |                 <li>
63 |                   <a href="app-side-is-sticky-is-hoverable">hoverable</a>
64 |                 </li>
65 |               </ul>
66 |             </li>
67 |           </ul>
68 |         </li>
69 |       </ul>
70 |       <!-- END: elk-side-nav-content -->
71 |     </nav>
72 |     <!-- END: .elk-side-nav -->
73 |   </div>
74 |   <!-- END: .elk-side-content -->
75 | 
76 |   <!-- BEGIN .elk-side-footer -->
77 |   <footer class="elk-side-footer">ESF</footer>
78 |   <!-- END .elk-side-footer -->
79 | </aside>
80 | <!-- END: .elk-side -->
81 | 
82 | 
83 | <style>
84 |   .elk-side {
85 | 
86 |     background-color: var(--surface-2);
87 |     border-inline-end: 1px solid var(--surface-3);
88 |   }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/site/public/assets/css/prism.css:
--------------------------------------------------------------------------------
  1 | :root :not(pre)>code[class*=language-] {
  2 |     padding: var(--size-1) var(--size-2);
  3 |     box-shadow: var(--inner-shadow-0), var(--shadow-1);
  4 |     color: var(--text-1);
  5 |     white-space: nowrap;
  6 |     text-shadow: none
  7 | }
  8 | 
  9 | code.language-bash:before {
 10 |     content: "$ ";
 11 |     color: var(--cyan-1)
 12 | }
 13 | 
 14 | [data-theme=light] code.language-bash:before {
 15 |     color: var(--teal-6)
 16 | }
 17 | 
 18 | code[class*=language-],
 19 | pre[class*=language-] {
 20 |     text-align: start;
 21 |     white-space: pre;
 22 |     word-spacing: normal;
 23 |     word-break: normal;
 24 |     word-wrap: normal;
 25 |     line-height: 1.5;
 26 |     tab-size: 4;
 27 |     hyphens: none
 28 | }
 29 | 
 30 | pre[class*=language-] {
 31 |     padding-inline: var(--size-4);
 32 |     padding-block: var(--size-3);
 33 |     margin: var(--size-2) 0;
 34 |     overflow: auto;
 35 |     border-radius: var(--radius-conditional-2);
 36 |     border: var(--border-size-1) solid var(--surface-3);
 37 |     background: var(--surface-2)
 38 | }
 39 | 
 40 | @media (min-width: 1024px) {
 41 |     pre[class*=language-] {
 42 |         padding-inline: var(--size-5);
 43 |         padding-block: var(--size-4)
 44 |     }
 45 | }
 46 | 
 47 | [data-theme=light] pre[class*=language-] {
 48 |     background: white
 49 | }
 50 | 
 51 | code.language-css {
 52 |     color: var(--indigo-1);
 53 |     text-shadow: 0 0 10px var(--indigo-5), 0 0 25px var(--indigo-7)
 54 | }
 55 | 
 56 | [data-theme=light] code.language-css {
 57 |     color: var(--indigo-9);
 58 |     text-shadow: 0 0 15px var(--indigo-7);
 59 |     background: white
 60 | }
 61 | 
 62 | @media (dynamic-range: high) {
 63 |     code.language-css {
 64 |         text-shadow: 0 0 15px color(display-p3 0 0 1)
 65 |     }
 66 | }
 67 | 
 68 | .token:is(.property,
 69 |     .atrule > *) {
 70 |     color: var(--text-1);
 71 |     text-shadow: 0 1px 0 var(--surface-1)
 72 | }
 73 | 
 74 | [data-theme=light] .token:is(.property,
 75 |     .atrule > *) {
 76 |     text-shadow: 0 1px 0 var(--gray-3)
 77 | }
 78 | 
 79 | .token.selector {
 80 |     color: var(--text-2);
 81 |     text-shadow: none
 82 | }
 83 | 
 84 | .token:is(.string,
 85 |     .attr-value) {
 86 |     color: var(--teal-0);
 87 |     text-shadow: 0 0 10px var(--teal-5), 0 0 25px var(--teal-7)
 88 | }
 89 | 
 90 | [data-theme=light] .token:is(.string,
 91 |     .attr-value) {
 92 |     color: var(--grape-9);
 93 |     text-shadow: 0 0 15px var(--grape-9)
 94 | }
 95 | 
 96 | @media (dynamic-range: high) {
 97 | 
 98 |     .token:is(.string,
 99 |         .attr-value) {
100 |         text-shadow: 0 0 15px color(display-p3 0 1 0)
101 |     }
102 | }
103 | 
104 | .token:is(.comment,
105 |     .punctuation) {
106 |     color: var(--gray-5);
107 |     text-shadow: none
108 | }
109 | 
110 | [data-theme=light] .token:is(.comment,
111 |     .punctuation) {
112 |     color: var(--gray-6)
113 | }
114 | 
115 | .token.slider-target {
116 |     color: #000;
117 |     color: initial
118 | }
119 | 
120 | .token.slider-target:before {
121 |     content: "\2192";
122 |     opacity: 0;
123 |     position: absolute;
124 |     inset-inline-start: calc(var(--size-4) / 2 - .5ch);
125 |     animation: var(--animation-slide-in-right) forwards, var(--animation-fade-in) forwards
126 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # elektron [![NPM version](https://img.shields.io/npm/v/elektron.svg?style=flat)](https://www.npmjs.com/package/elektron) [![NPM monthly downloads](https://img.shields.io/npm/dm/elektron.svg?style=flat)](https://npmjs.org/package/elektron) [![NPM total downloads](https://img.shields.io/npm/dt/elektron.svg?style=flat)](https://npmjs.org/package/elektron)  
 2 | 
 3 | > An Admin Layout
 4 | 
 5 | Please consider following this project's author, [Osman Nuri Okumus](https://github.com/onokumus), and consider starring the project to show your :heart: and support.
 6 | 
 7 | - [Install](#install)
 8 | - [Download](#download)
 9 | - [About](#about)
10 |   * [Related projects](#related-projects)
11 |   * [Contributing](#contributing)
12 |   * [Building docs](#building-docs)
13 |   * [Author](#author)
14 |   * [License](#license)
15 | 
16 | _(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](https://github.com/jonschlinkert/markdown-toc))_
17 | 
18 | ## Install
19 | Install with [npm](https://www.npmjs.com/):
20 | 
21 | ```sh
22 | npm install --save elektron
23 | ```
24 | Install with [yarn](https://yarnpkg.com):
25 | 
26 | ```sh
27 | yarn add elektron
28 | ```
29 | 
30 | ## Download
31 | [Download Link](https://github.com/onokumus/elektron/archive/master.zip)
32 | 
33 | ## About
34 | ### Related projects
35 | - [chl](https://www.npmjs.com/package/chl): flexbox admin layout | [homepage](https://github.com/chaldene/chl#readme "flexbox admin layout")
36 | - [metismenu](https://www.npmjs.com/package/metismenu): A jQuery menu plugin | [homepage](https://github.com/onokumus/metismenu#readme "A jQuery menu plugin")
37 | - [metismenujs](https://www.npmjs.com/package/metismenujs): MetisMenu with Vanilla-JS | [homepage](https://github.com/onokumus/metismenujs#readme "MetisMenu with Vanilla-JS")
38 | - [onoffcanvas](https://www.npmjs.com/package/onoffcanvas): An offcanvas plugin | [homepage](https://github.com/onokumus/onoffcanvas "An offcanvas plugin")
39 | 
40 | ### Contributing
41 | Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).
42 | 
43 | Please read the [contributing guide](.github/contributing.md) for advice on opening issues, pull requests, and coding standards.
44 | 
45 | ### Building docs
46 | _(This project's readme.md is generated by [verb](https://github.com/verbose/verb-generate-readme), please don't edit the readme directly. Any changes to the readme must be made in the [.verb.md](.verb.md) readme template.)_
47 | 
48 | To generate the readme, run the following command:
49 | 
50 | ```sh
51 | $ npm install -g verbose/verb#dev verb-generate-readme && verb
52 | ```
53 | 
54 | ### Author
55 | **Osman Nuri Okumus**
56 | + [GitHub Profile](https://github.com/onokumus)
57 | + [Twitter Profile](https://twitter.com/onokumus)
58 | + [LinkedIn Profile](https://linkedin.com/in/onokumus)
59 | 
60 | ### License
61 | Copyright © 2018, [Osman Nuri Okumus](https://github.com/onokumus).
62 | MIT
63 | 
64 | ***
65 | 
66 | _This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.8.0, on October 11, 2018._
67 | 
68 | [chl]: https://github.com/chaldene/chl
69 | [metismenu]: https://github.com/onokumus/metismenu
70 | [metismenujs]: https://github.com/onokumus/metismenujs
71 | [onoffcanvas]: https://github.com/onokumus/onoffcanvas
72 | 
73 | 


--------------------------------------------------------------------------------
/.github/contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to elektron
 2 | 
 3 | First and foremost, thank you! We appreciate that you want to contribute to elektron, your time is valuable, and your contributions mean a lot to us.
 4 | 
 5 | **What does "contributing" mean?**
 6 | 
 7 | Creating an issue is the simplest form of contributing to a project. But there are many ways to contribute, including the following:
 8 | 
 9 | - Updating or correcting documentation
10 | - Feature requests
11 | - Bug reports
12 | 
13 | If you'd like to learn more about contributing in general, the [Guide to Idiomatic Contributing](https://github.com/jonschlinkert/idiomatic-contributing) has a lot of useful information.
14 | 
15 | **Showing support for elektron**
16 | 
17 | Please keep in mind that open source software is built by people like you, who spend their free time creating things the rest the community can use.
18 | 
19 | Don't have time to contribute? No worries, here are some other ways to show your support for elektron:
20 | 
21 | - star the [project](https://github.com/onokumus/elektron)
22 | - tweet your support for elektron
23 | 
24 | ## Issues
25 | 
26 | ### Before creating an issue
27 | 
28 | Please try to determine if the issue is caused by an underlying library, and if so, create the issue there. Sometimes this is difficult to know. We only ask that you attempt to give a reasonable attempt to find out. Oftentimes the readme will have advice about where to go to create issues.
29 | 
30 | Try to follow these guidelines
31 | 
32 | - **Investigate the issue**:
33 | - **Check the readme** - oftentimes you will find notes about creating issues, and where to go depending on the type of issue.
34 | - Create the issue in the appropriate repository.
35 | 
36 | ### Creating an issue
37 | 
38 | Please be as descriptive as possible when creating an issue. Give us the information we need to successfully answer your question or address your issue by answering the following in your issue:
39 | 
40 | - **version**: please note the version of elektron are you using
41 | - **extensions, plugins, helpers, etc** (if applicable): please list any extensions you're using
42 | - **error messages**: please paste any error messages into the issue, or a [gist](https://gist.github.com/)
43 | 
44 | ## Above and beyond
45 | 
46 | Here are some tips for creating idiomatic issues. Taking just a little bit extra time will make your issue easier to read, easier to resolve, more likely to be found by others who have the same or similar issue in the future.
47 | 
48 | - read the [Guide to Idiomatic Contributing](https://github.com/jonschlinkert/idiomatic-contributing)
49 | - take some time to learn basic markdown. This [markdown cheatsheet](https://gist.github.com/jonschlinkert/5854601) is super helpful, as is the GitHub guide to [basic markdown](https://help.github.com/articles/markdown-basics/).
50 | - Learn about [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). And if you want to really go above and beyond, read [mastering markdown](https://guides.github.com/features/mastering-markdown/).
51 | - use backticks to wrap code. This ensures that code will retain its format, making it much more readable to others
52 | - use syntax highlighting by adding the correct language name after the first "code fence"
53 | 
54 | 
55 | [node-glob]: https://github.com/isaacs/node-glob
56 | [micromatch]: https://github.com/jonschlinkert/micromatch
57 | [so]: http://stackoverflow.com/questions/tagged/elektron
58 | 


--------------------------------------------------------------------------------
/site/src/layouts/MainLayout.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | type Props = {
  3 |   title: string;
  4 |   elkAppIsFixed?: boolean;
  5 |   elkMainIsFixed?: boolean;
  6 |   elkAppClasses?: string;
  7 |   elkSideClasses?: string;
  8 | };
  9 | 
 10 | const { frontmatter } = Astro.props;
 11 | 
 12 | const { title, elkAppIsFixed, elkMainIsFixed, elkSideClasses, elkAppClasses } =
 13 |   Astro.props as Props;
 14 | 
 15 | import "open-props/style";
 16 | import "open-props/normalize";
 17 | 
 18 | import "../../../scss/elektron.scss";
 19 | 
 20 | import ElkSidebar from "../components/ElkSidebar.astro";
 21 | import BaseHead from "../components/BaseHead.astro";
 22 | import ElkHeader from "../components/ElkHeader.astro";
 23 | import ElkFooter from "../components/ElkFooter.astro";
 24 | ---
 25 | 
 26 | <!DOCTYPE html>
 27 | <html lang="en">
 28 |   <head>
 29 |     <BaseHead title={title || frontmatter.title} />
 30 | 
 31 |     <link
 32 |       rel="stylesheet"
 33 |       href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
 34 |     />
 35 |     <link
 36 |       rel="stylesheet"
 37 |       href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css"
 38 |     />
 39 |     <link
 40 |       rel="stylesheet"
 41 |       href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css"
 42 |     />
 43 | 
 44 |     <link rel="stylesheet" href="/elektron/assets/css/prism.css" />
 45 |   </head>
 46 |   <body class:list={["elk-app", elkAppClasses]}>
 47 |     <ElkHeader />
 48 |     <!-- BEGIN .elk-container -->
 49 |     <div class="elk-container">
 50 |       <ElkSidebar elkSideClasses={elkSideClasses} />
 51 | 
 52 |       <!-- BEGIN .elk-main -->
 53 |       <div class="elk-main">
 54 |         <!-- BEGIN .elk-main-heading -->
 55 |         <header class="elk-main-header">
 56 |           <ul class="elk-main-header-breadcrumb">
 57 |             <li class="breadcrumb-item"><a href="#">Home</a></li>
 58 |             <li class="breadcrumb-item"><a href="#">Library</a></li>
 59 |             <li class="breadcrumb-item active" aria-current="page">Data</li>
 60 |           </ul>
 61 |         </header>
 62 |         <!-- END: .elk-main-header -->
 63 |         <!-- BEGIN .elk-main-content -->
 64 |         <div class="elk-main-content">
 65 |           <slot />
 66 |         </div>
 67 |         <!-- END: .elk-main-content -->
 68 |         <!-- BEGIN .elk-main-footer -->
 69 |         <footer class="elk-main-footer">...</footer>
 70 | 
 71 |         <!-- END: .elk-main-footer -->
 72 |       </div>
 73 |       <!-- END: .elk-main -->
 74 |     </div>
 75 |     <!-- END: .elk-container -->
 76 | 
 77 |     <ElkFooter />
 78 | 
 79 |     <style lang="scss">
 80 |       .elk-main-content {
 81 |         padding: 1rem;
 82 |       }
 83 |       .elk-main-header-breadcrumb {
 84 |         display: grid;
 85 |         grid-auto-flow: column;
 86 |         grid-auto-columns: max-content;
 87 |         gap: 1rem;
 88 |         list-style: none;
 89 |       }
 90 |       .elk-main-header-breadcrumb .breadcrumb-item:not(:last-child)::after {
 91 |         margin-inline-start: 1rem;
 92 |           content: "/";
 93 |         }
 94 |     </style>
 95 | 
 96 |     <script is:inline src="https://cdn.jsdelivr.net/npm/metismenujs"></script>
 97 |     <script is:inline src="https://cdn.jsdelivr.net/npm/onoffcanvas"></script>
 98 |     <script is:inline src="https://cdn.jsdelivr.net/npm/prismjs"></script>
 99 |     <script is:inline async defer src="https://buttons.github.io/buttons.js"
100 |     ></script>
101 |     <script is:inline src="/elektron/assets/js/elektron.js"></script>
102 |     <!-- <script is:inline src="/elektron/assets/js/changetheme.js"></script> -->
103 |   </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/site/public/assets/js/elektron.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"elektron.js","sources":["../../../js/elektron.js"],"sourcesContent":["/* global OnoffCanvas, MetisMenu */\n\nconst debounce = (func, wait = 0) => {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\nconst isMobile = () => window.innerWidth < 993;\n\nconst showHideOnoffCanvas = (oc) => {\n  if (isMobile()) {\n    oc.hide();\n  } else {\n    oc.show();\n  }\n};\n\nconst elkSide = document.querySelector('.elk-side');\n\nif (elkSide !== null) {\n  const elkSideNavOnoffCanvas = new OnoffCanvas(elkSide, {\n    hideByEsc: isMobile(),\n    createDrawer: isMobile(),\n  });\n\n  showHideOnoffCanvas(elkSideNavOnoffCanvas);\n\n  // eslint-disable-next-line no-unused-expressions\n  elkSide.classList.contains('disable-resize')\n    || window.addEventListener('resize', debounce(showHideOnoffCanvas(elkSideNavOnoffCanvas), 250));\n\n  const esi = document.querySelector('.elk-switch-input');\n\n  /* eslint-disable-next-line no-inner-declarations */\n  function changeElkSide() {\n    const className = `is-${esi.getAttribute('name')}`;\n    if (esi.checked) {\n      elkSide.classList.add(className);\n    } else {\n      elkSide.classList.remove(className);\n    }\n  }\n  if (esi !== null) {\n    changeElkSide();\n    esi.addEventListener('change', changeElkSide);\n  }\n\n  const elkSideMM = document.querySelector('.elk-side-nav .metismenu');\n  if (elkSideMM !== null) {\n    // eslint-disable-next-line no-new\n    new MetisMenu(elkSideMM);\n  }\n}\n\nconst elkTopNav = document.querySelector('.elk-top-nav');\nlet elkTopNavCanvas;\n\nif (elkTopNav !== null) {\n  elkTopNavCanvas = new OnoffCanvas('.elk-top-nav', {\n    hideByEsc: false,\n    createDrawer: false,\n  });\n\n  showHideOnoffCanvas(elkTopNavCanvas);\n  window.addEventListener('resize', debounce(showHideOnoffCanvas(elkTopNavCanvas), 250));\n\n  // eslint-disable-next-line no-new\n  new MetisMenu(elkTopNav.querySelector('.metismenu'));\n}\n"],"names":[],"mappings":";;;;;;EAAA;AACA;EACA,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK;EACrC,EAAE,IAAI,KAAK,CAAC;EACZ,EAAE,OAAO,CAAC,GAAG,IAAI,KAAK;EACtB,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;EACxB,IAAI,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;EAC5C,GAAG,CAAC;EACJ,CAAC,CAAC;AACF;EACA,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;AAC/C;EACA,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK;EACpC,EAAE,IAAI,QAAQ,EAAE,EAAE;EAClB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;EACd,GAAG,MAAM;EACT,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;EACd,GAAG;EACH,CAAC,CAAC;AACF;EACA,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;AACpD;EACA,IAAI,OAAO,KAAK,IAAI,EAAE;EACtB,EAAE,MAAM,qBAAqB,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE;EACzD,IAAI,SAAS,EAAE,QAAQ,EAAE;EACzB,IAAI,YAAY,EAAE,QAAQ,EAAE;EAC5B,GAAG,CAAC,CAAC;AACL;EACA,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7C;EACA;EACA,EAAE,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;EAC9C,OAAO,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AACpG;EACA,EAAE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAC1D;EACA;EACA,EAAE,SAAS,aAAa,GAAG;EAC3B,IAAI,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;EACvD,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;EACrB,MAAM,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACvC,KAAK,MAAM;EACX,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAC1C,KAAK;EACL,GAAG;EACH,EAAE,IAAI,GAAG,KAAK,IAAI,EAAE;EACpB,IAAI,aAAa,EAAE,CAAC;EACpB,IAAI,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;EAClD,GAAG;AACH;EACA,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;EACvE,EAAE,IAAI,SAAS,KAAK,IAAI,EAAE;EAC1B;EACA,IAAI,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;EAC7B,GAAG;EACH,CAAC;AACD;EACA,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;EACzD,IAAI,eAAe,CAAC;AACpB;EACA,IAAI,SAAS,KAAK,IAAI,EAAE;EACxB,EAAE,eAAe,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE;EACpD,IAAI,SAAS,EAAE,KAAK;EACpB,IAAI,YAAY,EAAE,KAAK;EACvB,GAAG,CAAC,CAAC;AACL;EACA,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;EACvC,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AACzF;EACA;EACA,EAAE,IAAI,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;EACvD;;;;;;"}


--------------------------------------------------------------------------------
/site/src/components/basicHtml.md:
--------------------------------------------------------------------------------
  1 | ```html
  2 | <!doctype html>
  3 | <html lang="en">
  4 | 
  5 | <head>
  6 |   <!-- Required meta tags -->
  7 |   <meta charset="utf-8">
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  9 | 
 10 |   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 11 |   <title>Admin</title>
 12 | 
 13 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">
 14 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
 15 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">
 16 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css">
 17 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">
 18 | 
 19 | </head>
 20 | 
 21 | <body class="elk-app">
 22 | 
 23 |   <!-- BEGIN .elk-header -->
 24 |   <header class="elk-header ">
 25 |     <a class="onoffcanvas-toggler is-animated" href="#elk-side" data-toggle="onoffcanvas"></a>
 26 |   </header>
 27 |   <!-- END:  .elk-header -->
 28 |   <!-- BEGIN .elk-container -->
 29 |   <div class="elk-container">
 30 | 
 31 |     <!-- BEGIN .elk-side -->
 32 |     <aside class="elk-side " id="elk-side" aria-expanded=false>
 33 | 
 34 |       <!-- BEGIN .elk-side-content -->
 35 |       <div class="elk-side-content ">
 36 |         <!-- BEGIN .elk-side-nav -->
 37 |         <nav class="elk-side-nav">
 38 | 
 39 |           <!-- BEGIN: elk-side-nav-content -->
 40 |           <ul class="metismenu" id="metismenu">
 41 | 
 42 |             <li>
 43 |               <a class="active" href="index.html">
 44 |                 <span class="has-icon">
 45 |                   <i class="fa fa-cogs"></i>
 46 |                 </span>
 47 |                 <span class="nav-title">Dashboard</span>
 48 |               </a>
 49 |             </li>
 50 | 
 51 |             <li>
 52 |               <a href="#" class="has-arrow" aria-expanded=false>
 53 |                 <span class="has-icon">
 54 |                   <i class="fa fa-pagelines"></i>
 55 |                 </span>
 56 |                 <span class="nav-title">Menu</span>
 57 |               </a>
 58 |               <ul aria-expanded=false>
 59 |                 <li>
 60 |                   <a href="#">Menu Item</a>
 61 |                 </li>
 62 |               </ul>
 63 |             </li>
 64 | 
 65 |           </ul>
 66 |           <!-- END: elk-side-nav-content -->
 67 |         </nav>
 68 |         <!-- END: .elk-side-nav -->
 69 |       </div>
 70 |       <!-- END: .elk-side-content -->
 71 |       <!-- BEGIN .elk-side-footer -->
 72 |       <footer class="elk-side-footer">
 73 |         ...
 74 |       </footer>
 75 |       <!-- END .elk-side-footer -->
 76 | 
 77 |     </aside>
 78 |     <!-- END: .elk-side -->
 79 | 
 80 |     <!-- BEGIN .elk-main -->
 81 |     <div class="elk-main">
 82 | 
 83 |       <!-- BEGIN .elk-main-heading -->
 84 |       <header class="elk-main-header">
 85 |         ...
 86 |       </header>
 87 |       <!-- END: .elk-main-header -->
 88 |       <!-- BEGIN .elk-main-content -->
 89 |       <div class="elk-main-content">
 90 | 
 91 |         ...
 92 | 
 93 |       </div>
 94 |       <!-- END: .elk-main-content -->
 95 |       <!-- BEGIN .elk-main-footer -->
 96 |       <footer class="elk-main-footer">
 97 |         ...
 98 |       </footer>
 99 | 
100 |       <!-- END: .elk-main-footer -->
101 | 
102 |     </div>
103 |     <!-- END: .elk-main -->
104 | 
105 |   </div>
106 |   <!-- END: .elk-container -->
107 | 
108 |   <!-- begin .elk-footer -->
109 |   <footer class="elk-footer ">
110 |     ...
111 |   </footer>
112 |   <!-- END: .elk-footer -->
113 | 
114 |   <script src="https://cdn.jsdelivr.net/npm/metismenujs" charset="utf-8"></script>
115 |   <script src="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.js" charset="utf-8"></script>
116 |   <script src="https://cdn.jsdelivr.net/npm/elektron" charset="utf-8"></script>
117 | </body>
118 | 
119 | </html>
120 | ```
121 | 


--------------------------------------------------------------------------------
/changelog.md:
--------------------------------------------------------------------------------
  1 | ## Changelog
  2 | 
  3 | ### [Unreleased]
  4 | 
  5 | ### [0.7.2] - 2021-12-17
  6 | 
  7 | **fixed**
  8 | - fix #2
  9 | 
 10 | ### [0.7.1] - 2021-12-16
 11 | 
 12 | **added**
 13 | - check has .disable-resize class to elk-side
 14 | 
 15 | ### [0.7.0] - 2021-12-16
 16 | 
 17 | **removed**
 18 | - elk-wrap class
 19 | ### [0.5.3] - 2018-10-12
 20 | 
 21 | **fixed**
 22 | - elk-side flex-shrink
 23 | 
 24 | ### [0.5.2] - 2018-10-11
 25 | 
 26 | **fixed**
 27 | - elk-app class
 28 | 
 29 | **added**
 30 | - postcss-preset-env
 31 | 
 32 | ### [0.5.1] - 2018-08-03
 33 | 
 34 | **fixed**
 35 | - elk-main class
 36 | 
 37 | **added**
 38 | - elektron-theme.css
 39 | 
 40 | **removed**
 41 | - open-color.scss
 42 | 
 43 | ### [0.5.0] - 2018-07-26
 44 | 
 45 | **added**
 46 | - gtag
 47 | - logo
 48 | - theme changer
 49 | 
 50 | **removed**
 51 | - jquery
 52 | - metismenu
 53 | 
 54 | **fixed**
 55 | - is-fixed class
 56 | - data-theme attribute
 57 | 
 58 | ### [0.4.1] - 2018-04-30
 59 | **fixed**
 60 | - elk-switch selector in elektron.js
 61 | 
 62 | ### [0.4.0]  - 2018-04-30
 63 | 
 64 | **added**
 65 | - elk-switch component
 66 | - data-theme=dark attribute
 67 | - is-fixed class for elk-app component
 68 | - is-fixed class for elk-main component
 69 | 
 70 | **changed**
 71 | - app class to elk-app
 72 | - app-wrap class to elk-wrap
 73 | - app-heading class to elk-header
 74 | - app-container class to elk-container
 75 | - app-footer class to elk-footer
 76 | - app-side class to elk-side
 77 | - side-heading class to elk-side-header
 78 | - side-content class to elk-side-content
 79 | - side-footer class to elk-side-footer
 80 | - app-main class to elk-main
 81 | - main-heading class to elk-main-header
 82 | - main-content class to elk-main-content
 83 | - main-footer class to elk-main-footer
 84 | 
 85 | **removed**
 86 | - is-inverse class
 87 | - app-is-fixed class
 88 | - main-is-fixed class
 89 | 
 90 | ### [0.3.3] - 2018-04-20
 91 | **fixed**
 92 | - ember-view class
 93 | 
 94 | ### [0.3.2] - 2018-04-20
 95 | **fixed**
 96 | - ember-view class
 97 | 
 98 | ### [0.2.1]  - 2017-03-15
 99 | **fixed**
100 | - app-side
101 | 
102 | ### [0.2.0] - 2017-03-13
103 | **added**
104 | - font-awesome
105 | - is-inverse class
106 | **changes**
107 | - onoffcanvas update
108 | **removed**
109 | - side-inverse class
110 | 
111 | ### [0.1.0] - 2017-03-03
112 | **removed**
113 | - bootstrap
114 | - tether
115 | - animate.css
116 | - font-awesome
117 | 
118 | ### [0.0.4] - 2017-02-19
119 | **added**
120 | - animate.css
121 | - multilevel menü
122 | **fixed**
123 | - elektron.js
124 | 
125 | ### [0.0.3] - 2017-02-13
126 | **added**
127 | - bower support
128 | 
129 | ### [0.0.2] - 2017-02-13
130 | **fixed**
131 | - .verb.md
132 | 
133 | ### 0.0.1 - 2017-02-13
134 | **added**
135 | - initial release
136 | 
137 | [Unreleased]: https://github.com/onokumus/elektron/compare/v0.7.2...HEAD
138 | [0.7.2]: https://github.com/onokumus/elektron/compare/v0.7.1...v0.7.2
139 | [0.7.1]: https://github.com/onokumus/elektron/compare/v0.7.0...v0.7.1
140 | [0.7.0]: https://github.com/onokumus/elektron/compare/v0.5.3...v0.7.0
141 | [0.5.3]: https://github.com/onokumus/elektron/compare/v0.5.2...v0.5.3
142 | [0.5.2]: https://github.com/onokumus/elektron/compare/v0.5.1...v0.5.2
143 | [0.5.1]: https://github.com/onokumus/elektron/compare/v0.5.0...v0.5.1
144 | [0.5.0]: https://github.com/onokumus/elektron/compare/v0.4.1...v0.5.0
145 | [0.4.1]: https://github.com/onokumus/elektron/compare/v0.4.0...v0.4.1
146 | [0.4.0]: https://github.com/onokumus/elektron/compare/v0.3.3...v0.4.0
147 | [0.3.3]: https://github.com/onokumus/elektron/compare/v0.3.2...v0.3.3
148 | [0.3.2]: https://github.com/onokumus/elektron/compare/v0.3.1...v0.3.2
149 | [0.3.1]: https://github.com/onokumus/elektron/compare/v0.3.0...v0.3.1
150 | [0.3.0]: https://github.com/onokumus/elektron/compare/v0.2.1...v0.3.0
151 | [0.2.1]: https://github.com/onokumus/elektron/compare/v0.2.0...v0.2.1
152 | [0.2.0]: https://github.com/onokumus/elektron/compare/v0.1.0...v0.2.0
153 | [0.1.0]: https://github.com/onokumus/elektron/compare/v0.0.4...v0.1.0
154 | [0.0.4]: https://github.com/onokumus/elektron/compare/v0.0.3...v0.0.4
155 | [0.0.3]: https://github.com/onokumus/elektron/compare/v0.0.2...v0.0.3
156 | [0.0.2]: https://github.com/onokumus/elektron/compare/v0.0.1...v0.0.2
157 | 


--------------------------------------------------------------------------------
/site/src/pages/sticky-header-2.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: sticky header 2
  3 | layout: ../layouts/MdLayout.astro
  4 | hasElkFooter: true
  5 | hasElkHeader: true
  6 | elkAppClasses: elk-test
  7 | elkMainClasses: elk-test
  8 | elkSideClasses: elk-test
  9 | ---
 10 | <!-- BEGIN .elk-header -->
 11 | <header class="elk-header">
 12 |   <a class="onoffcanvas-toggler is-animated" href="#elk-top-nav" data-toggle="onoffcanvas"></a>
 13 |   <a href="index.html">
 14 |     <img src="assets/img/logo.svg" alt="Elektron Logo">
 15 |   </a>
 16 | </header>
 17 | <!-- END:  .elk-header -->
 18 | 
 19 | <!-- BEGIN .elk-header -->
 20 | <header class="elk-header is-sticky">
 21 |   <nav class="elk-top-nav is-hoverable onoffcanvas is-top" id="elk-top-nav">
 22 |     <ul class="metismenu" id="menu1">
 23 |       <li>
 24 |         <a class="{{#is title " Dashboard "}} active{{/is}}" href="index.html">
 25 |           <span class="has-icon">
 26 |             <i class="fa fa-cogs"></i>
 27 |           </span>
 28 |           <span class="nav-title">Dashboard</span>
 29 |         </a>
 30 |       </li>
 31 | 
 32 |       <li>
 33 |         <a href="#" class="has-arrow">
 34 |           <span class="has-icon">
 35 |             <i class="fa fa-pagelines"></i>
 36 |           </span>
 37 |           <span class="nav-title">Blank Pages</span>
 38 |         </a>
 39 |         <ul>
 40 |           <li>
 41 |             <a href="no-footers.html">No Footers</a>
 42 |           </li>
 43 |           <li>
 44 |             <a href="no-headers.html">No Headers</a>
 45 |           </li>
 46 |           <li>
 47 |             <a href="no-headers-footers.html">No Headers & Footers</a>
 48 |           </li>
 49 |           <li>
 50 |             <a href="app-is-fixed.html">App Fixed</a>
 51 |           </li>
 52 |           <li>
 53 |             <a href="main-is-fixed.html">Main Fixed</a>
 54 |           </li>
 55 |           <li>
 56 |             <a href="sticky-header.html">Sticky Header</a>
 57 |           </li>
 58 |           <li>
 59 |             <a href="sticky-header-2.html">Sticky Header 2</a>
 60 |           </li>
 61 |           <li>
 62 |             <a href="sticky-footer.html">Sticky Footer</a>
 63 |           </li>
 64 |         </ul>
 65 |       </li>
 66 | 
 67 |       <li>
 68 |       <a href="#" class="has-arrow">
 69 |         <span class="has-icon"><i class="fa fa-list"></i></span>
 70 |         <span class="nav-title">elk-side</span>
 71 |       </a>
 72 |       <ul>
 73 |         <li><a{{#is title "is-mini"}} class=active{{/is}} href="app-side-is-mini.html">is-mini</a></li>
 74 |         <li><a{{#is title "is-hoverable"}} class=active{{/is}} href="app-side-is-hoverable.html">is-hoverable</a></li>
 75 |         <li>
 76 |           <a href="#" class="has-arrow">is-fixed</a>
 77 |           <ul>
 78 |             <li><a{{#is title "app-side fixed"}} class=active{{/is}} href="app-side-is-fixed.html">Default</a></li>
 79 |             <li><a{{#is title "elk-side hoverable"}} class=active{{/is}} href="app-side-is-fixed-is-hoverable.html">Hoverable</a></li>
 80 |           </ul>
 81 |         </li>
 82 | 
 83 |         <li>
 84 |           <a href="#" class="has-arrow">is-sticky</a>
 85 |           <ul>
 86 |             <li><a{{#is title "is-sticky"}} class=active{{/is}} href="app-side-is-sticky.html">Default</a></li>
 87 |             <li><a{{#is title "is-sticky is-mini"}} class=active{{/is}} href="app-side-is-sticky-is-mini.html">mini</a></li>
 88 |             <li><a{{#is title "is-sticky is-hoverable"}} class=active{{/is}} href="app-side-is-sticky-is-hoverable.html">hoverable</a></li>
 89 |           </ul>
 90 |         </li>
 91 | 
 92 |       </ul>
 93 |     </li>
 94 |     </ul>
 95 |   </nav>
 96 | </header>
 97 | <!-- END:  .elk-header -->
 98 | 
 99 | <!-- BEGIN .app-container -->
100 | <div class="elk-container">
101 | 
102 |   {{!--
103 |   <!-- BEGIN .app-side -->
104 |   <aside class="app-side" id="app-side">
105 | 
106 |     <!-- BEGIN .side-content -->
107 |     <div class="side-content ">
108 | 
109 |       {{> elk-side-nav}}
110 | 
111 |     </div>
112 |     <!-- END: .side-content -->
113 | 
114 |     <!-- BEGIN .side-footer -->
115 |     <footer class="side-footer">
116 |       SIDE FOOTER
117 |     </footer>
118 |     <!-- END .side-footer -->
119 | 
120 |   </aside>
121 |   <!-- END: .app-side -->--}}
122 | 
123 |   <!-- BEGIN .app-main -->
124 |   <div class="elk-main">
125 | 
126 |     <!-- BEGIN .main-heading -->
127 |     <header class="elk-main-header">
128 |       MAIN HEADING
129 |     </header>
130 |     <!-- END: .main-heading -->
131 | 
132 |     <!-- BEGIN .main-content -->
133 |     <div class="elk-main-content">
134 |       <label class="elk-switch">
135 |         <input name="dark" class="elk-switch-input" type="checkbox">
136 |         <span class="elk-switch-indicator"></span>
137 |       </label>
138 |       <h4>Code</h4>
139 |       <p>Supported browser :
140 |         <a href="http://caniuse.com/#feat=css-sticky">http://caniuse.com/#feat=css-sticky</a>
141 |       </p>
142 |       <h5>HTML</h5>
143 |       <p>
144 |         <pre><code class="language-html">&lt;!-- BEGIN .elk-header --&gt;
145 | &lt;header class=&quot;elk-header is-sticky&quot; data-theme=dark&gt;
146 |   &lt;a href=&quot;#app-side&quot;
147 |   data-toggle=&quot;onoffcanvas&quot;
148 |   class=&quot;onoffcanvas-toggler&quot;
149 |   aria-expanded=false&gt;&lt;/a&gt;
150 |   &lt;span&gt;APP HEADER&lt;/span&gt;
151 | &lt;/header&gt;
152 | &lt;!-- END:  .elk-header --&gt;
153 | </code></pre>
154 |       </p>
155 |       <p>lorem</p>
156 |       <p>lorem</p>
157 |       <p>lorem</p>
158 |       <p>lorem</p>
159 |       <p>lorem</p>
160 |       <p>lorem</p>
161 |       <p>lorem</p>
162 |       <p>lorem</p>
163 |       <p>lorem</p>
164 |       <p>lorem</p>
165 |       <p>lorem</p>
166 |       <p>lorem</p>
167 |       <p>lorem</p>
168 |       <p>lorem</p>
169 |       <p>lorem</p>
170 |       <p>lorem</p>
171 |       <p>lorem</p>
172 |       <p>lorem</p>
173 |       <p>lorem</p>
174 |       <p>lorem</p>
175 |       <p>lorem</p>
176 |       <p>lorem</p>
177 |       <p>lorem</p>
178 |       <p>lorem</p>
179 |       <p>lorem</p>
180 |       <p>lorem</p>
181 |       <p>lorem</p>
182 |       <p>lorem</p>
183 |       <p>lorem</p>
184 |       <p>lorem</p>
185 |       <p>lorem</p>
186 |       <p>lorem</p>
187 |       <p>lorem</p>
188 |       <p>lorem</p>
189 |       <p>lorem</p>
190 |       <p>lorem</p>
191 |       <p>lorem</p>
192 |       <p>lorem</p>
193 |       <p>lorem</p>
194 |       <p>lorem</p>
195 |       <p>lorem</p>
196 |       <p>lorem</p>
197 |       <p>lorem</p>
198 |       <p>lorem</p>
199 |       <p>lorem</p>
200 |       <p>lorem</p>
201 |       <p>lorem</p>
202 |       <p>lorem</p>
203 |       <p>lorem</p>
204 |       <p>lorem</p>
205 |       <p>lorem</p>
206 |       <p>lorem</p>
207 |       <p>lorem</p>
208 |       <p>lorem</p>
209 |       <p>lorem</p>
210 |       <p>lorem</p>
211 |       <p>lorem</p>
212 |       <p>lorem</p>
213 |       <p>lorem</p>
214 |       <p>lorem</p>
215 |       <p>lorem</p>
216 |       <p>lorem</p>
217 |       <p>lorem</p>
218 | 
219 |     </div>
220 |     <!-- END: .main-content -->
221 | 
222 |     <!-- BEGIN .main-footer -->
223 |     <footer class="main-footer">
224 |       main footer
225 |     </footer>
226 |     <!-- END: .main-footer -->
227 | 
228 |   </div>
229 |   <!-- END: .app-main -->
230 | 
231 | </div>
232 | <!-- END: .app-container -->
233 | 
234 | <!-- begin .app-footer -->
235 | <footer class="elk-footer ">
236 |   <p>
237 |     elektron v0.3.3 2018
238 |   </p>
239 | </footer>
240 | <!-- END: .app-footer -->
241 | 


--------------------------------------------------------------------------------
/site/public/assets/css/elektron.css:
--------------------------------------------------------------------------------
  1 | /*! elektron v0.7.2 | MIT License | github.com/onokumus/elektron */
  2 | :root {
  3 |   --elk-side-width: 256px;
  4 |   --elk-side-is-mini-width: 64px;
  5 |   --elk-side-z-index: 2;
  6 |   --elk-side-is-open-z-index: 2;
  7 |   --elk-side-breakpoint: 992px;
  8 | }
  9 | 
 10 | :where(html) {
 11 |   block-size: 100%;
 12 | }
 13 | 
 14 | :where(body) {
 15 |   min-block-size: 100%;
 16 | }
 17 | 
 18 | .elk-app {
 19 |   display: flex;
 20 |   flex-direction: column;
 21 | }
 22 | 
 23 | /**
 24 | * deprecated
 25 | */
 26 | .elk-wrap {
 27 |   flex: 1 1 auto;
 28 |   display: flex;
 29 |   flex-direction: column;
 30 |   min-height: 100vh;
 31 |   position: relative;
 32 |   width: 100%;
 33 | }
 34 | 
 35 | .elk-header {
 36 |   position: relative;
 37 | }
 38 | .elk-header.is-sticky {
 39 |   position: sticky;
 40 |   top: 0;
 41 |   z-index: var(--elk-side-z-index);
 42 | }
 43 | 
 44 | .elk-container {
 45 |   display: flex;
 46 |   flex: 1 1 auto;
 47 |   flex-basis: auto;
 48 |   flex-direction: row;
 49 |   position: relative;
 50 | }
 51 | 
 52 | .elk-main {
 53 |   position: relative;
 54 |   display: flex;
 55 |   flex-direction: column;
 56 |   flex: 1 1 auto;
 57 |   overflow-x: auto;
 58 |   transition: margin 0.3s ease-out;
 59 | }
 60 | 
 61 | .elk-main-content {
 62 |   position: relative;
 63 |   margin-bottom: auto;
 64 |   flex: 1 1 auto;
 65 | }
 66 | 
 67 | .elk-side {
 68 |   display: flex;
 69 |   flex-flow: column nowrap;
 70 |   margin: 0;
 71 | }
 72 | 
 73 | .elk-footer.is-sticky {
 74 |   position: sticky;
 75 |   bottom: 0;
 76 |   z-index: var(--elk-side-is-open-z-index);
 77 | }
 78 | 
 79 | /*
 80 | * <body class="elk-app is-fixed">
 81 | *
 82 | */
 83 | .elk-app.is-fixed {
 84 |   height: 100%;
 85 | }
 86 | .elk-app.is-fixed .elk-container,
 87 | .elk-app.is-fixed .elk-side,
 88 | .elk-app.is-fixed .elk-main {
 89 |   overflow-y: auto;
 90 | }
 91 | 
 92 | /*
 93 | * <body class="elk-app is-fixed">
 94 | *   <div class="elk-main is-fixed">
 95 | *     ...
 96 | *   </div>
 97 | * </body>
 98 | */
 99 | .elk-app.is-fixed .elk-main.is-fixed .elk-main-content {
100 |   overflow-y: auto;
101 | }
102 | 
103 | /*
104 | * elk-side : inspired .onoffcanvas.is-left
105 | *
106 | * available classess: is-open
107 | */
108 | .elk-side {
109 |   width: 100%;
110 |   position: absolute;
111 |   top: 0;
112 |   bottom: 0;
113 |   inset-inline-start: 0;
114 |   z-index: var(--elk-side-z-index);
115 |   transform: translate3d(-100%, 0, 0);
116 |   transition: transform 0.3s ease-out;
117 | }
118 | @media (min-width: 992px) {
119 |   .elk-side {
120 |     width: var(--elk-side-width);
121 |   }
122 | }
123 | 
124 | /*
125 | * show elk-side
126 | */
127 | .elk-side.is-open {
128 |   transform: translate3d(0, 0, 0);
129 |   flex-shrink: 0;
130 | }
131 | @media (min-width: 992px) {
132 |   .elk-side.is-open {
133 |     position: relative;
134 |   }
135 | }
136 | 
137 | /*
138 | * side-content
139 | *
140 | * available classess: is-sticky
141 | */
142 | @media (min-width: 992px) {
143 |   .elk-side-content {
144 |     margin-bottom: auto;
145 |   }
146 |   .elk-side-content.is-sticky {
147 |     margin-bottom: initial;
148 |     position: sticky;
149 |     top: 0;
150 |     z-index: var(--elk-side-is-open-z-index);
151 |   }
152 |   .elk-side:not(.is-mini) .elk-side-content.is-sticky {
153 |     overflow-y: auto;
154 |   }
155 | }
156 | .elk-side-header {
157 |   padding: 0.5rem;
158 |   text-align: right;
159 | }
160 | 
161 | .onoffcanvas-drawer.is-open {
162 |   z-index: 1;
163 | }
164 | 
165 | .elk-side-nav ul {
166 |   padding: 0;
167 |   margin: 0;
168 |   list-style: none;
169 | }
170 | 
171 | .elk-side-nav .metismenu {
172 |   display: flex;
173 |   flex-direction: column;
174 | }
175 | 
176 | .elk-side-nav .metismenu li {
177 |   margin-top: 0.25rem;
178 | }
179 | 
180 | .elk-side-nav .metismenu li:first-child {
181 |   padding-top: 0.25rem;
182 | }
183 | 
184 | .elk-side-nav .metismenu li:last-child {
185 |   padding-bottom: 0.25rem;
186 | }
187 | 
188 | .elk-side-nav .metismenu > li {
189 |   position: relative;
190 | }
191 | 
192 | .elk-side-nav .metismenu a {
193 |   position: relative;
194 |   display: flex;
195 |   flex-direction: row;
196 |   align-items: center;
197 |   outline-width: 0;
198 |   cursor: pointer;
199 |   transition: all 0.3s ease-out;
200 | }
201 | .elk-side-nav .metismenu a:active, .elk-side-nav .metismenu a:focus, .elk-side-nav .metismenu a:hover {
202 |   text-decoration: none;
203 | }
204 | 
205 | .elk-side-nav .metismenu a {
206 |   padding: 0.5rem 1rem;
207 | }
208 | 
209 | .elk-side-nav .metismenu ul a {
210 |   padding: 0.5rem;
211 |   padding-inline-start: 3rem;
212 | }
213 | 
214 | .elk-side-nav .metismenu ul ul a {
215 |   padding-inline-start: 4rem;
216 | }
217 | 
218 | /*
219 | * .elk-side.is-mini
220 | */
221 | @media (min-width: 992px) {
222 |   .elk-side.is-mini {
223 |     width: var(--elk-side-is-mini-width);
224 |     border-width: 0 !important;
225 |   }
226 |   .elk-side.is-mini .metismenu li:last-child {
227 |     padding-bottom: 0;
228 |   }
229 |   .elk-side.is-mini .metismenu > li > a.has-arrow::after {
230 |     transition-duration: 0.1s;
231 |   }
232 |   .elk-side.is-mini .metismenu > li:not(:hover) > a.has-arrow::after {
233 |     border-width: 0;
234 |   }
235 |   .elk-side.is-mini .nav-title {
236 |     display: none;
237 |     margin-inline-start: 1.5rem;
238 |   }
239 |   .elk-side.is-mini .metismenu ul ul a {
240 |     padding-inline-start: 2.5rem;
241 |   }
242 |   .elk-side.is-mini .metismenu > li > ul {
243 |     position: absolute;
244 |     top: 100%;
245 |     inset-inline-start: 100%;
246 |   }
247 |   .elk-side.is-mini .metismenu > li > ul.mm-collapse.mm-show:not(.mm-collapsing) {
248 |     display: none;
249 |   }
250 |   .elk-side.is-mini .metismenu > li > ul > li > a {
251 |     padding: 0.5em 0.5em 0.5em 1.5em;
252 |   }
253 |   .elk-side.is-mini .metismenu > li > ul.mm-collapsing {
254 |     visibility: collapse;
255 |     transition-duration: 0.1s;
256 |   }
257 |   .elk-side.is-mini .metismenu > li:hover > ul.mm-collapse.mm-show:not(.mm-collapsing) {
258 |     display: block;
259 |     min-width: calc(var(--elk-side-width) - var(--elk-side-is-mini-width) + 1px);
260 |     height: auto !important;
261 |   }
262 |   .elk-side.is-mini .metismenu > li:hover > a {
263 |     display: flex;
264 |     flex-direction: row;
265 |     min-width: calc(var(--elk-side-width) + 1px);
266 |   }
267 |   .elk-side.is-mini .metismenu > li:hover .nav-title {
268 |     display: inline-block;
269 |     align-self: center;
270 |   }
271 | }
272 | /*
273 | * .elk-side.is-hoverable
274 | */
275 | @media (min-width: 992px) {
276 |   .elk-side.is-hoverable {
277 |     transition: all 0.3s ease;
278 |     width: var(--elk-side-is-mini-width);
279 |   }
280 |   .elk-side.is-hoverable .metismenu > li > a:not(:hover).has-arrow::after {
281 |     transition: none;
282 |     border-width: 0;
283 |   }
284 |   .elk-side.is-hoverable .metismenu > li > ul.mm-collapse.mm-show:not(.mm-collapsing) {
285 |     display: none;
286 |   }
287 |   .elk-side.is-hoverable .nav-title {
288 |     transition: transform 0.3s ease;
289 |     transform: translate3d(-10000%, 0, 0);
290 |     white-space: nowrap;
291 |   }
292 |   .elk-side.is-hoverable:hover {
293 |     width: var(--elk-side-width);
294 |   }
295 |   .elk-side.is-hoverable:hover .nav-title {
296 |     transform: translate3d(0, 0, 0);
297 |   }
298 |   .elk-side.is-hoverable:hover .metismenu > li > ul.mm-collapse.mm-show {
299 |     display: block;
300 |   }
301 | }
302 | .elk-top-nav {
303 |   padding: 0 1rem;
304 | }
305 | .elk-top-nav.is-open {
306 |   position: relative;
307 | }
308 | 
309 | .elk-top-nav ul {
310 |   padding: 0;
311 |   margin: 0;
312 |   list-style: none;
313 | }
314 | 
315 | .elk-top-nav .metismenu {
316 |   display: flex;
317 |   flex-direction: column;
318 | }
319 | 
320 | .elk-top-nav .metismenu .has-icon {
321 |   height: auto;
322 | }
323 | 
324 | .elk-top-nav .metismenu > li {
325 |   display: flex;
326 |   flex-direction: column;
327 |   position: relative;
328 | }
329 | 
330 | .elk-top-nav .metismenu a {
331 |   position: relative;
332 |   display: block;
333 |   padding: 0.75rem 1rem;
334 |   outline-width: 0;
335 |   transition: all 0.3s ease-out;
336 |   cursor: pointer;
337 | }
338 | 
339 | .elk-top-nav .metismenu ul a {
340 |   padding: 0.5rem;
341 | }
342 | 
343 | .elk-top-nav .metismenu a:active,
344 | .elk-top-nav .metismenu a:focus,
345 | .elk-top-nav .metismenu a:hover {
346 |   text-decoration: none;
347 | }
348 | 
349 | @media (min-width: 992px) {
350 |   .elk-top-nav .metismenu {
351 |     flex-direction: row;
352 |   }
353 |   .elk-top-nav .metismenu > li > a {
354 |     padding-inline-end: 2rem;
355 |   }
356 |   .elk-top-nav .metismenu > li {
357 |     flex-direction: column;
358 |   }
359 |   .elk-top-nav .metismenu ul a {
360 |     padding: 0.625rem 1rem;
361 |   }
362 |   .elk-top-nav .metismenu > li > ul {
363 |     position: absolute;
364 |     top: 100%;
365 |     min-width: 256px;
366 |     z-index: var(--elk-side-z-index);
367 |   }
368 |   .elk-top-nav .metismenu > li:last-child > ul {
369 |     inset-inline-end: 0;
370 |   }
371 |   .elk-top-nav.is-hoverable .metismenu > li > ul {
372 |     height: auto !important;
373 |   }
374 |   .elk-top-nav.is-hoverable .metismenu > li:hover > ul {
375 |     display: block;
376 |   }
377 |   .elk-top-nav.is-hoverable .metismenu > li:hover > a.has-arrow:after {
378 |     transform: rotate(-45deg);
379 |   }
380 | }
381 | 
382 | /*# sourceMappingURL=elektron.css.map */
383 | 


--------------------------------------------------------------------------------
/site/public/assets/img/logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
  3 | 
  4 | <svg
  5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  6 |    xmlns:cc="http://creativecommons.org/ns#"
  7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  8 |    xmlns:svg="http://www.w3.org/2000/svg"
  9 |    xmlns="http://www.w3.org/2000/svg"
 10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 12 |    width="116pt"
 13 |    height="33.6pt"
 14 |    version="1.1"
 15 |    id="svg27"
 16 |    sodipodi:docname="logo.svg"
 17 |    inkscape:version="0.92.2 2405546, 2018-03-11">
 18 |   <metadata
 19 |      id="metadata31">
 20 |     <rdf:RDF>
 21 |       <cc:Work
 22 |          rdf:about="">
 23 |         <dc:format>image/svg+xml</dc:format>
 24 |         <dc:type
 25 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 26 |       </cc:Work>
 27 |     </rdf:RDF>
 28 |   </metadata>
 29 |   <sodipodi:namedview
 30 |      pagecolor="#ffffff"
 31 |      bordercolor="#666666"
 32 |      borderopacity="1"
 33 |      objecttolerance="10"
 34 |      gridtolerance="10"
 35 |      guidetolerance="10"
 36 |      inkscape:pageopacity="0"
 37 |      inkscape:pageshadow="2"
 38 |      inkscape:window-width="1366"
 39 |      inkscape:window-height="713"
 40 |      id="namedview29"
 41 |      showgrid="true"
 42 |      showguides="true"
 43 |      inkscape:zoom="3.0467984"
 44 |      inkscape:cx="183.67445"
 45 |      inkscape:cy="66.395875"
 46 |      inkscape:window-x="0"
 47 |      inkscape:window-y="0"
 48 |      inkscape:window-maximized="1"
 49 |      inkscape:current-layer="svg27"
 50 |      inkscape:guide-bbox="true">
 51 |     <inkscape:grid
 52 |        type="xygrid"
 53 |        id="grid864" />
 54 |     <sodipodi:guide
 55 |        position="144,13"
 56 |        orientation="0,1"
 57 |        id="guide866"
 58 |        inkscape:locked="false" />
 59 |     <sodipodi:guide
 60 |        position="97,31"
 61 |        orientation="0,1"
 62 |        id="guide1513"
 63 |        inkscape:locked="false" />
 64 |   </sodipodi:namedview>
 65 |   <defs
 66 |      id="defs2" />
 67 |   <ellipse
 68 |      style="opacity:1;fill:none;stroke:#6e4d9b;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
 69 |      stroke-miterlimit="4.00000000000"
 70 |      cy="22.835407"
 71 |      cx="118.05287"
 72 |      id="O"
 73 |      rx="6.3137178pt"
 74 |      ry="6.3137183pt" />
 75 |   <g
 76 |      style="fill:none"
 77 |      transform="translate(90.006582,8.299998)"
 78 |      id="R">
 79 |     <path
 80 |        style="fill:none;stroke:#78327a;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
 81 |        inkscape:connector-curvature="0"
 82 |        d="M 0,0 V 18"
 83 |        stroke-miterlimit="4.00000000000"
 84 |        transform="translate(5.5072,5.5)"
 85 |        id="path1683" />
 86 |     <path
 87 |        style="fill:none;stroke:#78327a;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
 88 |        inkscape:connector-curvature="0"
 89 |        d="M 8.46161,8.47946 C 3.78551,8.46961 -6.22686e-7,4.67611 0,0"
 90 |        stroke-miterlimit="4.00000000000"
 91 |        transform="rotate(90,3.971055,10.009445)"
 92 |        id="path1685" />
 93 |   </g>
 94 |   <g
 95 |      style="fill:none"
 96 |      transform="translate(61.0581,2.299998)"
 97 |      id="K">
 98 |     <path
 99 |        style="opacity:1;fill:none;stroke:#9b2073;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2"
100 |        inkscape:connector-curvature="0"
101 |        d="m 16.959,0 c 0,4.6812 -3.7935,8.4768 -8.47468,8.47948 C 3.80313,8.48216 0.00535517,4.69089 0,0.0097"
102 |        stroke-miterlimit="2.00000000000"
103 |        transform="rotate(90,1.00535,12.99465)"
104 |        id="path1347" />
105 |     <path
106 |        style="fill:none;stroke:#9b2073;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
107 |        inkscape:connector-curvature="0"
108 |        d="M 0,0 V 24"
109 |        stroke-miterlimit="4.00000000000"
110 |        transform="translate(5.5,5.5)"
111 |        id="path1699" />
112 |   </g>
113 |   <g
114 |      style="fill:none"
115 |      transform="translate(74.473,2.222648)"
116 |      id="T">
117 |     <path
118 |        style="fill:none;stroke:#8f2475;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
119 |        inkscape:connector-curvature="0"
120 |        d="M 0,0 V 24"
121 |        stroke-miterlimit="4.00000000000"
122 |        transform="translate(10.527,5.57735)"
123 |        id="path1674" />
124 |     <path
125 |        style="fill:none;stroke:#8f2475;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
126 |        inkscape:connector-curvature="0"
127 |        d="M 10,0 H 0"
128 |        stroke-miterlimit="4.00000000000"
129 |        transform="translate(5.52705,12.0774)"
130 |        id="path1701" />
131 |   </g>
132 |   <g
133 |      style="fill:none"
134 |      transform="translate(24.035445,2.299998)"
135 |      id="L">
136 |     <path
137 |        style="opacity:1;fill:none;stroke:#cd0f7e;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
138 |        inkscape:connector-curvature="0"
139 |        d="M 8.49886,0 C 8.49886,4.69379 4.69379,8.49886 0,8.49886"
140 |        stroke-miterlimit="4.00000000000"
141 |        transform="rotate(90,-3.23975,17.23975)"
142 |        id="path3531" />
143 |     <path
144 |        style="fill:none;stroke:#cd0f7e;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4"
145 |        inkscape:connector-curvature="0"
146 |        d="M 0,0 V 15"
147 |        stroke-miterlimit="4.00000000000"
148 |        transform="translate(5.5,5.5)"
149 |        id="path3539" />
150 |   </g>
151 |   <g
152 |      id="g1499"
153 |      transform="translate(-6)">
154 |     <path
155 |        sodipodi:open="true"
156 |        d="m 20.999903,31.299961 a 8.5000858,8.5000877 0 0 1 -7.853056,-5.247245 8.5000858,8.5000877 0 0 1 1.842587,-9.263312 8.5000858,8.5000877 0 0 1 9.263311,-1.842588 8.5000858,8.5000877 0 0 1 5.247244,7.853057"
157 |        sodipodi:end="0"
158 |        sodipodi:start="1.5707963"
159 |        sodipodi:ry="8.5000877"
160 |        sodipodi:rx="8.5000858"
161 |        sodipodi:cy="22.799873"
162 |        sodipodi:cx="20.999903"
163 |        sodipodi:type="arc"
164 |        id="path1435"
165 |        style="opacity:1;fill:none;fill-opacity:1;stroke:#d6336c;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
166 |     <path
167 |        inkscape:connector-curvature="0"
168 |        id="path1445"
169 |        d="m 21.000005,22.799994 h 9"
170 |        style="fill:#e100c6;fill-opacity:1;stroke:#d6336c;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
171 |   </g>
172 |   <path
173 |      style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
174 |      d="M -30,99.799998 Z"
175 |      id="path1474"
176 |      inkscape:connector-curvature="0" />
177 |   <g
178 |      id="g1491"
179 |      transform="translate(-10.506826,13)">
180 |     <path
181 |        sodipodi:open="true"
182 |        d="M 142.99996,9.7999969 A 8.5000429,8.5000429 0 0 1 151.5,1.2999544 a 8.5000429,8.5000429 0 0 1 8.50004,8.5000429"
183 |        sodipodi:end="0"
184 |        sodipodi:start="3.1415927"
185 |        sodipodi:ry="8.5000429"
186 |        sodipodi:rx="8.5000429"
187 |        sodipodi:cy="9.7999973"
188 |        sodipodi:cx="151.5"
189 |        sodipodi:type="arc"
190 |        id="path1472"
191 |        style="opacity:1;fill:none;fill-opacity:1;stroke:#6e4d9b;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
192 |     <path
193 |        inkscape:connector-curvature="0"
194 |        id="path1476"
195 |        d="m 160,9.799998 v 9"
196 |        style="fill:none;stroke:#6e4d9b;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
197 |     <path
198 |        style="fill:none;stroke:#6e4d9b;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
199 |        d="m 143,9.799998 v 9"
200 |        id="path1478"
201 |        inkscape:connector-curvature="0" />
202 |   </g>
203 |   <g
204 |      id="g1511"
205 |      transform="translate(1.999898,31.499967)">
206 |     <path
207 |        style="opacity:1;fill:none;fill-opacity:1;stroke:#b31776;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
208 |        id="path1501"
209 |        sodipodi:type="arc"
210 |        sodipodi:cx="50"
211 |        sodipodi:cy="-8.7000895"
212 |        sodipodi:rx="8.5000858"
213 |        sodipodi:ry="8.5000877"
214 |        sodipodi:start="1.5707963"
215 |        sodipodi:end="0"
216 |        d="m 50,-0.20000172 a 8.5000858,8.5000877 0 0 1 -7.853055,-5.24724478 8.5000858,8.5000877 0 0 1 1.842587,-9.2633125 8.5000858,8.5000877 0 0 1 9.26331,-1.842588 8.5000858,8.5000877 0 0 1 5.247244,7.8530575"
217 |        sodipodi:open="true" />
218 |     <path
219 |        style="fill:#e100c6;fill-opacity:1;stroke:#b31776;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
220 |        d="m 50.000102,-8.699969 h 9"
221 |        id="path1503"
222 |        inkscape:connector-curvature="0" />
223 |   </g>
224 | </svg>
225 | 


--------------------------------------------------------------------------------