Skip to content

Commit 8df8cdb

Browse files
v-pitraschv-pitrasch
committed
Style Distribution Site
1 parent 06bec9c commit 8df8cdb

2 files changed

Lines changed: 72 additions & 4 deletions

File tree

‎esbuild.mjs‎

Lines changed: 71 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,83 @@ await esbuild.build({
7171
<head>
7272
<meta charset="UTF-8">
7373
<meta name="viewport" content="width=device-width, initial-scale=1.0">
74+
<link rel="stylesheet" href="style.css"/>
7475
<title>CAAT Color Contrast Checker Bookmarklet</title>
7576
</head>
7677
<body>
77-
<h1>CAAT Color Contrast Checker</h1>
78-
<p>Drag the button below to your bookmarks bar to install the bookmarklet:</p>
79-
<a href="${bookmarkletCode}" title="Drag this to your bookmarks bar">CAAT Contrast Checker</a>
78+
<main class="row">
79+
<h1>CAAT-Color-Contrast-Checker</h1>
80+
<h2>Bookmark Color Contrast Calculation Tool</h2>
81+
<ol>
82+
<li>Activate the bookmark toolbar in your browser (if not active yet). Most Browsers allow this by pressing Ctrl+Shift+B.</li>
83+
<li>Drag & drop the link <a href="${bookmarkletCode}">CAAT Contrast Checker</a> to the bookmark toolbar.</li>
84+
<li>Activate the bookmarklet on any page.</li>
85+
<li>Use the pipette to transfer color values or enter them manually into the fields to determine the color contrast.</li>
86+
</ol>
87+
</main>
8088
</body>
8189
</html>
8290
`;
8391

92+
const cssStyle = `
93+
html, body {
94+
margin: 0;
95+
padding: 0;
96+
background-color: #fff;
97+
}
98+
.row {
99+
margin: 0 auto;
100+
max-width: 45rem;
101+
padding: 0 1rem;
102+
}
103+
h1, h2, h3, h4, h5, h6 {
104+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
105+
font-weight: 700;
106+
color: #111;
107+
}
108+
h1 {
109+
line-height: 1.2;
110+
font-size: 2rem;
111+
margin-bottom: 0;
112+
}
113+
@media screen and (min-width: 45em) {
114+
h1 {
115+
font-size: 3rem;
116+
}
117+
}
118+
h2 {
119+
line-height: 1.2;
120+
font-size: 1.5rem;
121+
}
122+
p, li {
123+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
124+
color: #333;
125+
line-height: 1.6;
126+
font-size: 1.4rem;
127+
}
128+
p {
129+
margin: 0 0 1rem 0;
130+
}
131+
li {
132+
margin: 0 0 1rem 0;
133+
}
134+
ul, ol {
135+
margin: 0 0 1rem 2rem;
136+
padding: 0;
137+
list-style-position: outside;
138+
}
139+
a {
140+
color: #D7090E;
141+
}
142+
a:hover, a:focus {
143+
color: #fff;
144+
background-color: #ce171e;
145+
border-top: 3px solid #ce171e;
146+
text-decoration: none;
147+
outline: none;
148+
}
149+
`;
150+
84151
fs.writeFileSync(`${distDir}/ccc-bookmarklet.html`, htmlContent);
152+
fs.writeFileSync(`${distDir}/style.css`, cssStyle);
85153
});

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Color Contrast Checker</title>
66
</head>
77
<body>
8-
<h1>Bookmarklet</h1>
8+
<h1>CAAT-Color-Contrast-Checker-Bookmarklet</h1>
99

1010
<p>
1111
<a href="javascript:(function() {let script = document.createElement('script');script.src = 'http://localhost:63340/src/bookmarklet.js';document.body.appendChild(script);})();">Color Contrast Checker</a>

0 commit comments

Comments
 (0)