Module-Onboarding/Wireframe/style.css at 47f3580a13561de88bdd4a8d3c480caa3deb667d · CodeYourFuture/Module-Onboarding · GitHub

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
/* ====== Design Palette ====== */
:root {
 --paper: oklch(7 0 0);
 --color: oklch(70% 0.15 250);
 --ink: color-mix(in oklab, var(--color) 5%, black);
 --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px);
 --line: 1px solid; --container: 1280px;
 }
/* ====== Base Elements ====== */
*,
*::before,
*::after { box-sizing: border-box;
         }
body {
 margin: 0;
 background: var(--paper);
 color: var(--ink);
 font: var(--font);
}
a {
 display: inline-block;
 padding: var(--space);
 border: var(--line);
 max-width: fit-content;
 text-decoration: none;
 color: inherit;
}
a:hover,
a:focus-visible {
 background: var(--color);
color: black;
}
img,
svg {
 width: 100%;
 height: auto;
 object-fit: cover;
}
/* ====== Site Layout ====== */
header {
 max-width: var(--container);
 margin: 0 auto;
 padding: calc(var(--space) * 2) var(--space);
 text-align: left;
}
header h1 {
 margin: 0 0 var(--space) 0;
}
header p {
 margin: 0;
}
main {
 max-width: var(--container);
 margin: 0 auto calc(var(--space) * 4) auto;
 padding: 0 var(--space) calc(var(--space) * 6);
}
/* Footer fixed to bottom */
footer {
 position: fixed;
 bottom: 0; left: 0;
 right: 0;
 text-align: center;
 padding: var(--space);
 background: var(--paper);
 border-top: var(--line);
}
/* ====== Articles Grid Layout ====== */
main {
 display: grid;
 grid-template-columns:1fr 1fr;
 gap: var(--space);
}
main > *:first-child {
 grid-column: span 2;
}
/* ====== Article Layout ====== */
article {
 border: var(--line);
 padding-bottom: var(--space);
 text-align: left;
 display: grid;
 grid-template-columns: var(--space) 1fr var(--space);
}
article > * {
 grid-column: 2 / 3;
 margin-top: var(--space);
}
article > img {
 grid-column: 1 / 4;
 margin: 0 0 var(--space) 0;
}
article h2 {
 margin: 0;
}
/* ====== Responsive tweak ====== */
@media (max-width: 700px) {
 main { grid-template-columns: 1fr;
      }
 main > *:first-child {
  grid-column: auto;
 }
 footer {
  position: static;
 }
}