add initial files

src/renderer/styles/base.scss

@@ -0,0 +1,2 @@
+@forward './mixins.scss';
+@forward './fonts.scss';

src/renderer/styles/fonts.ts

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export enum Font {
+  EPILOGUE = 'Epilogue',
+  GOTHAM = 'Gotham',
+  INTER = 'Inter',
+  POPPINS = 'Poppins',
+}
+
+export const fontGotham = (weight?: number) => css`
+  font-weight: ${weight || 400};
+  font-family: Gotham, sans-serif;
+`;
+
+export const fontPoppins = (weight?: number) => css`
+  font-weight: ${weight || 400};
+  font-family: Poppins, sans-serif;
+`;
+
+export const fontInter = (weight?: number) => css`
+  font-weight: ${weight || 400};
+  font-family: Inter, sans-serif;
+`;
+
+export const fontEpilogue = (weight?: number) => css`
+  font-weight: ${weight || 400};
+  font-family: Epilogue, sans-serif;
+`;

src/renderer/styles/global.scss

@@ -0,0 +1,175 @@
+@use '../themes/default.scss';
+@use '../themes/dark.scss';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  position: absolute;
+  display: block;
+  width: 100%;
+  min-width: 640px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  color: var(--content-text-color);
+  background: var(--content-bg);
+  font-size: 12px;
+}
+
+@media only screen and (max-width: 639px) {
+  body,
+  html {
+    overflow-x: auto;
+  }
+}
+
+#root {
+  height: inherit;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-bg);
+}
+
+a {
+  text-decoration: none;
+}
+
+@font-face {
+  font-family: 'AnekTamil';
+  src: url('../fonts/AnekTamil-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Archivo';
+  src: url('../fonts/Archivo-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Cormorant';
+  src: url('../fonts/Cormorant-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Circular STD';
+  src: url('../fonts/CircularSTD-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Didact Gothic';
+  src: url('../fonts/DidactGothic-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('../fonts/DMSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  src: url('../fonts/EncodeSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Epilogue';
+  src: url('../fonts/Epilogue-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Gotham';
+  src: url('../fonts/Gotham-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Hahmlet';
+  src: url('../fonts/Hahmlet-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('../fonts/Inconsolata-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'JetBrainsMono';
+  src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('../fonts/Manrope-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/Oswald-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  src: url('../fonts/Raleway-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Spectral';
+  src: url('../fonts/Spectral-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Work Sans';
+  src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
+}

src/renderer/styles/helpers.ts

@@ -0,0 +1,9 @@
+const size = {
+  desktop: '320px',
+  mobile: '640px',
+};
+
+export const device = {
+  desktop: `(max-width: ${size.desktop})`,
+  mobile: `(max-width: ${size.mobile})`,
+};

src/renderer/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './fonts';
+export * from './mixins';

src/renderer/styles/mixins.scss

@@ -0,0 +1,37 @@
+@mixin hidden-text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-center-column {
+  @include flex-center;
+  flex-direction: column;
+}
+
+@mixin flex-center-vertical {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex-center-horizontal {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin cover-background {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}

src/renderer/styles/mixins.ts

@@ -0,0 +1,30 @@
+import { css } from 'styled-components';
+
+export const textEllipsis = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const flexBetween = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const flexCenter = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const flexCenterColumn = css`
+  ${flexCenter}
+  flex-direction: column;
+`;
+
+export const coverBackground = css`
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+`;