v0.0.6
This commit is contained in:
sairaj mote
parent
c7c521723a
commit
5a1ffb0418
102
css/main.css
102
css/main.css
@ -10,13 +10,13 @@
|
||||
}
|
||||
|
||||
body {
|
||||
--primary-color: #1E88E5;
|
||||
--primary-color: #f8615a;
|
||||
--text: 17, 17, 17;
|
||||
--text-light: 85, 85, 85;
|
||||
--foreground: 255, 255, 255;
|
||||
--background: #e8e8e8;
|
||||
--background: #efefef;
|
||||
--dark-shade: #dadada;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: rgba(var(--text), 1);
|
||||
background: rgba(var(--foreground), 1);
|
||||
}
|
||||
@ -24,13 +24,13 @@ body {
|
||||
body[data-theme='dark'] {
|
||||
--text: 238, 238, 238;
|
||||
--text-light: 170, 170, 170;
|
||||
--foreground: 26, 26, 26;
|
||||
--foreground: 20, 20, 20;
|
||||
--background: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type=text]::-ms-clear {
|
||||
@ -141,7 +141,7 @@ button {
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
fill: var(--primary-color);
|
||||
fill: rgba(var(--text), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
@ -154,7 +154,7 @@ button {
|
||||
}
|
||||
|
||||
.toggle .circle line {
|
||||
stroke: var(--primary-color);
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
@ -200,11 +200,11 @@ section .dark-background {
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 0 1rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 0 1rem;
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
#main_logo {
|
||||
@ -228,21 +228,25 @@ section .dark-background {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1em;
|
||||
/*#floscout_illustration{
|
||||
margin-bottom: 1em;
|
||||
fill: none;
|
||||
height: 12rem;
|
||||
width: 12rem;
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
.magni-glass-color{
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
.cube-color{
|
||||
stroke: rgba(var(--text), 1);
|
||||
}
|
||||
}*/
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main_search #floscout_illustration {
|
||||
margin-bottom: 1em;
|
||||
fill: none;
|
||||
height: 12rem;
|
||||
width: 12rem;
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
#main_search #floscout_illustration .magni-glass-color {
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
|
||||
#main_search #floscout_illustration .cube-color {
|
||||
stroke: rgba(var(--text), 1);
|
||||
}
|
||||
|
||||
#main_search .input {
|
||||
@ -256,11 +260,11 @@ section .dark-background {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: rgba(var(--foreground), 1);
|
||||
background: var(--background);
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid rgba(var(--text), 0.2);
|
||||
border: 1px solid rgba(var(--text), 0.1);
|
||||
}
|
||||
|
||||
#main_search input {
|
||||
@ -289,7 +293,7 @@ section .dark-background {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -300,27 +304,29 @@ section .dark-background {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dark-background {
|
||||
background: var(--dark-shade);
|
||||
}
|
||||
|
||||
#highlights {
|
||||
padding: 4em 0;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 1em 2em;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#highlights .highlight-item {
|
||||
background: var(--background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
#highlights .highlight-item h4 {
|
||||
opacity: 0.8;
|
||||
color: rgba(var(--text-light), 1);
|
||||
}
|
||||
|
||||
#highlights .highlight-item h1 {
|
||||
font-size: 1.6em;
|
||||
letter-spacing: 0.1rem;
|
||||
margin-top: 0.1em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -345,8 +351,8 @@ section .dark-background {
|
||||
#top_transaction_container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (minmax(20rem, 1fr))[auto-fit];
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
-ms-grid-columns: (minmax(20rem, 1fr))[auto-fill];
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 1.5em;
|
||||
padding-bottom: 2em;
|
||||
padding-top: 2em;
|
||||
@ -359,8 +365,7 @@ section .dark-background {
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
border-radius: 0.3em;
|
||||
background: rgba(var(--foreground), 1);
|
||||
border: solid 1px rgba(var(--text), 0.2);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.transaction .transaction-header {
|
||||
@ -407,7 +412,6 @@ section .dark-background {
|
||||
|
||||
.transaction h4 {
|
||||
cursor: pointer;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -422,20 +426,21 @@ section .dark-background {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#latest_transaction_section {
|
||||
background: rgba(var(--foreground), 1);
|
||||
}
|
||||
|
||||
#latest_transaction_section header {
|
||||
-ms-grid-columns: 1fr auto;
|
||||
grid-template-columns: 1fr auto;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground), 1);
|
||||
background: inherit;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
.padding {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
@ -450,7 +455,7 @@ section .dark-background {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
section header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -462,6 +467,7 @@ section .dark-background {
|
||||
margin: 0 8vw;
|
||||
}
|
||||
#highlights {
|
||||
gap: 2rem;
|
||||
-ms-grid-columns: (auto)[4];
|
||||
grid-template-columns: repeat(4, auto);
|
||||
}
|
||||
@ -505,16 +511,12 @@ section .dark-background {
|
||||
|
||||
@media (hover: hover) {
|
||||
button {
|
||||
-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: background-color 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: box-shadow 0.3s, background-color 0.3s;
|
||||
transition: box-shadow 0.3s, background-color 0.3s, -webkit-box-shadow 0.3s;
|
||||
-webkit-transition: background-color 0.3s;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background: rgba(var(--text), 1);
|
||||
color: var(--background);
|
||||
-webkit-box-shadow: 0.4em 0.6em 0 rgba(var(--text), 0.2);
|
||||
box-shadow: 0.4em 0.6em 0 rgba(var(--text), 0.2);
|
||||
}
|
||||
#logo {
|
||||
cursor: pointer;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,25 +8,25 @@
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
body{
|
||||
--primary-color: #1E88E5;
|
||||
--primary-color: #f8615a;
|
||||
--text: 17, 17, 17;
|
||||
--text-light: 85, 85, 85;
|
||||
--foreground: 255, 255, 255;
|
||||
--background: #e8e8e8;
|
||||
--background: #efefef;
|
||||
--dark-shade: #dadada;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: rgba(var(--text), 1);
|
||||
background: rgba(var(--foreground), 1);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--text: 238, 238, 238;
|
||||
--text-light: 170, 170, 170;
|
||||
--foreground: 26, 26, 26;
|
||||
--foreground: 20, 20, 20;
|
||||
--background: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
h5{
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
|
||||
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
|
||||
@ -99,14 +99,14 @@ button{
|
||||
&:first-of-type{
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
fill: var(--primary-color);
|
||||
fill: rgba(var(--text), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
line{
|
||||
stroke: var(--primary-color);
|
||||
stroke: rgba(var(--text), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
@ -138,10 +138,10 @@ section{
|
||||
}
|
||||
}
|
||||
.padding{
|
||||
padding: 0 1rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.margin{
|
||||
margin: 0 1rem;
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
#main_logo{
|
||||
height: 2rem;
|
||||
@ -159,7 +159,8 @@ section{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1em;
|
||||
/*#floscout_illustration{
|
||||
height: 100%;
|
||||
#floscout_illustration{
|
||||
margin-bottom: 1em;
|
||||
fill: none;
|
||||
height: 12rem;
|
||||
@ -173,7 +174,7 @@ section{
|
||||
.cube-color{
|
||||
stroke: rgba(var(--text), 1);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
.input{
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -181,11 +182,11 @@ section{
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: rgba(var(--foreground), 1);
|
||||
background: var(--background);
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid rgba(var(--text), 0.2);
|
||||
border: 1px solid rgba(var(--text), 0.1);
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
@ -208,7 +209,7 @@ section{
|
||||
}
|
||||
.watermark{
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -219,22 +220,22 @@ section{
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.dark-background{
|
||||
background: var(--dark-shade);
|
||||
}
|
||||
#highlights{
|
||||
padding: 4em 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 1em 2em;
|
||||
gap: 1rem;
|
||||
.highlight-item{
|
||||
background: var(--background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.4rem;
|
||||
h4{
|
||||
opacity: 0.8;
|
||||
color: rgba(var(--text-light), 1);
|
||||
}
|
||||
h1{
|
||||
font-size: 1.6em;
|
||||
letter-spacing: 0.1rem;
|
||||
margin-top: 0.1em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
&:first-of-type,&:nth-of-type(2){
|
||||
@ -255,7 +256,7 @@ section{
|
||||
}
|
||||
#top_transaction_container{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 1.5em;
|
||||
padding-bottom: 2em;
|
||||
padding-top: 2em;
|
||||
@ -264,8 +265,7 @@ section{
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
border-radius: 0.3em;
|
||||
background: rgba(var(--foreground), 1);
|
||||
border: solid 1px rgba(var(--text), 0.2);
|
||||
background: var(--background);
|
||||
.transaction-header{
|
||||
margin-bottom: 2em;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -301,7 +301,6 @@ section{
|
||||
}
|
||||
h4{
|
||||
cursor: pointer;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5em;
|
||||
font-weight: 500;
|
||||
&:hover{
|
||||
@ -314,18 +313,16 @@ section{
|
||||
}
|
||||
}
|
||||
#latest_transaction_section{
|
||||
background: rgba(var(--foreground), 1);
|
||||
header{
|
||||
grid-template-columns: 1fr auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground), 1);
|
||||
background: inherit;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
body{
|
||||
font-size: 16px;
|
||||
}
|
||||
.padding{
|
||||
padding: 0 6vw;
|
||||
}
|
||||
@ -342,7 +339,7 @@ section{
|
||||
section{
|
||||
header{
|
||||
h1{
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -357,6 +354,7 @@ section{
|
||||
margin: 0 8vw;
|
||||
}
|
||||
#highlights{
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
}
|
||||
.input{
|
||||
@ -395,11 +393,10 @@ section{
|
||||
}
|
||||
@media (hover:hover){
|
||||
button{
|
||||
transition: box-shadow 0.3s, background-color 0.3s;
|
||||
transition: background-color 0.3s;
|
||||
&:hover{
|
||||
background: rgba(var(--text), 1);
|
||||
color: var(--background);
|
||||
box-shadow: 0.4em 0.6em 0 rgba(var(--text), 0.2);
|
||||
}
|
||||
}
|
||||
#logo{
|
||||
|
||||
41
index.html
41
index.html
@ -9,7 +9,7 @@
|
||||
<body data-theme='dark'>
|
||||
<main>
|
||||
<section id="first_section">
|
||||
<div class="dark-background">
|
||||
<div>
|
||||
<header class="margin">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
@ -103,45 +103,6 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h5>From</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h5>to</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h3>₹0.000000007</h3>
|
||||
</div>
|
||||
<div class="transaction">
|
||||
<div class="transaction-header grid grid-2">
|
||||
<div>
|
||||
<h5>Token transfer</h5>
|
||||
<h2>Rupee</h2>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 64 64">
|
||||
<title>More infomation icon</title>
|
||||
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h5>From</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h5>to</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h3>₹0.000000007</h3>
|
||||
</div>
|
||||
<div class="transaction">
|
||||
<div class="transaction-header grid grid-2">
|
||||
<div>
|
||||
<h5>Token transfer</h5>
|
||||
<h2>Rupee</h2>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 64 64">
|
||||
<title>More infomation icon</title>
|
||||
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h5>From</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h5>to</h5>
|
||||
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user