mirror of https://github.com/Mayccoll/Gogh.git
update landing page new theme
This commit is contained in:
Mayccoll
parent
7da9a87c98
commit
a8561aaaee
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 205 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 220 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 227 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 565 B |
File diff suppressed because one or more lines are too long
|
|
@ -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">
|
||||
███ <span>*** AaBbMmYyZz . Color 01 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.red">
|
||||
███ <span>*** AaBbMmYyZz . Color 02 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.green">
|
||||
███ <span>*** AaBbMmYyZz . Color 03 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.yellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 04 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.blue">
|
||||
███ <span>*** AaBbMmYyZz . Color 05 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.purple">
|
||||
███ <span>*** AaBbMmYyZz . Color 06 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.cyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 07 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.white">
|
||||
███ <span>*** AaBbMmYyZz . Color 08 ---</span> ███
|
||||
</p>
|
||||
<br>
|
||||
<p :style="'color: ' + theme.brightBlack">
|
||||
███ <span>*** AaBbMmYyZz . Color 09 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightRed">
|
||||
███ <span>*** AaBbMmYyZz . Color 10 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightGreen">
|
||||
███ <span>*** AaBbMmYyZz . Color 11 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightYellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 12 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightBlue">
|
||||
███ <span>*** AaBbMmYyZz . Color 13 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightPurple">
|
||||
███ <span>*** AaBbMmYyZz . Color 14 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightCyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 15 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightWhite">
|
||||
███ <span>*** AaBbMmYyZz . Color 16 ---</span> ███
|
||||
</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">
|
||||
███ <span>*** AaBbMmYyZz . Color 01 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.red">
|
||||
███ <span>*** AaBbMmYyZz . Color 02 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.green">
|
||||
███ <span>*** AaBbMmYyZz . Color 03 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.yellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 04 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.blue">
|
||||
███ <span>*** AaBbMmYyZz . Color 05 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.purple">
|
||||
███ <span>*** AaBbMmYyZz . Color 06 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.cyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 07 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.white">
|
||||
███ <span>*** AaBbMmYyZz . Color 08 ---</span> ███
|
||||
</p>
|
||||
<br>
|
||||
<p :style="'color: ' + data.brightBlack">
|
||||
███ <span>*** AaBbMmYyZz . Color 09 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightRed">
|
||||
███ <span>*** AaBbMmYyZz . Color 10 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightGreen">
|
||||
███ <span>*** AaBbMmYyZz . Color 11 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightYellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 12 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightBlue">
|
||||
███ <span>*** AaBbMmYyZz . Color 13 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightPurple">
|
||||
███ <span>*** AaBbMmYyZz . Color 14 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightCyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 15 ---</span> ███
|
||||
</p>
|
||||
<p :style="'color: ' + data.brightWhite">
|
||||
███ <span>*** AaBbMmYyZz . Color 16 ---</span> ███
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
/**
|
||||
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
* ······· Copy
|
||||
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
*/
|
||||
|
||||
new ClipboardJS('.btn-copy');
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue