Skip to content

Commit 9f7427d

Browse files
committed
Added styling to each article box
1 parent 80e54a8 commit 9f7427d

1 file changed

Lines changed: 28 additions & 9 deletions

File tree

Wireframe/style.css

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ As well as useful links to learn more */
2828
General rules for basic HTML elements in any context */
2929
header {
3030
text-align: center;}
31-
31+
/* Futuristic font */
3232
body {
3333
background: var(--paper);
3434
color: var(--ink);
3535
font: var(--font);
36+
font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
3637
}
3738
a {
3839
padding: var(--space);
@@ -42,7 +43,10 @@ a {
4243
img,
4344
svg {
4445
width: 100%;
45-
height: 280px;
46+
height: 250px;
47+
object-fit: cover;
48+
border: 3px solid blue;
49+
border-radius: 20px;
4650
}
4751
/* ====== Site Layout ======
4852
Setting the overall rules for page regions
@@ -53,9 +57,11 @@ main {
5357
margin: 0 auto calc(var(--space) * 4) auto;
5458
}
5559
footer {
56-
position: fixed;
57-
bottom: 0;
5860
text-align: center;
61+
font-size: 0.8rem;
62+
color: var(--ink);
63+
margin-top: 20px;
64+
padding: 10px;
5965
}
6066
/* ====== Articles Grid Layout ====
6167
Setting the rules for how articles are placed in the main element.
@@ -79,14 +85,27 @@ Keeping things orderly and separate is the key to good, simple CSS.
7985
*/
8086
article {
8187
border: var(--line);
88+
border-radius: 20px;
89+
box-shadow: 0 0 15px blue;
8290
padding-bottom: var(--space);
8391
text-align: left;
8492
display: grid;
8593
grid-template-columns: var(--space) 1fr var(--space);
86-
> * {
87-
grid-column: 2/3;
88-
}
94+
}
95+
article > * {
96+
grid-column: 2 / 3;
97+
}
98+
article > img {
99+
grid-column: 2 / 3;
100+
margin-top: var(--space);
101+
}
89102
> img {
90-
grid-column: span 3;
91-
}
103+
grid-column: 2 / 3;
104+
margin-top: var(--space);
105+
}
106+
h1,
107+
h2,
108+
a {
109+
text-transform: uppercase;
110+
letter-spacing: 1px;
92111
}

0 commit comments

Comments
 (0)