diff options
Diffstat (limited to 'src/components/landing/sections/Contact.module.css')
-rw-r--r-- | src/components/landing/sections/Contact.module.css | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css new file mode 100644 index 0000000..15ed2a6 --- /dev/null +++ b/src/components/landing/sections/Contact.module.css | |||
@@ -0,0 +1,175 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2024 Kristóf Marussy | ||
3 | * | ||
4 | * SPDX-License-Identifier: MIT | ||
5 | */ | ||
6 | |||
7 | .contacts { | ||
8 | margin-top: 1.5rem; | ||
9 | margin-bottom: 2rem; | ||
10 | } | ||
11 | |||
12 | .col { | ||
13 | margin-bottom: 1.5rem; | ||
14 | } | ||
15 | |||
16 | .contact { | ||
17 | position: relative; | ||
18 | display: flex; | ||
19 | height: 100%; | ||
20 | flex-direction: row; | ||
21 | align-items: center; | ||
22 | --marussy-contact-color: var(--ifm-font-color-base); | ||
23 | --marussy-contact-icon-color: var(--marussy-contact-color); | ||
24 | --marussy-contact-icon-hover-color: var(--ifm-link-hover-color); | ||
25 | --marussy-contact-muted-color: var(--ifm-color-secondary-contrast-foreground); | ||
26 | --marussy-contact-muted-color-or-hover: var(--marussy-contact-muted-color); | ||
27 | --marussy-alternate-icon: 0; | ||
28 | color: var(--marussy-contact-color); | ||
29 | transition: color var(--ifm-transition-fast) | ||
30 | var(--ifm-transition-timing-default); | ||
31 | } | ||
32 | |||
33 | [data-theme='dark'] .contact { | ||
34 | --marussy-contact-muted-color: var(--ifm-color-emphasis-500); | ||
35 | --marussy-contact-icon-hover-color: var(--ifm-color-primary-light); | ||
36 | } | ||
37 | |||
38 | .contact:not(:has(.contact__action:hover)):hover, | ||
39 | .contact:focus-within:not(:has(.contact__action:focus)) { | ||
40 | --marussy-contact-color: var(--ifm-link-hover-color); | ||
41 | --marussy-contact-icon-color: var(--marussy-contact-icon-hover-color); | ||
42 | --marussy-contact-muted-color-or-hover: var(--ifm-link-hover-color); | ||
43 | } | ||
44 | |||
45 | .contact:has(.contact__action--alternate:hover), | ||
46 | .contact:has(.contact__action--alternate:focus) { | ||
47 | --marussy-alternate-icon: 1; | ||
48 | } | ||
49 | |||
50 | .contact__icon-holder { | ||
51 | position: relative; | ||
52 | display: flex; | ||
53 | padding: 1rem; | ||
54 | margin-right: 1rem; | ||
55 | background: var(--ifm-color-emphasis-200); | ||
56 | border-radius: 50em; | ||
57 | align-items: center; | ||
58 | justify-content: center; | ||
59 | color: var(--marussy-contact-icon-color); | ||
60 | } | ||
61 | |||
62 | .contact__icon-holder--fediverse { | ||
63 | padding: 0.75rem; | ||
64 | } | ||
65 | |||
66 | .contact__icon { | ||
67 | width: 2.5rem; | ||
68 | height: 2.5rem; | ||
69 | opacity: calc(1 - var(--marussy-alternate-icon)); | ||
70 | transition: | ||
71 | color var(--ifm-transition-fast) var(--ifm-transition-timing-default), | ||
72 | opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default); | ||
73 | } | ||
74 | |||
75 | .contact__icon--fediverse { | ||
76 | width: 3rem; | ||
77 | height: 3rem; | ||
78 | margin: -0.0625rem -0.0625rem 0.0625rem 0.0625rem; | ||
79 | } | ||
80 | |||
81 | .contact__icon--alternate { | ||
82 | position: absolute; | ||
83 | top: 1rem; | ||
84 | left: 1rem; | ||
85 | color: var(--marussy-contact-icon-hover-color); | ||
86 | opacity: var(--marussy-alternate-icon); | ||
87 | } | ||
88 | |||
89 | .contact__content { | ||
90 | dispaly: flex; | ||
91 | flex-direction: row; | ||
92 | } | ||
93 | |||
94 | .contact__title { | ||
95 | margin: 0; | ||
96 | --casl: 0; | ||
97 | } | ||
98 | |||
99 | .contact__value { | ||
100 | margin: 0; | ||
101 | } | ||
102 | |||
103 | .contact__description { | ||
104 | margin: 0; | ||
105 | --slnt: -15; | ||
106 | --crsv: 1; | ||
107 | font-size: 0.875rem; | ||
108 | --marussy-contact-color: var(--marussy-contact-muted-color-or-hover); | ||
109 | color: var(--marussy-contact-muted-color-or-hover); | ||
110 | transition: color var(--ifm-transition-fast) | ||
111 | var(--ifm-transition-timing-default); | ||
112 | } | ||
113 | |||
114 | .contact__link { | ||
115 | --ifm-link-color: var(--marussy-contact-color); | ||
116 | } | ||
117 | |||
118 | .contact__link::after { | ||
119 | content: ' '; | ||
120 | position: absolute; | ||
121 | top: 0; | ||
122 | right: 0; | ||
123 | bottom: 0; | ||
124 | left: 0; | ||
125 | } | ||
126 | |||
127 | .contact__action { | ||
128 | position: relative; | ||
129 | --ifm-link-color: var(--marussy-contact-muted-color); | ||
130 | } | ||
131 | |||
132 | .contact__action:focus { | ||
133 | --ifm-link-color: var(--ifm-link-hover-color); | ||
134 | } | ||
135 | |||
136 | .small { | ||
137 | display: inline-block; | ||
138 | position: relative; | ||
139 | max-height: 0; | ||
140 | width: 1.5rem; | ||
141 | overflow: visible; | ||
142 | vertical-align: text-bottom; | ||
143 | } | ||
144 | |||
145 | .small__link { | ||
146 | display: flex; | ||
147 | position: absolute; | ||
148 | bottom: 0; | ||
149 | } | ||
150 | |||
151 | .small__icon { | ||
152 | height: 1.5rem; | ||
153 | width: 1.5rem; | ||
154 | } | ||
155 | |||
156 | .photo__container { | ||
157 | position: relative; | ||
158 | border-radius: var(--ifm-card-border-radius); | ||
159 | overflow: hidden; | ||
160 | aspect-ratio: 1288/480; | ||
161 | min-height: 15rem; | ||
162 | max-width: 100%; | ||
163 | background-size: cover; | ||
164 | background-position: 25% center; | ||
165 | } | ||
166 | |||
167 | .photo { | ||
168 | position: absolute; | ||
169 | top: 0; | ||
170 | left: 0; | ||
171 | width: 100%; | ||
172 | height: 100%; | ||
173 | object-fit: cover; | ||
174 | object-position: 25% center; | ||
175 | } | ||