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; |
57 | } |
58 | } |
59 | #header { |
60 | grid-area: header; |
61 | display: grid; |
62 | grid-template-columns: 3fr 1fr; |
63 | grid-template-rows: 1; |
64 | grid-template-areas: |
65 | "name photo"; |
66 | figure { |
67 | grid-area: photo; |
68 | width: 16em; |
69 | img { |
70 | width: 16em; |
71 | @include box-shadow(-5, 5, 25, $standard-box-shadow-color); |
72 | } |
73 | } |
74 | #heading { |
75 | grid-area: name; |
76 | align-self: center; |
77 | text-align: center; |
78 | line-height: 2.5; |
79 | div { |
80 | h1 { |
81 | font-size: 3em; |
82 | line-height: 2; |
83 | } |
84 | } |
85 | div#address { |
86 | text-transform: uppercase; |
87 | i { |
88 | font-size: 1em; |
89 | line-height: 1; |
90 | } |
91 | } |
92 | } |
93 | } |
94 | #main { |
95 | grid-area: main; |
96 | #container { |
97 | #content { |
98 | display: grid; |
99 | grid-template-columns: 1fr 3fr; |
100 | grid-template-rows: repeat(5, fit-content(100%)); |
101 | grid-column-gap: 1em; |
102 | grid-template-areas: |
103 | "profile-title profile-content" |
104 | "working-title working-content" |
105 | "studies-title studies-content" |
106 | "knowledge-title knowledge-content" |
107 | "personal-title personal-content"; |
108 | div, h2 { |
109 | margin-top: 2em; |
110 | } |
111 | h2.personal-profile { |
112 | grid-area: profile-title; |
113 | } |
114 | div.personal-profile { |
115 | grid-area: profile-content; |
116 | text-align: justify; |
117 | } |
118 | h2.working-experience { |
119 | grid-area: working-title; |
120 | } |
121 | div.working-experience { |
122 | grid-area: working-content; |
123 | div:first-child { |
124 | margin-top: 0; |
125 | } |
126 | } |
127 | h2.studies { |
128 | grid-area: studies-title; |
129 | } |
130 | div.studies { |
131 | grid-area: studies-content; |
132 | } |
133 | h2.knowledge { |
134 | grid-area: knowledge-title; |
135 | } |
136 | div.knowledge { |
137 | grid-area: knowledge-content; |
138 | text-align: justify; |
139 | } |
140 | h2.personal-details { |
141 | grid-area: personal-title; |
142 | } |
143 | div.personal-details { |
144 | grid-area: personal-content; |
145 | } |
146 | h2 { |
147 | text-align: left; |
148 | } |
149 | } |
150 | #privacy { |
151 | margin-top: 2em; |
152 | display: grid; |
153 | grid-template-columns: 1fr 3fr; |
154 | grid-template-rows: auto; |
155 | grid-row-gap: 1px; |
156 | grid-template-areas: |
157 | ". refs" |
158 | ". privacy"; |
159 | div#refs { |
160 | grid-area: refs; |
161 | } |
162 | div#notice { |
163 | grid-area: privacy; |
164 | } |
165 | div#notice, |
166 | div#refs { |
167 | text-align: center; |
168 | font-size: 0.7em; |
169 | font-style: italic; |
170 | } |
171 | } |
172 | } |
173 | } |
174 | #footer { |
175 | margin-top: 2em; |
176 | font-size: 0.8em; |
177 | grid-area: footer; |
178 | p { |
179 | display: grid; |
180 | grid-template-columns: 1fr 1fr 1fr; |
181 | grid-template-rows: auto; |
182 | grid-column-gap: 1em; |
183 | grid-template-areas: |
184 | "mail name phone"; |
185 | span i { |
186 | font-size: 0.75em; |
187 | } |
188 | span#mail { |
189 | grid-area: mail; |
190 | text-align: left; |
191 | } |
192 | span#name { |
193 | grid-area: name; |
194 | text-align: center; |
195 | } |
196 | span#phone { |
197 | grid-area: phone; |
198 | text-align: right; |
199 | } |
200 | } |
201 | } |
202 | } |
203 | } |
204 | |
205 | @page { |
206 | size: A4; |
207 | margin: 11mm 15mm 15mm 17mm; |
208 | } |
209 | |
210 | @media print { |
211 | body { |
212 | background: none; |
213 | #wrapper { |
214 | #language, |
215 | #menu { |
216 | display: none; |
217 | } |
218 | #header { |
219 | figure { |
220 | width: 7em; |
221 | img { |
222 | width: 7em; |
223 | box-shadow: none; |
224 | } |
225 | } |
226 | } |
227 | #main { |
228 | #container { |
229 | #content { |
230 | div.working-experience { |
231 | div { |
232 | page-break-inside: avoid; |
233 | } |
234 | } |
235 | div.knowledge { |
236 | page-break-after: always !important; |
237 | } |
238 | } |
239 | } |
240 | } |
241 | #footer { |
242 | position: fixed; |
243 | bottom: 0; |
244 | width: 100%; |
245 | p { |
246 | span { |
247 | } |
248 | span#mail { |
249 | } |
250 | span#name { |
251 | } |
252 | span#phone { |
253 | } |
254 | } |
255 | } |
256 | } |
257 | } |
258 | html, body { |
259 | width: 210mm; |
260 | height: 297mm; |
261 | } |
262 | } |