-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex-testflags.html
103 lines (88 loc) · 2.85 KB
/
index-testflags.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
<!DOCTYPE html>
<html lang="en">
<!-- I wacked this demo page together without much attention for CSS/HTML optimization -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="Description" content="FlagMeister 250+ SVG Flags in one 32KB Custom Element/Web Component" />
<meta name="Author" content="Danny Engelman" />
<meta name="title" property="og:title" content="FlagMeister.github.io" />
<meta name="image" property="og:image" content="//flagmeister.github.io/linkedin_flagmeister_1200_627.png" />
<meta name="description" property="og:description"
content="FlagMeister 250+ SVG Flags in one 32KB Custom Element/Web Component" />
<meta name="url" property="og:url" content="//flagmeister.github.io" />
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><rect width='100%' height='100%' fill='gold'/><text x='1' y='15.5'>Fm</text></svg>"
type="image/svg+xml" />
<title>
FlagMeister - SVG Flags in one Custom Element/Web Component
</title>
<script src="elements.flagmeister.js"></script>
<style id="theme_greenwhite">
body {
font-family: Arial, Helvetica, sans-serif;
color: whitesmoke;
--theme_pre_size: 1.2em;
--textstroke: 1px black;
--defaultmargin: 0.5em;
}
img {
width: 100%;
aspect-ratio: 4/3;
/* 2024 - moved hardcoded .style.width = 100% to CSS*/
}
p {
margin-left: var(--theme_pre_size);
}
a:link,
a:visited,
a:hover,
a:active {
color: darkblue;
}
a:hover {
background: lightskyblue;
}
h1 a,
h2 a {
text-shadow: 0.3px 0.3px 0 lightgrey;
}
.greencloth {
/* background: #047b3d; */
/* saves loading an image, looks better than a solid darkgreen background */
background-image: url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAwBACdASoeAB4APikSh0KhoQoCAAwBQllYz41AABFV/n8AItOaJepDavAA/vkKUe5BGtPR5aeKP/4hd7G2///gzv/f1X/gzv/BmUX9cJtST/Z9T/XsQq/MQV+1v8m2uukhu3nFYS/A5iTPpyXsMLAwk6xasWWFDPdx7OkWouLHKfqaoozRIW3R5D5MAA==");
background-size: cover;
}
.warning {
color: orangered;
}
</style>
</head>
<body class="greencloth">
<h1>Testflags</h1>
<style>
#flags8 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
xbackground: grey;
}
#flags8 img {
display: inline-block;
width: 100% !important;
height: 100%;
}
</style>
<svg-flag is="by" detail="100"></svg-flag>
<div id="flags8">
<flag-nl id="f1"></flag-nl>
<flag-zw id="f2"></flag-zw>
<flag-ke id="f3"></flag-ke>
<flag-kr id="f4"></flag-kr>
<flag-es id="f5"></flag-es>
<flag-aq id="f6"></flag-aq>
<flag-nz id="f7"></flag-nz>
<svg-flag is=es id="f8"></svg-flag>
</div>
</body>
</html>