mirror/Gogh
1
0
Fork 0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00
Code Issues Projects Releases Wiki Activity

update landing page new theme

Browse Source
This commit is contained in:
Mayccoll 2020-12-19 00:07:07 -05:00
parent 26430dfa04
commit 7f795cd7b0
19 changed files with 939 additions and 5549 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
.editorconfig
View File

@ -1,38 +0,0 @@
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
max_line_length = 80
trim_trailing_whitespace = true
insert_final_newline = true
[*.html]
indent_style = space
indent_size = 4
[*.{css,scss,less}]
indent_style = space
indent_size = 2
[*.js]
indent_style = space
indent_size = 2
[*.json]
indent_style = space
indent_size = 2
[*.txt]
indent_style = space
indent_size = 4
[*.{diff,md}]
trim_trailing_whitespace = false

4
components/jquery/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
components/mixitup/jquery.mixitup.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

4184
data/themes.js
View File

File diff suppressed because it is too large Load Diff

1
data/themes.json
View File

File diff suppressed because one or more lines are too long

0
img/README
View File

1
img/cd-icon-arrow.svg
View File

@ -1 +0,0 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>.st0{fill:#BBBBBB;}</style><path class="st0" d="M.9 5.5l2.2-2.1L8 8.3l4.9-4.9 2.2 2.1L8 12.6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 205 B

1
img/cd-icon-check.svg
View File

@ -1 +0,0 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}</style><path class="st0" d="M4 7l3 3 5-5"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 220 B

1
img/cd-icon-filter.svg
View File

