Skip to content

Commit

Permalink
update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@panr
panr committed Aug 29, 2024
1 parent 0bc27cf commit 024a82e
Show file tree
Hide file tree
Showing 3 changed files with 257 additions and 123 deletions.
95 changes: 60 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,24 @@
#headline { display: flex; white-space: nowrap; line-height: 1; }
#headline::after {
content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 8px);
display: block;
width: 100%;
margin-left: 20px;
right: 10px;
}
#settings #attrs { display: flex; flex-wrap: wrap; align-items: center; }
#settings label { display: inline-flex; align-items: center; }
#settings input:not([type="checkbox"]) { height: 30px; padding: 4px; margin-left: 4px; margin-right: 20px; border-radius: 0 !important; }
#settings select { height: 30px; padding-top: 0; padding-bottom: 0; margin-left: 4px; margin-right: 20px; border-radius: 0 !important }
#settings table { width: 100%; max-width: 100%; margin-bottom: 0; }
#settings table th, #settings table td { position: relative; }
#settings table input:not([type="checkbox"]), #settings table select { width: 100%; border: none; margin: 0; border-radius: 0 !important; }
#settings table input:not([type="checkbox"]) { position: absolute; top: 0; left: 0; height: 100%; }
#settings table input[type="number"] { padding: 0 10px; }
#settings table select { padding-top: 0; padding-bottom: 0; padding-left: 0; }
#settings #assets-preview svg { border: 1px solid }
#settings #terminal-info { border: 1px dashed var(--accent); padding: 2px 4px; margin-bottom: 5px; }
.hanchor {
position: absolute;
color: var(--accent);
font-weight: normal;
text-decoration: none;
Expand All @@ -50,34 +55,54 @@
</head>

<body style="padding: 20px">
<main>
<main style="width: 1024px; max-width: 100%;">
<h1 id="headline">Terminal.css</h1>
<p>A stupid simple, custom set of semantic styles derived from <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">Terminal</a> theme that you always wanted.</p>

<form id="settings" style="margin-bottom: 20px;">
<div id="attrs">
<label>Background: <input type="color" id="background" name="background" onchange="setVariable('--background', this.value)"></label>
<label>Foreground: <input type="color" id="foreground" name="foreground" onchange="setVariable('--foreground', this.value)"></label>
<label>Accent: <input type="color" id="accent" name="accent" onchange="setVariable('--accent', this.value)"></label>
<label>Radius: <input type="number" id="radius" name="radius" min="0" max="12" onchange="setVariable('--radius', this.value + 'px')"></label>
<label>
Type:
<select name="type">
<option name="standalone" value="standalone">Standalone</option>
<option name="terminal" value="terminal">Terminal Theme</option>
</select>
</label>
<div style="margin: 10px 0; padding: 2px 4px; border: 1px dashed color-mix(in srgb, var(--foreground) 50%, transparent);">
Type: <strong>Standalone</strong> — includes FireCode font from Google Fonts; <strong>Terminal Theme</strong> — is prepared for Terminal Theme.
</div>
<div id="terminal-info" hidden>
<strong>Terminal Theme</strong>: Remember to put all the downloaded files directly into <strong><code>/static/</code></strong> folder to make it work, like this:<br>
- <code>/static/terminal.css</code><br>
- <code>/static/favicon.png</code><br>
- <code>/static/og-image.png</code><br>
</div>
<table>
<tbody>
<tr>
<th colspan="2" style="text-align: center;">Settings</th>
</tr>
<tr>
<th>Background</th>
<td><input type="color" id="background" name="background" onchange="setVariable('--background', this.value)"></td>
</tr>
<tr>
<th>Foreground</th>
<td><input type="color" id="foreground" name="foreground" onchange="setVariable('--foreground', this.value)"></td>
</tr>
<tr>
<th>Accent</th>
<td><input type="color" id="accent" name="accent" onchange="setVariable('--accent', this.value)"></td>
</tr>
<tr>
<th>Radius</th>
<td><input type="number" id="radius" name="radius" min="0" max="8" value="0" onchange="setVariable('--radius', this.value + 'px')"></td>
</tr>
<tr>
<th>Type</th>
<td>
<select name="type">
<option name="standalone" value="standalone">Standalone</option>
<option name="terminal" value="terminal">Terminal Theme</option>
</select>
</td>
</tr>
</tbody>
</table>
<div style="margin: 10px 0 20px; opacity: .6;">
Type:<br><strong>Standalone</strong> — includes FireCode font from Google Fonts;<br><strong>Terminal Theme</strong> — is prepared for Terminal Theme.
</div>
<div id="terminal-info" hidden>
<strong>Terminal Theme</strong>: Remember to put all the downloaded files directly into <strong><code>/static/</code></strong> folder to make it work, like this:<br>
- <code>/static/terminal.css</code><br>
- <code>/static/favicon.png</code><br>
- <code>/static/og-image.png</code><br>
</div>
<div>
<label style="display: block;"><input id="assets" type="checkbox" name="assets">&nbsp;Generate&nbsp;<strong>favicon</strong>&nbsp;and&nbsp;<strong>og-image</strong></label>
<label style="display: block; margin-bottom: 20px;"><input id="assets" type="checkbox" name="assets">&nbsp;Generate&nbsp;<strong>favicon</strong>&nbsp;and&nbsp;<strong>og-image</strong></label>
<div id="assets-preview" hidden>
<svg id="template-favicon" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" style="width: 50px; height: 50px;"><rect width="50" height="50" x="0" y="0" fill="var(--accent)" /></svg>
<svg id="template-og-image" width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 400px; height: 210px;">
Expand All @@ -103,7 +128,7 @@ <h1 id="headline">Terminal.css</h1>
</g>
</svg>
</div>
<button id="download" type="submit">Get Terminal.css</button>
<button id="download" type="submit">Download Terminal.css</button>
</div>
</form>

Expand All @@ -121,12 +146,12 @@ <h2 id="headings">
<code>&lt;h6&gt;</code> is the lowest.
</p>

<h1 id="h1">H1</h1>
<h2 id="h2">H2</h2>
<h3 id="h3">H3</h3>
<h4 id="h4">H4</h4>
<h5 id="h5">H5</h5>
<h6 id="h6">H6</h6>
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
<h3 id="h3">h3</h3>
<h4 id="h4">h4</h4>
<h5 id="h5">h5</h5>
<h6 id="h6">h6</h6>

<h2 id="paragraph">
Paragraphs<a href="#paragraph" class="hanchor" arialabel="Anchor">#</a>
Expand Down Expand Up @@ -208,7 +233,7 @@ <h2 id="forms">
<option value="3">Option 3</option>
</select><br />
<textarea placeholder="Insert a comment..."></textarea><br />
<input type="checkbox" /> I understand<br />
<label><input type="checkbox" /> I understand<br /></label>
<button type="submi">Submit</button>
</fieldset>

Expand Down Expand Up @@ -293,7 +318,7 @@ <h2 id="other-elements--abbr-sub-sup-kbd-mark">
</div>
</main>

<footer style="border-top: 1px solid var(--accent); margin-top: 40px; padding-top: 20px;">
<footer style="border-top: 2px solid var(--accent); margin-top: 40px; padding-top: 20px;">
Made by <a href="https://radoslawkoziel.pl" target="_blank">panr</a>. Derived from <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">Terminal</a> theme. Source code on <a href="https://github.com/panr/terminal-css/" target="_blank">Github</a>.
</footer>

Expand Down
158 changes: 98 additions & 60 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,58 @@ const defaultValues = {
background: "#222129",
foreground: "#ffffff",
accent: "#ffa86a",
radius: "0"
}
radius: "0",
};

const settings = document.querySelectorAll("#settings input")
const settings = document.querySelectorAll("#settings input");
for (const i of settings) {
if (defaultValues[i.name]) {
i.value = defaultValues[i.name]
i.value = defaultValues[i.name];
}
}

function setVariable(variable, value) { root.style.setProperty(variable, value); }
function setVariable(variable, value) {
root.style.setProperty(variable, value);
}
function getAssets(e) {
const assetsPreview = document.querySelector("#assets-preview")
const svgs = [...assetsPreview.children].filter(i => i.nodeName === "svg")
const assetsPreview = document.querySelector("#assets-preview");
const svgs = [...assetsPreview.children].filter((i) => i.nodeName === "svg");

for (const svg of svgs) {
const canvas = document.createElement("canvas")
const context = canvas.getContext("2d")
canvas.width = svg.getAttribute("width")
canvas.height = svg.getAttribute("height")
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = svg.getAttribute("width");
canvas.height = svg.getAttribute("height");

const img = new Image()
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);

const a = document.createElement('a')
a.href = canvas.toDataURL("image/png")
a.download = `${svg.id.replace("template-", "")}.png`
a.click()
}

let sSVG = new XMLSerializer().serializeToString(svg)
sSVG = sSVG.replaceAll("var(--accent)", getComputedStyle(document.body).getPropertyValue("--accent"))
sSVG = sSVG.replaceAll("var(--background)", getComputedStyle(document.body).getPropertyValue("--background"))
sSVG = sSVG.replaceAll("var(--foreground)", getComputedStyle(document.body).getPropertyValue("--foreground"))
sSVG = sSVG.replaceAll("var(--radius)", getComputedStyle(document.body).getPropertyValue("--radius"))

img.src = 'data:image/svg+xml;base64,' + btoa(sSVG)
const a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = `${svg.id.replace("template-", "")}.png`;
a.click();
};

