oddsgate-ds 1.0.174 → 1.0.175

package/src/styles/Global.ts

@@ -1,301 +1,301 @@
-import {
-  alternativeFont,
-  colors,
-  desktop_width,
-  fontName,
-  gradients,
-  mobile_width,
-  radius,
-  responsiveMedia,
-  shadows,
-  spaces,
-  tablet_width,
-  typography,
-  zIndexes,
-} from '@/styles/variables'
-import { fontSize, generateUtilities, utilities } from './utilities';
-
-import { createGlobalStyle } from 'styled-components';
-import resetStyles from './reset';
-
-const GlobalStyles = createGlobalStyle`
-  :root {
-    --body-fontFamily: "${fontName}", sans-serif;
-    --alternative-fontFamily: "${alternativeFont}", sans-serif;
-
-    --responsiveMedia: ${responsiveMedia};
-
-    ${Object.keys(colors).map(
-  (color, i) => `--color-${color}: ${Object.values(colors)[i]};`
-)}
-
-    ${Object.keys(gradients).map(
-  (gradient, i) => `--gradient-${gradient}: ${Object.values(gradients)[i]};`
-)}
-
-    ${Object.keys(typography).map(
-  (typo, i) => `--fontSize-${typo}: ${Object.values(typography)[i].size};`
-)}
-
-    ${Object.keys(spaces).map(
-  (space, i) => `--space-${space}: ${Object.values(spaces)[i]};`
-)}
-
-    ${Object.keys(shadows).map(
-  (shadow, i) => `--shadow-${shadow}: ${Object.values(shadows)[i]};`
-)}
-
-    ${Object.keys(radius).map(
-  (radial, i) => `--radius-${radial}: ${Object.values(radius)[i]};`
-)}
-  }
-
-  ${resetStyles}
-
-  @font-face {
-    font-family: "miewfont";
-    src: url("/fonts/miewfont/miewfont.ttf");
-    src: url("/fonts/miewfont/miewfont.eot#iefix") format("embedded-opentype"),
-      url("/fonts/miewfont/miewfont.ttf") format("truetype"),
-      url("/fonts/miewfont/miewfont.woff") format("woff"),
-      url("/fonts/miewfont/miewfont.svg#miewfont") format("svg");
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  *,
-  *:after,
-  *:before {
-    box-sizing: border-box;
-    text-decoration: none;
-  }
-
-  html,
-  body {
-    background: transparent;
-    min-height: 100%;
-  }
-
-  html {
-    font-size: clamp(14px, calc(100vw / ${mobile_width} * 14), 16px);  //reset font size for mobile
-    line-height: 1;
-
-    color: var(--color-secondary50);
-    background: var(--color-white);
-
-    @media only screen and (min-width: 580px) { //reset font size for tablet
-      font-size: clamp(14px, calc(100vw / ${tablet_width} * 14), 16px) ;
-    }
-
-    @media only screen and (min-width: ${responsiveMedia}) {  //reset font size for desktop
-      font-size: clamp(14px, calc(100vw / ${desktop_width} * 16), 16px) ;
-    }
-
-    @media only screen and (min-width: 1680px) {  //reset font size for retina
-      //Needed for retina screens
-      font-size: 16px;
-    }
-  }
-
-  body {
-    position: relative;
-
-    font-family: var(--body-fontFamily);
-    ${fontSize('texts')};
-
-    -webkit-overflow-scrolling: touch;
-
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility !important;
-  }
-
-  a {
-    color: inherit;
-    outline: none;
-    text-decoration: none;
-  }
-
-  img,
-  picture {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
-
-  picture{
-    position: relative;
-  }
-
-  svg {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-  }
-
-  textarea {
-    resize: none;
-  }
-
-  strong {
-    font-weight: 700;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  p a {
-    color: var(--color-secondary);
-    text-decoration: underline;
-  }
-
-  hr {
-    border: 0;
-    border-top: 1px solid;
-  }
-
-  pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    clear: both;
-    color: #fff;
-    background: #1b1b1b;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size: 2;
-    tab-size: 2;
-    -ms-word-break: normal;
-    word-break: normal;
-    -webkit-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-    position: relative;
-    line-height: 28px;
-    border-radius: 8px;
-    overflow: hidden;
-
-    & code {
-      background: none;
-      white-space: pre;
-      -webkit-overflow-scrolling: touch;
-      overflow-x: scroll;
-      display: block;
-      max-width: 100%;
-      min-width: 100px;
-      font-size: 16px;
-      padding: 15px 20px 12px 22px;
-      line-height: 1.75;
-    }
-  }
-
-  select{
-    -webkit-appearance:none;
-  }
-
-  .ios,
-  .ios * {
-    // causes dom events events to be fired
-    cursor: pointer;
-  }
-
-
-  /***************** TYPOGRAPHY *****************/
-  ${Object.keys(typography).map(
-  (typo, i) =>
-    `.${typo}{
-      ${fontSize(typo)}
-    }`
-)}
-
-  p, li{
-    ${fontSize('texts')}
-  }
-  /***************** LAYOUT *****************/
-  #progress-bar {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    height: 0.2rem;
-    width: 100%;
-
-    background: var(--color-secondary-70);
-
-    z-index: 200;
-
-    transition: all 0.1s $ease-out-expo;
-  }
-
-  #__next {
-    width: 100%;
-    height: 100%;
-    // overflow-x: hidden;
-  }
-
-  .main-page {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    min-height: 100%;
-
-    z-index: 96;
-    transition: all 1.3s $ease-out-expo;
-  }
-
-  .main-content {
-    position: relative;
-    width: 100%;
-    align-self: flex-start;
-    overflow-x: hidden;
-    z-index: 1;
-  }
-
-  .no-scroll{
-    overflow:hidden;
-  }
-
-  .preview-box {
-    position: fixed;
-    top: 12px;
-    left: 50%;
-
-    padding: 12px 22px;
-
-    color: var(--color-primary50);
-    background: var(--color-white);
-    box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
-    border-radius: 50px;
-
-    transform: translateX(-50%);
-    z-index: 96;
-  }
-
-  .textEllipsis{
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
-
-  .linker{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    text-indent: -200%;
-    white-space: nowrap;
-    font-size: 0;
-    opacity: 0;
-    z-index: 103;
-  }
-
-  ${Object.keys(utilities).map((util, i) => `${generateUtilities(util, '')}`)}
-`
-export default GlobalStyles;
+import {
+  alternativeFont,
+  colors,
+  desktop_width,
+  fontName,
+  gradients,
+  mobile_width,
+  radius,
+  responsiveMedia,
+  shadows,
+  spaces,
+  tablet_width,
+  typography,
+  zIndexes,
+} from '@/styles/variables'
+import { fontSize, generateUtilities, utilities } from './utilities';
+
+import { createGlobalStyle } from 'styled-components';
+import resetStyles from './reset';
+
+const GlobalStyles = createGlobalStyle`
+  :root {
+    --body-fontFamily: "${fontName}", sans-serif;
+    --alternative-fontFamily: "${alternativeFont}", sans-serif;
+
+    --responsiveMedia: ${responsiveMedia};
+
+    ${Object.keys(colors).map(
+  (color, i) => `--color-${color}: ${Object.values(colors)[i]};`
+)}
+
+    ${Object.keys(gradients).map(
+  (gradient, i) => `--gradient-${gradient}: ${Object.values(gradients)[i]};`
+)}
+
+    ${Object.keys(typography).map(
+  (typo, i) => `--fontSize-${typo}: ${Object.values(typography)[i].size};`
+)}
+
+    ${Object.keys(spaces).map(
+  (space, i) => `--space-${space}: ${Object.values(spaces)[i]};`
+)}
+
+    ${Object.keys(shadows).map(
+  (shadow, i) => `--shadow-${shadow}: ${Object.values(shadows)[i]};`
+)}
+
+    ${Object.keys(radius).map(
+  (radial, i) => `--radius-${radial}: ${Object.values(radius)[i]};`
+)}
+  }
+
+  ${resetStyles}
+
+  @font-face {
+    font-family: "miewfont";
+    src: url("/fonts/miewfont/miewfont.ttf");
+    src: url("/fonts/miewfont/miewfont.eot#iefix") format("embedded-opentype"),
+      url("/fonts/miewfont/miewfont.ttf") format("truetype"),
+      url("/fonts/miewfont/miewfont.woff") format("woff"),
+      url("/fonts/miewfont/miewfont.svg#miewfont") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+    text-decoration: none;
+  }
+
+  html,
+  body {
+    background: transparent;
+    min-height: 100%;
+  }
+
+  html {
+    font-size: clamp(14px, calc(100vw / ${mobile_width} * 14), 16px);  //reset font size for mobile
+    line-height: 1;
+
+    color: var(--color-secondary50);
+    background: var(--color-white);
+
+    @media only screen and (min-width: 580px) { //reset font size for tablet
+      font-size: clamp(14px, calc(100vw / ${tablet_width} * 14), 16px) ;
+    }
+
+    @media only screen and (min-width: ${responsiveMedia}) {  //reset font size for desktop
+      font-size: clamp(14px, calc(100vw / ${desktop_width} * 16), 16px) ;
+    }
+
+    @media only screen and (min-width: 1680px) {  //reset font size for retina
+      //Needed for retina screens
+      font-size: 16px;
+    }
+  }
+
+  body {
+    position: relative;
+
+    font-family: var(--body-fontFamily);
+    ${fontSize('texts')};
+
+    -webkit-overflow-scrolling: touch;
+
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility !important;
+  }
+
+  a {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  img,
+  picture {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  picture{
+    position: relative;
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%;
+  }
+
+  textarea {
+    resize: none;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  p a {
+    color: var(--color-secondary);
+    text-decoration: underline;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid;
+  }
+
+  pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    clear: both;
+    color: #fff;
+    background: #1b1b1b;
+    padding: 0;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+    -ms-word-break: normal;
+    word-break: normal;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    position: relative;
+    line-height: 28px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    & code {
+      background: none;
+      white-space: pre;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: scroll;
+      display: block;
+      max-width: 100%;
+      min-width: 100px;
+      font-size: 16px;
+      padding: 15px 20px 12px 22px;
+      line-height: 1.75;
+    }
+  }
+
+  select{
+    -webkit-appearance:none;
+  }
+
+  .ios,
+  .ios * {
+    // causes dom events events to be fired
+    cursor: pointer;
+  }
+
+
+  /***************** TYPOGRAPHY *****************/
+  ${Object.keys(typography).map(
+  (typo, i) =>
+    `.${typo}{
+      ${fontSize(typo)}
+    }`
+)}
+
+  p, li{
+    ${fontSize('texts')}
+  }
+  /***************** LAYOUT *****************/
+  #progress-bar {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    height: 0.2rem;
+    width: 100%;
+
+    background: var(--color-secondary-70);
+
+    z-index: 200;
+
+    transition: all 0.1s $ease-out-expo;
+  }
+
+  #__next {
+    width: 100%;
+    height: 100%;
+    // overflow-x: hidden;
+  }
+
+  .main-page {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 100%;
+
+    z-index: 96;
+    transition: all 1.3s $ease-out-expo;
+  }
+
+  .main-content {
+    position: relative;
+    width: 100%;
+    align-self: flex-start;
+    overflow-x: hidden;
+    z-index: 1;
+  }
+
+  .no-scroll{
+    overflow:hidden;
+  }
+
+  .preview-box {
+    position: fixed;
+    top: 12px;
+    left: 50%;
+
+    padding: 12px 22px;
+
+    color: var(--color-primary50);
+    background: var(--color-white);
+    box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
+    border-radius: 50px;
+
+    transform: translateX(-50%);
+    z-index: 96;
+  }
+
+  .textEllipsis{
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: break-spaces;
+  }
+
+  .linker{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    text-indent: -200%;
+    white-space: nowrap;
+    font-size: 0;
+    opacity: 0;
+    z-index: 103;
+  }
+
+  ${Object.keys(utilities).map((util, i) => `${generateUtilities(util, '')}`)}
+`
+export default GlobalStyles;