Skip to content

Commit 84dde96

Browse files
panrpanr
authored
Updates (#5)
* updates
1 parent c8d9c67 commit 84dde96

File tree

17 files changed

+2354
-2265
lines changed

17 files changed

+2354
-2265
lines changed

‎index.html‎

Lines changed: 54 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,24 @@
2626
<meta property="og:image" content="https://panr.github.io/terminal-css/og-image.png">
2727
<link rel="shortcut icon" href="./favicon.png">
2828
<title>Terminal.css</title>
29-
<link href="./styles/components/font.css" rel="stylesheet" id="componentsFont" />
29+
<!-- FONTS -->
30+
<link href="./styles/components/fonts/fira-code.css" rel="stylesheet" id="componentsFontFiraCode" />
31+
<link href="./styles/components/fonts/jetbrains-mono.css" rel="stylesheet" id="componentsFontJetBrainsMono" />
32+
<!-- VARIABLES -->
3033
<link href="./styles/components/variables.css" rel="stylesheet" id="componentsVariables" />
31-
<link href="./styles/components/heading.css" rel="stylesheet" id="componentsHeading" />
32-
<link href="./styles/base.css" rel="stylesheet" />
34+
<!-- HEADINGS -->
35+
<link href="./styles/components/headings/default.css" rel="stylesheet" id="componentsHeading" />
36+
<link href="./styles/components/headings/one-size.css" rel="stylesheet" id="componentsHeadingOneSize" disabled />
37+
<!-- REST -->
38+
<link href="./styles/standalone.css" rel="stylesheet" />
3339
<link href="./styles/site.css" rel="stylesheet" />
3440
</head>
3541

3642
<body style="padding: 20px">
37-
38-
<dialog id="presetModal" class="dialog">
39-
<h2>Welcome!</h2>
40-
<p>Want to submit your own preset? <a href="https://github.com/panr/terminal-css/blob/master/presets.json" target="_blank">Go ahead!</a></p>
41-
<form method="dialog">
42-
<button autofocus>Close</button>
43-
</form>
44-
</dialog>
45-
46-
<dialog id="typeModal" class="dialog">
43+
<dialog id="fontModal" class="dialog">
4744
<div>
48-
<h2>Choose the right type of the file</h2>
49-
<p>
50-
<strong>Standalone</strong> — includes FireCode font (v6.2.0) via CDN (cdn.jsdelivr.net)<br>
51-
<strong>Terminal Theme</strong> — is prepared for Terminal Theme and uses built-in FiraCode from the theme.
52-
</p>
45+
<h2>Font Family</h2>
46+
<p>All fonts are provided via <strong>cdn.staticdelivr.com</strong> directly from Google Fonts and imported with `@import()` CSS function.</p>
5347
</div>
5448
<form method="dialog">
5549
<button autofocus>Close</button>
@@ -58,87 +52,68 @@ <h2>Choose the right type of the file</h2>
5852

5953
<main style="width: 1024px; max-width: 100%;">
6054
<h1 id="headline"><a href="/" style="color: inherit;">Terminal.css</a></h1>
61-
55+
6256
<p>A simple, classless 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>
6357

64-
<form id="settings">
65-
<div class="settings-wrapper">
66-
<div class="settings-header">
67-
Presets
68-
<!-- <span class="dialog-trigger" onclick="presetModal.showModal()">[?]</span> -->
69-
</div>
70-
<div class="settings-row">
71-
<div class="settings-cell" style="flex-direction: column;">
72-
<div class="settings-input">
73-
<select name="presets" id="presets"></select>
74-
</div>
75-
<div style="margin-top: 10px;">
76-
<a href="https://github.com/panr/terminal-css/blob/master/presets.json" target="_blank">-> Add your own preset <-</a>
58+
<div id="start-question" class="start-question">
59+
<p>Please, choose the type of a file you want to download:</p>
60+
<ul>
61+
<li>
62+
<label><input type="radio" name="type" value="standalone" style="margin-right: 10px;" checked>Standalone Terminal.css file</label>
63+
</li>
64+
<li>
65+
<label><input type="radio" name="type" value="terminal" style="margin-right: 10px;">Terminal Theme color scheme</label>
66+
</li>
67+
</ul>
68+
</div>
69+
70+
<form id="settings" class="settings">
71+
<div class="settings-table">
72+
<div id="settings-terminal-theme">
73+
<div class="settings-row" style="font-weight: 600;">
74+
<div class="settings-cell">
75+
<div class="settings-label" style="text-transform: uppercase;">Color Schema Presets</div>
76+
<div class="settings-input"><select id="presets" name="presets"></select></div>
7777
</div>
7878
</div>
79-
</div>
80-
81-
<div class="settings-header">Styling</div>
82-
<div class="settings-row">
83-
<div class="settings-col">
79+
<div class="settings-row">
8480
<div class="settings-cell">
8581
<div class="settings-label">Background</div>
86-
<div class="settings-input"><input type="color" id="background" name="background" oninput="setVariable('--background', this.value)"></div>
82+
<div class="settings-input"><input type="color" name="background" oninput="setVariable('--background', this.value)"></div>
8783
</div>
8884
<div class="settings-cell">
8985
<div class="settings-label">Foreground</div>
90-
<div class="settings-input"><input type="color" id="foreground" name="foreground" oninput="setVariable('--foreground', this.value)"></div>
86+
<div class="settings-input"><input type="color" name="foreground" oninput="setVariable('--foreground', this.value)"></div>
9187
</div>
9288
<div class="settings-cell">
9389
<div class="settings-label">Accent</div>
94-
<div class="settings-input"><input type="color" id="accent" name="accent" oninput="setVariable('--accent', this.value)"></div>
95-
</div>
96-
</div>
97-
<div class="settings-col">
98-
<div class="settings-cell">
99-
<div class="settings-label">Font Size</div>
100-
<div class="settings-input"><input type="text" id="fontSize" name="fontSize" oninput="setVariable('--font-size', this.value)"></div>
101-
</div>
102-
<div class="settings-cell">
103-
<div class="settings-label">Line Height</div>
104-
<div class="settings-input"><input type="text" id="lineHeight" name="lineHeight" oninput="setVariable('--line-height', this.value)"></div>
105-
</div>
106-
<div class="settings-cell">
107-
<div class="settings-label">Radius</div>
108-
<div class="settings-input"><input type="number" id="radius" name="radius" min="0" max="8" value="0" oninput="setVariable('--radius', this.value + 'px')"></div>
90+
<div class="settings-input"><input type="color" name="accent" oninput="setVariable('--accent', this.value)"></div>
10991
</div>
11092
</div>
11193
</div>
112-
<div class="settings-header">Options</div>
113-
<div class="settings-row">
114-
<div class="settings-col">
115-
<div class="settings-cell">
116-
<div class="settings-label">Heading Style</div>
117-
<div class="settings-input">
118-
<select name="headingStyle">
119-
<option name="oneSize" value="oneSize">One size</option>
120-
<option name="default" value="default">Browser's default</option>
121-
</select>
122-
</div>
94+
<div id="settings-standalone" class="settings-row">
95+
<div class="settings-cell">
96+
<div class="settings-label">Heading Style</div>
97+
<div class="settings-input">
98+
<select name="headingStyle">
99+
<option name="default" value="default">Default</option>
100+
<option name="oneSize" value="oneSize">One size</option>
101+
</select>
123102
</div>
124103
</div>
125-
<div class="settings-col">
126-
<div class="settings-cell">
127-
<div class="settings-label">
128-
Type
129-
<span class="dialog-trigger" onclick="typeModal.showModal()">[?]</span>
130-
</div>
131-
<div class="settings-input">
132-
<select name="type">
133-
<option name="standalone" value="standalone">Standalone</option>
134-
<option name="terminal" value="terminal">Terminal Theme</option>
135-
</select>
136-
</div>
104+
<div class="settings-cell">
105+
<div class="settings-label">Font Family<span class="dialog-trigger" onclick="fontModal.showModal()">[?]</span></div>
106+
<div class="settings-input">
107+
<select id="fontFamily" name="fontFamily">
108+
<option name="fira-code" value="fira-code" selected>Fira Code</option>
109+
<option name="jetbrains-mono" value="jetbrains-mono">JetBrains Mono</option>
110+
</select>
137111
</div>
138112
</div>
139113
</div>
140114
</div>
141-
<div id="terminal-info" hidden style="margin: 20px 0; padding: 10px;">
115+
116+
<div class="terminal-info" hidden style="margin: 20px 0; padding: 10px;">
142117
Remember to put all the downloaded files directly into <code>/static/</code> folder to make it work, like this:<br>
143118
- <code>/static/terminal.css</code><br>
144119
- <code>/static/favicon.png</code><br>
@@ -174,10 +149,8 @@ <h1 id="headline"><a href="/" style="color: inherit;">Terminal.css</a></h1>
174149
</svg>
175150
</div>
176151
<button id="download" type="submit">Download Terminal.css</button>
177-
<button class="copy-preset" data-output="json">Copy preset as JSON</button>
178-
<button class="copy-preset" data-output="css">Copy preset as CSS</button>
179152
</div>
180-
</form>
153+
</form>
181154

182155
<hr>
183156

‎modules/components.js‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const components = {
66
heading: `/* [[ HEADING ]] */`,
77
};
88

9-
export class Components {
9+
export class Standalone {
1010
constructor(styles, formData) {
1111
this.styles = styles;
1212
this.formData = formData;
@@ -17,9 +17,9 @@ export class Components {
1717
--background: ${this.formData.get("background")};
1818
--foreground: ${this.formData.get("foreground")};
1919
--accent: ${this.formData.get("accent")};
20-
--radius: ${this.formData.get("radius")};
21-
--font-size: ${this.formData.get("fontSize")};
22-
--line-height: ${this.formData.get("lineHeight")};
20+
--radius: ${defaultValues["radius"]};
21+
--font-size: ${defaultValues["fontSize"]};
22+
--line-height: ${defaultValues["lineHeight"]};
2323
}`;
2424
this.styles = this.styles.replace(components.variables, variables.trim());
2525
return this;
@@ -31,25 +31,74 @@ export class Components {
3131
return this;
3232
}
3333

34-
const res = await fetch("./styles/components/font.css");
35-
const font = await res.text();
36-
if (font) {
37-
this.styles = this.styles.replace(components.font, font.trim());
34+
const FONTS = {
35+
FiraCode: "./styles/components/fonts/fira-code.css",
36+
JetBrainsMono: "./styles/components/fonts/jetbrains-mono.css",
3837
}
39-
return this;
40-
}
4138

42-
async updateHeading() {
43-
if (this.formData.get("headingStyle") == "default") {
44-
this.styles = this.styles.replace(components.heading + "\n\n", "");
39+
try {
40+
let res = false;
41+
switch(this.formData.get("font")) {
42+
case "fira-code":
43+
res = await fetch(FONTS.FiraCode)
44+
break;
45+
case "jetbrains-mono":
46+
res = await fetch(FONTS.JetBrainsMono)
47+
break;
48+
default:
49+
res = await fetch(FONTS.FiraCode)
50+
}
51+
52+
const font = await res.text();
53+
if (font) {
54+
this.styles = this.styles.replace(components.font, font.trim());
55+
}
4556
return this;
57+
} catch (e) {
58+
console.error(e)
4659
}
60+
}
4761

48-
const res = await fetch("./styles/components/heading.css");
49-
const heading = await res.text();
50-
if (heading) {
51-
this.styles = this.styles.replace(components.heading, heading.trim());
62+
async updateHeading() {
63+
switch(this.formData.get("headingStyle")) {
64+
case "oneSize": {
65+
const res = await fetch("./styles/components/headings/one-size.css");
66+
const heading = await res.text();
67+
if (heading) {
68+
this.styles = this.styles.replace(components.heading, heading.trim());
69+
}
70+
break;
71+
}
72+
default: {
73+
const res = await fetch("./styles/components/headings/default.css");
74+
const heading = await res.text();
75+
if (heading) {
76+
this.styles = this.styles.replace(components.heading, heading.trim());
77+
}
78+
}
5279
}
80+
81+
return this;
82+
}
83+
84+
getStyles() {
85+
return this.styles;
86+
}
87+
}
88+
89+
export class TerminalTheme {
90+
constructor(styles, formData) {
91+
this.styles = styles;
92+
this.formData = formData;
93+
}
94+
95+
updateVariables() {
96+
const variables = `:root {
97+
--background: ${this.formData.get("background")};
98+
--foreground: ${this.formData.get("foreground")};
99+
--accent: ${this.formData.get("accent")};
100+
}`;
101+
this.styles = this.styles.replace(components.variables, variables.trim());
53102
return this;
54103
}
55104

‎modules/handlers.js‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
1-
// Type Select
2-
const typeInput = document.querySelector(`#settings select[name="type"]`);
3-
typeInput.addEventListener("change", e => {
4-
const terminalInfo = document.querySelector("#terminal-info");
5-
terminalInfo.hidden = !(e.currentTarget.value === "terminal");
6-
});
1+
// Type Radio
2+
const typeInputs = document.querySelectorAll(`#start-question input[name="type"]`);
3+
for (let typeInput of typeInputs) {
4+
typeInput.addEventListener("change", e => {
5+
const terminalInfo = document.querySelector(".terminal-info");
6+
const standaloneSettings = document.querySelector("#settings-standalone");
7+
terminalInfo.hidden = !(e.currentTarget.value === "terminal");
8+
standaloneSettings.hidden = e.currentTarget.value === "terminal"
9+
});
10+
}
711

812
// Heading Style Select
913
const headingStyleInput = document.querySelector(`#settings select[name="headingStyle"]`);
1014
headingStyleInput.addEventListener("change", e => {
1115
const headingStyles = document.querySelector("link#componentsHeading");
12-
headingStyles.disabled = e.currentTarget.value == "default";
16+
const headingStylesOneSize = document.querySelector("link#componentsHeadingOneSize");
17+
18+
switch(e.currentTarget.value) {
19+
case "browser":
20+
headingStyles.disabled = true
21+
headingStylesOneSize.disabled = true
22+
break;
23+
case "oneSize":
24+
headingStyles.disabled = true
25+
headingStylesOneSize.disabled = false
26+
break;
27+
default:
28+
headingStyles.disabled = false
29+
headingStylesOneSize.disabled = true
30+
}
1331
});
1432

1533
// Assets Checkbox
@@ -23,3 +41,20 @@ assetsCheckbox.addEventListener("change", function (e) {
2341
? defaultButtonText + " and assets"
2442
: defaultButtonText;
2543
});
44+
45+
// Fonts Select
46+
const fontInput = document.querySelector(`#settings select[name="fontFamily"]`);
47+
fontInput.addEventListener("change", e => {
48+
const FiraCode = document.querySelector("link#componentsFontFiraCode");
49+
const JetBrainsMono = document.querySelector("link#componentsFontJetBrainsMono");
50+
51+
switch(e.currentTarget.value) {
52+
case "jetbrains-mono":
53+
FiraCode.disabled = true
54+
JetBrainsMono.disabled = false
55+
break;
56+
default:
57+
FiraCode.disabled = false
58+
JetBrainsMono.disabled = true
59+
}
60+
});

0 commit comments

Comments
 (0)