-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
125 lines (103 loc) · 2.35 KB
/
style.css
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
@import url(https://fonts.bunny.net/css?family=figtree:500,800);
/* reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Custom properties */
:root {
--col-primary: hsl(47, 88%, 63%);
--col-black: hsl(0, 0%, 7%);
--col-white: hsl(0, 0%, 100%);
--col-grey: hsl(0, 0%, 50%);
--font-primary: "Figtree", sans-serif;
--fw-medium: 500;
--fw-bold: 800;
--fs-body-small: 0.875rem; /*based on 14px*/
--fs-body-medium: 1rem; /*16px*/
--fs-body-extra-small: 0.75rem; /*12px*/
--fs-primary-heading: 1.5rem; /*24px*/
--fs-heading-mobile: 1.25rem; /*20px*/
--spacer-small: 0.5em; /*8px*/
--spacer-medium: 0.75em; /*12px*/
--spacer-large: 1.5em; /*24px*/
}
/* Mobile-first design */
body {
background-color: var(--col-primary);
font-family: var(--font-primary);
overflow: hidden;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100dvh;
margin: 0 1rem;
}
.card {
background-color: var(--col-white);
padding: var(--spacer-large) var(--spacer-large) var(--spacer-medium) var(--spacer-large);
max-width: 384px;
border-radius: var(--spacer-medium);
border: 1px solid var(--col-black);
box-shadow: .5rem .5rem var(--col-black);
}
.card-category {
display: inline-block;
background-color: var(--col-primary);
font-weight: var(--fw-bold);
font-size: var(--fs-body-extra-small);
padding: var(--spacer-small) var(--spacer-medium);
border-radius: var(--spacer-small);
margin-bottom: 0;
}
.card-publish-date {
font-size: var(--fs-body-extra-small);
}
.card-title {
font-size: var(--fs-heading-mobile);
}
.card-description {
color: var(--col-grey);
font-size: var(--fs-body-small);
line-height: 1.5;
}
.card-author {
font-size: var(--fs-body-small);
font-weight: var(--fw-bold);
display: flex;
align-items: center;
gap: var(--spacer-medium);
}
.card-image {
width: 336px;
height: 200px;
max-width: 100%;
border-radius: var(--spacer-medium);
}
.card-link {
&:link,
&:focus,
&:visited {
color: inherit;
text-decoration: none;
}
&:hover,
&:active {
color: var(--col-primary);
}
}
/* Desktop media queries */
@media (min-width: 43.75rem) {
.card-publish-date {
font-size: var(--fs-body-small);
}
.card-title {
font-size: var(--fs-primary-heading);
}
.card-description {
font-size: var(--fs-body-medium);
}
}