silvandiepen

### Packages

- [Vue Grid](https://www.npmjs.com/package/@sil/grid)
- [Vue Paroller](https://www.npmjs.com/package/@sil/paroller)
- [Vue Ratio](https://www.npmjs.com/package/@sil/ratio)
- [Vue Pointer](https://npmjs.com/sildcss-order.svd.im)
- [Vue Reload](https://www.npmjs.com/package/@sil/reload)
- [Vue Scroll Parallax](https://www.npmjs.com/package/@sil/scroll-parallax)
- [Vue Scroll Progress](https://www.npmjs.com/package/@sil/scroll-progress)
- [Vue ScrollTo](https://www.npmjs.com/package/@sil/scrollto)

silvandiepen

const fs = require('fs');
const nuxtConfig = 'nuxt.config.js';

String.prototype.splice = function(idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

fs.readFile(nuxtConfig, 'utf8', function(err, data) {
    if (err) {
        return console.log(err);

silvandiepen

// Basics
@import 'tools/pre';
@import 'typography/embed';

// Define output settings for project
$output: set-output(css, true);
$output: set-output(reset-extra, false);
$output: set-output(color-background-colors, true);
$output: set-output(color-text-colors, true);
$output: set-output(blockquote, false);

silvandiepen

@function pixels($matrix, $type) {
	$value: '';
	$width: length(nth($matrix, 1));
	$height: length($matrix);

	$gradients: ();
	$positions: ();
	$pixel-sizes: ();

	//   //ROW

silvandiepen

/*
Make elements behave with ratios. Responsively. Packed in a Vue directive. 
*/

import Vue from "vue";
Vue.directive("ratio", {
  bind: function(el, binding, vnode) {
    function setStyle() {
      let check = {
        small: 0,

silvandiepen

import Vue from 'vue';
Vue.directive('paroller', {
	bind: function(el, binding) {
		let working = false;
		let scrollAction = function() {
			working = false;
		};

		// Methods
		let getScroll = {

silvandiepen

/* A little documentation.
Add the selector v-scrollto to the element you want to scroll from.
To scroll to an element, give the v-scrollto the id or class of the element to scroll to

	`<a v-scrollto="'#element-to-scroll-to">`

If you don't give a value. The directive will look for an href selector with a '#'value.

	`<a href="#element-to-scroll-to" v-scrollto></a>`

silvandiepen

/**
 * CSS conic-gradient() polyfill
 * By Lea Verou — http://lea.verou.me
 * MIT license
 */

(function(){

var π = Math.PI;
var τ = 2 * π;

silvandiepen

app.service('ColorService', [function() {
        'use strict';

        var self = this;
        
        // RGB to CMYK

        self.hexToCmyk = function hexToCmyk(hex) {
            var tint = tint | 'all';
            var rgb = self.hexToRgb(hex);

silvandiepen

// using colors in the scss

body{ background: color(White); 
  
  // Give the p elements a black text color
  p{ color: color(Black); }
  
  
  // Set a half transparent green background 
  ul{ background-color: color(Green,.5);