blob: 22e6dd0eae4fa11a2526d4820372ceabc5a73fd0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
/*
* This file contains styles specific to the "index" view. The corresponding
* HTML/template file is `views/index.html`.
*/
.hero {
/* We want the hero at the top to take up a big portion of the screen,
* while still showing that there's more content to be found below. */
min-height: 50vh;
/* Put children smack-dab in the center */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */
background-image:
radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%),
url(/images/hero.jpeg);
background-size: cover;
/* TODO: Put some cool image here */
background-color: purple;
color: white;
}
.hero__title {
font-size: 5rem;
margin: 1rem;
/* TODO: Use (subset) font for this very important text. */
}
.hero__subtitle {
font-size: large;
font-style: italic;
}
.achievements {
padding: 2rem 1rem;
/* Use a dark and twisted color to make this band stand out as a separate element. */
background-color: #6e1818;
/* Disperse achievements evenly horisontally */
display: flex;
justify-content: space-around;
align-items: center;
}
.achievements__item {
/* Stack the two children vertically */
display: flex;
flex-direction: column;
align-items: center;
}
.achievements__number {
/* Numbers should be big and attention grabbing */
font-size: 2rem;
font-style: bold;
}
.achievements__text {
}
.boxes {
/* The columns should be aligned in the center.
* N.B. margin matches padding of achievements. */
max-width: 600px;
margin: 2rem auto;
}
.boxes__column {
--gap: 1rem;
width: calc(50% - var(--gap) / 2);
}
.boxes__column--right {
float: right;
}
.boxes__column--left {
float: left;
margin-right: var(--gap);
}
.boxes__item {
}
.boxes__header {
}
.boxes__body-text {
line-height: 1.5;
}
.boxes__image {
max-width: 100%;
height: auto;
}
|