@ -1 +0,0 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>.st0{fill:#8F83B8;}</style><path class="st0" d="M10 3h6v2h-6zM3 7h6V1H3v2H0v2h3zM0 11h6v2H0zM13 9H7v6h6v-2h3v-2h-3z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 227 B

3
img/clippy.svg
View File

@ -1,3 +0,0 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
<style xmlns="" type="text/css" id="undefined"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 565 B

2
index.html
View File

File diff suppressed because one or more lines are too long

389
index.src.html
View File

@ -14,222 +14,247 @@
<link rel=icon type=image/png sizes=16x16 href=./favicons/favicon.png>
<link rel=icon href=favicons/favicon.ico>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=stylesheet>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css" integrity="sha512-QTQigm89ZvHzwoJ/NgJPghQPegLIwnXuOXWEdAjjOvpE9uaBGeI05+auj0RjYVr86gtMaBJRKi8hWZVsrVe/Ug==" crossorigin="anonymous" />
<link rel=stylesheet href=./css/main.min.css inline>
</head>
<body>
<a href=https://github.com/Mayccoll/Gogh>
<img
loading="lazy"
width="149"
height="149"
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1">
</a>
<header class=cd-header>
<header class=gogh-header>
<h1>
<span> Gogh </span>
<img src=https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo.png alt="">
<img src="https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo-dark.png" alt="">
</h1>
</header>
<a href=https://github.com/Mayccoll/Gogh>
<img
style="position: absolute; top: 0; right: 0; border: 0;"
src=https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67
alt="Fork me on GitHub"
data-canonical-src=https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png>
</a>
<div class=gogh-content>
<h2>
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal
</h2>
<p>
Color Schemes For Ubuntu, Linux Mint, Elementary OS and all distributions that use Gnome Terminal, Pantheon Terminal, Tilix, or XFCE4 Terminal; initially inspired by Elementary OS Luna. Also works on iTerm for macOS.
</p>
<h3> Install </h3>
<p>
Just copy and paste One line command.
</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal
</h2>
<p>
Color Schemes For Ubuntu, Linux Mint, Elementary OS and all distributions that use Gnome Terminal, Pantheon Terminal, Tilix, or XFCE4 Terminal; initially inspired by Elementary OS Luna. Also works on iTerm for macOS.
</p>
<div class="code-wrap">
<p>Linux</p>
<pre><code class="language-bash" id="code-linux"> bash -c "$(wget -qO- https://git.io/vQgMr)" </code></pre>
<span class="btn-copy" data-clipboard-target="#code-linux">
<img class="clippy" src="./img/clippy.svg" alt="Copy to clipboard">
</span>
<div class=github-int>
<a class="github-button"
href=https://github.com/Mayccoll/Gogh
data-color-scheme="no-preference: dark; light: light; dark: dark;"
data-size=large
aria-label="Star ntkme/github-buttons on GitHub">
View
</a>
<!-- Place this tag where you want the button to render. -->
<a class="github-button"
href="https://github.com/Mayccoll/Gogh"
data-color-scheme="no-preference: dark; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star ntkme/github-buttons on GitHub">
Star
</a>
</div>
<h3> Install </h3>
<p>
Just copy and paste One line command.
</p>
<div class="code-wrap">
<h4>Linux</h4>
<pre><code class="language-bash" id="code-linux">bash -c "$(wget -qO- https://git.io/vQgMr)" </code></pre>
<span class="btn-copy" data-clipboard-target="#code-linux">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"> <path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/> <path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/> <rect width="32" height="32" fill="none"/> </svg>
</span>
</div>
<div class="code-wrap">
<h4>Mac</h4>
<pre><code class="language-bash" id="code-mac">bash -c "$(curl -sLo- https://git.io/vQgMr)" </code></pre>
<span class="btn-copy" data-clipboard-target="#code-mac">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"> <path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/> <path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/> <rect width="32" height="32" fill="none"/> </svg>
</span>
</div>
</div>
</div>
</div>
<div class="code-wrap">
<p>Mac</p>
<pre><code class="language-bash" id="code-mac"> bash -c "$(curl -sLo- https://git.io/vQgMr)" </code></pre>
<span class="btn-copy" data-clipboard-target="#code-mac">
<img class="clippy" src="./img/clippy.svg" alt="Copy to clipboard">
</span>
</div>
<main class=gogh-terminal>
<div id="js-vue-app">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filters">
<button class="btn"
v-bind:class="{ active: filter === 'all' }"
v-on:click="setFilter('all')">
All
</button>
<button class="btn"
v-bind:class="{ active: filter === 'light' }"
v-on:click="setFilter('light')">
Light Themes
</button>
<button class="btn"
v-bind:class="{ active: filter === 'dark' }"
v-on:click="setFilter('dark')">
Dark Themes
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<template v-for="theme in themes">
<div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all'">
<div class="terminal">
<div class=bar>
<div class="bar__title">
{{ theme.name }}
</div>
<div class="bar__btns">
<span class="btn--terminal btn--min"></span>
<span class="btn--terminal btn--max"></span>
<span class="btn--terminal btn--close"></span>
</div>
</div>
<div class="body" :style="'background-color: ' + theme.background">
<div class="body__bar body__bar--top">
<span :style="'background-color: ' + theme.black"></span>
<span :style="'background-color: ' + theme.red"></span>
<span :style="'background-color: ' + theme.green"></span>
<span :style="'background-color: ' + theme.yellow"></span>
<span :style="'background-color: ' + theme.blue"></span>
<span :style="'background-color: ' + theme.purple"></span>
<span :style="'background-color: ' + theme.cyan"></span>
<span :style="'background-color: ' + theme.white"></span>
</div>
<div class="body__bar body__bar--bottom">
<span :style="'background-color: ' + theme.brightBlack"></span>
<span :style="'background-color: ' + theme.brightRed"></span>
<span :style="'background-color: ' + theme.brightGreen"></span>
<span :style="'background-color: ' + theme.brightYellow"></span>
<span :style="'background-color: ' + theme.brightBlue"></span>
<span :style="'background-color: ' + theme.brightPurple"></span>
<span :style="'background-color: ' + theme.brightCyan"></span>
<span :style="'background-color: ' + theme.brightWhite"></span>
</div>
<div class="body__txt">
<p :style="'color: ' + theme.black">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 01 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.red">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 02 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.green">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 03 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.yellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 04 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.blue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 05 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.purple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 06 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.cyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 07 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.white">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 08 ---</span> &block;&block;&block;
</p>
<br>
<p :style="'color: ' + theme.brightBlack">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 09 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightRed">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 10 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightGreen">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 11 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightYellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 12 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightBlue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 13 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightPurple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 14 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightCyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 15 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + theme.brightWhite">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 16 ---</span> &block;&block;&block;
</p>
</div>
<div class=github-int>
<a data-style=mega
href=https://github.com/Mayccoll/Gogh
data-size="large"
class=github-button>
View on Github
</a>
<div class="cmd">
<span class="cmd__ini" :style="'color: ' + theme.foreground">$</span>
<span class="cmd__sudo" :style="'color: ' + theme.red">sudo</span>
<span class="cmd__apt" :style="'color: ' + theme.green">apt</span>
<span class="cmd__install" :style="'color: ' + theme.foreground">install</span>
<span class="cmd__linux" :style="'color: ' + theme.foreground">linux</span>
<span class="cmd__cursor" :style="'color: ' + theme.foreground">|</span>
</div>
<!-- Place this tag where you want the button to render. -->
<a class="github-button"
href="https://github.com/Mayccoll/Gogh"
data-color-scheme="no-preference: dark; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star ntkme/github-buttons on GitHub">Star</a>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</main>
</div>
<main class=cd-main-content>
<div id="js-vue-app">
<div class="container-fluid">
<div class="row">
<template v-for="value in schemes_data.schemes">
<div class="col-md-6 col-lg-6 col-xl-4">
<terminal v-bind:data="value" />
</div>
</template>
</div>
</div>
</div>
</main>
<footer>
credits:
<a target=_blank href="https://mixitup.kunkalabs.com/"> Mixitup </a> -
<a target=_blank href="https://codyhouse.co/gem/content-filter/"> Codyhouse </a> -
<a target=_blank href="https://clipboardjs.com/"> Clipboardjs </a> put it all together :
<a href=https://lanet.co>Lanet.co</a>
</footer>
<template id="template-terminal">
<div class="terminal">
<div class=bar>
<div class="bar__title">
{{ data.name }}
</div>
<div class="bar__btns">
<span class="btn btn--min"></span>
<span class="btn btn--max"></span>
<span class="btn btn--close"></span>
</div>
</div>
<div class="body" :style="'background-color: ' + data.background">
<div class="body__bar body__bar--top">
<span :style="'background-color: ' + data.black"></span>
<span :style="'background-color: ' + data.red"></span>
<span :style="'background-color: ' + data.green"></span>
<span :style="'background-color: ' + data.yellow"></span>
<span :style="'background-color: ' + data.blue"></span>
<span :style="'background-color: ' + data.purple"></span>
<span :style="'background-color: ' + data.cyan"></span>
<span :style="'background-color: ' + data.white"></span>
</div>
<div class="body__bar body__bar--bottom">
<span :style="'background-color: ' + data.brightBlack"></span>
<span :style="'background-color: ' + data.brightRed"></span>
<span :style="'background-color: ' + data.brightGreen"></span>
<span :style="'background-color: ' + data.brightYellow"></span>
<span :style="'background-color: ' + data.brightBlue"></span>
<span :style="'background-color: ' + data.brightPurple"></span>
<span :style="'background-color: ' + data.brightCyan"></span>
<span :style="'background-color: ' + data.brightWhite"></span>
</div>
<div class="body__txt">
<p :style="'color: ' + data.black">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 01 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.red">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 02 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.green">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 03 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.yellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 04 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.blue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 05 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.purple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 06 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.cyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 07 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.white">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 08 ---</span> &block;&block;&block;
</p>
<br>
<p :style="'color: ' + data.brightBlack">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 09 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightRed">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 10 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightGreen">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 11 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightYellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 12 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightBlue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 13 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightPurple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 14 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightCyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 15 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightWhite">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 16 ---</span> &block;&block;&block;
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<div class="cmd">
<span class="cmd__ini" :style="'color: ' + data.foreground">$</span>
<span class="cmd__sudo" :style="'color: ' + data.red">sudo</span>
<span class="cmd__apt" :style="'color: ' + data.green">apt</span>
<span class="cmd__install" :style="'color: ' + data.foreground">install</span>
<span class="cmd__linux" :style="'color: ' + data.foreground">linux</span>
<span class="cmd__cursor" :style="'color: ' + data.foreground">|</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script>
</div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src=https://buttons.github.io/buttons.js async="" defer="" id=github-bjs></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src=./js/main.min.js inline></script>
<script src="./data/themes.js"></script>
<script src=./js/vue.js inline></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.3/shuffle.min.js" integrity="sha512-VHIYn9ssmuPBliadBEgGCTRtCO4agkhQCxiPaTBKaAq0cm2KKpX+PE2klG1VfOHKKcN5eZcev0M3s5V2xXxVew==" crossorigin="anonymous"></script>
<script src=./js/main.min.js inline></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src=./js/main.js inline></script>
<div id=master-dev style=display:none>
4d 69 67 75 65 6c 20 44 2e 20 51 75 69 6e 74 65 72 6f 20 2d 20 6d 69 67 75 65 6c 64 61 76 69 64 71 40 67 6d 61 69 6c 2e 63 6f 6d

77
js/main.js Normal file
View File

@ -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');

8
js/main.min.js vendored
View File

@ -1,8 +0,0 @@
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Copy
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
new ClipboardJS('.btn-copy');

21
js/vue.js
View File

@ -1,21 +0,0 @@
/* global $, fetch, console, Vue, $users */
/* eslint no-undef: "error", semi: 2 */
/* jshint esversion: 6 */
Vue.component('terminal', {
template: '#template-terminal',
props: {
data: {
type: Object
}
}
});
var $app = new Vue({
el: '#js-vue-app',
data: function () {
return {
schemes_data: $schemes
}
}
});

250
sass/_base.scss Normal file
View File

@ -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}

