initial commit

css/main.css

@@ -0,0 +1,216 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  --accent-color: #00a566;
+  --light-shade: rgba(var(--text-color), 0.06);
+  --text-color: 17, 17, 17;
+  --text-color-light: 100, 100, 100;
+  --foreground-color: 255, 255, 255;
+  --background-color: #efefef;
+  --error-color: red;
+  color: rgba(var(--text-color), 1);
+  height: calc(100%);
+  font-size: clamp(1rem, 1.2vmax, 3rem);
+  background: rgba(var(--foreground-color), 1);
+}
+
+body[data-theme=dark] {
+  --accent-color:#00fa9a;
+  --text-color: 240, 240, 240;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 20, 20, 20;
+  --error-color: rgb(255, 106, 106);
+}
+
+button {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  font-weight: 500;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button {
+  border-radius: 0.2rem;
+  padding: 0.5rem 0.6rem;
+}
+
+.button--primary {
+  background: var(--accent-color);
+  color: rgba(var(--foreground-color), 1);
+}
+.button--primary .icon {
+  fill: rgba(var(--foreground-color), 1);
+}
+
+button:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-input,
+sm-textarea {
+  --border-radius: 0.2rem;
+  --background: rgba(var(--text-color), 0.06);
+}
+
+sm-button {
+  --border-radius: 0.2rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.align-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.direction-column {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.space-between {
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.margin-top-1-5 {
+  margin-top: 1.5rem;
+}
+
+.margin-bottom-1-5 {
+  margin-bottom: 1.5rem;
+}
+
+.margin-left-0-5 {
+  margin-left: 0.5rem;
+}
+
+.margin-right-0-5 {
+  margin-right: 0.5rem;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.no-transformations {
+  -webkit-transform: none !important;
+          transform: none !important;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  -webkit-transform: scale(0);
+          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);
+}
+
+.icon-only {
+  height: 2.6rem;
+  width: 2.6rem;
+  padding: 0.6rem;
+}
+
+.close-icon {
+  padding: 0.3rem;
+}
+
+.close-button {
+  left: -0.5rem;
+}
+
+.option__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+  margin-right: 0.8rem;
+}
+
+.option__label {
+  font-size: 1rem;
+}
+/*# sourceMappingURL=main.css.map */

css/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAQ,gIAAA;AAER;EACI,UAAA;EACA,SAAA;EACA,8BAAA;EACA,sBAAA;EACA,iCAAA;ACAJ;;ADEA;EACI,uBAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,4CAAA;EACA,wBAAA;EACA,iCAAA;EACA,iCAAA;EACA,2BAAA;EACA,kBAAA;EACA,iCAAA;EACA,kBAAA;EACA,qCAAA;EACA,4CAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,2BAAA;EACA,iCAAA;EACA,8BAAA;EACA,iCAAA;ACEJ;;ADCA;EACI,kBAAA;EACA,gBAAA;EACA,2BAAA;EAAA,2BAAA;EAAA,oBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,cAAA;EACA,gBAAA;EACA,wCAAA;ACEJ;;ADAA;EACI,qBAAA;EACA,sBAAA;ACGJ;;ADDA;EACI,+BAAA;EACA,uCAAA;ACIJ;ADHI;EACI,sCAAA;ACKR;;ADFA;EACI,gDAAA;ACKJ;;ADHA;;EAEI,uBAAA;EACA,2CAAA;ACMJ;;ADJA;EACI,uBAAA;ACOJ;;ADLA;EACI,gBAAA;ACQJ;;ADNA;EACI,oBAAA;EAAA,oBAAA;EAAA,aAAA;ACSJ;;ADPA;EACI,aAAA;ACUJ;;ADRA;EACI,sBAAA;ACWJ;;ADTA;EACI,yBAAA;MAAA,sBAAA;UAAA,mBAAA;ACYJ;;ADVA;EACI,iBAAA;ACaJ;;ADXA;EACI,4BAAA;EAAA,6BAAA;MAAA,0BAAA;UAAA,sBAAA;ACcJ;;ADZA;EACI,yBAAA;MAAA,sBAAA;UAAA,8BAAA;ACeJ;;ADbA;EACI,WAAA;ACgBJ;;ADdA;EACI,kBAAA;ACiBJ;;ADfA;EACI,qBAAA;ACkBJ;;ADhBA;EACI,mBAAA;ACmBJ;;ADjBA;EACI,oBAAA;ACoBJ;;ADlBA;EACI,UAAA;EACA,oBAAA;ACqBJ;;ADnBA;EACI,wBAAA;ACsBJ;;ADpBA;EACI,kCAAA;UAAA,0BAAA;ACuBJ;;ADrBA;EACI,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACwBJ;;ADtBA;EACI,kBAAA;EACA,kBAAA;EACA,2BAAA;UAAA,mBAAA;EACA,yCAAA;EACA,oBAAA;ACyBJ;;ADvBA;EACI,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,wCAAA;AC0BJ;;ADxBA;EACI,aAAA;AC2BJ;;ADzBA;EACI,aAAA;AC4BJ;;AD1BA;EACI,aAAA;EACA,cAAA;EACA,kCAAA;AC6BJ;;AD3BA;EACI,cAAA;EACA,aAAA;EACA,eAAA;AC8BJ;;AD5BA;EACI,eAAA;AC+BJ;;AD7BA;EACI,aAAA;ACgCJ;;AD7BA;EACI,cAAA;EACA,aAAA;EACA,oBAAA;ACgCJ;;AD9BA;EACI,eAAA;ACiCJ","file":"main.css"}

css/main.min.css

@@ -0,0 +1,2 @@
+@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #00a566;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--foreground-color), 1)}body[data-theme=dark]{--accent-color:#00fa9a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106)}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.justify-right{margin-left:auto}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.full-width{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);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)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.option__icon{height:1.2rem;width:1.2rem;margin-right:.8rem}.option__label{font-size:1rem}
+/*# sourceMappingURL=main.min.css.map */

css/main.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAQ,0HAAA,CAER,EACI,SAAA,CACA,QAAA,CACA,6BAAA,CACA,qBAAA,CACA,+BAAA,CAEJ,KACI,sBAAA,CAGJ,KACI,uBAAA,CACA,4CAAA,CACA,wBAAA,CACA,iCAAA,CACA,iCAAA,CACA,2BAAA,CACA,kBAAA,CACA,gCAAA,CACA,iBAAA,CACA,oCAAA,CACA,2CAAA,CAEJ,sBACI,sBAAA,CACA,2BAAA,CACA,iCAAA,CACA,8BAAA,CACA,iCAAA,CAGJ,OACI,iBAAA,CACA,eAAA,CACA,0BAAA,CAAA,0BAAA,CAAA,mBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,WAAA,CACA,eAAA,CACA,cAAA,CACA,YAAA,CACA,aAAA,CACA,eAAA,CACA,uCAAA,CAEJ,QACI,mBAAA,CACA,mBAAA,CAEJ,iBACI,8BAAA,CACA,sCAAA,CACA,uBACI,qCAAA,CAGR,qBACI,8CAAA,CAEJ,qBAEI,uBAAA,CACA,2CAAA,CAEJ,UACI,uBAAA,CAEJ,GACI,eAAA,CAEJ,MACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,MACI,YAAA,CAEJ,aACI,qBAAA,CAEJ,cACI,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CAEJ,eACI,gBAAA,CAEJ,kBACI,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEJ,eACI,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAEJ,YACI,UAAA,CAEJ,gBACI,iBAAA,CAEJ,mBACI,oBAAA,CAEJ,iBACI,iBAAA,CAEJ,kBACI,kBAAA,CAEJ,MACI,SAAA,CACA,mBAAA,CAEJ,iBACI,uBAAA,CAEJ,oBACI,iCAAA,CAAA,yBAAA,CAEJ,mBACI,UAAA,CACA,eAAA,CACA,kBAAA,CACA,sBAAA,CAEJ,QACI,iBAAA,CACA,iBAAA,CACA,0BAAA,CAAA,kBAAA,CACA,wCAAA,CACA,mBAAA,CAEJ,UACI,iBAAA,CACA,eAAA,CACA,cAAA,CACA,uCAAA,CAEJ,2BACI,YAAA,CAEJ,8CACI,YAAA,CAEJ,MACI,YAAA,CACA,aAAA,CACA,iCAAA,CAEJ,WACI,aAAA,CACA,YAAA,CACA,aAAA,CAEJ,YACI,aAAA,CAEJ,cACI,YAAA,CAGJ,cACI,aAAA,CACA,YAAA,CACA,kBAAA,CAEJ,eACI,cAAA","file":"main.min.css"}

css/main.scss

@@ -0,0 +1,168 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    --accent-color: #00a566;
+    --light-shade: rgba(var(--text-color), 0.06);
+    --text-color: 17, 17, 17;
+    --text-color-light: 100, 100, 100;
+    --foreground-color: 255, 255, 255;
+    --background-color: #efefef;
+    --error-color: red;
+    color: rgba(var(--text-color), 1);
+    height: calc(100%);
+    font-size: clamp(1rem, 1.2vmax, 3rem);
+    background: rgba(var(--foreground-color), 1);
+}
+body[data-theme='dark']{
+    --accent-color:#00fa9a;
+    --text-color: 240, 240, 240;
+    --text-color-light: 170, 170, 170;
+    --foreground-color: 20, 20, 20;
+    --error-color: rgb(255, 106, 106);
+}
+
+button{
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    outline: none;
+    color: inherit;
+    font-weight: 500;
+    -webkit-tap-highlight-color: transparent;
+}
+.button{
+    border-radius: 0.2rem;
+    padding: 0.5rem 0.6rem;
+}
+.button--primary{
+    background: var(--accent-color);
+    color: rgba(var(--foreground-color), 1);
+    .icon{
+        fill: rgba(var(--foreground-color), 1);
+    }
+}
+button:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-input,
+sm-textarea{
+    --border-radius: 0.2rem;
+    --background: rgba(var(--text-color), 0.06);
+}
+sm-button{
+    --border-radius: 0.2rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.flow-column{
+    grid-auto-flow: column;
+}
+.align-center{
+    align-items: center;
+}
+.justify-right{
+    margin-left: auto;
+}
+.direction-column{
+    flex-direction: column;
+}
+.space-between{
+    justify-content: space-between;
+}
+.full-width{
+    width: 100%;
+}
+.margin-top-1-5{
+    margin-top: 1.5rem;
+}
+.margin-bottom-1-5{
+    margin-bottom: 1.5rem;
+}
+.margin-left-0-5{
+    margin-left: 0.5rem;
+}
+.margin-right-0-5{
+    margin-right: 0.5rem;
+}
+.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;
+}
+.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);
+}
+.icon-only{
+    height: 2.6rem;
+    width: 2.6rem;
+    padding: 0.6rem;
+}
+.close-icon{
+    padding: 0.3rem;
+}
+.close-button{
+    left: -0.5rem;
+}
+
+.option__icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    margin-right: 0.8rem;
+}
+.option__label{
+    font-size: 1rem;
+}

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/main.min.css">
+</head>
+<body>
+    <header id="main_header">
+        <button>Elevator</button>
+        <div id="main_logo">
+            
+        </div>
+    </header>
+</body>
+</html>