Page MenuHomeDevCentral
Files F56329570

No OneTemporary
Actions

View Options

diff --git a/.arcconfig b/.arcconfig
new file mode 100644
index 0000000..d1eedcc
--- /dev/null
+++ b/.arcconfig
@@ -0,0 +1,4 @@
+{
+ "phabricator.uri": "https://devcentral.nasqueron.org",
+ "repository.callsign": "SERVERSLOGDESIGN"
+}
diff --git a/.arclint b/.arclint
new file mode 100644
index 0000000..bfdb89f
--- /dev/null
+++ b/.arclint
@@ -0,0 +1,18 @@
+{
+ "linters": {
+ "chmod": {
+ "type": "chmod"
+ },
+ "filename": {
+ "type": "filename"
+ },
+ "json": {
+ "type": "json",
+ "include": [
+ "(^\\.arcconfig$)",
+ "(^\\.arclint$)",
+ "(\\.json$)"
+ ]
+ }
+ }
+}
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..a73e564
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["es2015"],
+ "compact": false
+}
diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..69fad35
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "bower_components"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..479880f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+npm-debug.log
+bower_components
+dist
+*.swp
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..381e1a1
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changelog
+
+## Version 1.0 (November 19, 2015)
+
+Initial release.
diff --git a/config.yml b/config.yml
new file mode 100644
index 0000000..ff53ca4
--- /dev/null
+++ b/config.yml
@@ -0,0 +1,35 @@
+# Your project's server will run on localhost:xxxx at this port
+PORT: 8000
+
+# https://localtunnel.github.io/www/
+TUNNEL: "serverslog"
+
+# Autoprefixer will make sure your CSS works with these browsers
+COMPATIBILITY:
+ - "last 2 versions"
+ - "ie >= 9"
+ - "ios >= 7"
+
+# UnCSS will use these settings
+UNCSS_OPTIONS:
+ html:
+ - "src/**/*.html"
+ ignore:
+ - !!js/regexp .foundation-mq
+ - !!js/regexp ^\.is-.*
+
+# Gulp will reference these paths when it copies files
+PATHS:
+ # Path to dist folder
+ dist: "dist"
+ # Paths to static assets that aren't images, CSS, or JavaScript
+ assets:
+ - "src/assets/**/*"
+ - "!src/assets/{img,js,scss}{,/**/*}"
+ # Paths to Sass libraries, which can then be loaded with @import
+ sass:
+ - "node_modules/foundation-sites/scss"
+ - "node_modules/motion-ui/src"
+ # Paths to JavaScript entry points for webpack to bundle modules
+ entries:
+ - "src/assets/js/app.js"
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
new file mode 100644
index 0000000..4ce3ad6
--- /dev/null
+++ b/gulpfile.babel.js
@@ -0,0 +1,159 @@
+'use strict';
+
+import plugins from 'gulp-load-plugins';
+import yargs from 'yargs';
+import browser from 'browser-sync';
+import gulp from 'gulp';
+import panini from 'panini';
+import rimraf from 'rimraf';
+import sherpa from 'style-sherpa';
+import yaml from 'js-yaml';
+import fs from 'fs';
+import webpackStream from 'webpack-stream';
+import webpack2 from 'webpack';
+import named from 'vinyl-named';
+
+// Load all Gulp plugins into one variable
+const $ = plugins();
+
+// Check for --production flag
+const PRODUCTION = !!(yargs.argv.production);
+
+// Load settings from settings.yml
+const { COMPATIBILITY, PORT, TUNNEL, UNCSS_OPTIONS, PATHS } = loadConfig();
+
+function loadConfig() {
+ let ymlFile = fs.readFileSync('config.yml', 'utf8');
+ return yaml.load(ymlFile);
+}
+
+// Build the "dist" folder by running all of the below tasks
+gulp.task('build',
+ gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));
+
+// Build the site, run the server, and watch for file changes
+gulp.task('default',
+ gulp.series('build', server, watch));
+
+// Delete the "dist" folder
+// This happens every time a build starts
+function clean(done) {
+ rimraf(PATHS.dist, done);
+}
+
+// Copy files out of the assets folder
+// This task skips over the "img", "js", and "scss" folders, which are parsed separately
+function copy() {
+ return gulp.src(PATHS.assets)
+ .pipe(gulp.dest(PATHS.dist + '/assets'));
+}
+
+// Copy page templates into finished HTML files
+function pages() {
+ return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
+ .pipe(panini({
+ root: 'src/pages/',
+ layouts: 'src/layouts/',
+ partials: 'src/partials/',
+ data: 'src/data/',
+ helpers: 'src/helpers/'
+ }))
+ .pipe(gulp.dest(PATHS.dist));
+}
+
+// Load updated HTML templates and partials into Panini
+function resetPages(done) {
+ panini.refresh();
+ done();
+}
+
+// Generate a style guide from the Markdown content and HTML template in styleguide/
+function styleGuide(done) {
+ sherpa('src/styleguide/index.md', {
+ output: PATHS.dist + '/styleguide.html',
+ template: 'src/styleguide/template.html'
+ }, done);
+}
+
+// Compile Sass into CSS
+// In production, the CSS is compressed
+function sass() {
+ return gulp.src('src/assets/scss/app.scss')
+ .pipe($.sourcemaps.init())
+ .pipe($.sass({
+ includePaths: PATHS.sass
+ })
+ .on('error', $.sass.logError))
+ .pipe($.autoprefixer({
+ browsers: COMPATIBILITY
+ }))
+ // Comment in the pipe below to run UnCSS in production
+ //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
+ .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
+ .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+ .pipe(gulp.dest(PATHS.dist + '/assets/css'))
+ .pipe(browser.reload({ stream: true }));
+}
+
+let webpackConfig = {
+ module: {
+ rules: [
+ {
+ test: /.js$/,
+ use: [
+ {
+ loader: 'babel-loader'
+ }
+ ]
+ }
+ ]
+ }
+}
+// Combine JavaScript into one file
+// In production, the file is minified
+function javascript() {
+ return gulp.src(PATHS.entries)
+ .pipe(named())
+ .pipe($.sourcemaps.init())
+ .pipe(webpackStream(webpackConfig, webpack2))
+ .pipe($.if(PRODUCTION, $.uglify()
+ .on('error', e => { console.log(e); })
+ ))
+ .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+ .pipe(gulp.dest(PATHS.dist + '/assets/js'));
+}
+
+// Copy images to the "dist" folder
+// In production, the images are compressed
+function images() {
+ return gulp.src('src/assets/img/**/*')
+ .pipe($.if(PRODUCTION, $.imagemin({
+ progressive: true
+ })))
+ .pipe(gulp.dest(PATHS.dist + '/assets/img'));
+}
+
+// Start a server with BrowserSync to preview the site in
+function server(done) {
+ browser.init({
+ server: PATHS.dist, port: PORT, tunnel: TUNNEL
+ });
+ done();
+}
+
+// Reload the browser with BrowserSync
+function reload(done) {
+ browser.reload();
+ done();
+}
+
+// Watch for changes to static assets, pages, Sass, and JavaScript
+function watch() {
+ gulp.watch(PATHS.assets, copy);
+ gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
+ gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
+ gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
+ gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
+ gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..424ebb2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,61 @@
+{
+ "name": "foundation-zurb-template",
+ "version": "1.0.0",
+ "description": "Official ZURB Template for Foundation for Sites.",
+ "main": "gulpfile.babel.js",
+ "scripts": {
+ "start": "gulp",
+ "build": "gulp build --production"
+ },
+ "author": "ZURB <foundation@zurb.com>",
+ "license": "MIT",
+ "dependencies": {
+ "foundation-sites": "~6.4.1",
+ "jquery": ">=3.0.0",
+ "what-input": "^4.1.3",
+ "motion-ui": "~1.2.2"
+ },
+ "devDependencies": {
+ "babel-core": "^6.24.1",
+ "babel-loader": "^6.4.1",
+ "babel-preset-es2015": "^6.3.13",
+ "babel-register": "^6.7.2",
+ "browser-sync": "^2.10.0",
+ "gulp": "github:gulpjs/gulp#4.0",
+ "gulp-autoprefixer": "^3.1.0",
+ "gulp-babel": "^6.1.2",
+ "gulp-clean-css": "^3.3.1",
+ "gulp-cli": "^1.2.1",
+ "gulp-concat": "^2.5.2",
+ "gulp-extname": "^0.2.0",
+ "gulp-if": "^2.0.0",
+ "gulp-imagemin": "^2.2.1",
+ "gulp-load-plugins": "^1.1.0",
+ "gulp-sass": "^2.1.0",
+ "gulp-sourcemaps": "^1.6.0",
+ "gulp-uglify": "^1.2.0",
+ "gulp-uncss": "^1.0.1",
+ "js-yaml": "^3.4.6",
+ "panini": "^1.3.0",
+ "rimraf": "^2.4.3",
+ "style-sherpa": "^1.0.0",
+ "vinyl-named": "^1.1.0",
+ "webpack": "^2.6.1",
+ "webpack-stream": "^3.2.0",
+ "yargs": "^3.8.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/zurb/foundation-zurb-template.git"
+ },
+ "bugs": {
+ "url": "https://github.com/zurb/foundation-sites/issues",
+ "email": "foundation@zurb.com"
+ },
+ "babel": {
+ "presets": [
+ "es2015"
+ ]
+ },
+ "private": true
+}
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..8c2c6dc
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,70 @@
+# ZURB Template
+
+[![devDependency Status](https://david-dm.org/zurb/foundation-zurb-template/dev-status.svg)](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)
+
+**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
+
+This is the official ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:
+
+- Handlebars HTML templates with Panini
+- Sass compilation and prefixing
+- JavaScript module bundling with webpack
+- Built-in BrowserSync server
+- For production builds:
+ - CSS compression
+ - JavaScript compression
+ - Image compression
+
+## Installation
+
+To use this template, your computer needs:
+
+- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
+- [Git](https://git-scm.com/)
+
+This template can be installed with the Foundation CLI, or downloaded and set up manually.
+
+### Using the CLI
+
+Install the Foundation CLI with this command:
+
+```bash
+npm install foundation-cli --global
+```
+
+Use this command to set up a blank Foundation for Sites project with this template:
+
+```bash
+foundation new --framework sites --template zurb
+```
+
+The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
+
+Now `cd` to your project name and to start your project run
+
+```bash
+foundation watch
+```
+
+### Manual Setup
+
+To manually set up the template, first download it with Git:
+
+```bash
+git clone https://github.com/zurb/foundation-zurb-template projectname
+```
+
+Then open the folder in your command line, and install the needed dependencies:
+
+```bash
+cd projectname
+npm install
+```
+
+Finally, run `npm start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL:
+
+```
+http://localhost:8000
+```
+
+To create compressed, production-ready assets, run `npm run build`.
diff --git a/servers-log/index.html b/servers-log/index.html
deleted file mode 100644
index 74128b3..0000000
--- a/servers-log/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
-
-<!doctype html>
-<html class="no-js" lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Servers log — Nasqueron</title>
- <link href="https://fonts.googleapis.com/css?family=Dosis:200|Source+Sans+Pro|Roboto+Mono" rel="stylesheet">
- <link rel="stylesheet" href="/assets/css/app.css">
- </head>
- <body>
-
- <header class="row">
- <div class="large-12 columns">
- <h1><img src="https://assets.nasqueron.org/logos/logo-white-64px.png" /> Servers log</h1>
- </div>
- </header>
-
- <section class="row">
- <div class="large-12 columns">
- <div class="callout">
- <p><strong>Nasqueron infrastructure servers</strong> support our budding community of creative people, writers, developers and thinkers.</p>
- <p>This log tracks the actions of the <strong>Nasqueron operations squad</strong>, who manage these servers and subscribe to transparency and accounting principles.</p>
- </div>
- </div>
- </section>
-
- <div class="row">
- <div class="large-9 columns" id="log">
- </div>
- <div class="large-3 columns">
- <div class="callout primary">
- <h3>Source</h3>
- <p>These entries are compiled from Freenode #nasqueron-ops.</p>
- <p>They describe actions done on the Nasqueron servers infrastructure.</p>
- </div>
- <div class="callout primary">
- <h3>Add an entry</h3>
- <p>
- To log something, go to this IRC channel and write your log entry:
- <br /><code>[Foo] Done something</code>
- </p>
- <p>It will automatically be published here, with a timestamp & your name.</p>
- </div>
- <div class="callout primary">
- <h3>License</h3>
- <p>Individual entries are too short to be original, and so are in the public domain.</p>
- <p>When original enough, content is available under <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> licence.</p>
- <p>This log, as a database, is made available under the <a rel="license" href="http://www.opendatacommons.org/licenses/pddl/1.0/">Public Domain Dedication and License v1.0</a>.</p>
- </div>
- </div>
- </div>
-
- <footer>
- <div class="row">
- <div class="large-12 columns"><hr />
- <div class="row">
- <div class="large-3 columns site-description">
- <p><img src="https://tools.nasqueron.org/images/Nasqueron.png" width="80px" /></p>
- <p><strong>Nasqueron</strong> is a community of developers <span class="ampersand">&</span> creative people.</p>
- <hr />
- <p><strong>Nasqueron Infrastructure</strong> documents our infrastructure servers and operations.</p>
- </div>
- <div class="large-3 columns">
- <dl>
- <dt>Ops repositories</dt>
- <dd><a href="https://devcentral.nasqueron.org/diffusion/OPS/">Operations</a></dd>
- <dd><a href="https://devcentral.nasqueron.org/diffusion/query/NelStiRVmgP0/">Docker images</a></dd>
-
- <dt>Site repositories</dt>
- <dd><a href="https://devcentral.nasqueron.org/diffusion/SERVERSLOGDESIGN/">Site design</a></dd>
- </dl>
- </div>
- <div class="large-3 columns">
- <dl>
- <dt>Documentation</dt>
- <dd><a href="https://agora.nasqueron.org/Operations_grimoire">Operations grimoire</a> (NOG)</dd>
-
- <dt>Status</dt>
- <dd><a href="https://status.nasqueron.org/">Servers status</a></dd>
- <dd><a href="https://ci.nasqueron.org/job/test-prod-env">Jenkins prod env tests</a></dd>
-
- </dl>
- </div>
- <div class="large-3 columns">
- <dl>
- <dt>Report an issue</dt>
- <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/4/">Report service outage</a></dd>
- <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/3/">SSH key request</a></dd>
- <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/1/">Fill another task</a></dd>
-
- <dt>Tasks</dt>
- <dd><a href="https://devcentral.nasqueron.org/tag/servers/">Server tasks</a></dd>
- </dl>
- </div>
- </div>
- </div>
- <div class="large-12 columns"><hr />
- <div class="row extrainfos">
- <div class="large-6 large-offset-6 columns">
- <p class="text-right">“This seems odd and even wrong, but nevertheless it is the case.”</p>
- </div>
- </div>
- </div>
- </div>
- </footer>
-
-
- <script src="/assets/js/app.js"></script>
- </body>
-</html>
diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep
new file mode 100644
index 0000000..e054433
--- /dev/null
+++ b/src/assets/img/.gitkeep
@@ -0,0 +1 @@
+# You can delete this file. It's just here to make Git happy.
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
new file mode 100644
index 0000000..2bd7524
--- /dev/null
+++ b/src/assets/js/app.js
@@ -0,0 +1,338 @@
+/* -------------------------------------------------------------
+ Nasqueron infrastructure
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ Project: Nasqueron
+ Author: Sébastien Santoro aka Dereckson
+ Dependencies: jQuery
+ Filename: app.js
+ Licence: CC-BY 4.0, MIT, BSD-2-Clause (multi-licensing)
+ ------------------------------------------------------------- */
+
+/* -------------------------------------------------------------
+ Table of contents
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ :: Servers log
+ :: Code to run when document is ready
+
+ */
+
+var ServersLog = function (url, container) {
+ var serversLog = {
+
+ ///
+ /// Private properties
+ ///
+
+ /**
+ * A JQuery selector expression to a DOM element to publish the log in.
+ *
+ * @var string
+ */
+ container: "",
+
+ /**
+ * The URL to fetch the log.
+ *
+ * @var string
+ */
+ url: "",
+
+ /**
+ * The log entries fetched.
+ *
+ * @var array
+ */
+ logEntries: [],
+
+ ///
+ /// Constructor
+ ///
+
+ /**
+ * Initializes an instance of this object.
+ *
+ * @param url The URL to the log
+ * @param container The DOM element JQuery selector where to write
+ */
+ load: function (url, container) {
+ this.url = url;
+ this.container = container;
+ this.refreshData();
+ },
+
+ ///
+ /// Main methods
+ ///
+
+ /**
+ * Fetches log entries. That will trigger an UI refresh once fetched.
+ */
+ refreshData: function () {
+ this.fetchLogEntries();
+ },
+
+ /**
+ * Refreshes the UI from the content in logEntries array.
+ */
+ refreshUI: function () {
+ $(this.container).html(this.formatEntries());
+ },
+
+ ///
+ /// Data helper methods
+ ///
+
+ /**
+ * Fetches the log entries at the log URL, fills logEntries array,
+ * refreshes the UI.
+ */
+ fetchLogEntries: function () {
+ $.getJSON(this.url, function(data) {
+ serversLog.logEntries = data.reverse(); // Log is chronological.
+ serversLog.refreshUI();
+ });
+ },
+
+ ///
+ /// UI helper methods
+ ///
+
+ formatEntries: function () {
+ var currentDate = "";
+ var currentMonth = "";
+
+ var entries = "";
+ for (var i = 0; i < this.logEntries.length; i++) {
+ var entry = this.logEntries[i];
+ var date = this.getDate(entry.date);
+ if (date != currentDate) {
+ // Month heading
+ var month = this.getMonth(entry.date);
+ if (month != currentMonth) {
+ entries += this.formatMonthHeadings(entry.date);
+ currentMonth = month;
+ }
+
+ // Day heading
+ entries += this.formatDateHeadings(date);
+ currentDate = date;
+ }
+ entries += this.formatEntry(entry);
+ }
+ return entries;
+ },
+
+ formatEntry: function (entry) {
+ var format = `<p class="log-entry">
+ <span class="log-component secondary label">%%component%%</span>
+ <span class="log-time">%%date%%</span>
+ <span class="log-emitter">%%emitter%%</span>:
+ <span class="log-message">%%message%%</span>
+ </p>`;
+ return format
+ .replace("%%component%%", entry.component)
+ .replace("%%date%%", this.getTime(entry.date))
+ .replace("%%emitter%%", entry.emitter)
+ .replace("%%message%%", this.formatMessage(entry.entry))
+ ;
+ },
+
+ ///
+ /// Formats date headings
+ ///
+
+ /**
+ * The month names.
+ *
+ * @var array
+ */
+ monthNames: [
+ "January", "February", "March",
+ "April", "May", "June",
+ "July", "August", "September",
+ "October", "November", "December"
+ ],
+
+ /**
+ ** Gets a day headings element.
+ *
+ * @param date The date to print
+ * @returns {string} The day heading
+ */
+ formatDateHeadings: function (date) {
+ return '<h3>' + date + '</h3>';
+ },
+
+ /**
+ * Gets a month heading element.
+ *
+ * @param timestamp The date to parse
+ * @returns {string} The month heading
+ */
+ formatMonthHeadings: function (timestamp) {
+ var date = new Date(timestamp);
+ var month = this.monthNames[date.getUTCMonth()];
+
+ return "<h2>" + month + "</h2>";
+ },
+
+ ///
+ /// Format messages helper functions
+ ///
+
+ /**
+ * @var array
+ */
+ messageDecorators: [
+ {
+ // SHA-1 Git commit hashes
+ re: /\b([0-9a-f]{7,40})\b/g,
+
+ /**
+ * Callback method to linkify when needed a SHA-1 hash.
+ *
+ * @param match The expression matched by the regexp
+ * @param p1 The SHA-1 hash candidate
+ * @param offset The position p1 has been found
+ * @param string The full string p1 has been found
+ * @returns {string}
+ */
+ replaceBy: function (match, p1, offset, string) {
+ if (!serversLog.isHash(p1)) {
+ return p1;
+ }
+
+ return '<a href="https://devcentral.nasqueron.org/search/?query=%1">%1</a>'
+ .replace(/%1/g, p1);
+ },
+ },
+ {
+ // Tasks, reviews and pastes
+ re: /\b([TDP][0-9]{1,6}(\#[0-9]{1,10})?)\b/g,
+ replaceBy: '<a href="https://devcentral.nasqueron.org/$1">$1</a>',
+ },
+ {
+ // Repositories callsigns
+ re: /\br([A-Z]{3,32})\b/g,
+ replaceBy: '<a rel="repository" href="https://devcentral.nasqueron.org/diffusion/$1/">r$1</a>',
+ },
+ {
+ // Commits with callsigns
+ re: /\br([A-Z]{3,32}[0-9a-f]{7,40})\b/g,
+ replaceBy: '<a rel="commit" href="https://devcentral.nasqueron.org/r$1">r$1</a>',
+ },
+ {
+ // Code (or SQL query parameter)
+ re: /`(.*?)`/g,
+ replaceBy: '<code>$1</code>'
+ }
+ ],
+
+ /**
+ * Whitelist of known hexadecimal words.
+ *
+ * @var array
+ */
+ hexadecimalKnownWord: [
+ "added",
+ "accede",
+ "adead",
+ "decade",
+ "deedeed",
+ "deface",
+ "ed25519",
+ "efface",
+ "facade",
+ "faced",
+ "faded",
+ ],
+
+ /**
+ * Determines if an expression matches a whitelisted hexadecimal word.
+ *
+ * @param word The word to check
+ * @returns {boolean}
+ */
+ isHexadecimalKnownWord: function (word) {
+ return this.hexadecimalKnownWord.indexOf(word) > -1;
+ },
+
+ /**
+ * Determines if the specified expression is probably an hash.
+ *
+ * An hash is anything hexadecimal with at least one digit < 10
+ * and one digit > 9 (A-F), not matching known vocabulary.
+ *
+ * @param hash
+ * @returns {boolean}
+ */
+ isHash: function (hash) {
+ if (this.isHexadecimalKnownWord(hash)) {
+ return false;
+ }
+
+ if (/^\d+$/.test(hash) || /^[a-z]+$/i.test(hash)) {
+ // Contains only letter or digits,
+ // so not a good hash candidate.
+ return false;
+ }
+
+ return true;
+ },
+
+ formatMessage: function (message) {
+ for (var i = 0; i < this.messageDecorators.length; i++) {
+ var decorator = this.messageDecorators[i];
+ message = message.replace(decorator.re, decorator.replaceBy);
+ }
+
+ return message;
+ },
+
+ ///
+ /// Date and time helper functions
+ ///
+
+ pad: function (number) {
+ if (number < 10) {
+ return '0' + number;
+ }
+ return number;
+ },
+
+ getDate: function (timestamp) {
+ var date = new Date(timestamp);
+ return date.getUTCFullYear()
+ + '-' + this.pad(date.getUTCMonth() + 1)
+ + '-' + this.pad(date.getUTCDate());
+ },
+
+ getTime: function (timestamp) {
+ var date = new Date(timestamp);
+ return this.pad(date.getUTCHours())
+ + ':' + this.pad(date.getUTCMinutes());
+ },
+
+ getMonth: function (timestamp) {
+ var date = new Date(timestamp);
+ return date.getUTCMonth();
+ }
+
+ }
+
+ typeof container === 'string' && serversLog.load(url, container);
+
+ return serversLog;
+}
+
+
+/* -------------------------------------------------------------
+ Code to run when document is ready
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+$(document).ready(function() {
+ $(document).foundation();
+
+ new ServersLog("https://api.nasqueron.org/servers-log/all.json", "#log");
+});
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
new file mode 100644
index 0000000..bbda54e
--- /dev/null
+++ b/src/assets/scss/_settings.scss
@@ -0,0 +1,572 @@
+// Foundation for Sites Settings
+// -----------------------------
+//
+// Table of Contents:
+//
+// 1. Global
+// 2. Breakpoints
+// 3. The Grid
+// 4. Base Typography
+// 5. Typography Helpers
+// 6. Abide
+// 7. Accordion
+// 8. Accordion Menu
+// 9. Badge
+// 10. Breadcrumbs
+// 11. Button
+// 12. Button Group
+// 13. Callout
+// 14. Close Button
+// 15. Drilldown
+// 16. Dropdown
+// 17. Dropdown Menu
+// 18. Flex Video
+// 19. Forms
+// 20. Label
+// 21. Media Object
+// 22. Menu
+// 23. Meter
+// 24. Off-canvas
+// 25. Orbit
+// 26. Pagination
+// 27. Progress Bar
+// 28. Reveal
+// 29. Slider
+// 30. Switch
+// 31. Table
+// 32. Tabs
+// 33. Thumbnail
+// 34. Title Bar
+// 35. Tooltip
+// 36. Top Bar
+// 37. Code
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+ primary: #2C6A74,
+ secondary: #3F8B82,
+ success: #3F8B82,
+ warning: #F2792E,
+ alert: #F06330,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #262626;
+$white: #F2E8DF;
+$body-background: $black;
+$body-font-color: $white;
+$body-font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: 400;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+ small: 0,
+ medium: 640px,
+ large: 1024px,
+ xlarge: 1200px,
+ xxlarge: 1440px,
+);
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+ small: 20px,
+ medium: 30px,
+);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: 'Dosis', $body-font-family;
+$header-font-weight: 200;
+$header-font-style: normal;
+$font-family-monospace: 'Roboto Mono', Consolas, 'Liberation Mono', Courier, monospace;
+$header-sizes: (
+ small: (
+ 'h1': 24,
+ 'h2': 20,
+ 'h3': 19,
+ 'h4': 18,
+ 'h5': 17,
+ 'h6': 16,
+ ),
+ medium: (
+ 'h1': 48,
+ 'h2': 40,
+ 'h3': 31,
+ 'h4': 25,
+ 'h5': 20,
+ 'h6': 16,
+ ),
+);
+$header-color: $secondary-color;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$anchor-color: $secondary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: map-get($foundation-palette, alert);
+$form-label-color-invalid: map-get($foundation-palette, alert);
+$input-error-color: map-get($foundation-palette, alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $black;
+$accordion-plusminus: true;
+$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $black;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: foreground($badge-background);
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $white;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-sizes: (
+ tiny: 0.6rem,
+ small: 0.75rem,
+ default: 0.9rem,
+ large: 1.25rem,
+);
+$button-opacity-disabled: 0.25;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+
+// 13. Callout
+// -----------
+
+$callout-background: $black;
+$callout-background-fade: 15%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-padding: 1rem;
+$callout-font-color: white;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 1%;
+
+// 14. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: 1rem;
+$closebutton-offset-vertical: 0.5rem;
+$closebutton-size: 2em;
+$closebutton-lineheight: 1;
+$closebutton-color: $light-gray;
+$closebutton-color-hover: $white;
+
+// 15. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-arrow-color: $primary-color;
+$drilldown-background: $black;
+
+// 16. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+ tiny: 100px,
+ small: 200px,
+ large: 400px,
+);
+
+// 17. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $black;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 18. Flex Video
+// --------------
+
+$flexvideo-margin-bottom: rem-calc(16);
+$flexvideo-ratio: 4 by 3;
+$flexvideo-ratio-widescreen: 16 by 9;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $dark-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $white;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $white;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $black;
+$select-triangle-color: $light-gray;
+$select-radius: $global-radius;
+$input-color: $white;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-background: $black;
+$input-background-focus: $black;
+$input-background-disabled: $dark-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: default;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: white;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: 1rem;
+$menu-item-padding: 0.7rem 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: map-get($foundation-palette, primary);
+$menu-icon-spacing: 0.25rem;
+
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+$offcanvas-size: 250px;
+$offcanvas-background: $light-gray;
+$offcanvas-zindex: -1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+$maincontent-shadow: 0 0 10px rgba($black, 0.5);
+
+// 25. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 28. Reveal
+// ----------
+
+$reveal-background: $black;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 29. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 30. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $black;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 31. Table
+// ---------
+
+$table-background: $black;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-head-font-color: $body-font-color;
+$show-header-for-stacked: false;
+
+// 32. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $black;
+$tab-background-active: $light-gray;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $black;
+$tab-content-border: $light-gray;
+$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-padding: 1rem;
+
+// 33. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 34. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 35. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 36. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 1rem;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 37. Code
+// --------
+
+$code-color: $white;
+$code-font-family: $font-family-monospace;
+$code-font-weight: 400;
+$code-background: scale-color($body-background, $lightness: $callout-background-fade);
+$code-border-scale: 15%;
+$code-border: 1px solid darken($code-background, $code-border-scale);
+$code-padding: rem-calc(2 5 1);
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
index 0000000..962cf48
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,53 @@
+@charset 'utf-8';
+
+@import 'settings';
+@import 'foundation';
+@import 'motion-ui';
+
+@include foundation-global-styles;
+@include foundation-grid;
+// @include foundation-flex-grid;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+// @include foundation-range-input;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-flex-video;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+// @include foundation-progress-element;
+// @include foundation-meter-element;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+// @include foundation-flex-classes;
+
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+@import 'components/layout';
+@import 'components/footer';
diff --git a/src/assets/scss/components/_footer.scss b/src/assets/scss/components/_footer.scss
new file mode 100644
index 0000000..bd64872
--- /dev/null
+++ b/src/assets/scss/components/_footer.scss
@@ -0,0 +1,59 @@
+/* -------------------------------------------------------------
+ Footer
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+footer {
+ margin-bottom: 0;
+ margin-top: 10vh;
+ padding-top: 2em;
+
+ background-color: $primary-color;
+ color: white;
+
+ hr {
+ width: 75%;
+ height: 1px;
+ margin: 0em auto 1em auto;
+
+ border-color: darken($primary-color, 3%);
+ }
+
+ a {
+ color: darken($primary-color, 15%);
+ }
+
+ a:hover {
+ color: black;
+ }
+
+ a:active {
+ color: $white !important;
+ }
+
+ .site-description {
+ text-align: center;
+
+ p {
+ font-size: 14px;
+ }
+ }
+
+ dl {
+ font-variant: small-caps;
+ }
+
+ dt {
+ color: white;
+ font-weight: 600;
+ }
+
+ dd {
+ padding-left: 1em;
+ }
+
+ .extrainfos {
+ strong {
+ font-variant: small-caps;
+ }
+ }
+}
diff --git a/src/assets/scss/components/_layout.scss b/src/assets/scss/components/_layout.scss
new file mode 100644
index 0000000..7bd0e8d
--- /dev/null
+++ b/src/assets/scss/components/_layout.scss
@@ -0,0 +1,41 @@
+body {
+ margin-top: 3em;
+}
+
+h1 img {
+ margin-right: 0.5em;
+}
+
+header {
+ margin-bottom: 1.5em;
+}
+
+code {
+ font-size: 0.9em;
+}
+
+.primary {
+ a {
+ color: #16353a;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $white;
+ }
+
+ code {
+ color: $black;
+ background-color: $white;
+ border: 1px solid $light-gray;
+ }
+}
+
+.secondary {
+ h1, h2, h3, h4, h5, h6 {
+ color: $black;
+ }
+}
+
+.label {
+ margin-right: 0.25em;
+}
diff --git a/src/data/.gitkeep b/src/data/.gitkeep
new file mode 100644
index 0000000..e054433
--- /dev/null
+++ b/src/data/.gitkeep
@@ -0,0 +1 @@
+# You can delete this file. It's just here to make Git happy.
diff --git a/src/layouts/default.html b/src/layouts/default.html
new file mode 100644
index 0000000..93c24ea
--- /dev/null
+++ b/src/layouts/default.html
@@ -0,0 +1,20 @@
+{{!-- This is the base layout for your project, and will be used on every page. --}}
+
+<!doctype html>
+<html class="no-js" lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Servers log — Nasqueron</title>
+ <link href="https://fonts.googleapis.com/css?family=Dosis:200|Source+Sans+Pro|Roboto+Mono" rel="stylesheet">
+ <link rel="stylesheet" href="{{root}}assets/css/app.css">
+ </head>
+ <body>
+
+ {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
+ {{> body}}
+
+ <script src="{{root}}assets/js/app.js"></script>
+ </body>
+</html>
diff --git a/src/pages/2016.html b/src/pages/2016.html
new file mode 100644
index 0000000..5fa8bf6
--- /dev/null
+++ b/src/pages/2016.html
@@ -0,0 +1,22 @@
+<header class="row">
+ <div class="large-12 columns">
+ <h1><img src="https://assets.nasqueron.org/logos/logo-white-64px.png" /> Servers log</h1>
+ </div>
+</header>
+
+<section class="row">
+ <div class="large-12 columns">
+ {{> intro}}
+ </div>
+</section>
+
+<div class="row">
+ <div class="large-9 columns">
+ {{> log-entries}}
+ </div>
+ <div class="large-3 columns">
+ {{> log-help}}
+ </div>
+</div>
+
+{{> footer}}
diff --git a/src/pages/api.html b/src/pages/api.html
new file mode 100644
index 0000000..778b16a
--- /dev/null
+++ b/src/pages/api.html
@@ -0,0 +1,21 @@
+<header class="row">
+ <div class="large-12 columns">
+ <h1><img src="https://assets.nasqueron.org/logos/logo-white-64px.png" /> Servers log</h1>
+ </div>
+</header>
+
+<section class="row">
+ <div class="large-12 columns">
+ {{> intro}}
+ </div>
+</section>
+
+<div class="row">
+ <div class="large-9 columns" id="log">
+ </div>
+ <div class="large-3 columns">
+ {{> log-help}}
+ </div>
+</div>
+
+{{> footer}}
diff --git a/src/pages/index.html b/src/pages/index.html
new file mode 100644
index 0000000..b76ff85
--- /dev/null
+++ b/src/pages/index.html
@@ -0,0 +1,151 @@
+<div class="row">
+ <div class="large-12 columns">
+ <h1>Welcome to Foundation for Sites</h1>
+ </div>
+</div>
+
+<div class="row">
+ <div class="large-12 columns">
+ <div class="callout">
+ <h3>We&rsquo;re stoked you want to try Foundation! </h3>
+ <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+ <p>Once you've exhausted the fun in this document, you should check out:</p>
+ <div class="row">
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+ </div>
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
+ </div>
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-4 medium-4 medium-push-2 columns">
+ <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+ </div>
+ <div class="large-4 medium-4 medium-pull-2 columns">
+ <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="row">
+ <div class="large-8 medium-8 columns">
+ <h5>Here&rsquo;s your basic grid:</h5>
+ <!-- Grid Example -->
+
+ <div class="row">
+ <div class="large-12 columns">
+ <div class="primary callout">
+ <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 medium-6 columns">
+ <div class="primary callout">
+ <p>Six columns</p>
+ </div>
+ </div>
+ <div class="large-6 medium-6 columns">
+ <div class="primary callout">
+ <p>Six columns</p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ </div>
+
+ <hr />
+
+ <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+ <form>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-12.columns" />
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-4 medium-4 columns">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-4.columns" />
+ </div>
+ <div class="large-4 medium-4 columns">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-4.columns" />
+ </div>
+ <div class="large-4 medium-4 columns">
+ <div class="row collapse">
+ <label>Input Label</label>
+ <div class="input-group">
+ <input class="input-group-field" type="text" placeholder="input-group" />
+ <span class="input-group-label">.com</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Select Box</label>
+ <select>
+ <option value="husker">Husker</option>
+ <option value="starbuck">Starbuck</option>
+ <option value="hotdog">Hot Dog</option>
+ <option value="apollo">Apollo</option>
+ </select>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 medium-6 columns">
+ <label>Choose Your Favorite</label>
+ <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
+ <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
+ </div>
+ <div class="large-6 medium-6 columns">
+ <label>Check these out</label>
+ <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+ <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Textarea Label</label>
+ <textarea placeholder="small-12.columns"></textarea>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div class="large-4 medium-4 columns">
+ <h5>Try one of these buttons:</h5>
+ <p><a href="#" class="small button">Simple Button</a><br/>
+ <a href="#" class="medium success button">Success Btn</a><br/>
+ <a href="#" class="medium alert button">Alert Btn</a><br/>
+ <a href="#" class="medium secondary button">Secondary Btn</a></p>
+ <div class="callout">
+ <h5>So many components, girl!</h5>
+ <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
+ <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>
+ </div>
+ </div>
+</div>
diff --git a/src/pages/log.html b/src/pages/log.html
new file mode 100644
index 0000000..e85e3b5
--- /dev/null
+++ b/src/pages/log.html
@@ -0,0 +1,145 @@
+<header class="row">
+ <div class="large-12 columns">
+ <h1><img src="https://assets.nasqueron.org/logos/logo-white-64px.png" /> Servers log</h1>
+ <p>This page shows different way to print the servers log.</p>
+ </div>
+</header>
+
+<div class="row">
+ <div class="large-12 columns">
+ <p>If components are important, we can divide in two columns:</p>
+ </div>
+ <div class="large-2 columns">
+ <div class="log-component secondary callout">
+ <p>Ysul</p>
+ </div>
+ </div>
+ <div class="large-10 columns">
+ <div class="primary callout">
+ <p class="log-message">Upgraded userland to 10.1-RELEASE-p37</p>
+ <p>
+ <span class="log-datetime">2016-09-05 01:47:31</span>
+ <span class="log-emitter">Dereckson</span>
+ </p>
+ </div>
+ </div>
+</div>
+<div class="row">
+ <div class="large-2 columns">
+ <div class="log-component secondary callout">
+ <p>Dwellers</p>
+ <p>Acquisitariat</p>
+ </div>
+ </div>
+ <div class="large-10 columns">
+ <div class="primary callout">
+ <p>2016-09-05 01:47:31 Dereckson</p>
+ <p>Enable performance schema</p>
+ </div>
+ </div>
+</div>
+
+<hr />
+
+<div class="row">
+ <div class="large-12 columns">
+ <p>No background for entries, with labels per component, IRC-like format:</p>
+ <h3 class="log-date">2016-09-05</h3>
+ <p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ [<span class="log-time">01:59:42</span>]
+ &lt;<span class="log-emitter">Dereckson</span>&gt;
+ <span class="log-message">General software upgrade round. PHP will be 5.6.25.</span>
+ </p>
+ <p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ [<span class="log-time">01:47:31</span>]
+ &lt;<span class="log-emitter">Dereckson</span>&gt;
+ <span class="log-message">Upgraded userland to 10.1-RELEASE-p37</span>
+ </p>
+ </div>
+</div>
+
+<hr />
+
+<div class="row">
+ <div class="large-12 columns">
+ <p>No background for entries, with labels per component, clean format:</p>
+ <h3 class="log-date" id="2016-07-21">2016-07-21</h3>
+ <p class="log-entry">
+ <span class="log-component secondary label">AWS</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Sandlayth</span>:
+ <span class="log-message">AmazonS3FullAccess Policy attached to user Dwellers</span>
+ </p>
+ <h3 class="log-date" id="2016-09-05">2016-09-05</h3>
+ <p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">General software upgrade round. PHP will be 5.6.25.</span>
+ </p>
+ <p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Upgraded userland to 10.1-RELEASE-p37</span>
+ </p>
+ <p class="log-entry">
+ <span class="log-component secondary label">Dwellers/Acquisitariat</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Enable performance schema</span>
+ </p>
+ </div>
+</div>
+
+<hr />
+
+<div class="row">
+ <div class="large-12 columns">
+ <p>We can also use plain colors, but vary it when we vary the component:</p>
+ <h3 class="log-date" id="2016-07-21">2016-07-21</h3>
+ </div>
+</div>
+<div class="row">
+ <div class="large-12 columns callout primary">
+ <p class="log-entry">
+ <span class="log-component">AWS</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Sandlayth</span>:
+ <span class="log-message">AmazonS3FullAccess Policy attached to user Dwellers</span>
+ </p>
+ </div>
+</div>
+<div class="row">
+ <div class="large-12 columns callout secondary">
+ <p class="log-entry">
+ <span class="log-component">Ysul</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">General software upgrade round. PHP will be 5.6.25.</span>
+ </p>
+ </div>
+</div>
+<div class="row">
+ <div class="large-12 columns callout secondary">
+ <p class="log-entry">
+ <span class="log-component">Ysul</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Upgraded userland to 10.1-RELEASE-p37</span>
+ </p>
+ </div>
+</div>
+<div class="row">
+ <div class="large-12 columns callout primary">
+ <p class="log-entry">
+ <span class="log-component">Dwellers/Acquisitariat</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Enable performance schema</span>
+ </p>
+ </div>
+</div>
+
diff --git a/src/partials/footer.html b/src/partials/footer.html
new file mode 100644
index 0000000..00bfc8e
--- /dev/null
+++ b/src/partials/footer.html
@@ -0,0 +1,53 @@
+<footer>
+<div class="row">
+ <div class="large-12 columns"><hr />
+ <div class="row">
+ <div class="large-3 columns site-description">
+ <p><img src="https://tools.nasqueron.org/images/Nasqueron.png" width="80px" /></p>
+ <p><strong>Nasqueron</strong> is a community of developers <span class="ampersand">&</span> creative people.</p>
+ <hr />
+ <p><strong>Nasqueron Infrastructure</strong> documents our infrastructure servers and operations.</p>
+ </div>
+ <div class="large-3 columns">
+ <dl>
+ <dt>Ops repositories</dt>
+ <dd><a href="https://devcentral.nasqueron.org/diffusion/OPS/">Operations</a></dd>
+ <dd><a href="https://devcentral.nasqueron.org/diffusion/query/NelStiRVmgP0/">Docker images</a></dd>
+
+ <dt>Site repositories</dt>
+ <dd><a href="https://devcentral.nasqueron.org/diffusion/SERVERSLOGDESIGN/">Site design</a></dd>
+ </dl>
+ </div>
+ <div class="large-3 columns">
+ <dl>
+ <dt>Documentation</dt>
+ <dd><a href="https://agora.nasqueron.org/Operations_grimoire">Operations grimoire</a> (NOG)</dd>
+
+ <dt>Status</dt>
+ <dd><a href="https://status.nasqueron.org/">Servers status</a></dd>
+ <dd><a href="https://ci.nasqueron.org/job/test-prod-env">Jenkins prod env tests</a></dd>
+
+ </dl>
+ </div>
+ <div class="large-3 columns">
+ <dl>
+ <dt>Report an issue</dt>
+ <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/4/">Report service outage</a></dd>
+ <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/3/">SSH key request</a></dd>
+ <dd><a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/1/">Fill another task</a></dd>
+
+ <dt>Tasks</dt>
+ <dd><a href="https://devcentral.nasqueron.org/tag/servers/">Server tasks</a></dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+ <div class="large-12 columns"><hr />
+ <div class="row extrainfos">
+ <div class="large-6 large-offset-6 columns">
+ <p class="text-right">“This seems odd and even wrong, but nevertheless it is the case.”</p>
+ </div>
+ </div>
+ </div>
+</div>
+</footer>
diff --git a/src/partials/intro.html b/src/partials/intro.html
new file mode 100644
index 0000000..bc100ff
--- /dev/null
+++ b/src/partials/intro.html
@@ -0,0 +1,4 @@
+<div class="callout">
+ <p><strong>Nasqueron infrastructure servers</strong> support our budding community of creative people, writers, developers and thinkers.</p>
+ <p>This log tracks the actions of the <strong>Nasqueron operations squad</strong>, who manage these servers and subscribe to transparency and accounting principles.</p>
+</div>
diff --git a/src/partials/log-entries.html b/src/partials/log-entries.html
new file mode 100644
index 0000000..25aa7fa
--- /dev/null
+++ b/src/partials/log-entries.html
@@ -0,0 +1,29 @@
+<h2>September</h2>
+<h3 class="log-date" id="2016-09-05">2016-09-05</h3>
+<p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">General software upgrade round. PHP will be 5.6.25.</span>
+</p>
+<p class="log-entry">
+ <span class="log-component secondary label">Ysul</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Upgraded userland to 10.1-RELEASE-p37</span>
+</p>
+<p class="log-entry">
+ <span class="log-component secondary label">Dwellers/Acquisitariat</span>
+ <span class="log-time">01:47</span>
+ <span class="log-emitter">Dereckson</span>:
+ <span class="log-message">Enable performance schema</span>
+</p>
+
+<h2>July</h2>
+<h3 class="log-date" id="2016-07-21">2016-07-21</h3>
+<p class="log-entry">
+ <span class="log-component secondary label">AWS</span>
+ <span class="log-time">01:59</span>
+ <span class="log-emitter">Sandlayth</span>:
+ <span class="log-message">AmazonS3FullAccess Policy attached to user Dwellers</span>
+</p>
diff --git a/src/partials/log-help.html b/src/partials/log-help.html
new file mode 100644
index 0000000..5afe150
--- /dev/null
+++ b/src/partials/log-help.html
@@ -0,0 +1,19 @@
+<div class="callout primary">
+ <h3>Source</h3>
+ <p>These entries are compiled from Freenode #nasqueron-ops.</p>
+ <p>They describe actions done on the Nasqueron servers infrastructure.</p>
+</div>
+<div class="callout primary">
+ <h3>Add an entry</h3>
+ <p>
+ To log something, go to this IRC channel and write your log entry:
+ <br /><code>[Foo] Done something</code>
+ </p>
+ <p>It will automatically be published here, with a timestamp & your name.</p>
+</div>
+<div class="callout primary">
+ <h3>License</h3>
+ <p>Individual entries are too short to be original, and so are in the public domain.</p>
+ <p>When original enough, content is available under <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> licence.</p>
+ <p>This log, as a database, is made available under the <a rel="license" href="http://www.opendatacommons.org/licenses/pddl/1.0/">Public Domain Dedication and License v1.0</a>.</p>
+</div>
diff --git a/src/styleguide/index.md b/src/styleguide/index.md
new file mode 100644
index 0000000..deae99c
--- /dev/null
+++ b/src/styleguide/index.md
@@ -0,0 +1,355 @@
+# The Grid
+
+<p class="lead">Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!</p>
+
+---
+
+## Overview
+
+The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column.
+
+---
+
+## Nesting
+
+In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
+
+---
+
+## How to Use
+
+Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create vertical columns.
+
+```html
+<div class="row">
+ <div class="small-6 medium-4 large-3 columns">...</div>
+ <div class="small-6 medium-8 large-9 columns">...</div>
+</div>
+```
+
+<div class="row display">
+ <div class="small-12 large-4 columns">4</div>
+ <div class="small-12 large-4 columns">4</div>
+ <div class="small-12 large-4 columns">4</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-3 columns">3</div>
+ <div class="small-12 large-6 columns">6</div>
+ <div class="small-12 large-3 columns">3</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-2 columns">2</div>
+ <div class="small-12 large-8 columns">8</div>
+ <div class="small-12 large-2 columns">2</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-3 columns">3</div>
+ <div class="small-12 large-9 columns">9</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-4 columns">4</div>
+ <div class="small-12 large-8 columns">8</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-5 columns">5</div>
+ <div class="small-12 large-7 columns">7</div>
+</div>
+<div class="row display">
+ <div class="small-12 large-6 columns">6</div>
+ <div class="small-12 large-6 columns">6</div>
+</div>
+
+---
+
+## Nesting Rows
+
+In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
+
+```html
+<div class="row">
+ <div class="small-8 columns">8
+ <div class="row">
+ <div class="small-8 columns">8 Nested
+ <div class="row">
+ <div class="small-8 columns">8 Nested Again</div>
+ <div class="small-4 columns">4</div>
+ </div>
+ </div>
+ <div class="small-4 columns">4</div>
+ </div>
+ </div>
+ <div class="small-4 columns">4</div>
+</div>
+```
+
+<div class="row display">
+ <div class="small-8 columns">8
+ <div class="row">
+ <div class="small-8 columns">8 Nested
+ <div class="row">
+ <div class="small-8 columns">8 Nested Again</div>
+ <div class="small-4 columns">4</div>
+ </div>
+ </div>
+ <div class="small-4 columns">4</div>
+ </div>
+ </div>
+ <div class="small-4 columns">4</div>
+</div>
+
+---
+
+## Small Grid
+
+As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.
+
+```html
+<div class="row">
+ <div class="small-2 columns">2</div>
+ <div class="small-10 columns">10, last</div>
+</div>
+<div class="row">
+ <div class="small-3 columns">3</div>
+ <div class="small-9 columns">9, last</div>
+</div>
+```
+
+<div class="row display">
+ <div class="small-2 columns">2</div>
+ <div class="small-10 columns">10, last</div>
+</div>
+<div class="row display">
+ <div class="small-3 columns">3</div>
+ <div class="small-9 columns">9, last</div>
+</div>
+
+
+
+# Colors
+
+<p class="lead">Below you can find the different values we created that support the primary color variable you can change at any time in <code>\_settings.scss</code></p>
+
+---
+
+<div class="row up-1 medium-up-3 large-up-5">
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #2C6A74"></span>
+ #2C6A74
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #3F8B82"></span>
+ #3F8B82
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #3F8B82"></span>
+ #3F8B82
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #F2792E"></span>
+ #F2792E
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #F06330"></span>
+ #F06330
+ </div>
+ </div>
+</div>
+
+
+
+# Typography
+
+<p class="lead">This design uses Helvetica Neue for headings and paragraph text.</p>
+
+---
+
+## Headings
+
+Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)
+
+---
+
+## Paragraphs
+
+Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.
+
+---
+
+<h1>Heading Level 1</h1>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+<h2>Heading Level 2</h2>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+<h3>Heading Level 3</h3>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+<h4>Heading Level 4</h4>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+<h5>Heading Level 5</h5>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+<h6>Heading Level 6</h6>
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
+
+
+
+# Buttons
+
+<p class="lead">Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.</p>
+
+---
+
+## Primary Buttons
+
+These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes.
+
+```html_example
+<a href="#" class="primary large button">Large button</a>
+<a href="#" class="primary button">Regular button</a>
+<a href="#" class="primary small button">Small button</a>
+<a href="#" class="primary tiny button">Tiny button</a>
+```
+
+---
+
+## Secondary Buttons
+
+These buttons are used for less important, secondary actions on a page.
+
+```html_example
+<a href="#" class="secondary large button">Large button</a>
+<a href="#" class="secondary button">Regular button</a>
+<a href="#" class="secondary small button">Small button</a>
+<a href="#" class="secondary tiny button">Tiny button</a>
+```
+
+
+
+# Forms
+
+<p class="lead">Use forms to allow users to interact with the site and provide information to the company.</p>
+
+---
+
+## Elements of a Form
+
+A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):
+
+- Form
+- Label
+- Input
+- Select
+- Text area
+- Button
+
+---
+
+## How to Use
+
+Make forms great and easy to use with the following rules:
+
+- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
+- Series of checkboxes and radio buttons below within a `<ul class="inline-list">`.
+- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).
+
+---
+
+## Learn All About Forms
+
+Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.
+
+---
+
+## Form Layouts
+
+Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:
+
+- You can size inputs using column sizes, like `.medium-6`, `.small-6`.
+- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
+
+---
+
+## Form Example
+
+```html_example
+<form>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Label</label>
+ <input type="text" placeholder="placeholder">
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 columns">
+ <label>Label</label>
+ <input type="text" placeholder="placeholder">
+ </div>
+ <div class="large-6 columns">
+ <div class="row collapse">
+ <label>Label</label>
+ <div class="input-group">
+ <input class="input-group-field" type="text" placeholder="placeholder">
+ <span class="input-group-label">.com</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Select Box</label>
+ <select>
+ <option value="good">Good</option>
+ <option value="better">Better</option>
+ <option value="best">Best</option>
+ </select>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 columns">
+ <label>Choose Your Favorite</label>
+ <input type="radio" name="radio1" value="radio1" id="radio1"><label for="radio1">Red</label>
+ <input type="radio" name="radio2" value="radio2" id="radio2"><label for="radio2">Blue</label>
+ </div>
+ <div class="large-6 columns">
+ <label>Check these out</label>
+ <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+ <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-12 columns">
+ <label>Textarea Label</label>
+ <textarea placeholder="placeholder"></textarea>
+ </div>
+ </div>
+</form>
+```
+
+
+
+# New Section
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla.
+
+```html_example
+<a href="#" class="button">Button</a>
+<a href="#" class="button">Button</a>
+<a href="#" class="button">Button</a>
+```
diff --git a/src/styleguide/template.html b/src/styleguide/template.html
new file mode 100644
index 0000000..797f588
--- /dev/null
+++ b/src/styleguide/template.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Guide</title>
+ <link rel="stylesheet" href="assets/css/app.css">
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
+
+ <!-- Style guide-specific CSS goes here. -->
+ <style>
+ /* This styles individual sections of the style guide */
+ .ss-section:not(:last-child) {
+ padding-bottom: 4rem;
+ border-bottom: 2px solid #ccc;
+ margin-bottom: 4rem;
+ }
+
+ /* This styles code blocks used for examples. */
+ .ss-code code {
+ display: block;
+ padding: 1rem;
+ overflow-x: scroll;
+ margin-bottom: 1.5rem;
+ }
+
+ /* This styles the example rows used in the grid documentation. */
+ .row.display {
+ background: #eee;
+ font-size: 11px;
+ margin-bottom: 10px;
+ line-height: 2rem;
+ border: solid 1px #c6c6c6;
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+ .row.display .columns:nth-child(2), .row.display .columns.small-centered, .row.display .columns.large-centered {
+ background: #e1e1e1; }
+ .row.display .columns.color-end {
+ background: #d4d4d4; }
+
+ /* This styles the color blocks used in the color documentation. */
+ .color-block {
+ border-radius: 2px;
+ display: block;
+ padding: 8px 8px 6px;
+ color: #333;
+ text-transform: uppercase;
+ border: 1px solid #ddd;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+ }
+ .color-block span {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 0.42857rem;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div class="column row">
+ <h1>Client Style Guide</h1>
+ <p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
+ <a href="http://foundation.zurb.com/docs/" class="button">Visit the Docs</a>
+ <a href="http://foundation.zurb.com/forum/" class="secondary button">Foundation Forum</a>
+ <a href="http://foundation.zurb.com/business/business-support.html" class="secondary button">Technical Support</a>
+ </div>
+
+ <div class="column row"><div class="row collapse">
+
+ <div class="large-3 medium-4 columns" data-sticky-container>
+ <ul class="vertical menu">
+ {{#each pages}}
+ <li><a href="#{{ anchor }}">{{ title }}</a></li>
+ {{/each}}
+ </ul>
+ </div>
+
+ <div class="large-9 medium-8 columns">
+ {{#each pages}}
+ <section class="ss-section" id="{{ anchor }}">
+ {{ body }}
+ </section>
+ {{/each}}
+ </div>
+
+ </div></div>
+
+ <script src="assets/js/app.js"></script>
+ </body>
+</html>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 7, 02:38 (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
4243579
Default Alt Text
(79 KB)

Event Timeline

Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator