Skip to content

Commit 9f833cb

Browse files
LiyemaMfengwanaLiyemaMfengwana
committed
change css and add class to sub
1 parent 335cd01 commit 9f833cb

2 files changed

Lines changed: 139 additions & 71 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<body>
1313
<header>
1414
<h1 class="page-hero">Wireframe</h1>
15-
<p>
15+
<p class="page-subtitle">
1616
Learn about README files, wireframes, and Git branches.
1717
</p>
1818
</header>

‎Wireframe/style.css‎

Lines changed: 138 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -16,78 +16,146 @@ As well as useful links to learn more */
1616
https://web.dev/articles/min-max-clamp
1717
https://scrimba.com/learn-css-variables-c026
1818
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
29-
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
33-
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
38-
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
43-
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
56-
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
19+
:root{
20+
--ink:#111;
21+
--line:#222;
22+
--muted:#6a6a6a;
23+
--bg:#fafafa;
24+
--card:#ffffff;
25+
--accent:#111;
26+
}
27+
28+
*{box-sizing:border-box}
29+
html,body{margin:0;padding:0}
30+
body{
31+
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
32+
color:var(--ink);
33+
background:var(--bg);
34+
line-height:1.55;
35+
}
36+
37+
.container{
38+
max-width: 920px;
39+
margin: 0 auto;
40+
padding: 0 16px 48px;
41+
}
42+
43+
/* Header matches the sketchy title style */
44+
.page-hero{
45+
text-align:center;
46+
padding: 28px 16px 8px;
47+
}
48+
.page-title{
49+
font-family: "Kalam", cursive;
50+
font-size: 42px;
51+
margin: 12px 0 4px;
52+
letter-spacing: 1px;
53+
text-transform: uppercase;
54+
}
55+
.page-subtitle{
56+
font-family: "Kalam", cursive;
57+
color:var(--muted);
58+
font-size: 14px;
59+
margin:0;
60+
letter-spacing: .5px;
61+
}
62+
63+
/* Cards */
64+
.card{
65+
background:var(--card);
66+
border:2px solid var(--line);
67+
border-radius:2px;
68+
margin: 18px 0;
69+
overflow:hidden;
70+
}
71+
.card--featured{
72+
/* visually wider like the top box in the wireframe */
73+
}
74+
.card__media{
75+
position:relative;
76+
height: 240px;
77+
border-bottom:2px solid var(--line);
78+
}
79+
.card--featured .card__media{ height: 280px; }
80+
81+
.fake-img{
82+
background:#fff;
83+
}
84+
.fake-img .diag{
85+
position:absolute;
86+
top:0;left:0;right:0;bottom:0;
87+
pointer-events:none;
88+
}
89+
.fake-img .diag.left{
90+
background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% );
91+
opacity:.7;
92+
}
93+
.fake-img .diag.right{
94+
background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% );
95+
opacity:.7;
96+
}
97+
98+
.card__body{
99+
padding: 16px 20px 20px;
100+
}
101+
.card__title{
102+
font-family:"Kalam", cursive;
103+
font-size: 20px;
104+
margin: 0 0 6px;
105+
}
106+
.card__summary{
107+
margin: 0 0 12px;
108+
color:#333;
109+
font-size: 14px;
110+
}
111+
112+
.btn{
113+
display:inline-block;
114+
border:2px solid var(--line);
115+
padding:6px 12px;
116+
font-size:13px;
117+
color:var(--accent);
118+
text-decoration:none;
119+
border-radius:3px;
120+
background:#f7f7f7;
121+
}
122+
123+
/* Two-column grid for the lower row */
124+
.grid{
125+
display:grid;
66126
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
127+
gap: 22px;
128+
margin-top: 22px;
89129
}
90130

91-
{
131+
.details{
132+
max-width: 920px;
133+
margin: 10px auto 0;
134+
padding: 0 2px;
135+
}
136+
.details h3{
137+
font-size: 16px;
138+
margin: 22px 0 8px;
139+
font-weight:600;
140+
}
141+
.details ul{
142+
margin: 0 0 8px 18px;
143+
}
144+
145+
/* Footer */
146+
.site-footer{
147+
border-top:2px solid var(--line);
148+
margin-top: 36px;
149+
padding: 18px 12px;
150+
text-align:center;
151+
font-family:"Kalam", cursive;
152+
font-size:12px;
153+
color:#222;
154+
}
92155

156+
/* Responsiveness */
157+
@media (max-width: 780px){
158+
.grid{ grid-template-columns: 1fr; }
159+
.card__media{ height: 200px; }
160+
.card--featured .card__media{ height: 220px; }
93161
}

0 commit comments

Comments
 (0)