Initial commit
This commit is contained in:
blackberrymamba
7
LICENSE
Normal file
7
LICENSE
Normal file
@@ -0,0 +1,7 @@
|
||||
Copyright 2017 blackberrymamba
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Somecode theme for Pico
|
||||
A stupidly simple & blazing fast theme for an stupidly simple & blazing fast, flat file CMS.
|
||||
|
||||
14
_footer.twig
Normal file
14
_footer.twig
Normal file
@@ -0,0 +1,14 @@
|
||||
<footer class="footer">
|
||||
<section>
|
||||
<p style="text-align:center">Designed by
|
||||
<a target="_blank" href="https://github.com/blackberrymamba" title="blackberrymamba">blackberrymamba</a>. Licensed under the
|
||||
<a target="_blank" href="https://github.com/blackberrymamba/somecode-theme/LICENSE" title="MIT License">MIT License</a>.</p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
<script src="{{ theme_url }}/assets/js/highlight.pack.js"></script>
|
||||
<script src="{{ theme_url }}/assets/js/vanilla.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
43
_header.twig
Normal file
43
_header.twig
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="blackberrymamba">
|
||||
<title>
|
||||
{% if meta.title %}{{ meta.title }}
|
||||
|
|
||||
{% endif %}{{ site_title }}</title>
|
||||
{% if meta.description %}
|
||||
<meta name="description" content="{{ meta.description|striptags }}">
|
||||
{% endif %}
|
||||
{% if meta.robots %}
|
||||
<meta name="robots" content="{{ meta.robots }}">
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
|
||||
<link rel="stylesheet" href="{{ theme_url }}/assets/css/highlight-default.css">
|
||||
<link rel="stylesheet" href="{{ theme_url }}/assets/css/somecode.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main id="main-wrapper">
|
||||
<nav class="navigation">
|
||||
<div class="navbrand">
|
||||
<a href="{{ "index"|link }}">
|
||||
<h1>{{ site_title }}</h1>
|
||||
</a>
|
||||
<a class="openbtn" onclick="openNav()">☰</a>
|
||||
</div>
|
||||
<div id="ovnav" class="navmenu">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||
<ul>
|
||||
{% for page in pages if page.title %}
|
||||
<li{% if page.id == current_page.id %} class="active" {% endif %}>
|
||||
<a href="{{ page.url }}">{{ page.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
99
assets/css/highlight-default.css
Normal file
99
assets/css/highlight-default.css
Normal file
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
|
||||
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
|
||||
/* Base color: saturation 0; */
|
||||
|
||||
.hljs,
|
||||
.hljs-subst {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-attribute,
|
||||
.hljs-selector-tag,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-doctag,
|
||||
.hljs-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* User color: hue: 0 */
|
||||
|
||||
.hljs-type,
|
||||
.hljs-string,
|
||||
.hljs-number,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-quote,
|
||||
.hljs-template-tag,
|
||||
.hljs-deletion {
|
||||
color: #880000;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #880000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-symbol,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-link,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #BC6060;
|
||||
}
|
||||
|
||||
|
||||
/* Language color: hue: 90; */
|
||||
|
||||
.hljs-literal {
|
||||
color: #78A960;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-bullet,
|
||||
.hljs-code,
|
||||
.hljs-addition {
|
||||
color: #397300;
|
||||
}
|
||||
|
||||
|
||||
/* Meta color: hue: 200 */
|
||||
|
||||
.hljs-meta {
|
||||
color: #1f7199;
|
||||
}
|
||||
|
||||
.hljs-meta-string {
|
||||
color: #4d99bf;
|
||||
}
|
||||
|
||||
|
||||
/* Misc effects */
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
318
assets/css/somecode.css
Normal file
318
assets/css/somecode.css
Normal file
@@ -0,0 +1,318 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Raleway:300|Roboto:100');
|
||||
html {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 42em;
|
||||
margin: 0 auto;
|
||||
color: #616161;
|
||||
background: #fff;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.618;
|
||||
letter-spacing: .01em;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
|
||||
@media (max-width: 684px) {
|
||||
body {
|
||||
font-size: 1.53rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 382px) {
|
||||
body {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.35em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.00em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
small, sub, sup {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
text-indent: 1rem;
|
||||
}
|
||||
|
||||
p+p {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px dotted #dadada;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2c8898;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #982c61;
|
||||
border-bottom: 1px solid #4a4a4a;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.4em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 1.5em;
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #2c8898;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 2.5rem;
|
||||
overflow-y: hidden;
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
background: #f4f5f6;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0 .2rem;
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .4rem;
|
||||
background: #f4f5f6;
|
||||
font-size: 86%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0.7rem 3.0rem;
|
||||
color: #fff;
|
||||
border: 1px solid #791db1;
|
||||
border-bottom: 3px solid #791db1;
|
||||
border-radius: 2px;
|
||||
background-color: #9b4dca;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .1rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button[disabled], button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] {
|
||||
opacity: .5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button:focus, .button:hover, button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:focus, input[type="submit"]:hover {
|
||||
color: #f9f9f9;
|
||||
border: 1px solid #4f5961;
|
||||
border-bottom: 3px solid #4f5961;
|
||||
background-color: #606c76;
|
||||
outline: 0;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
input[type], select, textarea {
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
padding: 0.7rem 3.0rem;
|
||||
color: #4a4a4a;
|
||||
border: 1px solid #f1f1f1;
|
||||
border-bottom: 3px solid #f1f1f1;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
input[type]:focus, select:focus, textarea:focus {
|
||||
border: 1px solid #dadada;
|
||||
border-bottom: 3px solid #dadada;
|
||||
outline: 0;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
fieldset, legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label, input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
.navigation.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
max-width: 42em;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.navbrand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbrand h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.openbtn {
|
||||
float: right;
|
||||
margin: 0.67em 0;
|
||||
font-size: 2.35em;
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.openbtn:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.navmenu {
|
||||
z-index: -1;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding-top: 5rem;
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
background-color: #4e4e4e;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.navmenu ul {
|
||||
margin: 0 2rem;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.navmenu ul li {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navmenu ul li.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navmenu a {
|
||||
color: #fff;
|
||||
border: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.navmenu .closebtn, .navmenu .closebtn:hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
margin-left: 50px;
|
||||
border: 0;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
2
assets/js/highlight.pack.js
Normal file
2
assets/js/highlight.pack.js
Normal file
File diff suppressed because one or more lines are too long
65
assets/js/vanilla.js
Normal file
65
assets/js/vanilla.js
Normal file
@@ -0,0 +1,65 @@
|
||||
/* menu */
|
||||
function openNav() {
|
||||
document.getElementById("ovnav").style.display = "block";
|
||||
document.getElementById("ovnav").style.zIndex = "1";
|
||||
document.getElementById("ovnav").style.opacity = "1";
|
||||
document.getElementById("ovnav").style.width = "50%";
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
document.getElementById("ovnav").style.opacity = "0";
|
||||
document.getElementById("ovnav").style.zIndex = "-1";
|
||||
document.getElementById("ovnav").style.display = "none";
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
/* menu item eventlistener */
|
||||
function menuItems() {
|
||||
var menuItems = document.querySelectorAll(".navmenu ul li a");
|
||||
for (var i = 0; i < menuItems.length; i++) {
|
||||
menuItems[i].addEventListener('click', closeNav, false);
|
||||
}
|
||||
}
|
||||
|
||||
/* show nav on scroll to top */
|
||||
function navigation() {
|
||||
var scrollpos = 0;
|
||||
var nav = document.getElementsByTagName("nav")[0];
|
||||
var navClone;
|
||||
var navMarginTopPx = "-" + nav.offsetHeight + "px";
|
||||
|
||||
|
||||
var navScrollTop = nav.scrollTop + nav.offsetHeight
|
||||
|
||||
window.addEventListener('scroll', function(e) {
|
||||
if (scrollpos < window.scrollY || window.scrollY == 20) {
|
||||
if (typeof navClone != 'undefined') {
|
||||
navClone.style.opacity = 0;
|
||||
navClone.style.marginTop = navMarginTopPx;
|
||||
setTimeout(function() {
|
||||
navClone.remove()
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
if (window.scrollY > navScrollTop) {
|
||||
if (!document.getElementById("nav-clone")) {
|
||||
navClone = nav.cloneNode(true);
|
||||
navClone.id = "nav-clone";
|
||||
navClone.style.marginTop = navMarginTopPx;
|
||||
navClone.classList.add("fixed");
|
||||
document.body.appendChild(navClone);
|
||||
}
|
||||
navClone.style.opacity = 1;
|
||||
navClone.style.marginTop = 0;
|
||||
}
|
||||
}
|
||||
scrollpos = window.scrollY;
|
||||
});
|
||||
}
|
||||
|
||||
/* enable some stuff */
|
||||
hljs.initHighlightingOnLoad();
|
||||
menuItems();
|
||||
navigation();
|
||||
218
example.html
Normal file
218
example.html
Normal file
@@ -0,0 +1,218 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="somecode">
|
||||
<meta name="description" content="somecode, code snippets">
|
||||
<title>Somecode | A minimalist Pico Theme.</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
|
||||
<link rel="stylesheet" href="assets/css/highlight-default.css">
|
||||
<link rel="stylesheet" href="assets/css/somecode.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main id="main-wrapper">
|
||||
<nav class="navigation">
|
||||
<div class="navbrand">
|
||||
<a href="#"><h1>somecode.tk</h1></a><a class="openbtn" onclick="openNav()">☰</a>
|
||||
</div>
|
||||
<div id="ovnav" class="navmenu">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||
<ul>
|
||||
<li class="active"><a href="#main-wrapper" data-shortcut="">Index</a></li>
|
||||
<li class=""><a href="#typography" data-shortcut="">Typography</a></li>
|
||||
<li class=""><a href="#buttons" data-shortcut="">Buttons</a></li>
|
||||
<li class=""><a href="#lists" data-shortcut="">Lists</a></li>
|
||||
<li class=""><a href="#forms" data-shortcut="">Forms</a></li>
|
||||
<li class=""><a href="#tables" data-shortcut="">Tables</a></li>
|
||||
<li class=""><a href="#codes" data-shortcut="">Codes</a></li>
|
||||
<li class=""><a href="#utilities" data-shortcut="">Utilities</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="typography">
|
||||
<h5>Typography</h5>
|
||||
<hr>
|
||||
<h1>Heading</h1>
|
||||
<h2>Heading</h2>
|
||||
<h3>Heading</h3>
|
||||
<h4>Heading</h4>
|
||||
<h5>Heading</h5>
|
||||
<h6>Heading</h6>
|
||||
<p>Obcaecati <s>error</s> a, quas fugit hic, <a href="#">accusantium</a> autem <i>necessitatibus praesentium</i> placeat, iusto et <b>soluta expedita</b>! Quisquam repellendus <small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>, <time>on April 29</time>!</p>
|
||||
<p>Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem ipsa blanditiis, quae, fugit nobis <em>perspiciatis in beatae vitae</em> numquam illo, architecto hic dolor <q>molestiae aliquid</q>.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h5>Blockquotes</h5>
|
||||
<hr>
|
||||
<p><q>Nothing to do... chill!</q></p>
|
||||
<blockquote>
|
||||
<p><em>Nothing to do... chill!</em></p>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section id="buttons">
|
||||
<h5>Buttons</h5>
|
||||
<hr>
|
||||
<a class="button" href="javascript: void(0)">Default Button</a>
|
||||
<a class="button" disabled href="javascript: void(0)">Default Button Disabled</a>
|
||||
<input type="submit" value="Input: submit">
|
||||
<input type="button" value="Input: button">
|
||||
<input type="reset" value="Input: reset">
|
||||
<button type="submit">Button: submit</button>
|
||||
<button type="button">Button: button</button>
|
||||
<button type="reset">Button: reset</button>
|
||||
</section>
|
||||
|
||||
<section id="lists">
|
||||
<h5>Lists</h5>
|
||||
<hr>
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>Unordered list item 3
|
||||
<ul>
|
||||
<li>Unordered list item 3.1</li>
|
||||
<li>Unordered list item 3.2</li>
|
||||
<li>Unordered list item 3.3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Unordered list item 4</li>
|
||||
<li>Unordered list item 5</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>Ordered list item 3
|
||||
<ol>
|
||||
<li>Ordered list item 3.1</li>
|
||||
<li>Ordered list item 3.2</li>
|
||||
<li>Ordered list item 3.3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Ordered list item 4</li>
|
||||
<li>Ordered list item 5</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section id="forms">
|
||||
<h5>Forms</h5>
|
||||
<hr>
|
||||
<div class="example">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label for="textField">Text field</label>
|
||||
<input type="text" placeholder="Text field" id="textField"><br/>
|
||||
<label for="emailField">Email field</label>
|
||||
<input type="email" id="emailField" placeholder="Email field"><br/>
|
||||
<label for="numberField">Number field</label>
|
||||
<input type="number" id="numberField" placeholder="Number field"><br/>
|
||||
<label for="passwordField">Password field</label>
|
||||
<input type="password" id="passwordField" placeholder="Password field"><br/>
|
||||
<label for="selectField">Select field</label>
|
||||
<select id="selectField">
|
||||
<option value="selectField1">Select field 1</option>
|
||||
<option value="selectField2">Select field 2</option>
|
||||
<option value="selectField3">Select field 3</option>
|
||||
<option value="selectField4">Select field 4</option>
|
||||
</select><br>
|
||||
<label for="searchField">Search field</label>
|
||||
<input type="search" id="searchField" placeholder="Search field"><br/>
|
||||
|
||||
<label for="telField">Tel field</label>
|
||||
<input type="tel" id="telField" placeholder="Tel field"><br/>
|
||||
<label for="urlField">URL field</label>
|
||||
<input type="url" id="urlField" placeholder="URL field"><br/>
|
||||
<label for="radioField">Radio field</label><br>
|
||||
<input type="radio" id="radioField1" name="radioField">
|
||||
<label class="label-inline" for="radioField1">Radio field 1</label><br>
|
||||
<input type="radio" id="radioField2" name="radioField">
|
||||
<label class="label-inline" for="radioField2">Radio field 2</label><br>
|
||||
<label for="radioField">Checkbox field</label><br>
|
||||
<input type="checkbox" id="checkboxField1">
|
||||
<label class="label-inline" for="checkboxField1">Checkbox field 1</label><br>
|
||||
<input type="checkbox" id="checkboxField2">
|
||||
<label class="label-inline" for="checkboxField2">Checkbox field 2</label><br>
|
||||
<label for="textareaField">Textarea field</label>
|
||||
<textarea placeholder="Textarea field" id="textareaField"></textarea>
|
||||
<input type="submit">
|
||||
<input type="reset">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tables">
|
||||
<h5>Tables</h5>
|
||||
<hr>
|
||||
<div class="example">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Age</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Jill</td>
|
||||
<td>Smith</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eve</td>
|
||||
<td>Jackson</td>
|
||||
<td>94</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="codes">
|
||||
<h5>Codes</h5>
|
||||
<hr>
|
||||
<div class="example">
|
||||
<pre><code class="css">.somecode {
|
||||
color: #fff;
|
||||
}</code></pre>
|
||||
<pre><code class="vb">function someFunc(hungry as Boolean) as String{
|
||||
if hungry then
|
||||
someFunc = "Feed me!"
|
||||
else
|
||||
someFunc = "Well done!"
|
||||
end if
|
||||
}</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="utilities">
|
||||
<h5>Utilities</h5>
|
||||
<hr>
|
||||
<div class="clearfix">
|
||||
<img class="float-left" src="http://placehold.it/300/c1c1c1/?text=float+to+left" alt="float to left">
|
||||
<img class="float-right" src="http://placehold.it/300/c1c1c1/?text=float+to+right" alt="float to right">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<section>
|
||||
<p style="text-align:center">Designed by <a target="_blank" href="https://github.com/blackberrymamba" title="blackberrymamba">blackberrymamba</a>. Licensed under the <a target="_blank" href="https://github.com/blackberrymamba/somecode-theme/LICENSE" title="MIT License">MIT License</a>.</p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
<script src="assets/js/vanilla.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3
index.twig
Normal file
3
index.twig
Normal file
@@ -0,0 +1,3 @@
|
||||
{% include '_header.twig' %}
|
||||
{{ content }}
|
||||
{% include '_footer.twig' %}
|
||||
Reference in New Issue
Block a user