Gitiles
Code Review Sign In
git.clicks.codes / Clicks / clicks.codes / 31d5d60773640e523ea93a5e7453b237941aa740 / . / styles / header.module.css
blob: 7353e3dd698143f23db0370f034358f9b380fba5 [file] [log] [blame]
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]1.backgroundImage {
2 position: absolute;
pineafan74a63752021-09-04 21:46:01 +0100[diff] [blame]3 bottom: -10px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]4 left: -3px;
5 width: calc(100% + 6px);
6 border-radius: 0 0 16.5px 16.5px;
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]7 filter: var(--theme-ui-colors-cardFilter);
pineafan78727452021-11-04 21:25:07 +0000[diff] [blame]8 transition: filter 0.3s ease-in-out;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]9}
10
11.header {
12 width: 100vw;
13 height: 100vh;
14 position: relative;
15 overflow: hidden;
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]16 filter: var(--theme-ui-colors-cardFilter);
pineafan78727452021-11-04 21:25:07 +0000[diff] [blame]17 transition: filter 0.3s ease-in-out;
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]18 display: flex;
19 flex-direction: column;
20 justify-content: center;
21 align-items: center;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]22}
23
24.panel {
25 position: absolute;
26 overflow: hidden;
27 width: min(76%, 800px);
28 height: auto;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]29 border-radius: 16.5px;
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]30 background-color: var(--theme-ui-colors-cardBackground);
pineafan78727452021-11-04 21:25:07 +0000[diff] [blame]31 transition: background-color 0.3s ease-in-out;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]32 backdrop-filter: blur(7px);
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]33 padding-top: 30px;
34 padding-bottom: 40px;
pineafan0e1ff242021-09-03 22:16:18 +0100[diff] [blame]35 padding-left: 10px;
36 padding-right: 10px;
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]37 margin-bottom: 10%;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]38}
39
40.title {
41 width: 100%;
42 text-align: center;
43 font-weight: 100;
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]44 margin-top: 0px;
45 margin-bottom: -20px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]46 font-size: max(2em, 4vw);
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]47 color: var(--theme-ui-colors-text);
pineafan78727452021-11-04 21:25:07 +0000[diff] [blame]48 transition: color 0.3s ease-in-out;
Samuel Shuert835c71f2021-09-03 15:49:26 -0500[diff] [blame]49 word-break: break-word;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]50}
51
52.subtext {
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]53 margin-bottom: 0px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]54 width: 100%;
55 text-align: center;
56 font-weight: 100;
57 font-size: max(1.5em, 1.5vw);
pineafan69adcb82021-11-03 21:29:03 +0000[diff] [blame]58 color: var(--theme-ui-colors-text);
pineafan78727452021-11-04 21:25:07 +0000[diff] [blame]59 transition: color 0.3s ease-in-out;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]60}
61
62.subtextExtra {
63 margin-bottom: 80px;
64}
65
66@keyframes arrow-slide {
67 0% {
68 -webkit-transform: translateY(0);
69 transform: translateY(0);
70 }
71 50% {
72 -webkit-transform: translateY(-1em);
73 transform: translateY(-1em);
74 }
75 100% {
76 -webkit-transform: translateY(0);
77 transform: translateY(0);
78 }
79}
80.arrow {
81 -webkit-animation: arrow-slide 2s ease-in-out infinite both;
82 animation: arrow-slide 2s ease-in-out infinite both;
83}
84
85.arrowSpan {
86 position: absolute;
87 bottom: 100px;
88 width: 100%;
89 text-align: center;
90}
91
92.arrowHidden {
93 display: none;
94}
95
96.buttonLayout {
97 display: flex;
98 flex-direction: row;
99 justify-content: flex-end;
100 align-items: center;
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]101 flex-wrap: wrap;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]102 padding: 0px;
103 position: absolute;
104 bottom: 5px;
105 right: 5px;
106}
107
108.button {
109 display: flex;
110 flex-direction: row;
111 align-items: flex-start;
112 justify-content: right;
113 position: static;
114 flex: none;
115 order: 1;
116 flex-grow: 0;
117
118 margin: 5px;
119 padding: 5px 10px;
120 border-radius: 8px;
121}