v0.0.7
This commit is contained in:
sairaj mote
parent
5a1ffb0418
commit
e4200fd896
42
css/main.css
42
css/main.css
@ -29,6 +29,11 @@ body[data-theme='dark'] {
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -159,8 +164,8 @@ button {
|
||||
}
|
||||
|
||||
.toggle input:checked ~ .switch .circle {
|
||||
-webkit-transform: translateY(-1.8rem);
|
||||
transform: translateY(-1.8rem);
|
||||
-webkit-transform: translateY(-1.7rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
|
||||
section {
|
||||
@ -227,7 +232,7 @@ section .dark-background {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -260,11 +265,10 @@ section .dark-background {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: var(--background);
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
gap: 1em;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid rgba(var(--text), 0.1);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#main_search input {
|
||||
@ -273,8 +277,6 @@ section .dark-background {
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text), 1);
|
||||
}
|
||||
|
||||
@ -288,20 +290,8 @@ section .dark-background {
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
#main_search .watermark {
|
||||
-webkit-user-select: none;
|
||||
-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;
|
||||
#main_search .icon line {
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
#highlights {
|
||||
@ -314,13 +304,13 @@ section .dark-background {
|
||||
}
|
||||
|
||||
#highlights .highlight-item {
|
||||
background: var(--background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.4rem;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#highlights .highlight-item h4 {
|
||||
color: rgba(var(--text-light), 1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
#highlights .highlight-item h1 {
|
||||
@ -345,7 +335,7 @@ section .dark-background {
|
||||
.bebas {
|
||||
font-family: 'Bebas Neue', cursive;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
#top_transaction_container {
|
||||
@ -363,7 +353,7 @@ section .dark-background {
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.3em;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -25,6 +25,9 @@ body[data-theme='dark']{
|
||||
--background: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
.transition{
|
||||
transition: all 0.6s;
|
||||
}
|
||||
h5{
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -111,7 +114,7 @@ button{
|
||||
}
|
||||
}
|
||||
input:checked ~ .switch .circle{
|
||||
transform: translateY(-1.8rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
}
|
||||
section{
|
||||
@ -158,7 +161,7 @@ section{
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
#floscout_illustration{
|
||||
margin-bottom: 1em;
|
||||
@ -182,11 +185,10 @@ section{
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: var(--background);
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
gap: 1em;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid rgba(var(--text), 0.1);
|
||||
background: var(--background);
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
@ -194,8 +196,6 @@ section{
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text), 1);
|
||||
}
|
||||
.icon{
|
||||
@ -206,18 +206,9 @@ section{
|
||||
stroke: rgba(var(--text), 1);
|
||||
opacity: 0.5;
|
||||
stroke-width: 6;
|
||||
}
|
||||
.watermark{
|
||||
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;
|
||||
line{
|
||||
stroke-width: 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
#highlights{
|
||||
@ -226,11 +217,11 @@ section{
|
||||
grid-template-columns: auto auto;
|
||||
gap: 1rem;
|
||||
.highlight-item{
|
||||
background: var(--background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.4rem;
|
||||
background: var(--background);
|
||||
h4{
|
||||
color: rgba(var(--text-light), 1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
h1{
|
||||
font-size: 1.6em;
|
||||
@ -252,7 +243,7 @@ section{
|
||||
.bebas{
|
||||
font-family: 'Bebas Neue', cursive;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
#top_transaction_container{
|
||||
display: grid;
|
||||
@ -263,7 +254,7 @@ section{
|
||||
}
|
||||
.transaction{
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.3em;
|
||||
background: var(--background);
|
||||
.transaction-header{
|
||||
|
||||
14
index.html
14
index.html
@ -57,12 +57,11 @@
|
||||
<label class="input margin">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<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)"/>
|
||||
<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">
|
||||
</label>
|
||||
<h1 class="bebas watermark">flo scout</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="highlights" class="margin">
|
||||
@ -71,7 +70,7 @@
|
||||
<h1>RMT</h1>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="bebas">top contrat</h4>
|
||||
<h4 class="bebas">top contract</h4>
|
||||
<h1>India elections 2019</h1>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
@ -123,6 +122,7 @@
|
||||
themeToggler.checked = false
|
||||
}
|
||||
themeToggler.addEventListener('change', () => {
|
||||
transition()
|
||||
if(themeToggler.checked){
|
||||
nightlight();
|
||||
localStorage.setItem('theme', 'dark')
|
||||
@ -138,6 +138,12 @@
|
||||
function nightlight(){
|
||||
body.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
function transition(){
|
||||
body.classList.add('transition')
|
||||
setTimeout(() => {
|
||||
body.classList.remove('transition')
|
||||
}, 700)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user