dan_s
/
siona-DragonX
forked from onryo/siona
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity
Browse Source

added more info and graphics to website

pull/1/head
dan_s 2 years ago
parent
82da3fc1c5
commit
59c1eef62c
13 changed files with 797 additions and 408 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 465
      var/www/dragonx.is/explorer.css
  2. 121
      var/www/dragonx.is/index.html
  3. 619
      var/www/dragonx.is/style.css
  4. BIN
      var/www/img/graphics/graphic_chat.png
  5. BIN
      var/www/img/graphics/graphic_cpu.png
  6. BIN
      var/www/img/graphics/graphic_no_tax.png
  7. BIN
      var/www/img/graphics/graphic_sietch.png
  8. BIN
      var/www/img/graphics/graphic_smartchain.png
  9. BIN
      var/www/img/graphics/graphic_zk_scaling.png
  10. BIN
      var/www/img/graphics/icon_anonymity_set.png
  11. BIN
      var/www/img/graphics/icon_encrypted_messaging.png
  12. BIN
      var/www/img/graphics/icon_sietch.png
  13. BIN
      var/www/img/graphics/icon_smartchains.png

465
var/www/dragonx.is/explorer.css
View File

@ -0,0 +1,465 @@
.explorer-section {
z-index: 0;
display: flex;
background-color: var(--item-bg-dark);
margin: 2vh auto;
padding: 10vh 0vw;
padding-top: 0vh;
width: 95vh;
border-radius: 1rem 1rem 0rem 0rem;
}
@media screen and (max-aspect-ratio: 1/1) {
.explorer-section {
}
}
.explorer-content-body {
z-index: 4;
background-color: var(--item-bg-dark);
width: 95vh;
padding: 25vh 0vw;
margin-top: 6vh;
border-radius: 0rem 0rem 0rem 0rem;
}
/* toggle "screens" when tabs clicked */
input[id="hush-tab"]:not(:checked) ~ * .explorer-content:nth-child(2) {
display: flexbox;
}
input[id="hush-tab"]:checked ~ * .explorer-content:nth-child(2) {
display: none;
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-content:nth-child(1) {
display: flexbox;
}
input[id="dragonx-tab"]:checked ~ * .explorer-content:nth-child(1) {
display: none;
}
/* toggle between tabs */
input[id="hush-tab"]:checked ~ * .explorer-tab:nth-child(1) {
z-index: 3;
background-color: var(--item-bg-light);
color: var(--item-bg-dark);
}
input[id="hush-tab"]:checked ~ * .explorer-tab:nth-child(1):hover {
color: var(--text-color-main);
}
input[id="hush-tab"]:not(:checked) ~ * .explorer-tab:nth-child(1) {
background-color: var(--item-bg-grey);
color: var(--item-bg-light);
border: .1rem solid var(--item-bg-grey);
}
input[id="hush-tab"]:not(:checked) ~ * .explorer-tab:nth-child(1):hover {
z-index: 3;
background-color: var(--item-bg-grey);
border: .1rem solid var(--text-color-main);
color: var(--text-color-main);
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-tab:nth-child(2) {
z-index: 2;
background-color: var(--item-bg-grey);
color: var(--item-bg-light);
border: .1rem solid var(--item-bg-grey);
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-tab:nth-child(2):hover {
z-index: 3;
color: var(--text-color-main);
border: .1rem solid var(--text-color-main);
}
.hush-tab-info-bar {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
z-index: 6;
background-color: var(--item-bg-light);
height: 3vh;
width: 90vh;
border-radius: .5rem .5rem 0rem 0rem;
}
.logo-hush {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
margin-left: 30vh;
margin-top: 16vh;
/* margin-right: auto; */
width: 30vh;
height: 30vh;
}
.explorer-content:nth-child(1) {
display: flex;
margin-left: auto;
margin-right: auto;
z-index: 4;
background-color: var(--item-bg-grey);
width: 90vh;
height: 60vh;
margin-bottom: -32vh;
margin-top: -22vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.explorer-content:nth-child(2) {
display: flexbox;
margin-left: auto;
margin-right: auto;
z-index: 4;
background-color: var(--item-bg-grey);
width: 90vh;
height: 60vh;
margin-bottom: -32vh;
margin-top: -22vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.explorer-content-bar {
display: flex;
margin-left: auto;
margin-right: auto;
z-index: 6;
background-color: var(--item-bg-light);
height: 3vh;
width: 90vh;
border-radius: .5rem .5rem 0rem 0rem;
}
.explorer-content-bar:nth-child(2) {
display: flex;
justify-content: center;
align-items: center;
width: 88vh;
height: 4vh;
border-radius: .5rem .5rem .5rem .5rem;
font-weight: 400;
font-size: 1.25rem;
color: var(--text-color-main);
background-color: var(--item-bg-dark);
margin-top: 1vh;
}
/* explorer information table */
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 42vh;
height: 3.5vh;
margin-top: 1.75vh;
margin-left: 1vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 18vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+8) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: -24.5vh;
margin-left: 45vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+9):nth-child(-n+12) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: 1.75vh;
margin-left: 45vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+8):nth-child(-n+12) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+8):nth-child(-n+12) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 24vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: calc(1.75vh * var(--explorer-content-index));
margin-left: 22.5vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 24vh;
justify-content: left;
}
.explorer-content-bar * a {
color: var(--bg-color);
}
.explorer-content-bar * a:hover {
color: var(--text-color-main);
}
.explorer-content-bar > h3 {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: inherit;
color: inherit;
/* font-weight: inherit; */
}
.explorer-content-bar > span {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: inherit;
font-weight: inherit;
}
.explorer-tab-bar {
position: absolute;
display: flex;
}
.explorer-tab {
display: flex;
align-items: center;
justify-content: center;
margin: 0rem;
width: 28vh;
height: 8vh;
border-radius: 1rem 1rem 0rem 0rem;
border: .1rem solid var(--item-bg-light);
background-color: var(--item-bg-light);
position: absolute;
/* control spacing of tabs without additional css */
left: calc(13vh * var(--tab-index));
color: var(--item-bg-dark);
}
.explorer-dot {
z-index: 0;
position: absolute;
background-color: var(--item-bg-light);
padding: 1.75vh 1.75vh;
border-radius: 2rem;
left: calc(89vh * var(--tab-index));
top: 1.75vh;
}
.explorer-dot:nth-child(4) {
z-index: 0;
position: absolute;
background-color: var(--item-bg-grey);
}
.explorer-dot:nth-child(5) {
z-index: 0;
position: absolute;
background-color: var(--bg-color);
}
.explorer-tab:nth-child(1){
background-color: var(--item-bg-grey);
border: .1rem solid var(--item-bg-grey);
color: var(--item-bg-light);
}
.explorer-tab:hover {
border: .1rem solid var(--text-color-main);
cursor: pointer;
font-weight: 600;
color: var(--text-color-main);
}
.explorer-tab > span {
font-size: 1.65rem;
font-weight: inherit;
color: inherit;
padding-bottom: 2vh;
user-select: none;
}
.explorer-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2vh;
}
.explorer-info-btn {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--item-bg-light);
width: 16vh;
height: 4vh;
border-radius: 1rem 1rem 1rem 1rem;
color: var(--item-bg-dark);
text-decoration: none;
margin: 0vh 1vh;
font-weight: 500;
}
.explorer-info-btn:hover {
color: var(--text-color-main);
font-weight: 600;
box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1) inset;
background: rgba(72, 85, 99, 0.898)
}
@media screen and (max-aspect-ratio: 1/1) {
.explorer-section {
z-index: 3;
display: flex;
background-color: var(--item-bg-dark);
margin: 2vh auto;
padding: 8vh 0vw;
padding-top: 0vh;
width: 48vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.explorer-content-body {
width: 48vh;
}
.explorer-content:nth-child(1) {
width: 46vh;
height: 85vh;
}
.explorer-content:nth-child(2) {
width: 46vh;
height: 85vh;
}
.explorer-content-bar {
width: 46vh;
}
.explorer-tab {
width: 16vh;
}
.explorer-tab:nth-child(1) {
margin-left: -13vh;
width: 17vh;
}
.explorer-dot {
left: 43vh;
}
.explorer-dot:nth-child(4) {
left: 38.5vh;
}
.explorer-dot:nth-child(5) {
left: 34vh;
}
.explorer-tab > span {
font-size: .9rem;
}
.explorer-content-bar > span {
font-size: .8rem;
}
.explorer-content-bar > h3 {
font-size: .8rem;
}
.explorer-content-bar:nth-child(2) {
width: 44vh;
font-size: 1.1rem;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) {
width: 44vh;
}
.explorer-content-bar:nth-child(n+8) {
margin-left: 1vh;
margin-top: 1.75vh;
}
.explorer-content-bar:nth-child(n+9):nth-child(-n+12) {
margin-left: 1vh;
margin-top: 1.75vh;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) {
margin-left: 1vh;
margin-top: 1.75vh;
}
.explorer-info-btn {
font-size: .75rem;
}
.logo-hush {
margin-left: 8vh;
margin-top: 25vh;
position: absolute;
}
}

121
var/www/dragonx.is/index.html
View File

@ -20,10 +20,11 @@
</a>
<nav class="nav-links mobile">
<!-- https://git.hush.is/dan_s/how-to-mine-dragonx/src/branch/master/README.md -->
<a href="" class="component-button" style="--index: 0;"><small class="" style="text-decoration: line-through;">Mine DragonX</small></a>
<a href="" class="component-button" style="--index: 1;"><small class="" style="text-decoration: line-through;">Download Wallet</small></a>
<a href="https://git.hush.is/dan_s/how-to-mine-dragonx/src/branch/master/README.md" class="component-button" style="--index: 0;"><small class="">Mine DragonX</small></a>
<a href="https://git.hush.is/hush/SilentDragon/releases" class="component-button" style="--index: 1;"><small class="">Download Wallet</small></a>
<a href="https://t.me/+ISXrAVgLnXkwZmU5" class="component-button" style="--index: 2;"><small class="">Tech Support</small></a>
<a href="https://explorer.dragonx.is" class="component-button" style="--index: 3;"><small class="">Explorer</small></a>
<a href="https://www.youtube.com/channel/UCmGOYuRrFbPGRw5vytVgUQw" class="component-button" style="--index: 3;"><small class="">Guides</small></a>
</nav>
<button class="mobile-menu mobile" style="background-color:rgba(0, 0, 0, 0); border-style: none;">
<label for="nav-check">
@ -34,10 +35,12 @@
<nav class="nav-bar desktop">
<nav class="nav-links">
<!-- https://git.hush.is/dan_s/how-to-mine-dragonx/src/branch/master/README.md -->
<a href="" class="component-button"><small class="" style="text-decoration: line-through;">Mine DragonX</small></a>
<a href="https://git.hush.is/dan_s/how-to-mine-dragonx/src/branch/master/README.md" class="component-button"><small class="">Mine DragonX</small></a>
<a href="" class="component-button"><small class="" style="text-decoration: line-through;">Download Wallet</small></a>
<a href="https://t.me/+ISXrAVgLnXkwZmU5" class="component-button"><small class="">Tech Support</small></a>
<a href="https://explorer.dragonx.is" class="component-button" style="--index: 3;"><small class="">Explorer</small></a>
<a href="https://www.youtube.com/channel/UCmGOYuRrFbPGRw5vytVgUQw" class="component-button" style="--index: 3;"><small class="">Guides</small></a>
</nav>
</nav>
</header>
@ -47,6 +50,118 @@
<img src="../img/graphic_hero_dragonx_notext.png" alt="dragonx the world's first cpu mineable zk-snarks cryptocurrency">
</figure>
<h2>The World's First CPU Mineable zk-SNARKs Cryptocurrency</h2>
<button class="hero-download">
<a href="" class="component-button hero" style="--index: 0;"><small class="" style="text-decoration: line-through;">Download</small></a>
<span>Available on GNU/Linux and Windows 10</span>
</button>
<div class="divider"></div>
<H1 style="font-size: 3.5rem; margin-top: 22vh;">What is DragonX?</H1>
<p class="about-summary">DragonX is a cryptocurrency and messenger built using the technology of the <a href="https://hush.is" style="text-decoration: none; font-weight: 600;">HUSH</a> blockchain.</p>
<section class="grid-content-1x3">
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_cpu.png" alt="cpu mining, randomx">
<p>DragonX is mined with a CPU
rather than GPU or ASIC. This
allows anyone with a computer
the ability to mine. </p>
</div>
<a href="https://git.hush.is/hush/hush3/src/branch/dev/doc/randomx.md">Learn More</a>
</div>
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_no_tax.png" alt="money bag with cross overlay">
<p>NO Pre-Mine and NO dev-tax. Announced in advance for a fair launch.</p>
</div>
<a href="https://bitcointalk.org/index.php?topic=5415965.msg61063012#msg61063012">Learn More</a>
</div>
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_zk_scaling.png" alt="bar graph">
<p>Network level scaling
anonymity with
zk-SNARKS </p>
</div>
<a href="https://git.hush.is/hush/anonsets">Learn More</a>
</div>
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_sietch.png" alt="eye looking over broken chain link">
<p>Shielded transaction
layer utilizing a technology
called SIETCH </p>
</div>
<a href="https://git.hush.is/hush/sietch">Learn More</a>
</div>
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_smartchain.png" alt="blockchain, smart chain">
<p>Fully independent blockchain built with
HUSH </p>
</div>
<a href="https://git.hush.is/hush/hush-smart-chains">Learn More</a>
</div>
<div class="grid-item">
<div class="grid-inner-container">
<img src="../img/graphics/graphic_chat.png" alt="chat bubbles secured with a key">
<p>Encrypted Chat system with no
phone numbers or
centralized servers</p>
</div>
<a href="https://git.hush.is/hush/hushchat">Learn More</a>
</div>
</section>
<div class="divider"></div>
<section class="specs-section">
<div class="specs-content-body">
<div class="specs-tab">
<h3>Specifications</h3>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Algorithm:</span></div>
<div class="specs-bar-right"><span class="specs-right">RandomX</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Blocktime:</span></div>
<div class="specs-bar-right"><span class="specs-right">36 Seconds</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Block Reward:</span></div>
<div class="specs-bar-right"><span class="specs-right">3 DRGX</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Reward Halving:</span></div>
<div class="specs-bar-right"><span class="specs-right">Every 3.5M Blocks</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Total Supply:</span></div>
<div class="specs-bar-right"><span class="specs-right">21,000,000 DRGX</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">Premine:</span></div>
<div class="specs-bar-right"><span class="specs-right">0 DRGX</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">P2P Port:</span></div>
<div class="specs-bar-right"><span class="specs-right">1111</span></div>
</div>
<div class="specs-content">
<div class="specs-bar-left"><span class="specs-left">RPC Port:</span></div>
<div class="specs-bar-right"><span class="specs-right">1112</span></div>
</div>
</div>
</section>
<div class="divider"></div>
</body>
</html>

619
var/www/dragonx.is/style.css
View File

@ -1,3 +1,5 @@
@import "explorer.css";
/*
----------------------------------------
Table of Contents
@ -53,13 +55,14 @@ header {
z-index: 999;
position: fixed;
background-color: var(--bg-color);
margin-top: -15vh;
margin-top: -20vh;
width: 100vw;
height: 12vh;
box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.122);
}
.header-space {
margin-top: 15vh;
margin-top: 20vh;
}
.header-logo{
@ -257,6 +260,24 @@ header {
background: rgba(72, 85, 99, 0.898)
}
.hero-download {
background-color:rgba(240, 248, 255, 0);
border: none;
display: grid;
justify-content: center;
align-items: center;
margin: 2rem;
margin-top: 18vh;
margin-left: auto;
margin-right: auto;
width: 20rem;
}
.hero-download > span {
margin: 1rem;
color: var(--item-bg-light);
}
@media screen and (max-aspect-ratio: 1/1) {
.desktop {
display: none;
@ -273,476 +294,250 @@ header {
/*=============== Sections ===============*/
/*-------------- Explorer --------------*/
.explorer-section {
z-index: 0;
display: flex;
background-color: var(--item-bg-dark);
margin: 2vh auto;
padding: 10vh 0vw;
padding-top: 0vh;
width: 95vh;
border-radius: 1rem 1rem 0rem 0rem;
}
/* explorer.css */
@media screen and (max-aspect-ratio: 1/1) {
.explorer-section {
}
}
/*-------------- About DragonX --------------*/
.explorer-content-body {
z-index: 4;
background-color: var(--item-bg-dark);
width: 95vh;
padding: 25vh 0vw;
margin-top: 6vh;
border-radius: 0rem 0rem 0rem 0rem;
}
/* toggle "screens" when tabs clicked */
input[id="hush-tab"]:not(:checked) ~ * .explorer-content:nth-child(2) {
.about-summary {
display: flexbox;
}
input[id="hush-tab"]:checked ~ * .explorer-content:nth-child(2) {
display: none;
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-content:nth-child(1) {
display: flexbox;
}
input[id="dragonx-tab"]:checked ~ * .explorer-content:nth-child(1) {
display: none;
}
/* toggle between tabs */
input[id="hush-tab"]:checked ~ * .explorer-tab:nth-child(1) {
z-index: 3;
background-color: var(--item-bg-light);
color: var(--item-bg-dark);
}
input[id="hush-tab"]:checked ~ * .explorer-tab:nth-child(1):hover {
color: var(--text-color-main);
}
input[id="hush-tab"]:not(:checked) ~ * .explorer-tab:nth-child(1) {
margin: 0 13vw;
background-color: var(--item-bg-grey);
color: var(--item-bg-light);
border: .1rem solid var(--item-bg-grey);
}
input[id="hush-tab"]:not(:checked) ~ * .explorer-tab:nth-child(1):hover {
z-index: 3;
background-color: var(--item-bg-grey);
border: .1rem solid var(--text-color-main);
color: var(--text-color-main);
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-tab:nth-child(2) {
z-index: 2;
background-color: var(--item-bg-grey);
color: var(--item-bg-light);
border: .1rem solid var(--item-bg-grey);
}
input[id="dragonx-tab"]:not(:checked) ~ * .explorer-tab:nth-child(2):hover {
z-index: 3;
color: var(--text-color-main);
border: .1rem solid var(--text-color-main);
}
.hush-tab-info-bar {
display: flex;
.grid-content-1x3 {
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
z-index: 6;
background-color: var(--item-bg-light);
height: 3vh;
width: 90vh;
border-radius: .5rem .5rem 0rem 0rem;
margin-bottom: 12vh;
margin-top: 2vh;
}
.logo-hush {
.grid-item {
background-color: var(--item-bg-grey);
display: flex;
position: absolute;
justify-content: center;
flex-direction: column;
align-items: center;
margin-left: 30vh;
margin-top: 16vh;
/* margin-right: auto; */
justify-content: center;
margin: 2vh;
padding: 0;
width: 30vh;
height: 30vh;
}
/* height: 25vh; */
.explorer-content:nth-child(1) {
display: flex;
margin-left: auto;
margin-right: auto;
z-index: 4;
background-color: var(--item-bg-grey);
width: 90vh;
height: 60vh;
margin-bottom: -32vh;
margin-top: -22vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.explorer-content:nth-child(2) {
display: flexbox;
margin-left: auto;
margin-right: auto;
z-index: 4;
background-color: var(--item-bg-grey);
width: 90vh;
height: 60vh;
margin-bottom: -32vh;
margin-top: -22vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.grid-inner-container {
.explorer-content-bar {
display: flex;
display: flexbox;
margin-left: auto;
margin-right: auto;
z-index: 6;
background-color: var(--item-bg-light);
height: 3vh;
width: 90vh;
border-radius: .5rem .5rem 0rem 0rem;
}
.explorer-content-bar:nth-child(2) {
display: flex;
justify-content: center;
align-items: center;
width: 88vh;
height: 4vh;
border-radius: .5rem .5rem .5rem .5rem;
font-weight: 400;
font-size: 1.25rem;
color: var(--text-color-main);
background-color: var(--item-bg-dark);
margin-top: 1vh;
}
/* explorer information table */
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 42vh;
height: 3.5vh;
margin-top: 1.75vh;
margin-left: 1vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 18vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+8) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: -24.5vh;
margin-left: 45vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+9):nth-child(-n+12) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: 1.75vh;
margin-left: 45vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+8):nth-child(-n+12) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+8):nth-child(-n+12) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 24vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) {
background-color: var(--item-bg-dark);
color: var(--text-color-main);
width: 44vh;
height: 3.5vh;
margin-top: calc(1.75vh * var(--explorer-content-index));
margin-left: 22.5vh;
border-radius: .5rem .5rem .5rem .5rem;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) > h3 {
z-index: 1;
margin: 0;
background-color: var(--item-bg-dark-grey);
border-radius: .4rem .4rem .4rem .4rem;
height: 3.5vh;
width: 18vh;
text-indent: 1vh;
justify-content: left;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) > span {
margin: 0;
background-color: var(--item-bg-dark);
border-radius: 0rem 0rem 0rem 0rem;
height: 3.5vh;
position: absolute;
margin-left: 19vh;
width: 24vh;
justify-content: left;
}
height: 30vh;
.explorer-content-bar * a {
color: var(--bg-color);
}
.explorer-content-bar * a:hover {
color: var(--text-color-main);
}
.explorer-content-bar > h3 {
.grid-inner-container > img {
display: flex;
justify-content: center;
align-items: center;
margin: 2rem;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: inherit;
color: inherit;
/* font-weight: inherit; */
width: 10vh;
}
.explorer-content-bar > span {
.grid-inner-container > p {
display: flex;
justify-content: center;
align-items: center;
/* margin: 1rem; */
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: inherit;
font-weight: inherit;
}
.explorer-tab-bar {
position: absolute;
display: flex;
padding: 0 2vh;
color: var(--text-color-main);
font-size: 2vh;
}
.explorer-tab {
.grid-item > a {
display: flex;
align-items: center;
justify-content: center;
margin: 0rem;
width: 28vh;
height: 8vh;
border-radius: 1rem 1rem 0rem 0rem;
border: .1rem solid var(--item-bg-light);
background-color: var(--item-bg-light);
position: absolute;
/* control spacing of tabs without additional css */
left: calc(13vh * var(--tab-index));
color: var(--item-bg-dark);
text-decoration: none;
background-color: var(--item-bg-dark);
font-size: 2.25vh;
width: 100%;
}
.explorer-dot {
z-index: 0;
position: absolute;
.grid-item > a:hover {
background-color: var(--item-bg-light);
padding: 1.75vh 1.75vh;
border-radius: 2rem;
left: calc(89vh * var(--tab-index));
top: 1.75vh;
}
color: var(--item-bg-dark);
font-weight: 800;
.explorer-dot:nth-child(4) {
z-index: 0;
position: absolute;
background-color: var(--item-bg-grey);
}
.explorer-dot:nth-child(5) {
z-index: 0;
position: absolute;
background-color: var(--bg-color);
}
.explorer-tab:nth-child(1){
background-color: var(--item-bg-grey);
border: .1rem solid var(--item-bg-grey);
color: var(--item-bg-light);
}
@media screen and (max-aspect-ratio: 10/8) {
.grid-content-1x3 {
grid-template-columns: auto;
margin-left: auto;
margin-right: auto;
}
.grid-item {
display: flexbox;
width: 35vh;
margin-top: 2vh;
margin-bottom: 2vh;
padding-top: 2vh;
padding-bottom: 2vh;
}
.explorer-tab:hover {
border: .1rem solid var(--text-color-main);
cursor: pointer;
font-weight: 600;
color: var(--text-color-main);
}
.grid-inner-container {
.explorer-tab > span {
font-size: 1.65rem;
font-weight: inherit;
color: inherit;
padding-bottom: 2vh;
user-select: none;
display: flexbox;
margin-left: auto;
margin-right: auto;
height: 35vh;
}
}
.explorer-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2vh;
}
.grid-inner-container > img {
margin: 4vh;
margin-left: auto;
margin-right: auto;
width: 15vh;
}
.grid-inner-container > p {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding: 0vh 2vh;
font-size: 2vh;
line-height: 1.5rem;
}
.explorer-info-btn {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--item-bg-light);
width: 16vh;
height: 4vh;
border-radius: 1rem 1rem 1rem 1rem;
color: var(--item-bg-dark);
text-decoration: none;
margin: 0vh 1vh;
font-weight: 500;
.grid-item > a {
margin-top: 2vh;
margin-bottom: -2vh;
}
}
.explorer-info-btn:hover {
color: var(--text-color-main);
font-weight: 600;
box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1) inset;
background: rgba(72, 85, 99, 0.898)
/*-------------- Specifications --------------*/
}
.specs-section {
display: flexbox;
background-color: var(--item-bg-dark);
margin-top: 8vh;
margin-bottom: 12vh;
margin-left: auto;
margin-right: auto;
width: 55vh;
height: 60vh;
border-radius: .75rem .75rem .75rem .75rem;
}
@media screen and (max-aspect-ratio: 1/1) {
.explorer-section {
z-index: 3;
display: flex;
.specs-content-body {
z-index: 4;
background-color: var(--item-bg-dark);
margin: 2vh auto;
padding: 8vh 0vw;
padding-top: 0vh;
width: 48vh;
border-radius: 1rem 1rem 0rem 0rem;
}
.explorer-content-body {
width: 48vh;
}
.explorer-content:nth-child(1) {
width: 46vh;
height: 85vh;
}
.explorer-content:nth-child(2) {
width: 46vh;
height: 85vh;
}
.explorer-content-bar {
width: 46vh;
width: 55vh;
padding: 2vh 0vw;
margin-top: 6vh;
border-radius: .75rem .75rem .75rem .75rem;
}
.explorer-tab {
width: 16vh;
}
.explorer-tab:nth-child(1) {
margin-left: -13vh;
width: 17vh;
}
.explorer-dot {
left: 43vh;
}
.explorer-dot:nth-child(4) {
left: 38.5vh;
}
.explorer-dot:nth-child(5) {
left: 34vh;
}
.explorer-tab > span {
font-size: .9rem;
}
.explorer-content-bar > span {
font-size: .8rem;
}
.explorer-content-bar > h3 {
font-size: .8rem;
.specs-tab {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 50vh;
height: 8vh;
margin-top: 1vh;
margin-bottom: 2vh;
margin-left: auto;
margin-right: auto;
background-color: var(--item-bg-grey);
border-radius: .75rem .75rem 0rem 0rem;
font-size: 3vh;
}
.explorer-content-bar:nth-child(2) {
width: 44vh;
font-size: 1.1rem;
.specs-content {
display: flex;
justify-content: center;
align-items: center;
margin: 0vh;
margin-left: auto;
margin-right: auto;
/* background-color: var(--item-bg-light); */
width: 50vh;
border-radius: .75rem .75rem .75rem .75rem;
}
.explorer-content-bar:nth-child(n+3):nth-child(-n+7) {
width: 44vh;
.specs-content:nth-child(9) {
margin-bottom: 1vh;
}
.explorer-content-bar:nth-child(n+8) {
margin-left: 1vh;
margin-top: 1.75vh;
.specs-bar-left {
display: flex;
justify-content: right;
align-items: center;
margin: 1vh;
margin-left: 0;
margin-right: auto;
background-color: var(--item-bg-grey);
height: 4vh;
width: 25vh;
border-radius: .75rem 0rem 0rem .75rem;
}
.explorer-content-bar:nth-child(n+9):nth-child(-n+12) {
margin-left: 1vh;
margin-top: 1.75vh;
.specs-bar-right {
display: flex;
justify-content: left;
align-items: center;
margin: 1vh;
margin-left: 0;
margin-right: auto;
background-color: var(--item-bg-light);
height: 4vh;
width: 25vh;
border-radius: 0rem .75rem .75rem 0rem;
}
.explorer-content-bar:nth-child(n+13):nth-child(-n+15) {
.specs-right {
color: var(--item-bg-dark);
margin-left: 1vh;
margin-top: 1.75vh;
font-size: 2.25vh;
}
.explorer-info-btn {
font-size: .75rem;
}
.logo-hush {
margin-left: 8vh;
margin-top: 25vh;
position: absolute;
.specs-left {
margin-right: 1vh;
font-size: 2.25vh;
}
}
@media screen and (max-aspect-ratio: 10/8) {
.specs-section {
width: 45vh;
}
.specs-content-body {
width: 45vh;
}
.specs-content {
width: 42vh;
}
.specs-left {
font-size: 2vh;
}
.specs-right {
font-size: 2vh;
}
.specs-tab {
width: 42vh;
margin-top: 0vh;
}
}
/*=============== Html Elements ===============*/
@ -779,6 +574,11 @@ td {
color: var(--text-color-dark);
}
h1 {
text-align: center;
color: var(--text-color-main);
}
h2 {
text-align: center;
color: var(--text-color-main);
@ -789,6 +589,11 @@ h3 {
color: var(--text-color-main);
}
p {
text-align: center;
color: var(--text-color-main);
}
.explorer-links {
text-decoration: none;
color: var(--text-color-main);
@ -797,4 +602,8 @@ h3 {
.explorer-links:hover {
color: var(--text-color-main);
font-weight: 600;
}
span {
color: var(--text-color-main);
}

BIN
var/www/img/graphics/graphic_chat.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
var/www/img/graphics/graphic_cpu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
var/www/img/graphics/graphic_no_tax.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
var/www/img/graphics/graphic_sietch.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
var/www/img/graphics/graphic_smartchain.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
var/www/img/graphics/graphic_zk_scaling.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
var/www/img/graphics/icon_anonymity_set.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
var/www/img/graphics/icon_encrypted_messaging.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

BIN
var/www/img/graphics/icon_sietch.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
var/www/img/graphics/icon_smartchains.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.6 KiB

Write Preview
Loading…
Cancel
Save