diff --git a/css/main.css b/css/main.css
index 3b88c01..c761a3b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -6,48 +6,49 @@
}
:root {
- font-size: clamp(1rem, 1.2vmax, 3rem);
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
}
-html, body {
+html,
+body {
height: 100%;
- scroll-behavior: smooth;
}
body {
+ --accent-color: #0d7377;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
color: rgba(var(--text-color), 1);
- background: rgba(var(--background-color), 1);
-}
-body,
-body * {
- --accent-color: #0D7377;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
- --danger-color: red;
+ background-color: rgba(var(--background-color), 1);
}
-body[data-theme=dark],
-body[data-theme=dark] * {
- --accent-color: #32E0C4;
- --text-color: 240, 240, 240;
- --text-color-light: 170, 170, 170;
- --background-color: 10, 10, 10;
+body[data-theme=dark] {
+ --accent-color: #32e0c4;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
}
-p {
- font-size: 0.8;
+p,
+strong {
+ font-size: 0.9rem;
max-width: 65ch;
line-height: 1.7;
- margin-bottom: 1.5rem;
- color: rgba(var(--text-color), 0.8);
-}
-p:not(:last-of-type) {
- margin-bottom: 1rem;
+ color: rgba(var(--text-color), 0.9);
}
img {
- object-fit: cover;
+ -o-object-fit: cover;
+ object-fit: cover;
}
a {
@@ -64,6 +65,14 @@ button {
background-color: inherit;
}
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
a:any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
@@ -109,8 +118,6 @@ ul {
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
- -ms-hyphens: auto;
- -moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
@@ -319,6 +326,7 @@ ul {
display: flex;
gap: 1rem;
align-items: center;
+ position: -webkit-sticky;
position: sticky;
padding: 1rem 1.5rem;
background: rgba(var(--background-color), 1);
@@ -352,23 +360,11 @@ ul {
stroke: none;
}
-sm-tab-header {
- padding: 0 1.5rem;
- background-color: rgba(var(--text-color), 0.06);
-}
-
-sm-tab {
- padding: 0.5rem 0.8rem;
-}
-
.section {
display: flex;
flex-direction: column;
margin-top: 3rem;
- padding: 0 1.5rem;
-}
-.section:first-of-type {
- margin-top: 0;
+ padding: 0 1rem;
}
.section__header {
@@ -377,21 +373,189 @@ sm-tab {
justify-content: space-between;
}
-.card {
- padding: 1.5rem;
+.flex {
display: flex;
- flex-direction: column;
- min-width: 20rem;
- border-radius: 0.5rem;
- margin-right: 1.5rem;
- background-color: rgba(var(--text-color), 0.06);
}
-.card h3 {
- font-weight: 500;
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-right-1 {
+ margin-right: 1rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.margin-left-auto {
+ margin-left: auto;
+}
+
+.margin-right-auto {
+ margin-right: auto;
+}
+
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+
+.margin-block-1 {
+ margin-block: 1rem;
+}
+
+.margin-block-1-5 {
+ margin-block: 1.5rem;
+}
+
+.margin-inline-1 {
+ margin-inline: 1rem;
+}
+
+.margin-inline-1-5 {
+ margin-inline: 1.5rem;
+}
+
+#main_section {
+ padding: 0 1.5rem;
+ margin-bottom: 5rem;
+}
+
+#otp2 {
+ padding: 1rem;
+ border-radius: 0.5rem;
+}
+#otp2.success {
+ background-color: rgba(0, 230, 118, 0.062745098);
+}
+#otp2.failed {
+ background-color: rgba(230, 0, 0, 0.062745098);
}
@media screen and (min-width: 640px) {
sm-popup {
--width: 24rem;
}
+ #main_section {
+ gap: 3rem;
+ padding: 0 4vw;
+ grid-template-columns: 1fr 1fr;
+ }
}
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index df4b6bc..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "version": 3,
- "mappings": "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",
- "sources": [
- "main.scss"
- ],
- "names": [],
- "file": "main.css"
-}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 4553462..08e1ce6 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-#logo h5,*{font-family:Roboto,sans-serif}*{padding:0;margin:0;box-sizing:border-box}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}#main_header,.flex{display:flex}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize{text-transform:capitalize}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}#main_header,.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#main_header{gap:1rem;position:sticky;padding:1rem 1.5rem;background:rgba(var(--background-color),1);border-bottom:solid 1px rgba(var(--text-color),.16);z-index:2}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-size:1rem;font-weight:600;margin-top:.2rem}#logo h5{font-size:.8rem;font-weight:400}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}sm-tab-header{padding:0 1.5rem;background-color:rgba(var(--text-color),.06)}sm-tab{padding:.5rem .8rem}.section{display:flex;flex-direction:column;margin-top:3rem;padding:0 1.5rem}.section:first-of-type{margin-top:0}.section__header{display:flex;padding:1rem 0;justify-content:space-between}.card{padding:1.5rem;display:flex;flex-direction:column;min-width:20rem;border-radius:.5rem;margin-right:1.5rem;background-color:rgba(var(--text-color),.06)}.card h3{font-weight:500}@media screen and (min-width:640px){sm-popup{--width:24rem}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #0d7377;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #32e0c4;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{display:inline-flex;border:none;background-color:inherit}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#main_header{display:flex;gap:1rem;align-items:center;position:-webkit-sticky;position:sticky;padding:1rem 1.5rem;background:rgba(var(--background-color), 1);border-bottom:solid 1px rgba(var(--text-color), 0.16);z-index:2}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{text-transform:capitalize;font-size:1rem;font-weight:600;margin-top:.2rem}#logo h5{font-size:.8rem;font-family:"Roboto",sans-serif;font-weight:400}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}.section{display:flex;flex-direction:column;margin-top:3rem;padding:0 1rem}.section__header{display:flex;padding:1rem 0;justify-content:space-between}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-right-1{margin-right:1rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}#main_section{padding:0 1.5rem;margin-bottom:5rem}#otp2{padding:1rem;border-radius:.5rem}#otp2.success{background-color:rgba(0,230,118,.062745098)}#otp2.failed{background-color:rgba(230,0,0,.062745098)}@media screen and (min-width: 640px){sm-popup{--width: 24rem}#main_section{gap:3rem;padding:0 4vw;grid-template-columns:1fr 1fr}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 29733c0..2bb3843 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,334 +1,490 @@
-*{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: 'Roboto', sans-serif;
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
}
-:root{
- font-size: clamp(1rem, 1.2vmax, 3rem);
-}
-html, body{
- height: 100%;
- scroll-behavior: smooth;
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
}
+
+html,
body {
- &,
- *{
- --accent-color: #0D7377;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
- --danger-color: red;
- }
- color: rgba(var(--text-color), 1);
- background: rgba(var(--background-color), 1);
-}
-body[data-theme='dark']{
- &,
- *{
- --accent-color: #32E0C4;
- --text-color: 240, 240, 240;
- --text-color-light: 170, 170, 170;
- --background-color: 10, 10, 10;
- --danger-color: rgb(255, 106, 106);
- }
-}
-p {
- font-size: 0.8;
- max-width: 65ch;
- line-height: 1.7;
- margin-bottom: 1.5rem;
- color: rgba(var(--text-color), 0.8);
- &:not(:last-of-type){
- margin-bottom: 1rem;
- }
-}
-img{
- object-fit: cover;
+ height: 100%;
}
-a{
- color: inherit;
- text-decoration: none;
- &:focus-visible{
- box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
- }
+body {
+ --accent-color: #0d7377;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
}
-button{
- display: inline-flex;
- border: none;
- background-color: inherit;
+body[data-theme="dark"] {
+ --accent-color: #32e0c4;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
}
-a:any-link:focus-visible{
- outline: rgba(var(--text-color), 1) 0.1rem solid;
-}
-sm-button{
- --border-radius: 0.3rem;
-}
-ul{
- list-style: none;
-}
-.flex{
- display: flex;
-}
-.grid{
- display: grid;
-}
-.hide{
- opacity: 0;
- pointer-events: none;
-}
-.hide-completely{
- display: none !important;
-}
-.no-transformations{
- transform: none !important;
-}
-.overflow-ellipsis{
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-.breakable{
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
- -ms-hyphens: auto;
- -moz-hyphens: auto;
- -webkit-hyphens: auto;
- hyphens: auto;
-}
-.full-bleed{
- grid-column: 1/4;
-}
-.h1{
- font-size: 2.5rem;
-}
-.h2{
- font-size: 2rem;
-}
-.h3{
- font-size: 1.4rem;
-}
-.h4{
- font-size: 1rem;
-}
-.h5{
- font-size: 0.8rem;
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
}
-.uppercase{
- text-transform: uppercase;
+img {
+ object-fit: cover;
}
-.capitalize{
- text-transform: capitalize;
+
+a {
+ color: inherit;
+ text-decoration: none;
+ &:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+ }
}
-.flex{
- display: flex;
+
+button {
+ display: inline-flex;
+ border: none;
+ background-color: inherit;
}
-.grid{
- display: grid;
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
}
-.grid-3{
- grid-template-columns: 1fr auto auto;
+sm-button {
+ --border-radius: 0.3rem;
}
-.flow-column{
- grid-auto-flow: column;
+ul {
+ list-style: none;
}
-.gap-0-5{
- gap: 0.5rem;
+.flex {
+ display: flex;
}
-.gap-1{
- gap: 1rem;
+.grid {
+ display: grid;
}
-.gap-1-5{
- gap: 1.5rem;
+.hide {
+ opacity: 0;
+ pointer-events: none;
}
-.gap-2{
- gap: 2rem;
+.hide-completely {
+ display: none !important;
}
-.gap-3{
- gap: 3rem;
+.no-transformations {
+ transform: none !important;
}
-.text-align-right{
- text-align: right;
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
-.align-start{
- align-items: flex-start;
+.breakable {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-word;
+ -ms-hyphens: auto;
+ -moz-hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
}
-.align-center{
- align-items: center;
+.full-bleed {
+ grid-column: 1/4;
}
-.text-center{
- text-align: center;
+.h1 {
+ font-size: 2.5rem;
}
-.justify-start{
- justify-content: start;
+.h2 {
+ font-size: 2rem;
}
-.justify-center{
- justify-content: center;
+.h3 {
+ font-size: 1.4rem;
}
-.justify-right{
- margin-left: auto;
+.h4 {
+ font-size: 1rem;
}
-.align-self-center{
- align-self: center;
+.h5 {
+ font-size: 0.8rem;
}
-.justify-self-center{
- justify-self: center;
+
+.uppercase {
+ text-transform: uppercase;
}
-.justify-self-start{
- justify-self: start;
+.capitalize {
+ text-transform: capitalize;
}
-.justify-self-end{
- justify-self: end;
+.flex {
+ display: flex;
}
-.direction-column{
- flex-direction: column;
+.grid {
+ display: grid;
}
-.space-between{
- justify-content: space-between;
+.grid-3 {
+ grid-template-columns: 1fr auto auto;
}
-.w-100{
- width: 100%;
+.flow-column {
+ grid-auto-flow: column;
}
-.color-0-8{
- color: rgba(var(--text-color), 0.8);
+.gap-0-5 {
+ gap: 0.5rem;
}
-.weight-400{
- font-weight: 400;
+.gap-1 {
+ gap: 1rem;
}
-.weight-500{
- font-weight: 500;
+.gap-1-5 {
+ gap: 1.5rem;
}
-.ripple{
- position: absolute;
- border-radius: 50%;
- transform: scale(0);
- background: rgba(var(--text-color), 0.16);
- pointer-events: none;
+.gap-2 {
+ gap: 2rem;
}
-.interact{
- position: relative;
- overflow: hidden;
- cursor: pointer;
- -webkit-tap-highlight-color: transparent;
+.gap-3 {
+ gap: 3rem;
}
-.observe-empty-state:empty{
- display: none;
+.text-align-right {
+ text-align: right;
}
-.observe-empty-state:not(:empty) ~ .empty-state{
- display: none;
+.align-start {
+ align-items: flex-start;
}
-.icon{
- width: 1.5rem;
- height: 1.5rem;
- fill: rgba(var(--text-color), 0.9);
+.align-center {
+ align-items: center;
}
-.button__icon{
- height: 1.2rem;
- width: 1.2rem;
- &--left{
- margin-right: 0.5rem;
- }
- &--right{
- margin-left: 0.5rem;
- }
+.text-center {
+ text-align: center;
+}
+.justify-start {
+ justify-content: start;
+}
+.justify-center {
+ justify-content: center;
+}
+.justify-right {
+ margin-left: auto;
+}
+.align-self-center {
+ align-self: center;
+}
+.justify-self-center {
+ justify-self: center;
+}
+.justify-self-start {
+ justify-self: start;
+}
+.justify-self-end {
+ justify-self: end;
+}
+.direction-column {
+ flex-direction: column;
+}
+.space-between {
+ justify-content: space-between;
+}
+.w-100 {
+ width: 100%;
+}
+.color-0-8 {
+ color: rgba(var(--text-color), 0.8);
+}
+.weight-400 {
+ font-weight: 400;
+}
+.weight-500 {
+ font-weight: 500;
+}
+.ripple {
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: rgba(var(--text-color), 0.16);
+ pointer-events: none;
+}
+.interact {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+.observe-empty-state:empty {
+ display: none;
+}
+.observe-empty-state:not(:empty) ~ .empty-state {
+ display: none;
+}
+.icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: rgba(var(--text-color), 0.9);
+}
+.button__icon {
+ height: 1.2rem;
+ width: 1.2rem;
+ &--left {
+ margin-right: 0.5rem;
+ }
+ &--right {
+ margin-left: 0.5rem;
+ }
}
#confirmation_popup,
#prompt_popup {
- flex-direction: column;
- h4 {
- font-weight: 500;
- margin-bottom: 0.5rem;
- }
- sm-button{
- margin: 0;
- }
- .flex {
- padding: 0;
- margin-top: 1rem;
- sm-button:first-of-type {
- margin-right: 0.6rem;
- margin-left: auto;
- }
+ flex-direction: column;
+ h4 {
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+ }
+ sm-button {
+ margin: 0;
+ }
+ .flex {
+ padding: 0;
+ margin-top: 1rem;
+ sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
}
+ }
}
-#main_header{
- display: flex;
- gap: 1rem;
- align-items: center;
- position: sticky;
- padding: 1rem 1.5rem;
- background: rgba(var(--background-color), 1);
- border-bottom: solid 1px rgba(var(--text-color), 0.16);
- z-index: 2;
+#main_header {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ position: sticky;
+ padding: 1rem 1.5rem;
+ background: rgba(var(--background-color), 1);
+ border-bottom: solid 1px rgba(var(--text-color), 0.16);
+ z-index: 2;
}
-#logo{
- display: grid;
- align-items: center;
- width: 100%;
- grid-template-columns: auto 1fr;
- gap: 0 0.5rem;
- margin-right: 1rem;
- h4{
- text-transform: capitalize;
- font-size: 1rem;
- font-weight: 600;
- margin-top: 0.2rem;
- }
- h5{
- font-size: 0.8rem;
- font-family: 'Roboto', sans-serif;
- font-weight: 400;
- }
- #main_logo{
- height: 1.4rem;
- width: 1.4rem;
- fill: rgba(var(--text-color), 1);
- stroke: none;
- }
+#logo {
+ display: grid;
+ align-items: center;
+ width: 100%;
+ grid-template-columns: auto 1fr;
+ gap: 0 0.5rem;
+ margin-right: 1rem;
+ h4 {
+ text-transform: capitalize;
+ font-size: 1rem;
+ font-weight: 600;
+ margin-top: 0.2rem;
+ }
+ h5 {
+ font-size: 0.8rem;
+ font-family: "Roboto", sans-serif;
+ font-weight: 400;
+ }
+ #main_logo {
+ height: 1.4rem;
+ width: 1.4rem;
+ fill: rgba(var(--text-color), 1);
+ stroke: none;
+ }
}
-sm-tab-header{
- padding: 0 1.5rem;
- background-color: rgba(var(--text-color), 0.06);
+.section {
+ display: flex;
+ flex-direction: column;
+ margin-top: 3rem;
+ padding: 0 1rem;
}
-sm-tab{
- padding: 0.5rem 0.8rem;
+.section__header {
+ display: flex;
+ padding: 1rem 0;
+ justify-content: space-between;
}
-.section{
- display: flex;
- flex-direction: column;
- margin-top: 3rem;
- padding: 0 1.5rem;
- &:first-of-type{
- margin-top: 0;
- }
-}
-.section__header{
- display: flex;
- padding: 1rem 0;
- justify-content: space-between;
-}
-.card{
- padding: 1.5rem;
- display: flex;
- flex-direction: column;
- min-width: 20rem;
- border-radius: 0.5rem;
- margin-right: 1.5rem;
- background-color: rgba(var(--text-color), 0.06);
- h3{
- font-weight: 500;
- }
+.flex {
+ display: flex;
}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+.margin-right-1 {
+ margin-right: 1rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.margin-left-auto {
+ margin-left: auto;
+}
+.margin-right-auto {
+ margin-right: auto;
+}
+
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+
+.margin-block-1 {
+ margin-block: 1rem;
+}
+
+.margin-block-1-5 {
+ margin-block: 1.5rem;
+}
+
+.margin-inline-1 {
+ margin-inline: 1rem;
+}
+
+.margin-inline-1-5 {
+ margin-inline: 1.5rem;
+}
+
+#main_section {
+ padding: 0 1.5rem;
+ margin-bottom: 5rem;
+}
+#otp2 {
+ padding: 1rem;
+ border-radius: 0.5rem;
+ &.success {
+ background-color: #00e67610;
+ }
+ &.failed {
+ background-color: #e6000010;
+ }
+}
@media screen and (min-width: 640px) {
- // for tablet and desktop
- sm-popup{
- --width: 24rem;
- }
-}
\ No newline at end of file
+ // for tablet and desktop
+ sm-popup {
+ --width: 24rem;
+ }
+ #main_section {
+ gap: 3rem;
+ padding: 0 4vw;
+ grid-template-columns: 1fr 1fr;
+ }
+}
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 6fb6c64..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,85 +0,0 @@
-.spinner{
- margin-left:45%;
- float: left;
-}
-#waiting{
- margin-left: 35%;
- font-weight: bold;
- color: gray;
-}
-sm-input{
- margin-left: 25%;
- width: 50%;
-}
-sm-button{
- margin-left: 38%;
- width: 20%;
-}
-.block{
- display:block;
-}
-#otp,#otp3{
- margin-left: 20%;
- margin-right: 20%;
-}
-.otpstyle{
- color: gray;
- font-weight: bold;
-}
-#otp2 {
- margin-left: 25%;
- margin-right: 25%;
-}
-
-.otpver{
- margin-left: 20%;margin-right: 20%;
-}
-#otp1.scroll {
- margin:4px, 4px;
- padding:4px;
- width: 800px;
- height: 300px;
- margin-left: 15%;
- margin-right: 15%;
- overflow-x: hidden;
- overflow-y: auto;
- text-align:justify;
-}
-/* width */
-.scroll::-webkit-scrollbar {
-width: 10px;
-}
-
-/* Track */
-.scroll::-webkit-scrollbar-track {
-background: #f1f1f1;
-}
-
-/* Handle */
-.scroll::-webkit-scrollbar-thumb {
-background: #888;
-}
-
-/* Handle on hover */
-.scroll::-webkit-scrollbar-thumb:hover {
-background: #555;
-}
-@media screen and (max-width:900px){
- sm-button{
- width:fit-content;
-
- }
- sm-input{
- width:100%;
- margin-left: 0;
- }
- .spinner{
- margin-left:35%;
- float: left;
- }
- #waiting{
- margin-left:10%;
- font-weight: bold;
- color: gray;
- }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3a0f35c..c702669 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,12 @@
Merkle_Tree
-
+
-
@@ -50,711 +49,666 @@
Merkle Tree
-
-
-
-
-
- Merkle Tree
-
- CREATE
+
+
+
+ Merkle Tree
+
+ CREATE
-
-
- Verify Element
-
-
-
-
- VERIFY
-
-
-
-
-
-
-
-
Card
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-
+
+
+
+ Verify Element
+
+
+
+ Enter proof
+
-
-
Card
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-
+
+ VERIFY
-
-
Card
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-
-
-
-
Card
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
+ })();
+
+
+
+
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-