RanchiMall/floscout-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.7

Browse Source
This commit is contained in:
sairaj mote 2020-05-04 22:06:47 +05:30
parent 5a1ffb0418
commit e4200fd896
4 changed files with 41 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/main.css
View File

@ -29,6 +29,11 @@ body[data-theme='dark'] {
--dark-shade: #1a1a1a; --dark-shade: #1a1a1a;
} }
.transition {
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
h5 { h5 {
font-weight: 500; font-weight: 500;
} }
@ -159,8 +164,8 @@ button {
} }
.toggle input:checked ~ .switch .circle { .toggle input:checked ~ .switch .circle {
-webkit-transform: translateY(-1.8rem); -webkit-transform: translateY(-1.7rem);
transform: translateY(-1.8rem); transform: translateY(-1.7rem);
} }
section { section {
@ -227,7 +232,7 @@ section .dark-background {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
place-items: center; place-items: center;
padding: 1em; padding: 1rem;
height: 100%; height: 100%;
} }
@ -260,11 +265,10 @@ section .dark-background {
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
background: var(--background); padding: 1rem;
padding: 1em;
gap: 1em; gap: 1em;
border-radius: 0.4em; border-radius: 0.4em;
border: 1px solid rgba(var(--text), 0.1); background: var(--background);
} }
#main_search input { #main_search input {
@ -273,8 +277,6 @@ section .dark-background {
background: transparent; background: transparent;
outline: none; outline: none;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.06em;
font-weight: 500;
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
} }
@ -288,20 +290,8 @@ section .dark-background {
stroke-width: 6; stroke-width: 6;
} }
#main_search .watermark { #main_search .icon line {
-webkit-user-select: none; stroke-width: 8;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: -1;
position: absolute;
bottom: 0;
right: 0;
font-size: 40vw;
text-align: right;
opacity: 0.06;
line-height: 1em;
pointer-events: none;
} }
#highlights { #highlights {
@ -314,13 +304,13 @@ section .dark-background {
} }
#highlights .highlight-item { #highlights .highlight-item {
background: var(--background);
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.4rem; border-radius: 0.4rem;
background: var(--background);
} }
#highlights .highlight-item h4 { #highlights .highlight-item h4 {
color: rgba(var(--text-light), 1); color: var(--primary-color);
} }
#highlights .highlight-item h1 { #highlights .highlight-item h1 {
@ -345,7 +335,7 @@ section .dark-background {
.bebas { .bebas {
font-family: 'Bebas Neue', cursive; font-family: 'Bebas Neue', cursive;
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.06em;
} }
#top_transaction_container { #top_transaction_container {
@ -363,7 +353,7 @@ section .dark-background {
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
padding: 2em; padding: 1.5rem;
border-radius: 0.3em; border-radius: 0.3em;
background: var(--background); background: var(--background);
} }

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

37
css/main.scss
View File

