3aebadf7 |
1 | @import "colors"; |
2 | @import "reset"; |
3 | @import "tools"; |
4 | @import "formatting"; |
5 | /// Base font size setting |
6 | $em-base: 16px; |
7 | |
8 | body { |
9 | font: { |
10 | family: 'Open Sans', sans-serif; |
11 | size: $em-base; |
12 | weight: 400; |
13 | } |
14 | line-height: 1.5; |
15 | background-color: $primary-color-light; |
16 | background: radial-gradient(farthest-corner at 1% 1%, $primary-color-light 30%, $primary-color 100%); |
17 | #wrapper { |
18 | padding: 1em; |
19 | padding-left: 4.5em; |
20 | display: grid; |
21 | grid-template-columns: 1fr 1fr 1fr 1fr; |
22 | grid-template-rows: auto; |
23 | grid-template-areas: |
24 | "header header header header" |
25 | "main main main main" |
26 | "footer footer footer footer"; |
27 | #language { |
28 | position: fixed; |
29 | top: 0; |
30 | left: 0; |
31 | width: 7%; |
32 | z-index: 99; |
33 | margin: 0; |
34 | padding: 0; |
35 | color: $primary-color-light; |
36 | } |
37 | #menu { |
38 | position: fixed; |
39 | top: 0; |
40 | left: 0; |
41 | width: 10em; |
42 | height: 100vh; |
43 | background-color: $primary-color-dark; |
44 | @include box-shadow(0, 10, 25, $standard-box-shadow-color); |
45 | transition: width 0.4s ease-in-out; |
46 | &.closed { |
47 | width: 4em; |
48 | #menu-content { |
49 | display: none; |
50 | } |
51 | } |
52 | #menu-content { |
53 | margin-top: 3em; |
54 | text-align: center; |
55 | padding-left: 1em; |
56 | padding-right: 1em; |
e6e48bf7 |
57 | #print-page { |
58 | i { |
59 | font-size: 6em; |
60 | color: $primary-color-light; |
61 | } |
62 | } |
3aebadf7 |
63 | } |
64 | } |
65 | #header { |
66 | grid-area: header; |
67 | display: grid; |
68 | grid-template-columns: 3fr 1fr; |
69 | grid-template-rows: 1; |
70 | grid-template-areas: |
71 | "name photo"; |
72 | figure { |
73 | grid-area: photo; |
74 | width: 16em; |
75 | img { |
76 | width: 16em; |
77 | @include box-shadow(-5, 5, 25, $standard-box-shadow-color); |
78 | } |
79 | } |
80 | #heading { |
81 | grid-area: name; |
82 | align-self: center; |
83 | text-align: center; |
84 | line-height: 2.5; |
85 | div { |
86 | h1 { |
87 | font-size: 3em; |
88 | line-height: 2; |
89 | } |
90 | } |
91 | div#address { |
92 | text-transform: uppercase; |
93 | i { |
94 | font-size: 1em; |
95 | line-height: 1; |
96 | } |
97 | } |
98 | } |
99 | } |
100 | #main { |
101 | grid-area: main; |
102 | #container { |
103 | #content { |
104 | display: grid; |
105 | grid-template-columns: 1fr 3fr; |
106 | grid-template-rows: repeat(5, fit-content(100%)); |
107 | grid-column-gap: 1em; |
108 | grid-template-areas: |
109 | "profile-title profile-content" |
110 | "working-title working-content" |
111 | "studies-title studies-content" |
112 | "knowledge-title knowledge-content" |
113 | "personal-title personal-content"; |
114 | div, h2 { |
115 | margin-top: 2em; |
116 | } |
117 | h2.personal-profile { |
118 | grid-area: profile-title; |
119 | } |
120 | div.personal-profile { |
121 | grid-area: profile-content; |
122 | text-align: justify; |
123 | } |
124 | h2.working-experience { |
125 | grid-area: working-title; |
126 | } |
127 | div.working-experience { |
128 | grid-area: working-content; |
129 | div:first-child { |
130 | margin-top: 0; |
131 | } |
132 | } |
133 | h2.studies { |
134 | grid-area: studies-title; |
135 | } |
136 | div.studies { |
137 | grid-area: studies-content; |
138 | } |
139 | h2.knowledge { |
140 | grid-area: knowledge-title; |
141 | } |
142 | div.knowledge { |
143 | grid-area: knowledge-content; |
144 | text-align: justify; |
145 | } |
146 | h2.personal-details { |
147 | grid-area: personal-title; |
148 | } |
149 | div.personal-details { |
150 | grid-area: personal-content; |
151 | } |
152 | h2 { |
153 | text-align: left; |
154 | } |
155 | } |
156 | #privacy { |
157 | margin-top: 2em; |
158 | display: grid; |
159 | grid-template-columns: 1fr 3fr; |
160 | grid-template-rows: auto; |
161 | grid-row-gap: 1px; |
162 | grid-template-areas: |
163 | ". refs" |
164 | ". privacy"; |
165 | div#refs { |
166 | grid-area: refs; |
167 | } |
168 | div#notice { |
169 | grid-area: privacy; |
170 | } |
171 | div#notice, |
172 | div#refs { |
173 | text-align: center; |
174 | font-size: 0.7em; |
175 | font-style: italic; |
176 | } |
177 | } |
178 | } |
179 | } |
180 | #footer { |
181 | margin-top: 2em; |
182 | font-size: 0.8em; |
183 | grid-area: footer; |
184 | p { |
185 | display: grid; |
186 | grid-template-columns: 1fr 1fr 1fr; |
187 | grid-template-rows: auto; |
188 | grid-column-gap: 1em; |
189 | grid-template-areas: |
190 | "mail name phone"; |
191 | span i { |
192 | font-size: 0.75em; |
193 | } |
194 | span#mail { |
195 | grid-area: mail; |
196 | text-align: left; |
197 | } |
198 | span#name { |
199 | grid-area: name; |
200 | text-align: center; |
201 | } |
202 | span#phone { |
203 | grid-area: phone; |
204 | text-align: right; |
205 | } |
206 | } |
207 | } |
208 | } |
209 | } |
210 | |
211 | @page { |
212 | size: A4; |
e6e48bf7 |
213 | margin: 17mm 15mm 17mm 15mm; |
3aebadf7 |
214 | } |
215 | |
216 | @media print { |
217 | body { |
218 | background: none; |
219 | #wrapper { |
220 | #language, |
221 | #menu { |
222 | display: none; |
223 | } |
224 | #header { |
225 | figure { |
e6e48bf7 |
226 | width: 8em; |
3aebadf7 |
227 | img { |
e6e48bf7 |
228 | width: 8em; |
3aebadf7 |
229 | box-shadow: none; |
230 | } |
231 | } |
232 | } |
233 | #main { |
234 | #container { |
235 | #content { |
236 | div.working-experience { |
237 | div { |
238 | page-break-inside: avoid; |
239 | } |
240 | } |
241 | div.knowledge { |
e6e48bf7 |
242 | p:last-child { |
243 | page-break-after: always !important; |
244 | } |
245 | } |
246 | h2.personal-details { |
247 | page-break-before: always; |
3aebadf7 |
248 | } |
249 | } |
250 | } |
251 | } |
252 | #footer { |
253 | position: fixed; |
254 | bottom: 0; |
255 | width: 100%; |
256 | p { |
257 | span { |
258 | } |
259 | span#mail { |
260 | } |
261 | span#name { |
262 | } |
263 | span#phone { |
264 | } |
265 | } |
266 | } |
267 | } |
268 | } |
269 | html, body { |
270 | width: 210mm; |
271 | height: 297mm; |
272 | } |
273 | } |