mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Updated documentation
Almost ready!
This commit is contained in:
Angelos Chalaris
parent
3f7d28843f
commit
4b42a2c784
@ -21,20 +21,28 @@ var documentStart = `<!DOCTYPE html><html lang="en"><head>
|
||||
</head><body>`;
|
||||
var documentEnd = `</body></html>`;
|
||||
|
||||
var appShellStart = `<div id="root"><header>
|
||||
<span href="#" class="logo">mini.css</span>
|
||||
<a class="button" href="https://github.com/Chalarangelo/mini.css">Github</a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle"></label>
|
||||
var appShellStart = `<div id="root"><header class="row">
|
||||
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
|
||||
<span> Flavors</span></a>
|
||||
<a class="button col-sm col-md" href="#" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
|
||||
<span> Blog</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
<div class="row" id="doc-wrapper">`;
|
||||
var appShellEnd = `</div></div>`;
|
||||
|
||||
var appSidebarStart = `<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div>`;
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div>`;
|
||||
var appSidebarEnd = `<span id="no-results">No results found</span></nav>`;
|
||||
|
||||
var mainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content">`;
|
||||
var mainEnd = `</main>`;
|
||||
var mainEnd = `<footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>`;
|
||||
|
||||
var documentationFragments = docFragments.map(f => buildFragment(f)).join('<br/>');
|
||||
var documentationLinks = docFragments.map(f => buildLink(f)).join('');
|
||||
@ -61,7 +69,7 @@ var documentationSearch = `<script>
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style id="search-style"></style>`;
|
||||
<style id="search-style">#no-results{display:none;}</style>`;
|
||||
|
||||
fs.writeFile(outputPath,
|
||||
`${documentStart}${appShellStart}
|
||||
|
||||
@ -13,14 +13,22 @@
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
</head><body><div id="root"><header>
|
||||
<span href="#" class="logo">mini.css</span>
|
||||
<a class="button" href="https://github.com/Chalarangelo/mini.css">Github</a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle"></label>
|
||||
</head><body><div id="root"><header class="row">
|
||||
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
|
||||
<span> Flavors</span></a>
|
||||
<a class="button col-sm col-md" href="#" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
|
||||
<span> Blog</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
@ -602,7 +610,7 @@
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the drawer and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to <code>768px</code> wide.</li><li>It is highly recommended to place your drawer's toggle button inside your web app's header element.</li><li>You can combine the navigation bar element with the drawer menu for better results.</li><li>Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.</li></ul></div>
|
||||
|
||||
</div></main>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] }];
|
||||
@ -621,12 +629,11 @@
|
||||
else {
|
||||
document.getElementById('search-style').innerHTML = '#nav-drawer a{display:none;}#no-results{display:block;}';
|
||||
}
|
||||
console.log(result);
|
||||
}
|
||||
else{
|
||||
document.getElementById('search-style').innerHTML = '#no-results{display:none;}';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style id="search-style"></style>
|
||||
<style id="search-style">#no-results{display:none;}</style>
|
||||
</body></html>
|
||||
@ -1,54 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#F74D37;" d="M355.501,245.374L213.124,387.75c-24.541,24.542-64.333,24.542-88.874,0s-24.542-64.332,0-88.874
|
||||
l142.376-142.376l-72.064-72.064L48.257,230.741c-64.342,64.342-64.342,168.661,0,233.002s168.661,64.342,233.002,0l146.306-146.306
|
||||
L355.501,245.374z"/>
|
||||
<path style="fill:#C43D2C;" d="M48.256,463.744l75.994-75.994c24.541,24.542,64.333,24.542,88.874,0L355.5,245.374l72.064,72.064
|
||||
L281.259,463.743C216.916,528.086,112.598,528.086,48.256,463.744z"/>
|
||||
<g>
|
||||
|
||||
<rect x="276.246" y="33.588" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 447.431 311.1306)" style="fill:#F9D026;" width="23.813" height="58.623"/>
|
||||
<rect x="230.5" style="fill:#F9D026;" width="23.815" height="58.624"/>
|
||||
<rect x="292.441" y="96.746" style="fill:#F9D026;" width="58.624" height="23.815"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<rect x="437.184" y="194.529" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 608.3666 699.6761)" style="fill:#E7C224;" width="23.813" height="58.623"/>
|
||||
<rect x="391.446" y="160.935" style="fill:#E7C224;" width="23.815" height="58.624"/>
|
||||
<rect x="453.376" y="257.681" style="fill:#E7C224;" width="58.624" height="23.815"/>
|
||||
</g>
|
||||
<rect x="314.661" y="270.675" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 406.8443 783.1379)" style="fill:#B7B9C0;" width="101.909" height="73.266"/>
|
||||
<rect x="153.734" y="109.741" transform="matrix(0.7071 0.7071 -0.7071 0.7071 163.4544 -101.8644)" style="fill:#D8D9DD;" width="101.909" height="73.266"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,74 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#FCD999;" d="M378.203,260.162L378.203,260.162L250.74,132.725v-0.001c-17.489-5.419-36.035-8.434-55.258-8.635
|
||||
v386.822c105.882-1.104,191.363-87.268,191.363-193.411C386.844,297.536,383.818,278.28,378.203,260.162z"/>
|
||||
<path style="fill:#FEECCC;" d="M195.482,124.089c-0.683-0.011-1.377-0.011-2.059-0.011C86.596,124.078,0,210.674,0,317.5
|
||||
C0,376.595,26.5,429.5,68.266,464.979l70.896,38.23c17.215,5.021,35.424,7.714,54.261,7.714c0.683,0,1.377,0,2.059-0.011
|
||||
c87.029-1.343,157.23-87.415,157.23-193.411S282.51,125.432,195.482,124.089z"/>
|
||||
<path style="fill:#FCD999;" d="M250.74,132.725c-42.26,12.611-73.074,51.769-73.074,98.131c0,56.554,45.847,102.4,102.4,102.4
|
||||
c46.369,0,85.531-30.822,98.137-73.094C359.385,199.443,311.461,151.538,250.74,132.725z"/>
|
||||
<path style="fill:#FBC566;" d="M114.369,419.911l14.302,79.906c3.447,1.229,6.952,2.355,10.49,3.391
|
||||
c12.14-8.181,20.127-22.062,20.127-37.797C159.289,440.471,139.23,420.218,114.369,419.911z"/>
|
||||
<g>
|
||||
<path style="fill:#FCD999;" d="M136.533,465.411c0,13.733-3.049,26.066-7.862,34.406c-22.3-7.919-42.724-19.82-60.405-34.839
|
||||
c0.25-24.951,20.526-45.079,45.511-45.079c0.193,0,0.387,0,0.592,0.011C126.669,420.537,136.533,440.676,136.533,465.411z"/>
|
||||
<circle style="fill:#FCD999;" cx="73.956" cy="283.363" r="17.067"/>
|
||||
</g>
|
||||
<path style="fill:#FBC566;" d="M226.759,373.251v68.267c18.842,0,34.133-15.28,34.133-34.133
|
||||
C260.892,388.531,245.601,373.251,226.759,373.251z"/>
|
||||
<path style="fill:#FCD999;" d="M226.759,373.251c6.281,0,11.378,15.28,11.378,34.133c0,18.853-5.097,34.133-11.378,34.133
|
||||
c-18.853,0-34.133-15.28-34.133-34.133C192.626,388.531,207.906,373.251,226.759,373.251z"/>
|
||||
<g>
|
||||
<circle style="fill:#F9B233;" cx="412.809" cy="33.746" r="8.533"/>
|
||||
<circle style="fill:#F9B233;" cx="436.952" cy="9.61" r="8.533"/>
|
||||
<path style="fill:#F9B233;" d="M404.769,138.335c-8.886,8.886-23.295,8.886-32.181,0c-8.886-8.886-8.886-23.295,0-32.181
|
||||
l16.09-16.09c8.886-8.886,8.886-23.295,0-32.181s-23.295-8.886-32.181,0l-60.34,60.34l-39.261,89.465l55.352,55.352
|
||||
L404.769,138.335z"/>
|
||||
</g>
|
||||
<path style="fill:#FA9647;" d="M505.335,69.95c-8.886-8.886-23.295-8.886-32.181,0L296.157,246.946l96.544-32.181l112.634-112.634
|
||||
C514.222,93.244,514.222,78.836,505.335,69.95z"/>
|
||||
<path style="fill:#FD5F6E;" d="M360.52,214.765v-32.181l-128.725,96.544c26.66,26.66,69.883,26.659,96.544,0l64.363-64.363H360.52z"
|
||||
/>
|
||||
<path style="fill:#FA9647;" d="M328.339,182.584v-32.182h-32.181v-32.181l-64.363,64.363c-26.659,26.659-26.659,69.883,0,96.544
|
||||
c8.886,8.886,37.703-5.522,64.363-32.181l64.363-64.363H328.339z"/>
|
||||
<path style="fill:#FEECCC;" d="M280.066,196.722l-11.378,34.133l11.378,34.133c18.852,0,34.133-15.282,34.133-34.133
|
||||
S298.918,196.722,280.066,196.722z"/>
|
||||
<path style="fill:#FFFFFF;" d="M245.933,230.856c0,18.852,15.283,34.133,34.133,34.133v-68.267
|
||||
C261.216,196.722,245.933,212.004,245.933,230.856z"/>
|
||||
<g>
|
||||
<circle style="fill:#FCD999;" cx="108.089" cy="232.163" r="8.533"/>
|
||||
<circle style="fill:#FCD999;" cx="295.026" cy="407.381" r="8.533"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
@ -1,51 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#BBE095;" d="M486.935,146.104l-7.905,7.905l-144.751,23.714L394.063,70.51l92.873-45.444
|
||||
C520.355,58.487,520.355,112.682,486.935,146.104z"/>
|
||||
<path style="fill:#E0F4B4;" d="M486.935,25.065L334.278,177.722l23.714-144.751l7.905-7.905
|
||||
C399.318-8.355,453.513-8.355,486.935,25.065z"/>
|
||||
<polygon style="fill:#5EDAFF;" points="357.992,154.008 203.478,308.522 243.002,147.96 357.992,32.97 "/>
|
||||
<polygon style="fill:#089AC6;" points="243.002,268.997 104.298,407.701 128.013,262.951 243.002,147.96 "/>
|
||||
<path style="fill:#4B58E3;" d="M128.013,383.987l-68.32,68.32c0-80.897-8.157-112.88,25.224-146.261l43.096-43.096
|
||||
C128.013,262.951,128.013,383.987,128.013,383.987z"/>
|
||||
<polygon style="fill:#089AC6;" points="479.029,154.008 364.04,268.997 203.478,308.522 357.992,154.008 "/>
|
||||
<polygon style="fill:#4B58E3;" points="364.04,268.997 249.049,383.987 104.298,407.701 243.002,268.997 "/>
|
||||
<g>
|
||||
<path style="fill:#693F9E;" d="M249.049,383.987l-43.096,43.096c-33.382,33.382-65.365,25.224-146.261,25.224l68.32-68.32H249.049z
|
||||
"/>
|
||||
<path style="fill:#693F9E;" d="M2.619,509.381c-3.492-3.492-3.492-9.154,0-12.648L456.897,42.457c3.492-3.492,9.156-3.492,12.648,0
|
||||
c3.492,3.492,3.492,9.154,0,12.648L15.267,509.381C11.774,512.873,6.112,512.873,2.619,509.381z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -25,14 +25,22 @@
|
||||
<p id="version-info">v3</p>
|
||||
</div>
|
||||
<!-- TODO: Add CTA ghost button and a link (?) in splash -->
|
||||
<header class="sticky row" style="box-sizing: content-box">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
<span style="bottom: 16px; position: absolute">Features</span>
|
||||
<span style="bottom: 16px; position: absolute; padding-left: 120px;">Overview</span>
|
||||
<span style="bottom: 16px; position: absolute; padding-left: 240px;">Get Started</span>
|
||||
<span style="bottom: 16px; position: absolute; padding-left: 370px;">Documentation</span>
|
||||
<span style="bottom: 16px; position: absolute; padding-left: 530px;">Github</span>
|
||||
</div>
|
||||
<header class="row sticky">
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span> Docs</span></a>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
|
||||
<span> Flavors</span></a>
|
||||
<a class="button col-sm col-md" href="#" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
|
||||
<span> Blog</span></a>
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
</header>
|
||||
<div class="row padded">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
@ -51,11 +59,12 @@
|
||||
<div class="row padded primary-section">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<h2 class="feature-header">Get started now!</h2><br>
|
||||
<p>Head over to the <a href="./documentation">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<button>Get started</button>
|
||||
<p>Head over to the <a href="docs">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<p style="text-align:center;"><a href="docs" class="button">Get started</a></p>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
|
||||
<!-- TODO: Add footer with credits for splash image etc. -->
|
||||
<!-- Scripts -->
|
||||
<script>document.getElementById('version-info').innerHTML = version();</script>
|
||||
|
||||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
@ -191,14 +191,14 @@ p.splash {
|
||||
}
|
||||
}
|
||||
// TODO: Actually convert to a link, stylize as button, utilize module
|
||||
button {
|
||||
a.button {
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
font-size: 1.25rem;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin: 20px auto 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -362,3 +362,39 @@ main {
|
||||
|
||||
.responsive-label {align-items: center;}
|
||||
@media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
||||
|
||||
#nav-drawer {
|
||||
h3 {
|
||||
text-align:center;
|
||||
@media (min-width: 768px) {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main footer {
|
||||
position: relative;
|
||||
margin-top: 1.5rem;
|
||||
left: -0.25rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
}
|
||||
|
||||
header.row a span {
|
||||
display: none;
|
||||
@media (min-width: 768px) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// I removed this, it seemed unnecessary, but keep it here just in case I want it back in later on?
|
||||
// header .logo{
|
||||
// padding-top: 0.1875rem;
|
||||
// &::first-letter {
|
||||
// font-size: 1.25em;
|
||||
// line-height: 1.25;
|
||||
// color: #fff;
|
||||
// background: #f22f21;
|
||||
// border-radius: 6px;
|
||||
// padding: 0 6px;
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user