update landing page new theme

gh-pages/js/main.js

@@ -0,0 +1,77 @@
+/* global $, Vue, axios */
+/* eslint no-undef: "error", semi: 2 */
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Copy
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ */
+
+new ClipboardJS('.btn-copy');
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Functions
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+function lightOrDark(color) {
+  // Variables for red, green, blue values
+  var r, g, b, hsp;
+  // Check the format of the color, HEX or RGB?
+  if (color.match(/^rgb/)) {
+    // If RGB --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If hex --> Convert it to RGB: http://gist.github.com/983661
+    color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+  // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 127.5) {
+    return 'light';
+  } else {
+    return 'dark';
+  }
+}
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Vue App
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+var $getUrl = 'https://raw.githubusercontent.com/Mayccoll/Gogh/master/data/themes.json';
+
+const $app = {
+  data () {
+    return {
+      themes: [],
+      filter: 'all'
+    };
+  },
+  created () {
+    axios.get($getUrl)
+      .then((response) => {
+        this.themes = response.data.themes;
+        this.themes.forEach((v) => {
+          v.category = lightOrDark(v.background);
+        });
+      });
+  },
+  methods: {
+    setFilter: function (f) {
+      this.filter = '';
+      setTimeout(() => { this.filter = f; }, 50);
+    }
+  }
+};
+
+Vue.createApp($app).mount('#js-vue-app');

gh-pages/sass/_base.scss

