feat: setup layout and theme

assets/css/main.scss

@@ -1,61 +1,22 @@
 @import "media";
 
 .page {
- @apply bg-background bg-rotki-pattern bg-local bg-right-top bg-no-repeat;
-
  scroll-behavior: smooth;
  overflow-x: hidden;
-
- @include for-size(phone-only) {
- background-size: 4.5rem;
- }
-
- @include for-size(tablet-portrait-up) {
- background-size: 5rem;
- }
-
- @include for-size(desktop-up) {
- background-size: 7.5rem;
- }
-
- @include for-size(big-desktop-up) {
- background-size: 12rem;
- }
-
 }
 
 .body {
- @apply bg-rotki-logo bg-local bg-left-top bg-no-repeat overflow-x-hidden overflow-y-hidden;
-
- @include for-size(phone-only) {
- background-size: 4rem;
- }
-
- @include for-size(tablet-portrait-up) {
- background-size: 5rem;
- }
-
- @include for-size(desktop-up) {
- background-size: 6.5rem;
- }
-
- @include for-size(big-desktop-up) {
- background-size: 11rem;
- }
-
+ @apply overflow-x-hidden overflow-y-hidden text-rui-text;
 }
 
-$mobile-margin: 16px;
-
-$mobile-font-percentage: 0.7;
-$tablet-font-percentage: 0.8;
-
-$mobile-button-percentage: 0.8;
-$mobile-image-percentage: 0.4;
+.container {
+ @apply px-4;
+}
 
 .fade-enter-active, .fade-leave-active {
  transition: opacity .4s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
 }

assets/css/media.scss

@@ -18,6 +18,9 @@ $tablet-landscape-font-percentage: 0.9;
 $desktop-up-font-percentage: 0.9;
 $big-desktop-font-percentage: 1.1;
 
+$mobile-button-percentage: 0.8;
+$mobile-image-percentage: 0.4;
+
 @mixin text-size($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
@@ -48,6 +51,7 @@ $big-desktop-font-percentage: 1.1;
  }
 }
 
+$mobile-margin: 16px;
 
 @mixin margin-x($margin) {
  margin-left: $margin;

assets/css/tailwind.css

@@ -1,109 +1,5 @@
+@import '@rotki/ui-library/dist/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer components {
- .rotki-margin {
- margin-left: 151px;
- margin-right: 151px;
- }
-}
-
-/* source-sans-pro-300 - latin */
-@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 300;
- src: url('../fonts/source-sans-pro-v14-latin-300.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/source-sans-pro-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-300.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v14-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-
-/* source-sans-pro-regular - latin */
-@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/source-sans-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-sans-pro-medium - latin */
-@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 600;
- src: url('../fonts/source-sans-pro-v14-latin-600.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/source-sans-pro-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-600.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v14-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* maven-pro-regular - latin */
-@font-face {
- font-family: 'Maven Pro';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/maven-pro-v25-latin-regular.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/maven-pro-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/maven-pro-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/maven-pro-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/maven-pro-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/maven-pro-v25-latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */
-}
-
-/* maven-pro-500 - latin */
-@font-face {
- font-family: 'Maven Pro';
- font-style: normal;
- font-weight: 500;
- src: url('../fonts/maven-pro-v28-latin-500.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/maven-pro-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/maven-pro-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/maven-pro-v28-latin-500.woff') format('woff'), /* Modern Browsers */
- url('../fonts/maven-pro-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/maven-pro-v28-latin-500.svg#MavenPro') format('svg'); /* Legacy iOS */
-}
-
-/* maven-pro-700 - latin */
-@font-face {
- font-family: 'Maven Pro';
- font-style: normal;
- font-weight: 700;
- src: url('../fonts/maven-pro-v25-latin-700.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/maven-pro-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/maven-pro-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/maven-pro-v25-latin-700.woff') format('woff'), /* Modern Browsers */
- url('../fonts/maven-pro-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/maven-pro-v25-latin-700.svg#MavenPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-serif-pro-regular - latin */
-@font-face {
- font-family: 'Source Serif Pro';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/source-serif-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/source-serif-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-serif-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-serif-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-serif-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-serif-pro-v11-latin-regular.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
-}