Skip to content

Commit 5f5efb2

Browse files
author
adedolapo
committed
Remove unnecessary comments and clean up style.css for improved readability
1 parent 121df04 commit 5f5efb2

1 file changed

Lines changed: 6 additions & 37 deletions

File tree

Wireframe/style.css

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
191
:root {
202
--paper: oklch(7 0 0);
213
--ink: color-mix(in oklab, var(--color) 5%, black);
@@ -24,12 +6,12 @@ As well as useful links to learn more */
246
--line: 1px solid;
257
--container: 1280px;
268
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
299
body {
3010
background: var(--paper);
3111
color: var(--ink);
3212
font: var(--font);
13+
padding: 140px;
14+
height: auto;
3315
}
3416
a {
3517
padding: var(--space);
@@ -41,14 +23,12 @@ svg {
4123
width: 100%;
4224
object-fit: cover;
4325
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
26+
4827
main {
4928
max-width: var(--container);
5029
margin: 0 auto calc(var(--space) * 4) auto;
51-
padding-bottom: 80px;
30+
margin-bottom:6rem;
31+
padding: bottom 2rem; ;
5232
}
5333
header {
5434
text-align: center;
@@ -74,13 +54,7 @@ footer {
7454
justify-content: center;
7555
}
7656

77-
/* ====== Articles Grid Layout ====
78-
Setting the rules for how articles are placed in the main element.
79-
Inspect this in Devtools and click the "grid" button in the Elements view
80-
Play with the options that come up.
81-
https://developer.chrome.com/docs/devtools/css/grid
82-
https://gridbyexample.com/learn/
83-
*/
57+
8458
main {
8559
display: grid;
8660
grid-template-columns: 1fr 1fr;
@@ -89,11 +63,6 @@ main {
8963
grid-column: span 2;
9064
}
9165
}
92-
/* ====== Article Layout ======
93-
Setting the rules for how elements are placed in the article.
94-
Now laying out just the INSIDE of the repeated card/article design.
95-
Keeping things orderly and separate is the key to good, simple CSS.
96-
*/
9766
article {
9867
border: var(--line);
9968
padding-bottom: var(--space);

0 commit comments

Comments
 (0)