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

Browse Source
This commit is contained in:
Mayccoll 2021-05-01 13:13:34 -05:00
parent 77ca9d82c0
commit f6804f5c4e
6 changed files with 299 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gh-pages/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
gh-pages/index.html
View File

File diff suppressed because one or more lines are too long

75
gh-pages/index.src.html
View File

@ -17,10 +17,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.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> <link rel=stylesheet href=./css/main.min.css inline>
</head> </head>
@ -38,19 +36,19 @@
data-recalc-dims="1"> data-recalc-dims="1">
</a> </a>
<header class=gogh-header> <header class="gogh-header">
<h1> <h1>
<span> Gogh </span> <span> Gogh </span>
<img src="https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo-dark.png" alt=""> <img src="https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo-dark.png" alt="">
</h1> </h1>
</header> </header>
<div class=gogh-content> <div class="gogh-content">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2> <h2>
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4&nbsp;Terminal
</h2> </h2>
<p> <p>
@ -83,20 +81,24 @@
</p> </p>
<div class="code-wrap"> <div class="code-wrap">
<h4>Linux</h4> <h4>Linux <span>(wget)</span></h4>
<div class="code-holder">
<pre><code class="language-bash" id="code-linux">bash -c "$(wget -qO- https://git.io/vQgMr)" </code></pre> <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"> <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> <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> </span>
</div> </div>
</div>
<div class="code-wrap"> <div class="code-wrap">
<h4>Mac</h4> <h4>Mac <span>(curl)</span></h4>
<div class="code-holder">
<pre><code class="language-bash" id="code-mac">bash -c "$(curl -sLo- https://git.io/vQgMr)" </code></pre> <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"> <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> <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> </span>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -153,7 +155,7 @@
<template v-for="theme in themes"> <template v-for="theme in themes">
<div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all' || filter === 'background' || filter === theme.background.toLowerCase()"> <div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all' || filter === 'background' || filter === theme.background.toLowerCase()">
<div class="terminal"> <div class="terminal">
<div class=bar> <div class="bar">
<div class="bar__title"> <div class="bar__title">
{{ theme.name }} {{ theme.name }}
</div> </div>
@ -184,55 +186,56 @@
<span :style="'background-color: ' + theme.brightCyan"></span> <span :style="'background-color: ' + theme.brightCyan"></span>
<span :style="'background-color: ' + theme.brightWhite"></span> <span :style="'background-color: ' + theme.brightWhite"></span>
</div> </div>
<div class="body__txt"> <div class="body__txt">
<p :style="'color: ' + theme.black"> <p :style="'color: ' + theme.black">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 01 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 01 ---</span> &block;&block;&block; <span> {{ theme.black.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.red"> <p :style="'color: ' + theme.red">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 02 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 02 ---</span> &block;&block;&block; <span> {{ theme.red.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.green"> <p :style="'color: ' + theme.green">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 03 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 03 ---</span> &block;&block;&block; <span> {{ theme.green.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.yellow"> <p :style="'color: ' + theme.yellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 04 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 04 ---</span> &block;&block;&block; <span> {{ theme.yellow.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.blue"> <p :style="'color: ' + theme.blue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 05 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 05 ---</span> &block;&block;&block; <span> {{ theme.blue.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.purple"> <p :style="'color: ' + theme.purple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 06 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 06 ---</span> &block;&block;&block; <span> {{ theme.purple.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.cyan"> <p :style="'color: ' + theme.cyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 07 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 07 ---</span> &block;&block;&block; <span> {{ theme.cyan.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.white"> <p :style="'color: ' + theme.white">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 08 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 08 ---</span> &block;&block;&block; <span> {{ theme.white.toLowerCase() }}</span>
</p> </p>
<br> <br>
<p :style="'color: ' + theme.brightBlack"> <p :style="'color: ' + theme.brightBlack">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 09 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 09 ---</span> &block;&block;&block; <span> {{ theme.brightBlack.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightRed"> <p :style="'color: ' + theme.brightRed">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 10 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 10 ---</span> &block;&block;&block; <span> {{ theme.brightRed.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightGreen"> <p :style="'color: ' + theme.brightGreen">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 11 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 11 ---</span> &block;&block;&block; <span> {{ theme.brightGreen.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightYellow"> <p :style="'color: ' + theme.brightYellow">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 12 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 12 ---</span> &block;&block;&block; <span> {{ theme.brightYellow.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightBlue"> <p :style="'color: ' + theme.brightBlue">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 13 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 13 ---</span> &block;&block;&block; <span> {{ theme.brightBlue.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightPurple"> <p :style="'color: ' + theme.brightPurple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 14 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 14 ---</span> &block;&block;&block; <span> {{ theme.brightPurple.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightCyan"> <p :style="'color: ' + theme.brightCyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 15 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 15 ---</span> &block;&block;&block; <span> {{ theme.brightCyan.toLowerCase() }}</span>
</p> </p>
<p :style="'color: ' + theme.brightWhite"> <p :style="'color: ' + theme.brightWhite">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 16 ---</span> &block;&block;&block; &block;&block;&block; <span>*** AaBbMmYyZz 16 ---</span> &block;&block;&block; <span> {{ theme.brightWhite.toLowerCase() }}</span>
</p> </p>
</div> </div>
@ -255,27 +258,21 @@
</main> </main>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chroma-js@2.1.1/chroma.min.js"></script>
<footer> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
credits: <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
<a target=_blank href="https://clipboardjs.com/"> Clipboardjs </a> put it all together :
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/shufflejs@5.3.0/dist/shuffle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.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://buttons.github.io/buttons.js async="" defer="" id=github-bjs></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="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue@next"></script>
<script src=./js/main.js inline></script> <script src=./js/main.js inline></script>

23
gh-pages/js/main.js
View File

@ -138,6 +138,26 @@ const $app = {
}); });
}, },
computed: {
allValues () {
// var $result = [];
// for(var e in this.themes) {
// var value = this.themes[e];
// for (var i in value) {
// if (value.hasOwnProperty(i)) {
// $result.push(value[i])
// }
// }
// }
// $result = $result.filter(s => ~s.indexOf("#"));
// $result = $result.map(ele => ele.toLowerCase());
// $result = [...new Set($result)];
// $result = $result.sort();
// return $result;
}
},
methods: { methods: {
setFilter (f) { setFilter (f) {
this.filter = ''; this.filter = '';
@ -168,7 +188,8 @@ const $app = {
} }
}; };
Vue.createApp($app).mount('#js-vue-app'); Vue.createApp($app)
.mount('#js-vue-app');
/** /**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

185
gh-pages/sass/main.scss
View File

@ -8,7 +8,7 @@
*/ */
.btn { .btn {
display : inline-block; display : inline-block;
padding : 0.5rem 2.5rem 0.55rem; padding : 0.8rem 2.5rem 0.85rem;
outline : none; outline : none;
border : 1px solid #0d1926; border : 1px solid #0d1926;
border-radius : 0; border-radius : 0;
@ -17,9 +17,25 @@
text-align : center; text-align : center;
text-decoration : none; text-decoration : none;
text-transform : uppercase; text-transform : uppercase;
font-size : 16px; font-size : 1.6rem;
cursor : pointer; cursor : pointer;
transition : all 0.3s ease; transition : all 0.3s ease;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
font-size : 1.4rem;
padding: 0.57rem 1.5rem 0.55rem;
}
@include m768 {
padding: 1.3rem 2.5rem 0.85rem;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
} }
.btn:hover { .btn:hover {
@ -42,9 +58,9 @@
*/ */
.gogh-header { .gogh-header {
display : flex; display : flex;
background-color: #0d1926;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
background-color: #0d1926;
h1 { h1 {
width : 500px; width : 500px;
@ -80,8 +96,68 @@
h2 { h2 {
margin : 0 0 25px; margin : 0 0 25px;
color : #595647; color : #595647;
text-align : center;
font-weight: 700;
font-size : 2.0rem;
line-height: 1.2;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
text-align : left;
font-weight: 400; font-weight: 400;
font-size : 2.8rem; font-size : 2.8rem;
line-height: 1;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
h3 {
@include m360 {}
@include m450 {
font-size: 2.8rem;
}
@include m576 {}
@include m650 {
font-size: 3.2rem;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
h4 {
font-size: 1.8rem;
@include m360 {}
@include m450 {
font-size: 2.2rem;
}
@include m576 {}
@include m650 {
font-size: 2.8rem;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
span {
font-weight: 300;
font-size : 1.4rem;
}
} }
p { p {
@ -100,20 +176,55 @@
position: relative; position: relative;
margin : 0 0 40px; margin : 0 0 40px;
.language-bash {
padding: 0.8rem 0.8rem 1.5rem;
@include m360 {}
@include m450 {
padding: 1.5rem 1.2rem;
}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
.code-holder {
position: relative;
}
.btn-copy { .btn-copy {
position : absolute; position : absolute;
right : 10px; right : 0;
bottom : 14px; bottom : 0;
display : inline-block; display : inline-flex;
width : 25px; padding : 5px 10px;
height : 100%;
background-color: #F5F2F0;
cursor : pointer; cursor : pointer;
transition : all 0.3s ease; transition : all 0.3s ease;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
max-width: 50px;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
svg { svg {
width : 100%; width : 100%;
height : auto; height : auto;
transition: all 0.3s ease; transition: all 0.3s ease;
fill : #363636; fill : #363636;
} }
@ -121,7 +232,6 @@
svg { svg {
animation-name : anim-gogh; animation-name : anim-gogh;
animation-duration: 8s; animation-duration: 8s;
fill : #FF0883; fill : #FF0883;
} }
} }
@ -143,12 +253,41 @@
*/ */
.filters { .filters {
display : flex; display : flex;
justify-content: center;
margin : 0 0 40px; margin : 0 0 40px;
justify-content: center;
flex-direction: column;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
flex-direction: row;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
.btn { .btn {
position: relative; position: relative;
margin : 0 0 20px 0;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
margin : 0 15px; margin : 0 15px;
}
@include m768 {
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
&:hover { &:hover {
&::before { &::before {
@ -168,6 +307,11 @@
} }
&::before { &::before {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
position : absolute; position : absolute;
right : 0; right : 0;
bottom : -10px; bottom : -10px;
@ -180,6 +324,14 @@
opacity : 0; opacity : 0;
transition : all 0.3s ease; transition : all 0.3s ease;
} }
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
&.active { &.active {
background-color: #0d1926; background-color: #0d1926;
@ -187,6 +339,11 @@
} }
&.active::before { &.active::before {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
position : absolute; position : absolute;
right : 0; right : 0;
bottom : -10px; bottom : -10px;
@ -197,6 +354,14 @@
content : " "; content : " ";
opacity : 1; opacity : 1;
} }
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
} }
} }
/** /**

30
gh-pages/sass/terminal.scss
View File

@ -53,7 +53,7 @@
right : 0; right : 0;
left : 0; left : 0;
margin : 0 auto; margin : 0 auto;
color : #5e5e5e; color : #424242;
font-family: Arial; font-family: Arial;
font-size : 14px; font-size : 14px;
font-weight: 400; font-weight: 400;
@ -67,14 +67,32 @@
} }
} }
/**
* ::::::: Body
*/
.body { .body {
box-sizing : border-box; box-sizing : border-box;
padding : 30px; padding : 30px;
border : 1px solid #D9D9D9; border : 1px solid #D9D9D9;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
position: relative;
.body__txt { .body__txt {
margin: 0 0 30px; margin: 0 0 30px;
display: none;
@include m360 {}
@include m450 {}
@include m576 {
display: block;
}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
p { p {
margin : 0; margin : 0;
@ -83,17 +101,19 @@
line-height: 1.1; line-height: 1.1;
@include m360 {} @include m360 {}
@include m450 {} @include m450 {}
@include m576 {} @include m576 {
font-size: 1.2rem;
}
@include m600 {} @include m600 {}
@include m768 { @include m768 {
font-size: 14px; font-size: 1.4rem;
} }
@include m900 {} @include m900 {}
@include m992 { @include m992 {
font-size: 20px; font-size: 2.0rem;
} }
@include m1200 { @include m1200 {
font-size: 18px; font-size: 1.8rem;
} }
@include m1400 {} @include m1400 {}
@include m1800 {} @include m1800 {}