📦 payloadcms / custom-website-series

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140/* eslint-disable @typescript-eslint/ban-ts-comment */
import { createUseStyles } from 'react-jss';
import { htmlFontSize, baselinePX, base } from './base';
import colors from './colors';
import { h1, h2, h3, h4, h5, body, fontFamily } from './type';
import queries from './queries';
import transitions from './transitions';

export default createUseStyles({
  // @ts-ignore
  '@font-face': [
    {
      fontFamily: 'Lausanne',
      src: 'url(/fonts/Lausanne-300.woff)',
      fallbacks: [
        'url(/fonts/Lausanne-300.ttf) format(truetype)',
        'url(/fonts/Lausanne-300.svg) format(svg)',
      ],
      fontWeight: 300,
      fontStyle: 'normal',
    },
    {
      fontFamily: 'Lausanne',
      src: 'url(/fonts/Lausanne-300italic.woff)',
      fallbacks: [
        'url(/fonts/Lausanne-300italic.ttf) format(truetype)',
        'url(/fonts/Lausanne-300italic.svg) format(svg)',
      ],
      fontWeight: 300,
      fontStyle: 'italic',
    },
  ],
  '@global': {
    'html, body': {
      margin: 0,
      '-webkit-font-smoothing': 'antialiased',
      color: colors.gray,
      height: '100%',
    },
    '*': {
      boxSizing: 'border-box',
    },
    '::selection': {
      background: colors.red,
      color: colors.white,
      mixBlendMode: 'normal',
    },
    html: {
      fontFamily,
      fontSize: htmlFontSize,
      lineHeight: `${baselinePX}px`,
      backgroundColor: colors.antique,
      [queries.m]: {
        fontSize: htmlFontSize * 0.75,
      },
    },
    '#__next': {
      height: '100%',
    },
    h1,
    h2,
    h3,
    h4,
    h5,
    p: {
      ...body,
    },
    ol: {
      padding: `0 0 0 ${base()}`,
      margin: `0 0 ${base()} 0`,
    },
    ul: {
      padding: `0 0 0 ${base()}`,
      margin: `0 0 ${base()} 0`,
    },
    li: {
      ...body,
    },
    '.page-transitions': {
      transition: `opacity ${transitions.page}ms linear`,
    },
    '.page-transitions-enter': {
      opacity: 0,
    },
    '.page-transitions-enter-active': {
      opacity: 1,
    },
    '.page-transitions-enter-done': {
      opacity: 1,
    },
    '.page-transitions-exit': {
      opacity: 1,
    },
    '.page-transitions-exit-active': {
      opacity: 0,
    },
    '.page-transitions-exit-done': {
      opacity: 0,
    },
    '.payload__modal-item': {
      opacity: 0,
      transition: `opacity ${transitions.modal}ms linear`,
    },
    '.payload__modal-item--enterActive': {
      opacity: 1,
    },
    '.payload__modal-item--enterDone': {
      opacity: 1,
    },
    '.Toastify .Toastify__toast-container': {
      left: base(2),
      right: base(2),
      transform: 'none',
      width: 'auto',
    },
    '.Toastify .Toastify__toast': {
      padding: base(0.5),
      borderRadius: 0,
      fontWeight: 'normal',
    },
    '.Toastify .Toastify__close-button': {
      alignSelf: 'center',
    },
    '.Toastify .Toastify__toast--success': {
      color: colors.gray,
      background: colors.blue,
    },
    '.Toastify .Toastify__close-button--success': {
      alignSelf: 'center',
    },
    '.Toastify .Toastify__toast--error': {
      color: colors.antique,
      background: colors.red,
    },
  },
  app: {
    height: '100%',
  },
});