Skip to content

Commit 44a44eb

Browse files
committed
removed styling that came with the repo
1 parent f14ef5d commit 44a44eb

1 file changed

Lines changed: 3 additions & 99 deletions

File tree

Wireframe/style.css

Lines changed: 3 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,28 @@
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 */
61

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 ====== */
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 */
2+
/* ====== Base Elements ====== */
293
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
334
margin:0;
345
box-sizing:border-box;
356
line-height: 1.5;
367
}
37-
388
.container {
39-
width: 70%;
9+
width: 80%;
4010
max-width: 1200px;
4111
margin: 0 auto;
4212
}
4313

44-
.article-read-more {
45-
/*padding: var(--space);*/
46-
padding: .7em 2em;
47-
background: #bde0fe;
48-
/*border: var(--line);*/
49-
border: 1px solid blue;
50-
max-width: fit-content;
51-
text-decoration:none;
52-
margin: 1rem 0 1.7rem 0;
53-
}
54-
.article-read-more:hover, .article-read-more:focus{
55-
background: #003049;
56-
color: #fff;
57-
}
5814
img,
5915
svg {
6016
width: 100%;
61-
object-fit: cover;
6217
}
63-
/* ====== Site Layout ======
64-
Setting the overall rules for page regions
65-
https://www.w3.org/WAI/tutorials/page-structure/regions/
66-
*/
67-
main {
68-
max-width: var(--container);
69-
margin: 0 auto calc(var(--space) * 4) auto;
70-
}
71-
footer {
72-
/*position: fixed;*/
73-
/*bottom: 0;*/
74-
/*text-align: center;*/
7518

76-
}
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-
*/
84-
main {
85-
display: grid;
86-
grid-template-columns: 1fr 1fr;
87-
gap: var(--space);
88-
> *:first-child {
89-
grid-column: span 2;
90-
}
91-
}
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-
*/
97-
article {
98-
border: var(--line);
99-
padding-bottom: var(--space);
100-
text-align: left;
101-
display: grid;
102-
grid-template-columns: var(--space) 1fr var(--space);
103-
> * {
104-
grid-column: 2/3;
105-
}
106-
> img {
107-
grid-column: span 3;
108-
}
109-
}
110-
/* ====== Global Resets ====== */
111-
h1,
112-
p {
113-
margin: 0;
114-
}
11519

11620
/* ====== Typography ====== */
11721
h1 {
11822
font-weight: 900;
11923
font-size: 46px;
12024
color:#c1121f;
121-
margin-bottom:0;
25+
margin:0;
12226
padding:0;
12327
}
12428
.site-tagline{

0 commit comments

Comments
 (0)