Page MenuHomeDevCentral
Files F3786809

D3116.id7948.diff
No OneTemporary
Actions

D3116.id7948.diff
View Options

diff --git a/.arcconfig b/.arcconfig
new file mode 100644
--- /dev/null
+++ b/.arcconfig
@@ -0,0 +1,4 @@
+{
+ "phabricator.uri": "https://devcentral.nasqueron.org",
+ "repository.callsign": "JOIN"
+}
diff --git a/.arclint b/.arclint
new file mode 100644
--- /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
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": [ "@babel/preset-env" ],
+ "compact": false
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+.cache
+dist
+node_modules
+npm-debug.log
+package-lock.json
+yarn.lock
diff --git a/README.md b/README.md
new file mode 100644
--- /dev/null
+++ b/README.md
@@ -0,0 +1,46 @@
+# Join Nasqueron
+
+## Goal
+
+The "Join Nasqueron" micro site is specifically tailored for internship
+and mentoring opportunities at Nasqueron, as part of our outreach initiatives.
+
+## Content
+
+The microsite allows to create a focused and streamlined experience
+that caters specifically to potential interns. This allows them to easily
+navigate and access the relevant information they need to make an informed
+decision about applying for an internship or mentorship program with Nasqueron.
+
+The subdomain join.nasqueron.org implies that's an entry point for beings
+interested to join Nasqueron, so it can be evolved to serve as a portal
+for open source contributions and free culture project too.
+
+This is a static site built with Gulp, based on the ZURB Foundation template,
+updated and maintained as part of our Upsection effort.
+
+## Installation
+
+To install this site:
+
+```
+$ git clone https://devcentral.nasqueron.org/source/join-www.git
+```
+
+Then open the folder in your command line, and install the needed dependencies:
+
+```bash
+cd join-www
+yarn install
+```
+
+Finally, run `yarn 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 `yarn run build`.
+
+For Nasqueron, this is done by a Jenkins CD task.
diff --git a/config.yml b/config.yml
new file mode 100644
--- /dev/null
+++ b/config.yml
@@ -0,0 +1,29 @@
+# Your project's server will run on localhost:xxxx at this port
+PORT: 8000
+
+# https://localtunnel.github.io/www/
+TUNNEL: "join-nasqueron"
+
+# 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
--- /dev/null
+++ b/gulpfile.babel.js
@@ -0,0 +1,179 @@
+'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 yaml from 'js-yaml';
+import fs from 'fs';
+import webpackStream from 'webpack-stream';
+import webpack2 from 'webpack';
+import named from 'vinyl-named';
+import uncss from 'uncss';
+import autoprefixer from 'autoprefixer';
+import imagemin from 'gulp-imagemin';
+
+var sass = require('gulp-sass')(require('sass'));
+
+// Load all Gulp plugins into one variable
+const $ = plugins();
+
+// Check for --production flag
+const PRODUCTION = !!(yargs.argv.production);
+
+// Load settings from settings.yml
+const { PORT, UNCSS_OPTIONS, PATHS, TUNNEL } = loadConfig();
+
+function loadConfig() {
+ const unsafe = require('js-yaml-js-types').all;
+ const schema = yaml.DEFAULT_SCHEMA.extend(unsafe);
+ let ymlFile = fs.readFileSync('config.yml', 'utf8');
+ return yaml.load(ymlFile, {schema});
+}
+
+// Build the "dist" folder by running all of the below tasks
+// Sass must be run later so UnCSS can search for used classes in the others assets.
+gulp.task('build',
+ gulp.series(clean, gulp.parallel(pages, javascript, images, copy), compileSass));
+
+// 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();
+}
+
+// Compile Sass into CSS
+// In production, the CSS is compressed
+function compileSass() {
+
+ const postCssPlugins = [
+ // Autoprefixer
+ autoprefixer(),
+
+ // UnCSS - Uncomment to remove unused styles in production
+ // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
+ ].filter(Boolean);
+
+ return gulp.src('src/assets/scss/app.scss')
+ .pipe($.sourcemaps.init())
+ .pipe(sass({
+ includePaths: PATHS.sass
+ })
+ .on('error', sass.logError))
+ .pipe($.postcss(postCssPlugins))
+ .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))
+ .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+ .pipe(gulp.dest(PATHS.dist + '/assets/css'))
+ .pipe(browser.reload({ stream: true }));
+}
+
+let webpackConfig = {
+ mode: (PRODUCTION ? 'production' : 'development'),
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [ "@babel/preset-env" ],
+ compact: false
+ }
+ }
+ }
+ ]
+ },
+ devtool: !PRODUCTION && 'source-map'
+}
+
+// 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([
+ imagemin.gifsicle({interlaced: true}),
+ imagemin.mozjpeg({quality: 85, progressive: true}),
+ imagemin.optipng({optimizationLevel: 5}),
+ imagemin.svgo({
+ plugins: [
+ {removeViewBox: true},
+ {cleanupIDs: false}
+ ]
+ })
+ ])))
+ .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/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/assets/scss/**/*.scss').on('all', compileSass);
+ 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));
+}
diff --git a/package.json b/package.json
new file mode 100644
--- /dev/null
+++ b/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "nasqueron-join-www",
+ "version": "0.1.0",
+ "description": "Nasqueron Join microsite for internships and mentoring opportunities.",
+ "main": "gulpfile.babel.js",
+ "scripts": {
+ "start": "gulp",
+ "build": "gulp build --production"
+ },
+ "author": "Sébastien Santoro <dereckson@espace-win.org>",
+ "license": "BSD-2-Clause",
+ "dependencies": {
+ "foundation-sites": "~6.7.5",
+ "jquery": "~3.6.4",
+ "what-input": "^5.2.12",
+ "motion-ui": "^2.0.4"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.15",
+ "@babel/preset-env": "^7.15.6",
+ "@babel/register": "^7.15.3",
+ "autoprefixer": "^10.4.14",
+ "babel-loader": "^9.1.2",
+ "browser-sync": "^2.27.5",
+ "gulp": "^4.0.2",
+ "gulp-babel": "^8.0.0",
+ "gulp-clean-css": "^4.3.0",
+ "gulp-cli": "^2.3.0",
+ "gulp-concat": "^2.6.1",
+ "gulp-extname": "^0.2.2",
+ "gulp-if": "^3.0.0",
+ "gulp-imagemin": "^7.1.0",
+ "gulp-load-plugins": "^2.0.8",
+ "gulp-postcss": "^9.0.1",
+ "gulp-sass": "^5.1.0",
+ "gulp-sourcemaps": "^3.0.0",
+ "gulp-uglify": "^3.0.1",
+ "js-yaml": "^4.1.0",
+ "js-yaml-js-types": "^1.0.1",
+ "panini": "^1.3.0",
+ "postcss": "^8.4.23",
+ "rimraf": "^3.0.2",
+ "sass": "^1.60.0",
+ "uncss": "^0.17.3",
+ "vinyl-named": "^1.1.0",
+ "webpack": "^5.76.3",
+ "webpack-stream": "^7.0.0",
+ "yargs": "^17.7.1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://devcentral.nasqueron.org/source/join-www.git"
+ },
+ "bugs": {
+ "url": "https://devcentral.nasqueron.org/"
+ },
+ "private": true
+}
diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep
new file mode 100644
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
new file mode 100644
--- /dev/null
+++ b/src/assets/js/app.js
@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import 'what-input';
+
+// Foundation JS relies on a global variable. In ES6, all imports are hoisted
+// to the top of the file so if we used `import` to import Foundation,
+// it would execute earlier than we have assigned the global variable.
+// This is why we have to use CommonJS require() here since it doesn't
+// have the hoisting behavior.
+window.jQuery = $;
+require('foundation-sites');
+
+// If you want to pick and choose which modules to include, comment out the above and uncomment
+// the line below
+//import './lib/foundation-explicit-pieces';
+
+
+$(document).foundation();
diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js
new file mode 100644
--- /dev/null
+++ b/src/assets/js/lib/foundation-explicit-pieces.js
@@ -0,0 +1,83 @@
+import $ from 'jquery';
+
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+Foundation.rtl = CoreUtils.rtl;
+Foundation.GetYoDigits = CoreUtils.GetYoDigits;
+Foundation.transitionend = CoreUtils.transitionend;
+Foundation.RegExpEscape = CoreUtils.RegExpEscape;
+Foundation.onLoad = CoreUtils.onLoad;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no need to add it to Foundation, just init them.
+Touch.init($);
+Triggers.init($, Foundation);
+MediaQuery._init();
+
+Foundation.plugin(Abide, 'Abide');
+Foundation.plugin(Accordion, 'Accordion');
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+Foundation.plugin(Drilldown, 'Drilldown');
+Foundation.plugin(Dropdown, 'Dropdown');
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+Foundation.plugin(Equalizer, 'Equalizer');
+Foundation.plugin(Interchange, 'Interchange');
+Foundation.plugin(Magellan, 'Magellan');
+Foundation.plugin(OffCanvas, 'OffCanvas');
+Foundation.plugin(Orbit, 'Orbit');
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+Foundation.plugin(Reveal, 'Reveal');
+Foundation.plugin(Slider, 'Slider');
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+Foundation.plugin(Sticky, 'Sticky');
+Foundation.plugin(Tabs, 'Tabs');
+Foundation.plugin(Toggler, 'Toggler');
+Foundation.plugin(Tooltip, 'Tooltip');
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+export { Foundation };
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
new file mode 100644
--- /dev/null
+++ b/src/assets/scss/_settings.scss
@@ -0,0 +1,894 @@
+// 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. Card
+// 15. Close Button
+// 16. Drilldown
+// 17. Dropdown
+// 18. Dropdown Menu
+// 19. Flexbox Utilities
+// 20. Forms
+// 21. Label
+// 22. Media Object
+// 23. Menu
+// 24. Meter
+// 25. Off-canvas
+// 26. Orbit
+// 27. Pagination
+// 28. Progress Bar
+// 29. Prototype Arrow
+// 30. Prototype Border-Box
+// 31. Prototype Border-None
+// 32. Prototype Bordered
+// 33. Prototype Display
+// 34. Prototype Font-Styling
+// 35. Prototype List-Style-Type
+// 36. Prototype Overflow
+// 37. Prototype Position
+// 38. Prototype Rounded
+// 39. Prototype Separator
+// 40. Prototype Shadow
+// 41. Prototype Sizing
+// 42. Prototype Spacing
+// 43. Prototype Text-Decoration
+// 44. Prototype Text-Transformation
+// 45. Prototype Text-Utilities
+// 46. Responsive Embed
+// 47. Reveal
+// 48. Slider
+// 49. Switch
+// 50. Table
+// 51. Tabs
+// 52. Thumbnail
+// 53. Title Bar
+// 54. Tooltip
+// 55. Top Bar
+// 56. Xy Grid
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+ primary: #1779ba,
+ secondary: #767676,
+ success: #3adb76,
+ warning: #ffae00,
+ alert: #cc4b37,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-safe-padding: false;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
+$global-text-direction: ltr;
+$global-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-button-cursor: auto;
+$global-color-pick-contrast-tolerance: 0;
+$print-transparent-backgrounds: true;
+$print-hrefs: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+ small: 0,
+ medium: 640px,
+ large: 1024px,
+ xlarge: 1200px,
+ xxlarge: 1440px,
+);
+$breakpoints-hidpi: (
+ hidpi-1: 1,
+ hidpi-1-5: 1.5,
+ hidpi-2: 2,
+ retina: 2,
+ hidpi-3: 3
+);
+$print-breakpoint: large;
+$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;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-styles: (
+ small: (
+ 'h1': ('font-size': 24),
+ 'h2': ('font-size': 20),
+ 'h3': ('font-size': 19),
+ 'h4': ('font-size': 18),
+ 'h5': ('font-size': 17),
+ 'h6': ('font-size': 16),
+ ),
+ medium: (
+ 'h1': ('font-size': 48),
+ 'h2': ('font-size': 40),
+ 'h3': ('font-size': 31),
+ 'h4': ('font-size': 25),
+ 'h5': ('font-size': 20),
+ 'h6': ('font-size': 16),
+ ),
+);
+$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;
+$enable-code-inline: true;
+$anchor-color: $primary-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;
+$enable-cite-block: true;
+$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;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$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: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-font-weight: null;
+$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-border: 1px solid transparent;
+$button-hollow-border-width: 1px;
+$button-sizes: (
+ tiny: 0.6rem,
+ small: 0.75rem,
+ default: 0.9rem,
+ large: 1.25rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-sizes: (
+ small: 0.5rem,
+ default: 1rem,
+ large: 3rem,
+);
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
+$closebutton-offset-horizontal: (
+ small: 0.66rem,
+ medium: 1rem,
+);
+$closebutton-offset-vertical: (
+ small: 0.33em,
+ medium: 0.5rem,
+);
+$closebutton-size: (
+ small: 1.5em,
+ medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
+$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$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,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
+$dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-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: $black;
+$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: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing * 0.5;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
+$menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
+$menu-item-background-active: get-color(primary);
+$menu-icon-spacing: 0.25rem;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+
+// 24. 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;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+ small: 250px,
+);
+$offcanvas-vertical-sizes: (
+ small: 250px,
+);
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
+$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';
+
+// 26. 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;
+
+// 27. 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: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
+
+// 28. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+ down,
+ up,
+ right,
+ left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+ inline,
+ inline-block,
+ block,
+ table,
+ table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+ disc,
+ circle,
+ square
+);
+$prototype-style-type-ordered: (
+ decimal,
+ lower-alpha,
+ lower-latin,
+ lower-roman,
+ upper-alpha,
+ upper-latin,
+ upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+ visible,
+ hidden,
+ scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+ static,
+ relative,
+ absolute,
+ fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+ width,
+ height
+);
+$prototype-sizes: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+ overline,
+ underline,
+ line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+ lowercase,
+ uppercase,
+ capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+ default: 4 by 3,
+ widescreen: 16 by 9,
+);
+
+// 47. Reveal
+// ----------
+
+$reveal-background: $white;
+$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);
+
+// 48. 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;
+
+// 49. 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: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: 0.5;
+$switch-cursor-disabled: not-allowed;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$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-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
+
+// 51. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$thumbnail-border: 4px solid $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;
+
+// 53. 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;
+
+// 54. Tooltip
+// -----------
+
+$has-tip-cursor: help;
+$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-max-width: 10rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+ small: 20px,
+ medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,65 @@
+@charset 'utf-8';
+
+@import 'settings';
+@import 'foundation';
+@import 'motion-ui';
+
+// Global styles
+@include foundation-global-styles;
+@include foundation-forms;
+@include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
+@include foundation-button;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-range-input;
+@include foundation-switch;
+@include foundation-table;
+// Basic components
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
+@include foundation-title-bar;
+@include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+@include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
+
+// Motion UI
+@include motion-ui-transitions;
+@include motion-ui-animations;
diff --git a/src/assets/scss/components/.gitkeep b/src/assets/scss/components/.gitkeep
new file mode 100644
diff --git a/src/assets/scss/global/_typography.scss b/src/assets/scss/global/_typography.scss
new file mode 100644
diff --git a/src/data/.gitkeep b/src/data/.gitkeep
new file mode 100644
diff --git a/src/layouts/default.html b/src/layouts/default.html
new file mode 100644
--- /dev/null
+++ b/src/layouts/default.html
@@ -0,0 +1,16 @@
+<!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>Join Nasqueron</title>
+ <link rel="stylesheet" href="{{root}}assets/css/app.css">
+</head>
+<body>
+
+{{> body}}
+
+<script src="{{root}}assets/js/app.js"></script>
+</body>
+</html>
diff --git a/src/pages/index.html b/src/pages/index.html
new file mode 100644
--- /dev/null
+++ b/src/pages/index.html
@@ -0,0 +1,150 @@
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <h1>Welcome to Nasqueron</h1>
+ </div>
+ </div>
+
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <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="grid-x grid-padding-x">
+ <div class="large-4 medium-4 medium-push-2 cell">
+ <p><a href="https://get.foundation/sites/docs/">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+ </div>
+ <div class="large-4 medium-4 medium-push-2 cell">
+ <p><a href="https://github.com/foundation/foundation-emails/discussions">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="large-4 medium-4 medium-push-2 cell">
+ <p><a href="http://github.com/foundation/foundation-sites">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+ </div>
+ <div class="large-4 medium-4 medium-pull-2 cell">
+ <p><a href="https://twitter.com/FoundationCSS">@FoundationCSS</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="grid-x grid-padding-x">
+ <div class="large-8 medium-8 cell">
+ <h5>Here&rsquo;s your basic grid:</h5>
+ <!-- Grid Example -->
+
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <div class="primary callout">
+ <p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
+ </div>
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="large-6 medium-6 cell">
+ <div class="primary callout">
+ <p>Six cell</p>
+ </div>
+ </div>
+ <div class="large-6 medium-6 cell">
+ <div class="primary callout">
+ <p>Six cell</p>
+ </div>
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="large-4 medium-4 small-4 cell">
+ <div class="primary callout">
+ <p>Four cell</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 cell">
+ <div class="primary callout">
+ <p>Four cell</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 cell">
+ <div class="primary callout">
+ <p>Four cell</p>
+ </div>
+ </div>
+ </div>
+
+ <hr />
+
+ <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+ <form>
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-12.cell" />
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="large-4 medium-4 cell">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-4.cell" />
+ </div>
+ <div class="large-4 medium-4 cell">
+ <label>Input Label</label>
+ <input type="text" placeholder="large-4.cell" />
+ </div>
+ <div class="large-4 medium-4 cell">
+ <div class="grid-x">
+ <label>Input Label</label>
+ <div class="input-group">
+ <input type="text" placeholder="small-9.cell" class="input-group-field" />
+ <span class="input-group-label">.com</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <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="grid-x grid-padding-x">
+ <div class="large-6 medium-6 cell">
+ <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 cell">
+ <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="grid-x grid-padding-x">
+ <div class="large-12 cell">
+ <label>Textarea Label</label>
+ <textarea placeholder="small-12.cell"></textarea>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div class="large-4 medium-4 cell">
+ <h5>Try one of these buttons:</h5>
+ <p><a href="#" class="button">Simple Button</a><br/>
+ <a href="#" class="success button">Success Btn</a><br/>
+ <a href="#" class="alert button">Alert Btn</a><br/>
+ <a href="#" class="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="https://get.foundation/sites/docs/" class="small button">Go to Foundation Docs</a>
+ </div>
+ </div>
+ </div>
+ </div>
diff --git a/src/partials/.gitkeep b/src/partials/.gitkeep
new file mode 100644

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 17:15 (18 h, 37 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2267108
Default Alt Text
D3116.id7948.diff (48 KB)

Event Timeline

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