Skip to content

Commit 0b78238

Browse files
captainbrossetcaptainbrosset
committed
blog demo
1 parent 9ddd1a7 commit 0b78238

13 files changed

+560
-0
lines changed

‎css-masonry/blog.html

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Microsoft Edge Blog</title>
8+
<style>
9+
:root {
10+
--margin: 5rem;
11+
}
12+
13+
@media (max-width: 700px) {
14+
:root {
15+
--margin: 2rem;
16+
}
17+
}
18+
19+
body {
20+
background: #e6eaeb;
21+
font-family: 'Segoe UI', SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
22+
font-optical-sizing: auto;
23+
font-size: 12pt;
24+
}
25+
26+
nav {
27+
padding: 1rem var(--margin);
28+
background: white;
29+
display: flex;
30+
gap: 1rem;
31+
}
32+
33+
nav .site-title {
34+
font-weight: 600;
35+
font-size: 1.2rem;
36+
border-inline-start: 2px solid black;
37+
padding-inline-start: 1rem;
38+
}
39+
40+
nav a {
41+
display: inline-block;
42+
}
43+
44+
nav img {
45+
width: 108px;
46+
}
47+
48+
main {
49+
margin: var(--margin) 0;
50+
51+
display: masonry;
52+
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
53+
gap: 2rem;
54+
55+
max-width: 1300px;
56+
margin-inline: auto;
57+
padding-inline: var(--margin);
58+
}
59+
60+
* {
61+
margin: 0;
62+
}
63+
64+
h1,
65+
h2 {
66+
font-weight: 200;
67+
}
68+
69+
p {
70+
font-weight: 200;
71+
line-height: 1.6;
72+
}
73+
74+
article,
75+
header {
76+
padding: 1rem;
77+
border-radius: 1rem;
78+
background: white;
79+
overflow: hidden;
80+
}
81+
82+
.view-more {
83+
text-align: end;
84+
grid-column: 1 / -1;
85+
}
86+
87+
.view-more a {
88+
color: black;
89+
font-size: 1.1rem;
90+
font-weight: 600;
91+
}
92+
93+
header {
94+
padding-block: 3rem;
95+
color: white;
96+
background: linear-gradient(-45deg, blue -30%, black);
97+
}
98+
99+
header h1 {
100+
margin-block-end: 1rem;
101+
padding-block-start: 4rem;
102+
background: url(logo1024.png) no-repeat left top;
103+
background-size: 3rem;
104+
}
105+
106+
article h2 {
107+
padding-block-end: 1rem;
108+
border-block-end: 1px solid #ccc;
109+
}
110+
111+
article:has(img) h2 {
112+
margin-block-start: 1rem;
113+
}
114+
115+
article time {
116+
display: block;
117+
margin-block: 1rem;
118+
font-weight: 200;
119+
font-size: .9rem;
120+
color: #666;
121+
}
122+
123+
article.inverted time {
124+
color: #ccc;
125+
}
126+
127+
article.inverted a {
128+
color: white;
129+
}
130+
131+
article p {
132+
margin-block-end: 1rem;
133+
}
134+
135+
article a::after {
136+
content: " ↪";
137+
color: currentColor;
138+
font-weight: 600;
139+
rotate: -45deg;
140+
display: inline-block;
141+
margin-inline-start: 0.4rem;
142+
}
143+
144+
article img {
145+
width: calc(100% + 2rem);
146+
margin: -1rem -1rem 0 -1rem;
147+
height: 15rem;
148+
object-fit: cover;
149+
}
150+
151+
article.inverted {
152+
background: linear-gradient(grey, black);
153+
color: white;
154+
}
155+
156+
footer {
157+
color: #616161;
158+
font-size: smaller;
159+
line-height: 1.7;
160+
display: masonry;
161+
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
162+
gap: 1rem;
163+
padding: var(--margin);
164+
background: #0001;
165+
}
166+
167+
footer ul,
168+
footer li {
169+
list-style: none;
170+
padding: 0;
171+
margin: 0;
172+
}
173+
174+
footer .header {
175+
font-weight: 600;
176+
}
177+
178+
footer a {
179+
color: currentColor;
180+
text-decoration: none;
181+
}
182+
183+
footer a:hover {
184+
text-decoration: underline;
185+
}
186+
</style>
187+
</head>
188+
189+
<body>
190+
<nav>
191+
<a href="https://microsoft.com">
192+
<img src="blog/microsoft.png" alt="Microsoft's logo.">
193+
</a>
194+
<div class="site-title">Microsoft Edge</div>
195+
</nav>
196+
<main>
197+
<header>
198+
<h1>Microsoft Edge web platform blog</h1>
199+
<p>Blog posts related to the implementation of the web platform in Microsoft Edge, covering web APIs and features,
200+
DevTools, WebView 2, and Progressive Web Apps.</p>
201+
</header>
202+
<article>
203+
<img src="blog/forced-colors-before-after.png"
204+
alt="The effect of a Windows Contrast theme on Microsoft Edge and on the website that's rendered, thanks for the forcec colors mode.">
205+
<h2>Removing -ms-high-contrast and embracing standards-based forced colors in Microsoft Edge</h2>
206+
<time datetime="2025-06-30">30 June 2025</time>
207+
<p>The Edge team is excited to announce that the non-standard -ms-high-contrast media feature and
208+
-ms-high-contrast-adjust property are now completely removed from Edge, starting with version 138.</p>
209+
<a
210+
href="https://blogs.windows.com/msedgedev/2025/06/30/removing-ms-high-contrast-and-embracing-standards-based-forced-colors-in-microsoft-edge/">Read
211+
more</a>
212+
</article>
213+
<article>
214+
<img src="blog/latest-interop-chart.png"
215+
alt="The Interop score chart from the Interop 2025 dashboard. It shows 5 lines going up and to the right, signifying that the 4 tested browsers are getting more interoperable across the selected focus areas, and that the overall interop score is also improving.">
216+
<h2>The Edge 2025 web platform top developer needs dashboard</h2>
217+
<time datetime="2025-06-26">26 June 2025</time>
218+
<p>Interop is the most effective way we have to collectively catch up on implementation differences and bugs. The
219+
project has a good track record of bringing implementations into alignment for the areas that are selected.
220+
However, there’s more that web developers need.</p>
221+
<a
222+
href="https://blogs.windows.com/msedgedev/2025/06/26/the-edge-2025-web-platform-top-developer-needs-dashboard/">Read
223+
more</a>
224+
</article>
225+
<article>
226+
<img src="blog/windows.jpg" alt="A laptop computer running Windows.">
227+
<h2>Bring your PWA closer to users with App Actions on Windows</h2>
228+
<time datetime="2025-05-30">30 May 2025</time>
229+
<p>We’re excited to announce that App Actions on Windows are now available for Progressive Web Apps (PWAs).
230+
Starting
231+
with Edge version 137, you can now publish your PWA to the Microsoft Store to enable App Actions on Windows.</p>
232+
<a
233+
href="https://blogs.windows.com/msedgedev/2025/05/30/bring-your-pwa-closer-to-users-with-app-actions-on-windows/">Read
234+
more</a>
235+
</article>
236+
<article>
237+
<img src="blog/prompt-api.png"
238+
alt="Microsoft Edge browser window, showing a demo web page that's running the Prompt API."
239+
style="object-position:top left;">
240+
<h2>Simplified access to AI in Microsoft Edge: Introducing the Prompt and Writing Assistance APIs</h2>
241+
<time datetime="2025-05-19">19 May 2025</time>
242+
<p>We’re excited to introduce experimental web APIs in Microsoft Edge that make it easier than ever for web
243+
developers to integrate AI into their web applications. The Prompt API and Writing Assistance APIs — now
244+
available
245+
as developer previews in Edge Canary and Dev channels — give you access to a powerful small language model,
246+
Phi-4-mini, that is built into the Edge browser.</p>
247+
<a href="https://blogs.windows.com/msedgedev/2025/05/19/introducing-the-prompt-and-writing-assistance-apis/">Read
248+
more</a>
249+
</article>
250+
<article class="inverted">
251+
<h2>Creating a more accessible web with Aria Notify</h2>
252+
<time datetime="2025-05-05">5 May 2025</time>
253+
<p>ARIA Notify is designed to address scenarios where a visual change that’s not tied to a DOM change and not
254+
accessible to assistive technology users, happens in the page. Examples include changing the format of text in a
255+
document, or when a person joins a video conference call.</p>
256+
<a href="https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/">Read
257+
more</a>
258+
</article>
259+
<article>
260+
<img src="blog/many-logs.png"
261+
alt="The Console tool in Edge DevTools, showing a long list of errors, warnings, and messages.">
262+
<h2>Contextual logging with console.context()</h2>
263+
<time datetime="2025-04-22">22 April 2025</time>
264+
<p>If you work on a large code base with multiple teams, you probably deal
265+
with large amounts of logs when inspecting your webapp. This is an area that we’re interested in improving, and
266+
are proposing console.context(), a new feature to enable helpful contextual logging in
267+
DevTools.</p>
268+
<a href="https://blogs.windows.com/msedgedev/2025/04/22/contextual-logging-with-console-context/">Read more</a>
269+
</article>
270+
<article>
271+
<img src="blog/gap-decorations.png"
272+
alt="A webpage that uses CSS gap decorations to draw separators between items.">
273+
<h2>Minding the gaps: A new way to draw separators in CSS</h2>
274+
<time datetime="2025-03-19">19 March 2025</time>
275+
<p>In this article, we’re introducing CSS gap decorations, a new proposal which we would love your feedback on. If
276+
this is of interest to you, read this article and help us shape the future of CSS by providing your feedback.
277+
</p>
278+
<a href="https://blogs.windows.com/msedgedev/2025/03/19/minding-the-gaps-a-new-way-to-draw-separators-in-css/">Read
279+
more</a>
280+
</article>
281+
<article>
282+
<img src="blog/addons.svg"
283+
alt="A store with the Edge sign on it, and a series of bubbles floating above it, each with the icon of a different addon in it.">
284+
<h2>Empowering Microsoft Edge Add-ons developers with faster reviews</h2>
285+
<time datetime="2025-02-26">26 February 2025</time>
286+
<p>One of the key issues we hear from extension developers is the time that Microsoft takes to review their
287+
extensions. We’re implementing several measures to improve this process. This will allow developers to iterate
288+
faster, bringing more innovation to their users, and making the extensions more reliable, robust, and secure.
289+
</p>
290+
<a
291+
href="https://blogs.windows.com/msedgedev/2025/02/26/empowering-microsoft-edge-add-ons-developers-with-faster-reviews/">Read
292+
more</a>
293+
</article>
294+
<article>
295+
<img src="blog/interop.png"
296+
alt="The Interop 2025 webpage, showing the interop scores for each browser, and the chart of the overall interop score.">
297+
<h2>Microsoft Edge and Interop 2025</h2>
298+
<time datetime="2025-02-13">13 February 2025</time>
299+
<p>Microsoft Edge is very pleased to announce our participation in the fifth edition of the Interop project:
300+
Interop
301+
2025. We’re joining forces with our colleagues at Apple, Bocoup, Igalia, Google, and Mozilla, to improve
302+
interoperability on the web platform.</p>
303+
<a href="https://blogs.windows.com/msedgedev/2025/02/13/microsoft-edge-and-interop-2025/">Read
304+
more</a>
305+
</article>
306+
<p class="view-more"><a href="https://blogs.windows.com/msedgedev/posts/">View all recent posts &raquo;</a></p>
307+
</main>
308+
<footer>
309+
<div class="column">
310+
<div class="header">What's new</div>
311+
<ul>
312+
<li><a href="#">Surface Pro</a></li>
313+
<li><a href="#">Surface Laptop</a></li>
314+
<li><a href="#">Surface Laptop Studio 2</a></li>
315+
<li><a href="#">Surface Laptop Go 3</a></li>
316+
<li><a href="#">Microsoft Copilot</a></li>
317+
<li><a href="#">AI in Windows</a></li>
318+
<li><a href="#">Explore Microsoft products</a></li>
319+
<li><a href="#">Windows 11 apps</a></li>
320+
</ul>
321+
</div>
322+
<div class="column">
323+
<div class="header">Microsoft Store</div>
324+
<ul>
325+
<li><a href="#">Account profile</a></li>
326+
<li><a href="#">Download Center</a></li>
327+
<li><a href="#">Microsoft Store support</a></li>
328+
<li><a href="#">Returns</a></li>
329+
<li><a href="#">Order tracking</a></li>
330+
<li><a href="#">Certified Refurbished</a></li>
331+
<li><a href="#">Microsoft Store Promise</a></li>
332+
<li><a href="#">Flexible Payments</a></li>
333+
</ul>
334+
</div>
335+
<div class="column">
336+
<div class="header">Education</div>
337+
<ul>
338+
<li><a href="#">Microsoft in education</a></li>
339+
<li><a href="#">Devices for education</a></li>
340+
<li><a href="#">Microsoft Teams for Education</a></li>
341+
<li><a href="#">Microsoft 365 Education</a></li>
342+
<li><a href="#">How to buy for your school</a></li>
343+
<li><a href="#">Educator training and development</a></li>
344+
<li><a href="#">Deals for students and parents</a></li>
345+
<li><a href="#">AI for education</a></li>
346+
</ul>
347+
</div>
348+
<div class="column">
349+
<div class="header">Business</div>
350+
<ul>
351+
<li><a href="#">Microsoft Cloud</a></li>
352+
<li><a href="#">Microsoft Security</a></li>
353+
<li><a href="#">Dynamics 365</a></li>
354+
<li><a href="#">Microsoft 365</a></li>
355+
<li><a href="#">Microsoft Power Platform</a></li>
356+
<li><a href="#">Microsoft Teams</a></li>
357+
<li><a href="#">Microsoft 365 Copilot</a></li>
358+
<li><a href="#">Small Business</a></li>
359+
</ul>
360+
</div>
361+
<div class="column">
362+
<div class="header">Developer & IT</div>
363+
<ul>
364+
<li><a href="#">Azure</a></li>
365+
<li><a href="#">Microsoft Developer</a></li>
366+
<li><a href="#">Microsoft Learn</a></li>
367+
<li><a href="#">Support for AI marketplace apps</a></li>
368+
<li><a href="#">Microsoft Tech Community</a></li>
369+
<li><a href="#">Azure Marketplace</a></li>
370+
<li><a href="#">AppSource</a></li>
371+
<li><a href="#">Visual Studio</a></li>
372+
</ul>
373+
</div>
374+
<div class="column">
375+
<div class="header">Company</div>
376+
<ul>
377+
<li><a href="#">Careers</a></li>
378+
<li><a href="#">About Microsoft</a></li>
379+
<li><a href="#">Company news</a></li>
380+
<li><a href="#">Privacy at Microsoft</a></li>
381+
<li><a href="#">Investors</a></li>
382+
<li><a href="#">Diversity and inclusion</a></li>
383+
<li><a href="#">Accessibility</a></li>
384+
<li><a href="#">Sustainability</a></li>
385+
</ul>
386+
</div>
387+
388+
</footer>
389+
</body>
390+
391+
</html>

0 commit comments

Comments
 (0)