Skip to content

Commit 27eebce

Browse files
WavesonicsWavesonics
committed
Fix news cards
1 parent 7225b57 commit 27eebce

4 files changed

Lines changed: 121 additions & 84 deletions

File tree

‎incidents.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<link rel="shortcut icon" href="/favicon.ico">
1212
<link rel="stylesheet" href="common.css">
1313
<link rel="stylesheet" href="technical.css">
14+
<link rel="stylesheet" href="news-card.css">
1415
<script defer src="https://cloud.umami.is/script.js" data-website-id="ebcfc372-fd4f-48b0-bb4d-397883537ea0"></script>
1516
</head>
1617
<body>

‎index.css‎

Lines changed: 2 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -168,70 +168,6 @@
168168
margin-bottom: 1.5rem;
169169
border-radius: 5px;
170170
}
171-
section.news-stories {
172-
margin: 0;
173-
width: 100%;
174-
max-width: 100%;
175-
padding: 0;
176-
background-color: #f9f9f9;
177-
}
178-
.news-stories div.container {
179-
margin: 0 auto;
180-
padding: 2rem 2rem;
181-
max-width: 1200px;
182-
}
183-
.news-grid {
184-
display: grid;
185-
grid-template-columns: repeat(3, 1fr);
186-
gap: 2rem;
187-
margin-top: 2rem;
188-
}
189-
.news-card {
190-
background: white;
191-
border-radius: 10px;
192-
overflow: hidden;
193-
height: 25em;
194-
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
195-
transition: transform 0.3s ease;
196-
display: block;
197-
text-decoration: none;
198-
color: inherit;
199-
}
200-
.news-card:hover {
201-
transform: translateY(-10px);
202-
}
203-
.news-header {
204-
height: 150px;
205-
background-size: cover;
206-
background-position: center;
207-
position: relative;
208-
}
209-
.news-logo {
210-
position: absolute;
211-
bottom: -20px;
212-
left: 20px;
213-
background: white;
214-
border-radius: 50%;
215-
padding: 5px;
216-
width: 40px;
217-
height: 40px;
218-
display: flex;
219-
align-items: center;
220-
justify-content: center;
221-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
222-
}
223-
.news-logo img {
224-
max-width: 100%;
225-
max-height: 100%;
226-
}
227-
.news-content {
228-
padding: 1.5rem;
229-
padding-top: 1.8rem;
230-
}
231-
.news-content h3 {
232-
margin-top: 0;
233-
color: #333;
234-
}
235171
.features {
236172
text-align: center;
237173
}
@@ -263,18 +199,9 @@ section.news-stories {
263199
.hero h1 {
264200
font-size: 2.5rem;
265201
}
266-
.news-grid {
267-
grid-template-columns: repeat(2, 1fr);
268-
}
269202
.features-grid {
270203
grid-template-columns: 1fr;
271204
}
272-
.news-header {
273-
height: 130px;
274-
}
275-
.news-stories div.container {
276-
padding: 3rem 1.5rem;
277-
}
278205
}
279206

280207
@media (max-width: 480px) {
@@ -297,19 +224,10 @@ section.news-stories {
297224
width: 80px;
298225
margin-bottom: 1rem;
299226
}
300-
.news-grid, .features-grid {
227+
.features-grid {
301228
grid-template-columns: 1fr;
302229
gap: 1.5rem;
303230
}
304-
.news-stories div.container {
305-
padding: 2rem 1rem;
306-
}
307-
.news-content {
308-
padding: 1.2rem;
309-
}
310-
.news-header {
311-
height: 120px;
312-
}
313231
}
314232

315233
@media (min-width: 1400px) {
@@ -331,7 +249,7 @@ section.news-stories {
331249
width: 150px;
332250
margin-bottom: 2rem;
333251
}
334-
.news-grid, .features-grid {
252+
.features-grid {
335253
grid-template-columns: repeat(3, 1fr);
336254
}
337255
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
<link rel="stylesheet" href="common.css">
2121
<link rel="stylesheet" href="index.css">
22+
<link rel="stylesheet" href="news-card.css">
2223
<script defer src="https://cloud.umami.is/script.js" data-website-id="ebcfc372-fd4f-48b0-bb4d-397883537ea0"></script>
2324
</head>
2425
<body>

‎news-card.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* ===================================
2+
News Card Styles - Shared Component
3+
=================================== */
4+
5+
section.news-stories {
6+
margin: 0;
7+
width: 100%;
8+
max-width: 100%;
9+
padding: 0;
10+
background-color: #f9f9f9;
11+
}
12+
13+
.news-stories div.container {
14+
margin: 0 auto;
15+
padding: 2rem 2rem;
16+
max-width: 1200px;
17+
}
18+
19+
.news-grid {
20+
display: grid;
21+
grid-template-columns: repeat(3, 1fr);
22+
gap: 2rem;
23+
margin-top: 2rem;
24+
}
25+
26+
.news-card {
27+
background: white;
28+
border-radius: 10px;
29+
overflow: hidden;
30+
height: 25em;
31+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
32+
transition: transform 0.3s ease;
33+
display: block;
34+
text-decoration: none;
35+
color: inherit;
36+
}
37+
38+
.news-card:hover {
39+
transform: translateY(-10px);
40+
}
41+
42+
.news-header {
43+
height: 150px;
44+
background-size: cover;
45+
background-position: center;
46+
position: relative;
47+
}
48+
49+
.news-logo {
50+
position: absolute;
51+
bottom: -20px;
52+
left: 20px;
53+
background: white;
54+
border-radius: 50%;
55+
padding: 5px;
56+
width: 40px;
57+
height: 40px;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
62+
}
63+
64+
.news-logo img {
65+
max-width: 100%;
66+
max-height: 100%;
67+
}
68+
69+
.news-content {
70+
padding: 1.5rem;
71+
padding-top: 1.8rem;
72+
}
73+
74+
.news-content h3 {
75+
margin-top: 0;
76+
color: #333;
77+
}
78+
79+
/* Responsive Styles */
80+
@media (max-width: 768px) {
81+
.news-grid {
82+
grid-template-columns: repeat(2, 1fr);
83+
}
84+
85+
.news-header {
86+
height: 130px;
87+
}
88+
89+
.news-stories div.container {
90+
padding: 3rem 1.5rem;
91+
}
92+
}
93+
94+
@media (max-width: 480px) {
95+
.news-grid {
96+
grid-template-columns: 1fr;
97+
gap: 1.5rem;
98+
}
99+
100+
.news-stories div.container {
101+
padding: 2rem 1rem;
102+
}
103+
104+
.news-content {
105+
padding: 1.2rem;
106+
}
107+
108+
.news-header {
109+
height: 120px;
110+
}
111+
}
112+
113+
@media (min-width: 1400px) {
114+
.news-grid {
115+
grid-template-columns: repeat(3, 1fr);
116+
}
117+
}

0 commit comments

Comments
 (0)