resume

1
@import "@shared/breakpoints.sass"
2

3
:root
4
  --theme-light-primary: #000
5
  --theme-light-secondary: #787878
6
  --theme-light-bg: #fff
7
  --theme-light-el-bg: #f2f2f2
8

9
  // TODO: change palette
10
  --theme-dark-primary: #f0f0f0
11
  --theme-dark-secondary: #cccccc
12
  --theme-dark-bg: #333333
13
  --theme-dark-el-bg: #cdcdcd
14

15
  --theme-link: #5F5FFF
16
  --theme-yellow: #FCCA00
17

18
html
19
  font-size: calc(12px + .21vw)
20

21
body
22
  overflow-x: hidden
23
  scrollbar-width: thin
24

25
.App
26
  position: relative
27
  display: flex
28
  flex-direction: column
29
  align-items: center
30
  text-align: center
31
  min-height: 100vh
32
  transition: background-color .20s ease-out, color .20s ease-out
33
  &_theme_light
34
    background-color: var(--theme-light-bg)
35
    color: var(--theme-light-primary)
36
  &_theme_dark
37
    background-color: var(--theme-dark-bg)
38
    color: var(--theme-dark-primary)
39

40
.AppWrapper
41
  box-sizing: border-box
42
  margin: 8rem 0 8rem 0
43
  padding: 0 2rem 0 2rem
44
  width: 100%
45
  max-width: 58rem
46

47
.MainWrapper
48
  margin-top: 2rem
49
  display: flex
50
  align-items: flex-start
51
  flex-direction: column
52
  gap: 3rem
53

54
.PrintButton
55
  margin-top: 4rem
56

57
@media print
58
  body
59
    margin: 25mm 25mm 25mm 25mm
60
  .App
61
    background-color: #FFF
62
    display: block
63
  .AppWrapper
64
    margin-top: 0
65
    margin-bottom: 0
66
    display: block
67
  .MainWrapper
68
    display: block
69
  section
70
    margin: 3rem 0 0 0
71
  .PrintButton
72
    display: none
73

74
.CreateDate
75
  margin: 4rem 0 0 0
76
  width: 100%
77
  text-align: right
78
  &_theme_light
79
    color: var(--theme-light-secondary)
80
  &_theme_dark
81
    color: var(--theme-dark-secondary)
82

83
.AboutMe
84
  text-align: left
85