let sSVG = new XMLSerializer().serializeToString(svg);
sSVG = sSVG.replaceAll(
"var(--accent)",
getComputedStyle(document.body).getPropertyValue("--accent"),
);
sSVG = sSVG.replaceAll(
"var(--background)",
getComputedStyle(document.body).getPropertyValue("--background"),
);
sSVG = sSVG.replaceAll(
"var(--foreground)",
getComputedStyle(document.body).getPropertyValue("--foreground"),
);
sSVG = sSVG.replaceAll(
"var(--radius)",
getComputedStyle(document.body).getPropertyValue("--radius" + "px"),
);

img.src = "data:image/svg+xml;base64," + btoa(sSVG);
}
}

Expand All @@ -49,59 +63,83 @@ function getTerminalCSS(e) {
.then(function (req) {
if (!req.ok) {
alert("Oops, please try again");
throw new Error(`Oops, please try again. Status: ${req.status}. Message: ${req.statusText}`)
throw new Error(
`Oops, please try again. Status: ${req.status}. Message: ${req.statusText}`,
);
}

return req.text();
}).then(function (data) {
const s = new FormData(document.querySelector("#settings"))
data = data.replace(`--background: ${defaultValues["background"]}`, `--background: ${s.get("background")}`)
data = data.replace(`--foreground: ${defaultValues["foreground"]}`, `--foreground: ${s.get("foreground")}`)
data = data.replace(`--accent: ${defaultValues["accent"]}`, `--accent: ${s.get("accent")}`)
data = data.replace(`--radius: ${defaultValues["radius"]}`, `--radius: ${s.get("radius")}px`)
})
.then(function (data) {
const s = new FormData(document.querySelector("#settings"));
data = data.replace(
`--background: ${defaultValues["background"]}`,
`--background: ${s.get("background")}`,
);
data = data.replace(
`--foreground: ${defaultValues["foreground"]}`,
`--foreground: ${s.get("foreground")}`,
);
data = data.replace(
`--accent: ${defaultValues["accent"]}`,
`--accent: ${s.get("accent")}`,
);
data = data.replace(
`--radius: ${defaultValues["radius"]}`,
`--radius: ${s.get("radius")}px`,
);

if (s.get("type") == "terminal") {
data = data.replace(/@import url\(\"https\:\/\/fonts\.googleapis\.com\/.*\n+/, "")
data = data.replace(
/@import url\(\"https\:\/\/fonts\.googleapis\.com\/.*\n+/,
"",
);
}

const a = document.createElement('a')
a.href = window.URL.createObjectURL(new Blob([data], { type: "text/css" }))
a.download = "terminal.css"
a.click()
const a = document.createElement("a");
a.href = window.URL.createObjectURL(
new Blob([data], { type: "text/css" }),
);
a.download = "terminal.css";
a.click();

gtag('event', "download", {
gtag("event", "download", {
background: s.get("background"),
foreground: s.get("foreground"),
accent: s.get("accent"),
radius: s.get("radius"),
type: s.get("type")
})
})
type: s.get("type"),
});
});
}

const typeInput = document.querySelector(`#settings select[name="type"]`)
typeInput.addEventListener("change", e => {
const terminalInfo = document.querySelector("#terminal-info")
terminalInfo.hidden = !(e.currentTarget.value === "terminal")
})
const typeInput = document.querySelector(`#settings select[name="type"]`);
typeInput.addEventListener("change", (e) => {
const terminalInfo = document.querySelector("#terminal-info");
terminalInfo.hidden = !(e.currentTarget.value === "terminal");
});

const settingFormSubmitButton = document.querySelector(`#settings button[type="submit"]`)
const defaultButtonText = settingFormSubmitButton.textContent
const settingFormSubmitButton = document.querySelector(
`#settings button[type="submit"]`,
);
const defaultButtonText = settingFormSubmitButton.textContent;

const assetsCheckbox = document.querySelector("input#assets")
assetsCheckbox.addEventListener("change", function(e) {
const assetsPreview = document.querySelector("#assets-preview")
assetsPreview.hidden = !e.currentTarget.checked
settingFormSubmitButton.textContent = e.currentTarget.checked ? defaultButtonText + " and assets" : defaultButtonText
})
const assetsCheckbox = document.querySelector("input#assets");
assetsCheckbox.addEventListener("change", function (e) {
const assetsPreview = document.querySelector("#assets-preview");
assetsPreview.hidden = !e.currentTarget.checked;
settingFormSubmitButton.textContent = e.currentTarget.checked
? defaultButtonText + " and assets"
: defaultButtonText;
});

const settingsForm = document.querySelector("#settings")
settingsForm.addEventListener("submit", function(e) {
e.preventDefault()
const settingsForm = document.querySelector("#settings");
settingsForm.addEventListener("submit", function (e) {
e.preventDefault();

getTerminalCSS(e)
getTerminalCSS(e);

if (assetsCheckbox.checked) {
getAssets(e)
getAssets(e);
}
})
});
Loading

0 comments on commit 024a82e

Please sign in to comment.