1341
sass/main.scss
View File

File diff suppressed because it is too large Load Diff

164
sass/terminal.scss Normal file
View File

@ -0,0 +1,164 @@
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Terminal
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.terminal {
box-sizing: border-box;
margin : 0 0 50px;
box-shadow: 5px 5px 11px #737373, -5px -5px 11px #b1b1b1;
animation : slideIn ease 0.4s forwards;
.btn--terminal {
display : inline-block;
width : 10px;
height : 10px;
margin : 0 4px;
cursor : pointer;
border-radius : 100px;
background-color: #000000;
}
.btn--min {
border : 1px solid darken(#868686, 10%);
background-color: #868686;
}
.btn--max {
border : 1px solid darken(#656565, 10%);
background-color: #656565;
}
.btn--close {
border : 1px solid darken(#171717, 10%);
background-color: #171717;
}
.cmd__cursor {
animation: 1s blink step-end infinite;
}
.bar {
position : relative;
width : 100%;
height : 25px;
text-align : center;
border-radius : 5px 5px 0 0;
background-color: #D9D9D9;
font-size : 0;
.bar__title {
position : absolute;
top : 4px;
right : 0;
left : 0;
margin : 0 auto;
color : #5e5e5e;
font-family: Arial;
font-size : 14px;
font-weight: 400;
line-height: 1.2;
}
.bar__btns {
position: absolute;
top : 7px;
right : 10px;
}
}
.body {
box-sizing : border-box;
padding : 30px;
border : 1px solid #D9D9D9;
border-radius: 0 0 5px 5px;
.body__txt {
margin: 0 0 30px;
p {
margin : 0;
padding : 0;
font-size : 20px;
line-height: 1.1;
@include m360 {}
@include m450 {}
@include m576 {}
@include m600 {}
@include m768 {
font-size: 14px;
}
@include m900 {}
@include m992 {
font-size: 20px;
}
@include m1200 {
font-size: 18px;
}
@include m1400 {}
@include m1800 {}
@include m2200 {}
span {
letter-spacing: 2px;
font-size : 16px;
@include m360 {}
@include m450 {}
@include m576 {}
@include m600 {}
@include m768 {
letter-spacing: 1px;
font-size : 12px;
}
@include m900 {}
@include m992 {
letter-spacing: 1.5px;
font-size : 15px;
}
@include m1200 {
font-size: 10px;
}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
}
}
.body__bar {
font-size: 0;
span {
display: inline-block;
width : 12.5%;
height : 30px;
}
}
.body__bar--bottom {
margin: 0 0 30px;
}
}
}
@keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity : 0;
transform: scale(0);
}
to {
opacity : 1;
transform: scale(1);
}
}