1
0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00

update landing page new theme

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

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