Skip to content

Commit 6c6ef0a

Browse files
rachelandrewrachelandrew
committed
Media Queries files
Examples for the Learn Layout section.
1 parent 0133999 commit 6c6ef0a

File tree

11 files changed

+890
-0
lines changed

11 files changed

+890
-0
lines changed

‎learn/media-queries/and.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: and</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media screen and (min-width: 400px) and (orientation: landscape) {
12+
body {
13+
color: blue;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

‎learn/media-queries/grid.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Media Queries: a simple mobile first design, step 2</title>
6+
<style>
7+
* {
8+
box-sizing: border-box;
9+
}
10+
11+
body {
12+
width: 90%;
13+
margin: 2em auto;
14+
font: 1em/1.3 Arial, Helvetica, sans-serif;
15+
}
16+
17+
a:link,
18+
a:visited {
19+
color: #333;
20+
}
21+
22+
nav ul,
23+
aside ul {
24+
list-style: none;
25+
padding: 0;
26+
}
27+
28+
nav a:link,
29+
nav a:visited {
30+
background-color: rgba(207, 232, 220, 0.2);
31+
border: 2px solid rgb(79, 185, 227);
32+
text-decoration: none;
33+
display: block;
34+
padding: 10px;
35+
color: #333;
36+
font-weight: bold;
37+
}
38+
39+
nav a:hover {
40+
background-color: rgba(207, 232, 220, 0.7);
41+
}
42+
43+
.related {
44+
background-color: rgba(79, 185, 227, 0.3);
45+
border: 1px solid rgb(79, 185, 227);
46+
padding: 10px;
47+
}
48+
49+
.sidebar {
50+
background-color: rgba(207, 232, 220, 0.5);
51+
padding: 10px;
52+
}
53+
54+
article {
55+
margin-bottom: 1em;
56+
}
57+
58+
.grid {
59+
list-style: none;
60+
margin: 0;
61+
padding: 0;
62+
display: grid;
63+
gap: 20px;
64+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
65+
}
66+
67+
.grid li {
68+
border: 1px solid #666;
69+
padding: 10px;
70+
}
71+
72+
@media screen and (min-width: 40em) {
73+
article {
74+
display: grid;
75+
grid-template-columns: 3fr 1fr;
76+
column-gap: 20px;
77+
}
78+
79+
nav ul {
80+
display: flex;
81+
}
82+
83+
nav li {
84+
flex: 1;
85+
}
86+
}
87+
88+
@media screen and (min-width: 70em) {
89+
main {
90+
display: grid;
91+
grid-template-columns: 3fr 1fr;
92+
column-gap: 20px;
93+
}
94+
95+
article {
96+
margin-bottom: 0;
97+
}
98+
99+
footer {
100+
border-top: 1px solid #ccc;
101+
margin-top: 2em;
102+
}
103+
}
104+
</style>
105+
</head>
106+
107+
<body>
108+
<div class="wrapper">
109+
<header>
110+
<nav>
111+
<ul>
112+
<li><a href="">About</a></li>
113+
<li><a href="">Contact</a></li>
114+
<li><a href="">Meet the team</a></li>
115+
<li><a href="">Blog</a></li>
116+
</ul>
117+
</nav>
118+
</header>
119+
<main>
120+
<article>
121+
<div class="content">
122+
<h1>Veggies!</h1>
123+
<p>
124+
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
125+
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
126+
garlic.
127+
</p>
128+
129+
<p>
130+
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
131+
courgette tatsoi pea sprouts fava bean collard greens dandelion
132+
okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
133+
zucchini.
134+
</p>
135+
136+
<ul class="grid">
137+
<li>
138+
<h2>Card 1</h2>
139+
<p>
140+
Turnip greens yarrow ricebean rutabaga endive cauliflower sea
141+
lettuce kohlrabi amaranth water spinach avocado daikon napa
142+
cabbage asparagus winter purslane kale.
143+
</p>
144+
</li>
145+
<li>
146+
<h2>Card 2</h2>
147+
<p>
148+
Celery potato scallion desert raisin horseradish spinach
149+
carrot soko.
150+
</p>
151+
</li>
152+
<li>
153+
<h2>Card 3</h2>
154+
<p>
155+
Lotus root water spinach fennel kombu maize bamboo shoot green
156+
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
157+
</p>
158+
</li>
159+
<li>
160+
<h2>Card 4</h2>
161+
<p>
162+
Brussels sprout coriander water chestnut gourd swiss chard
163+
wakame kohlrabi beetroot carrot watercress.
164+
</p>
165+
</li>
166+
<li>
167+
<h2>Card 5</h2>
168+
<p>
169+
Corn amaranth salsify bunya nuts nori azuki bean chickweed
170+
potato bell pepper artichoke.
171+
</p>
172+
</li>
173+
</ul>
174+
</div>
175+
<aside class="related">
176+
<p>
177+
All these veggies are brought to you by the
178+
<a href="https://veggieipsum.com/">Veggie Ipsum generator</a>.
179+
</p>
180+
</aside>
181+
</article>
182+
183+
<aside class="sidebar">
184+
<h2>External vegetable-based links</h2>
185+
<ul>
186+
<li>
187+
<a
188+
href="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323"
189+
>How to cook broccoli</a
190+
>
191+
</li>
192+
<li>
193+
<a href="https://www.bbcgoodfood.com/glossary/swiss-chard"
194+
>Swiss Chard</a
195+
>
196+
</li>
197+
<li>
198+
<a
199+
href="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip"
200+
>Christmas Parsnip Recipes</a
201+
>
202+
</li>
203+
</ul>
204+
</aside>
205+
</main>
206+
207+
<footer><p>&copy;2019</p></footer>
208+
</div>
209+
</body>
210+
</html>

‎learn/media-queries/hover.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: hover</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media(hover: hover) {
12+
body {
13+
color: rebeccapurple;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

‎learn/media-queries/max-width.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: max-width</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media screen and (max-width: 400px) {
12+
body {
13+
color: blue;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

‎learn/media-queries/not.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: not</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media not all and (orientation: landscape) {
12+
body {
13+
color: blue;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

‎learn/media-queries/or.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: or</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media screen and (min-width: 400px), screen and (orientation: landscape) {
12+
body {
13+
color: blue;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

‎learn/media-queries/orientation.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Media Queries: orientation</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
@media(orientation: landscape) {
12+
body {
13+
color: rebeccapurple;
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
22+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
23+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
24+
25+
26+
</body>
27+
28+
</html>

0 commit comments

Comments
 (0)