mirror of
https://github.com/Mayccoll/Gogh.git
synced 2023-08-10 21:12:46 +03:00
update landing page
This commit is contained in:
Mayccoll
parent
17cca7b212
commit
7bade011a0
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
101
index.src.html
101
index.src.html
@ -17,10 +17,8 @@
|
||||
<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/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />
|
||||
|
||||
<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="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=./css/main.min.css inline>
|
||||
</head>
|
||||
@ -38,19 +36,19 @@
|
||||
data-recalc-dims="1">
|
||||
</a>
|
||||
|
||||
<header class=gogh-header>
|
||||
<header class="gogh-header">
|
||||
<h1>
|
||||
<span> Gogh </span>
|
||||
<img src="https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo-dark.png" alt="">
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class=gogh-content>
|
||||
<div class="gogh-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>
|
||||
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal
|
||||
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
@ -83,19 +81,23 @@
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@ -153,7 +155,7 @@
|
||||
<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="terminal">
|
||||
<div class=bar>
|
||||
<div class="bar">
|
||||
<div class="bar__title">
|
||||
{{ theme.name }}
|
||||
</div>
|
||||
@ -184,64 +186,65 @@
|
||||
<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> ███
|
||||
███ <span>*** AaBbMmYyZz 01 ---</span> ███ <span> {{ theme.black.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.red">
|
||||
███ <span>*** AaBbMmYyZz . Color 02 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 02 ---</span> ███ <span> {{ theme.red.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.green">
|
||||
███ <span>*** AaBbMmYyZz . Color 03 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 03 ---</span> ███ <span> {{ theme.green.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.yellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 04 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 04 ---</span> ███ <span> {{ theme.yellow.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.blue">
|
||||
███ <span>*** AaBbMmYyZz . Color 05 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 05 ---</span> ███ <span> {{ theme.blue.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.purple">
|
||||
███ <span>*** AaBbMmYyZz . Color 06 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 06 ---</span> ███ <span> {{ theme.purple.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.cyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 07 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 07 ---</span> ███ <span> {{ theme.cyan.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.white">
|
||||
███ <span>*** AaBbMmYyZz . Color 08 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 08 ---</span> ███ <span> {{ theme.white.toLowerCase() }}</span>
|
||||
</p>
|
||||
<br>
|
||||
<p :style="'color: ' + theme.brightBlack">
|
||||
███ <span>*** AaBbMmYyZz . Color 09 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 09 ---</span> ███ <span> {{ theme.brightBlack.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightRed">
|
||||
███ <span>*** AaBbMmYyZz . Color 10 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 10 ---</span> ███ <span> {{ theme.brightRed.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightGreen">
|
||||
███ <span>*** AaBbMmYyZz . Color 11 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 11 ---</span> ███ <span> {{ theme.brightGreen.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightYellow">
|
||||
███ <span>*** AaBbMmYyZz . Color 12 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 12 ---</span> ███ <span> {{ theme.brightYellow.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightBlue">
|
||||
███ <span>*** AaBbMmYyZz . Color 13 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 13 ---</span> ███ <span> {{ theme.brightBlue.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightPurple">
|
||||
███ <span>*** AaBbMmYyZz . Color 14 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 14 ---</span> ███ <span> {{ theme.brightPurple.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightCyan">
|
||||
███ <span>*** AaBbMmYyZz . Color 15 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 15 ---</span> ███ <span> {{ theme.brightCyan.toLowerCase() }}</span>
|
||||
</p>
|
||||
<p :style="'color: ' + theme.brightWhite">
|
||||
███ <span>*** AaBbMmYyZz . Color 16 ---</span> ███
|
||||
███ <span>*** AaBbMmYyZz 16 ---</span> ███ <span> {{ theme.brightWhite.toLowerCase() }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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__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>
|
||||
|
||||
@ -255,27 +258,21 @@
|
||||
</main>
|
||||
</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>
|
||||
credits:
|
||||
<a target=_blank href="https://clipboardjs.com/"> Clipboardjs </a> put it all together :
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
|
||||
<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://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://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></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=./js/main.js inline></script>
|
||||
|
||||
23
js/main.js
23
js/main.js
@ -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: {
|
||||
setFilter (f) {
|
||||
this.filter = '';
|
||||
@ -168,7 +188,8 @@ const $app = {
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp($app).mount('#js-vue-app');
|
||||
Vue.createApp($app)
|
||||
.mount('#js-vue-app');
|
||||
|
||||
/**
|
||||
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
|
||||
237
sass/main.scss
237
sass/main.scss
@ -8,7 +8,7 @@
|
||||
*/
|
||||
.btn {
|
||||
display : inline-block;
|
||||
padding : 0.5rem 2.5rem 0.55rem;
|
||||
padding : 0.8rem 2.5rem 0.85rem;
|
||||
outline : none;
|
||||
border : 1px solid #0d1926;
|
||||
border-radius : 0;
|
||||
@ -17,9 +17,25 @@
|
||||
text-align : center;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
font-size : 16px;
|
||||
font-size : 1.6rem;
|
||||
cursor : pointer;
|
||||
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 {
|
||||
@ -42,9 +58,9 @@
|
||||
*/
|
||||
.gogh-header {
|
||||
display : flex;
|
||||
background-color: #0d1926;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
background-color: #0d1926;
|
||||
|
||||
h1 {
|
||||
width : 500px;
|
||||
@ -80,8 +96,68 @@
|
||||
h2 {
|
||||
margin : 0 0 25px;
|
||||
color : #595647;
|
||||
font-weight: 400;
|
||||
font-size : 2.8rem;
|
||||
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-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 {
|
||||
@ -100,20 +176,55 @@
|
||||
position: relative;
|
||||
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 {
|
||||
position : absolute;
|
||||
right : 10px;
|
||||
bottom : 14px;
|
||||
display : inline-block;
|
||||
width : 25px;
|
||||
cursor : pointer;
|
||||
transition: all 0.3s ease;
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
display : inline-flex;
|
||||
padding : 5px 10px;
|
||||
height : 100%;
|
||||
background-color: #F5F2F0;
|
||||
cursor : pointer;
|
||||
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 {
|
||||
width : 100%;
|
||||
height : auto;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
fill : #363636;
|
||||
}
|
||||
|
||||
@ -121,7 +232,6 @@
|
||||
svg {
|
||||
animation-name : anim-gogh;
|
||||
animation-duration: 8s;
|
||||
|
||||
fill : #FF0883;
|
||||
}
|
||||
}
|
||||
@ -143,12 +253,41 @@
|
||||
*/
|
||||
.filters {
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
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 {
|
||||
position: relative;
|
||||
margin : 0 15px;
|
||||
margin : 0 0 20px 0;
|
||||
@include m360 {}
|
||||
@include m450 {}
|
||||
@include m576 {}
|
||||
@include m650 {
|
||||
margin : 0 15px;
|
||||
}
|
||||
@include m768 {
|
||||
|
||||
}
|
||||
@include m900 {}
|
||||
@include m992 {}
|
||||
@include m1200 {}
|
||||
@include m1400 {}
|
||||
@include m1800 {}
|
||||
@include m2200 {}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
@ -168,17 +307,30 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : -10px;
|
||||
left : 0;
|
||||
margin : 0 auto;
|
||||
width : 0;
|
||||
height : 1px;
|
||||
background-color: #0d1926;
|
||||
content : " ";
|
||||
opacity : 0;
|
||||
transition : all 0.3s ease;
|
||||
@include m360 {}
|
||||
@include m450 {}
|
||||
@include m576 {}
|
||||
@include m650 {}
|
||||
@include m768 {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : -10px;
|
||||
left : 0;
|
||||
margin : 0 auto;
|
||||
width : 0;
|
||||
height : 1px;
|
||||
background-color: #0d1926;
|
||||
content : " ";
|
||||
opacity : 0;
|
||||
transition : all 0.3s ease;
|
||||
}
|
||||
@include m900 {}
|
||||
@include m992 {}
|
||||
@include m1200 {}
|
||||
@include m1400 {}
|
||||
@include m1800 {}
|
||||
@include m2200 {}
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -187,15 +339,28 @@
|
||||
}
|
||||
|
||||
&.active::before {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : -10px;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 1px;
|
||||
background-color: #0d1926;
|
||||
content : " ";
|
||||
opacity : 1;
|
||||
@include m360 {}
|
||||
@include m450 {}
|
||||
@include m576 {}
|
||||
@include m650 {}
|
||||
@include m768 {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : -10px;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 1px;
|
||||
background-color: #0d1926;
|
||||
content : " ";
|
||||
opacity : 1;
|
||||
}
|
||||
@include m900 {}
|
||||
@include m992 {}
|
||||
@include m1200 {}
|
||||
@include m1400 {}
|
||||
@include m1800 {}
|
||||
@include m2200 {}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
right : 0;
|
||||
left : 0;
|
||||
margin : 0 auto;
|
||||
color : #5e5e5e;
|
||||
color : #424242;
|
||||
font-family: Arial;
|
||||
font-size : 14px;
|
||||
font-weight: 400;
|
||||
@ -67,14 +67,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ::::::: Body
|
||||
*/
|
||||
.body {
|
||||
box-sizing : border-box;
|
||||
padding : 30px;
|
||||
border : 1px solid #D9D9D9;
|
||||
border-radius: 0 0 5px 5px;
|
||||
position: relative;
|
||||
|
||||
.body__txt {
|
||||
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 {
|
||||
margin : 0;
|
||||
@ -83,17 +101,19 @@
|
||||
line-height: 1.1;
|
||||
@include m360 {}
|
||||
@include m450 {}
|
||||
@include m576 {}
|
||||
@include m576 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@include m600 {}
|
||||
@include m768 {
|
||||
font-size: 14px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
@include m900 {}
|
||||
@include m992 {
|
||||
font-size: 20px;
|
||||
font-size: 2.0rem;
|
||||
}
|
||||
@include m1200 {
|
||||
font-size: 18px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@include m1400 {}
|
||||
@include m1800 {}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user