-
Notifications
You must be signed in to change notification settings - Fork 0
/
container-queries.html
141 lines (126 loc) · 3.8 KB
/
container-queries.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Queries: Game Rankings</title>
<style>
* {
box-sizing: border-box;
}
:root {
--color1: #F17D28;
--color2: #F19C1B;
--color3: #ECD711;
--color4: #30BFBF;
--color5: #0799BA;
}
body {
font-family: sans-serif;
background: #ccf;
}
h1 {
text-align: center;
}
.card {
border: 2px solid black;
padding: 1em;
display: grid;
grid-template-columns: 250px 1fr;
gap: 1em;
}
h3 {
margin: 0;
grid-column: span 2;
}
ol>li::marker {
font-size: 1.5em;
transform: translateY(-1em);
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.1em;
display: flex;
flex-flow: column;
gap: 1em;
}
ul>li {
color: white;
padding: .5em;
}
img {
max-width: 100%;
height: auto;
}
.good {
background: green;
}
.bad {
background: red;
}
/* Demo styles begin */
.card {
container-type: inline-size;
}
@container(DIMENSIONS) {
/* styles */
}
</style>
</head>
<body>
<h1>The Definitive Final Fantasy Ranking</h1>
<h2>The Best:</h2>
<div class="card">
<h3>Final Fantasy 7</h3>
<img src="https://images.pushsquare.com/66fc6d83f261c/final-fantasy-vii-ps1-box-art-us.large.jpg" />
<ul>
<li class="good">The greatest story ever told - (Me, 12 years old)</li>
<li class="good">Cutting edge 1997 graphics</li>
<li class="good">Clearly the biggest sword/kitchen knife</li>
</ul>
</div>
<h2>The Rest:</h2>
<ol start="10">
<li>
<div class="card">
<h3>Final Fantasy 12</h3>
<img src="https://upload.wikimedia.org/wikipedia/en/2/27/Final_Fantasy_XII_Box_Art.png" />
<ul>
<li class="good">Some nice innovations in gameplay</li>
<li class="bad">RANDOM loot - Why???</li>
<li class="bad">Questionable fashion choices (more than usual)</li>
</ul>
</div>
</li>
<li>
<div class="card">
<h3>Final Fantasy 10</h3>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a7/Ffxboxart.jpg" />
<ul>
<li class="good">Looks pretty</li>
<li class="bad">Characters all bad (except Auron)</li>
<li class="bad">Blitzball</li>
</ul>
</div>
</li>
<li>
<div class="card">
<h3>Final Fantasy 8</h3>
<img src="https://upload.wikimedia.org/wikipedia/en/5/5d/Final_Fantasy_8_ntsc-front.jpg" />
<ul>
<li class="good">Has a card game</li>
<li class="bad">Bewildering and nonsensical plot</li>
<li class="bad">Draw. Draw. Draw. Draw. Draw. (Ad nauseam)</li>
</ul>
</div>
</li>
</ol>
<script>
</script>
</body>
</html>
Need "product cards" with an image and some fields/buttons. Instead of e-commerce, maybe something video game related?
D&D monster cards?
https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/