@ -25,6 +25,9 @@ body[data-theme='dark']{
--background: #111; --background: #111;
--dark-shade: #1a1a1a; --dark-shade: #1a1a1a;
} }
.transition{
transition: all 0.6s;
}
h5{ h5{
font-weight: 500; font-weight: 500;
} }
@ -111,7 +114,7 @@ button{
} }
} }
input:checked ~ .switch .circle{ input:checked ~ .switch .circle{
transform: translateY(-1.8rem); transform: translateY(-1.7rem);
} }
} }
section{ section{
@ -158,7 +161,7 @@ section{
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
padding: 1em; padding: 1rem;
height: 100%; height: 100%;
#floscout_illustration{ #floscout_illustration{
margin-bottom: 1em; margin-bottom: 1em;
@ -182,11 +185,10 @@ section{
z-index: 1; z-index: 1;
width: 100%; width: 100%;
align-items: center; align-items: center;
background: var(--background); padding: 1rem;
padding: 1em;
gap: 1em; gap: 1em;
border-radius: 0.4em; border-radius: 0.4em;
border: 1px solid rgba(var(--text), 0.1); background: var(--background);
} }
input{ input{
border: none; border: none;
@ -194,8 +196,6 @@ section{
background: transparent; background: transparent;
outline: none; outline: none;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.06em;
font-weight: 500;
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
} }
.icon{ .icon{
@ -206,18 +206,9 @@ section{
stroke: rgba(var(--text), 1); stroke: rgba(var(--text), 1);
opacity: 0.5; opacity: 0.5;
stroke-width: 6; stroke-width: 6;
} line{
.watermark{ stroke-width: 8;
user-select: none; }
z-index: -1;
position: absolute;
bottom: 0;
right: 0;
font-size: 40vw;
text-align: right;
opacity: 0.06;
line-height: 1em;
pointer-events: none;
} }
} }
#highlights{ #highlights{
@ -226,11 +217,11 @@ section{
grid-template-columns: auto auto; grid-template-columns: auto auto;
gap: 1rem; gap: 1rem;
.highlight-item{ .highlight-item{
background: var(--background);
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.4rem; border-radius: 0.4rem;
background: var(--background);
h4{ h4{
color: rgba(var(--text-light), 1); color: var(--primary-color);
} }
h1{ h1{
font-size: 1.6em; font-size: 1.6em;
@ -252,7 +243,7 @@ section{
.bebas{ .bebas{
font-family: 'Bebas Neue', cursive; font-family: 'Bebas Neue', cursive;
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.06em;
} }
#top_transaction_container{ #top_transaction_container{
display: grid; display: grid;
@ -263,7 +254,7 @@ section{
} }
.transaction{ .transaction{
flex-direction: column; flex-direction: column;
padding: 2em; padding: 1.5rem;
border-radius: 0.3em; border-radius: 0.3em;
background: var(--background); background: var(--background);
.transaction-header{ .transaction-header{

14
index.html
View File

@ -57,12 +57,11 @@
<label class="input margin"> <label class="input margin">
<svg class="icon" viewBox="0 0 64 64"> <svg class="icon" viewBox="0 0 64 64">
<title>search icon</title> <title>search icon</title>
<path d="M24,46.66A22.94,22.94,0,0,1,7.8,7.51,22.94,22.94,0,1,1,40.24,39.94,22.75,22.75,0,0,1,24,46.66Z" transform="translate(-0.3 0)"/>
<path d="M24,1.58A22.15,22.15,0,0,1,39.68,39.39,22.15,22.15,0,0,1,8.36,8.07,22,22,0,0,1,24,1.58M24,0A23.73,23.73,0,1,0,40.8,7,23.65,23.65,0,0,0,24,0Z" transform="translate(-0.3 0)"/> <path d="M24,1.58A22.15,22.15,0,0,1,39.68,39.39,22.15,22.15,0,0,1,8.36,8.07,22,22,0,0,1,24,1.58M24,0A23.73,23.73,0,1,0,40.8,7,23.65,23.65,0,0,0,24,0Z" transform="translate(-0.3 0)"/>
<line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/></svg> <line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/>
</svg>
<input type="search" placeholder="Search Block, Transactions, address, token or contract"> <input type="search" placeholder="Search Block, Transactions, address, token or contract">
</label> </label>
<h1 class="bebas watermark">flo scout</h1>
</div> </div>
</div> </div>
<div id="highlights" class="margin"> <div id="highlights" class="margin">
@ -71,7 +70,7 @@
<h1>RMT</h1> <h1>RMT</h1>
</div> </div>
<div class="highlight-item"> <div class="highlight-item">
<h4 class="bebas">top contrat</h4> <h4 class="bebas">top contract</h4>
<h1>India elections 2019</h1> <h1>India elections 2019</h1>
</div> </div>
<div class="highlight-item"> <div class="highlight-item">
@ -123,6 +122,7 @@
themeToggler.checked = false themeToggler.checked = false
} }
themeToggler.addEventListener('change', () => { themeToggler.addEventListener('change', () => {
transition()
if(themeToggler.checked){ if(themeToggler.checked){
nightlight(); nightlight();
localStorage.setItem('theme', 'dark') localStorage.setItem('theme', 'dark')
@ -138,6 +138,12 @@
function nightlight(){ function nightlight(){
body.setAttribute('data-theme', 'dark'); body.setAttribute('data-theme', 'dark');
} }
function transition(){
body.classList.add('transition')
setTimeout(() => {
body.classList.remove('transition')
}, 700)
}
</script> </script>
</body> </body>
</html> </html>