@@ -0,0 +1,250 @@
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Colors
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+:root {
+  --color-blue       : #65d8ee;
+  --color-green      : #A6E22E;
+  --color-yellow     : #E6DB74;
+  --color-orange     : #FD971F;
+  --color-red        : #F92672;
+  --color-purple     : #AE81FF;
+  --color-cyan       : #0F94CF;
+  /* */
+  --color-grey-light : #E9E9E9;
+  --color-grey-medium: #7E868C;
+  --color-grey-dark  : #333E47;
+  /* */
+  --color-black      : #000000;
+  --color-white      : #FFFFFF;
+  /* */
+  --color-primary    : var(--color-blue);
+  --color-success    : var(--color-green);
+  --color-info       : var(--color-yellow);
+  --color-warning    : var(--color-orange);
+  --color-danger     : var(--color-red);
+}
+
+$color_blue       : var(--color-blue);
+$color_green      : var(--color-green);
+$color_yellow     : var(--color-yellow);
+$color_orange     : var(--color-orange);
+$color_red        : var(--color-red);
+$color_purple     : var(--color-purple);
+$color_cyan       : var(--color-cyan);
+/* */
+$color_grey_light : var(--color-grey-light);
+$color_grey_medium: var(--color-grey-medium);
+$color_grey_dark  : var(--color-grey-dark);
+/* */
+$color_black      : var(--color-black);
+$color_white      : var(--color-white);
+/* */
+$color_primary    : $color_blue;
+$color_success    : $color_green;
+$color_info       : $color_yellow;
+$color_warning    : $color_orange;
+$color_danger     : $color_red;
+
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Fonts
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+$font_roboto_default: 'Roboto', sans-serif;
+/* */
+$font_default  : $font_roboto_default;
+$font_normal   : $font_default;
+/* */
+$font_size_base: 1.6rem;
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  General
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+body,
+html {
+  height   : 100%;
+  font-size: 10px;
+}
+
+body {
+  color                   : $color_black;
+  font-size               : $font_size_base;
+  font-family             : $font_default;
+
+  -webkit-font-smoothing  : antialiased;
+  -moz-osx-font-smoothing : grayscale;
+  -webkit-font-smoothing  : antialiased;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust    : 100%;
+}
+/**
+ * ::::::: Typography
+*/
+p {
+  color       : $color_black;
+  font-weight : 400;
+  font-style  : normal;
+  font-variant: normal;
+  font-size   : $font_size_base;
+  line-height : 1.4;
+}
+
+h1 {
+  margin      : 0;
+  color       : $color_primary;
+  font-size   : $font_size_base + 2.4;
+  line-height : 1;
+}
+
+h2 {
+  margin      : 0;
+  font-size   : $font_size_base + 1.5;
+  line-height : 1;
+}
+
+h3 {
+  margin      : 0;
+  font-size   : $font_size_base + .9;
+  line-height : 1;
+}
+
+h4 {
+  margin      : 0;
+  font-size   : $font_size_base + .6;
+  line-height : 1;
+}
+
+h5 {
+  margin      : 0;
+  font-size   : $font_size_base + .3;
+  line-height : 1;
+}
+
+h6 {
+  margin      : 0;
+  font-size   : $font_size_base;
+  line-height : 1;
+}
+
+strong {
+  font-weight: 900;
+}
+
+small {
+  font-size: $font_size_base - 3;
+}
+
+em {
+  font-style: italic;
+}
+
+blockquote > p {
+  margin        : $font_size_base;
+  padding       : 0;
+  border-color  : #ccc;
+  border-color  : rgba(0,0,0,0.2);
+  border-top    : 2px solid;
+  border-bottom : 2px solid;
+  border-radius : 0.25em;
+  color         : #888;
+  letter-spacing: 0.05em;
+  font-style    : italic;
+  font-size     : $font_size_base + 3;
+}
+
+ol {
+  padding: 0;
+
+  li {
+    margin-left: $font_size_base;
+    padding    : 0;
+  }
+}
+
+ul {
+  padding: 0;
+
+  li {
+    margin-left: $font_size_base;
+    padding    : 0;
+  }
+}
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Media
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+/**
+ * ::::::: Media Width
+ */
+@mixin m360  { @media (min-width: 360px)  { @content; } }
+@mixin m450  { @media (min-width: 450px)  { @content; } }
+@mixin m576  { @media (min-width: 576px)  { @content; } }
+@mixin m600  { @media (min-width: 600px)  { @content; } }
+@mixin m650  { @media (min-width: 650px)  { @content; } }
+@mixin m768  { @media (min-width: 768px)  { @content; } }
+@mixin m800  { @media (min-width: 800px)  { @content; } }
+@mixin m900  { @media (min-width: 900px)  { @content; } }
+@mixin m992  { @media (min-width: 992px)  { @content; } }
+@mixin m1200 { @media (min-width: 1200px) { @content; } }
+@mixin m1400 { @media (min-width: 1400px) { @content; } }
+@mixin m1800 { @media (min-width: 1800px) { @content; } }
+@mixin m2200 { @media (min-width: 2200px) { @content; } }
+
+/**
+ * ::::::: Media Height
+ */
+@mixin h360  { @media (min-height: 360px)  { @content; } }
+@mixin h450  { @media (min-height: 450px)  { @content; } }
+@mixin h576  { @media (min-height: 576px)  { @content; } }
+@mixin h600  { @media (min-height: 600px)  { @content; } }
+@mixin h650  { @media (min-height: 650px)  { @content; } }
+@mixin h768  { @media (min-height: 768px)  { @content; } }
+@mixin h800  { @media (min-height: 800px)  { @content; } }
+@mixin h900  { @media (min-height: 900px)  { @content; } }
+@mixin h992  { @media (min-height: 992px)  { @content; } }
+@mixin h1200 { @media (min-height: 1200px) { @content; } }
+@mixin h1400 { @media (min-height: 1400px) { @content; } }
+@mixin h1800 { @media (min-height: 1800px) { @content; } }
+@mixin h2200 { @media (min-height: 2200px) { @content; } }
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Helpers
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+.center {text-align: center}
+
+.black {color: $color_black}
+.white {color: $color_white}
+.red {color: $color_red}
+.yellow {color: $color_yellow}
+.green {color: $color_green}
+.blue {color: $color_blue}
+.purple {color: $color_purple}
+.orange {color: $color_orange}
+.cyan {color: $color_cyan}
+.grey-light {color: $color_grey_light}
+.grey-medium {color: $color_grey_medium}
+.grey-dark {color: $color_grey_dark}
+
+.bg-black {background-color: $color_black}
+.bg-white {background-color: $color_white}
+.bg-red {background-color: $color_red}
+.bg-yellow {background-color: $color_yellow}
+.bg-green {background-color: $color_green}
+.bg-blue {background-color: $color_blue}
+.bg-purple {background-color: $color_purple}
+.bg-orange {background-color: $color_orange}
+.bg-cyan {background-color: $color_cyan}
+.bg-grey-light {background-color: $color_grey_light}
+.bg-grey-medium {background-color: $color_grey_medium}
+.bg-grey-dark {background-color: $color_grey_dark}