Skip to content
This repository was archived by the owner on Apr 27, 2021. It is now read-only.

Commit b1c73b2

Browse files
ExE-BossExE-Boss
committed
docs: Improve look and feel of the landing page
1 parent 488f6ee commit b1c73b2

6 files changed

Lines changed: 138 additions & 9 deletions

File tree

‎index.html‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,39 @@
11
<!doctype html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- http://creativecommons.org/publicdomain/zero/1.0/ -->
24
<html>
35
<head>
4-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5-
<link href="main.css" rel="stylesheet" media="screen" type="text/css">
6+
<meta charset="utf-8"/>
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link href="main.css" rel="stylesheet" media="screen" type="text/css"/>
10+
<link href="static/styles/base.css" rel="stylesheet" media="screen" type="text/css"/>
611
<title>MDN Code Samples</title>
712
</head>
8-
<body>
13+
<body class="mdn-container">
914
<div class="mdn-header">
1015
<h1>
1116
MDN Code Samples
1217
</h1>
18+
<a class="gh-link" href="https://github.com/mdn/samples-server">
19+
Source code available on GitHub
20+
</a>
1321
</div>
1422
<div class="mdn-content">
1523
<p>
1624
This site hosts the server side of any MDN code samples that require server
17-
assistance to operate, such as WebSocket services, data stores, or WebRTC
18-
peer-finding services.
25+
assistance to operate, such as WebSocket services, data stores, or WebRTC
26+
peer-finding services.
1927
</p>
2028
</div>
2129
<div class="mdn-footer">
2230
All text content on MDN is offered under the
23-
<a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-SA-BY</a> license,
24-
version 2.5 or later. All sample code offered on this site is provided under the
25-
<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 (Public
26-
Domain)</a> license and may be reused or repurposed without attribution.
31+
<a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-SA-BY</a> license,
32+
version 2.5 or later.
33+
<br/>
34+
All sample code offered on this site is provided under the
35+
<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 (Public Domain)</a>
36+
license and may be reused or repurposed without attribution.
2737
</div>
2838
</body>
2939
</html>

‎main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@charset "UTF-8";
2+
/* Any copyright is dedicated to the Public Domain.
3+
* http://creativecommons.org/publicdomain/zero/1.0/ */
4+
15
.mdn-footer {
26
font-weight:normal;
37
font-size:12px;

‎static/styles/base.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@charset "UTF-8";
2+
/* Any copyright is dedicated to the Public Domain.
3+
* http://creativecommons.org/publicdomain/zero/1.0/ */
4+
5+
/* A base stylesheet imported by the index page
6+
* TODO: Consider merging this using postcss-import. */
7+
@import "./reset.css";
8+
@import "./utils.css";
9+
@import "./responsive.css";

‎static/styles/reset.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@charset "UTF-8";
2+
/* Any copyright is dedicated to the Public Domain.
3+
* http://creativecommons.org/publicdomain/zero/1.0/ */
4+
5+
/* A stylesheet which fixes some annoyances with slightly different
6+
* or legacy behaviour of UAs and CSS when rendering pages */
7+
*|*, ::before, ::after {
8+
/* Always use `box-sizing: border-box;` for everything */
9+
box-sizing: border-box;
10+
}
11+
12+
html,
13+
body {
14+
/* Ensure that <html> and <body> doesn’t weirdly stretch out
15+
* horizontally beyond the viewport, adding a horizontal scrollbar,
16+
* which is very annoying when on mobile, especially on responsive,
17+
* mobile‑first websites. */
18+
margin: unset;
19+
max-width: 100vw;
20+
overflow-x: hidden;
21+
}

‎static/styles/responsive.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@charset "UTF-8";
2+
/* Any copyright is dedicated to the Public Domain.
3+
* http://creativecommons.org/publicdomain/zero/1.0/ */
4+
5+
.mdn-container {
6+
width: 100%;
7+
padding-left: 1rem;
8+
padding-right: 1rem;
9+
margin-left: auto;
10+
margin-right: auto;
11+
}
12+
13+
.mdn-footer {
14+
padding-top: 0.25rem;
15+
}
16+
17+
.mdn-header {
18+
display: flex;
19+
flex-wrap: wrap;
20+
align-items: end;
21+
margin-top: 1rem;
22+
margin-bottom: 1rem;
23+
height: unset;
24+
}
25+
26+
.mdn-header h1 {
27+
display: block;
28+
height: 24px;
29+
margin: unset;
30+
}
31+
32+
.mdn-header .gh-link {
33+
display: block;
34+
text-align: end;
35+
margin-left: auto;
36+
margin-top: 3px;
37+
}
38+
39+
/* Small (568px) */
40+
@media (min-width: 36rem) {
41+
.mdn-container {
42+
/* 540px */
43+
max-width: 33.75rem;
44+
}
45+
}
46+
47+
/* Medium (768px) */
48+
@media (min-width: 48rem) {
49+
.mdn-container {
50+
/* 720px */
51+
max-width: 45rem;
52+
}
53+
}
54+
55+
/* Large (1024px) */
56+
@media (min-width: 64rem) {
57+
.mdn-container {
58+
/* 960px */
59+
max-width: 60rem;
60+
}
61+
}
62+
63+
/* XL (1200px) */
64+
@media (min-width: 75rem) {
65+
.mdn-container {
66+
/* 1120px */
67+
max-width: 70rem;
68+
}
69+
}

‎static/styles/utils.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@charset "UTF-8";
2+
/* Any copyright is dedicated to the Public Domain.
3+
* http://creativecommons.org/publicdomain/zero/1.0/ */
4+
5+
.d-block { display: block !important; }
6+
.d-contents { display: contents !important; }
7+
.d-flex { display: flex !important; }
8+
.d-grid { display: grid !important; }
9+
.d-inline { display: inline !important; }
10+
.d-inline-block { display: inline-block !important; }
11+
.d-inline-flex { display: inline-flex !important; }
12+
.d-inline-grid { display: inline-grid !important; }
13+
.d-list-item { display: list-item !important; }
14+
.d-none { display: none !important; }
15+
16+
.flex-fill { flex-grow: 10 !important; }

0 commit comments

Comments
 (0)