diff --git a/calculate.js b/calculate.js index a9207f8..725c393 100644 --- a/calculate.js +++ b/calculate.js @@ -4,20 +4,23 @@ //params const lines_per_field = 2 -const lines_per_gutter = 0 -const h_fields = 1 -const v_fields = 1 -const box_height = 21.897 -const box_width = 678.858 -const h_text = 7.084 +// const lines_per_gutter = 0 +const rows = document.getElementById('rows').value +const columns = document.getElementById('columns').value +const box_height = 21.897 // calculate +const box_width = 678.858 // calculate +const h_text = 7.084 // measure?? //calcs -const lines = lines_per_field * h_fields + lines_per_gutter * (h_fields - 1) +const lines = lines_per_field * rows + lines_per_gutter * (rows - 1) const total_text = h_text * lines const per_line_spacing = (box_height - total_text) / (lines - 1) //output -const leading = per_line_spacing + h_text +function getLeading() { + return per_line_spacing + h_text +} +const leading = getLeading() const h_gutter = 2 * per_line_spacing + h_text -const h_field = (box_height - h_gutter * (h_fields - 1)) / h_fields -const v_gutter = (box_width - v_fields * h_field) / (v_fields - 1) \ No newline at end of file +const h_field = (box_height - h_gutter * (rows - 1)) / rows +const v_gutter = (box_width - columns * h_field) / (columns - 1) \ No newline at end of file diff --git a/index.css b/index.css index e2d20db..fa83d7b 100644 --- a/index.css +++ b/index.css @@ -10,7 +10,7 @@ --primary-5: #d0f3ef; /* Neutral colors */ - --neutral-1: #2c2c2c; + --neutral-1: #121212; --neutral-2: #434343; --neutral-3: #94868b; --neutral-4: #d9cfd3; @@ -23,19 +23,45 @@ --accent-4: #e6c3ce; --accent-5: #fff2f7; } + + .grid-container { + display: grid; + grid-template-columns: auto auto auto auto; + grid-gap: 10px; + } + + .header { + padding: 10px; + } + + .main { + grid-column: 2 / span 3; + } + + .sidebar { + grid-column: 1 / span 1; + } + + #page { + width: auto; + height: auto; + border: var(--neutral-5) solid 1px; + } body { - background-color: var(--neutral-5); - margin: 0; + background-color: var(--neutral-1); + font-family: Helvetica, sans-serif; + color: white; } h1 { + font-family: Helvetica, sans-serif; font-size: 36px; font-weight: 600; } h2 { - font-size: 28px; + font-size: 20px; font-weight: 500; } @@ -81,9 +107,9 @@ margin-bottom: 15px; } - .form-section { - border-bottom: var(--neutral-4) solid 1px; - margin-bottom: 20px; + .form-group { + background-color: var(--neutral-2); + padding: 5px; } .input-required { @@ -94,21 +120,22 @@ } .label { - display: block; + /* display: block; */ + font-size: 10px; font-weight: 500; } .input { - font-size: 16px; + font-size: 10px; margin-top: 1em; margin-bottom: 1.5em; padding: 0.75em 0.5em; - min-width: 200px; + /* min-width: 200px; */ border: none; - border-left: 7px solid var(--neutral-4); - transition: border-left-color 160ms; - background-color: white; - width: 100%; + /* border-left: 7px solid var(--neutral-4); */ + /* transition: border-left-color 160ms; */ + /* background-color: white; */ + /* width: 100%; */ } ::placeholder { @@ -116,7 +143,7 @@ } input:not(.btn):focus { - outline: none; + outline: hidden; border-left: 7px solid var(--primary-1); } diff --git a/index.html b/index.html index 5d2f328..0de8a10 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,67 @@ + Grids Grids - -

Grids

-

The Proportional Grid Generator

+
+

Grids

+

Proportional Grid & Typesetting

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+
+
+
+
+
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6c7506c..9bc2c2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "bootstrap": "^5.1.3" }, "devDependencies": { - "electron": "^17.0.0" + "electron": "^17.4.7" } }, "node_modules/@electron/get": { @@ -37,6 +37,16 @@ "global-tunnel-ng": "^2.7.1" } }, + "node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -243,9 +253,9 @@ "dev": true }, "node_modules/electron": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/electron/-/electron-17.0.0.tgz", - "integrity": "sha512-3UXcBQMwbMWdPvGHaSdPMluHrd+/bc+K143MyvE5zVZ+S1XCHt4sau7dj6svJHns5llN0YG/c6h/vRfadIp8Zg==", + "version": "17.4.7", + "resolved": "https://registry.npmjs.org/electron/-/electron-17.4.7.tgz", + "integrity": "sha512-CMdUpd6oEwqbF7wcXwy9VNNXfTTbaeRg+zrGZciPzyzsEmJ9vzWcR1WpOxIQ4sIMjUyo1pFbvaD0VOgI2t4x3A==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -921,6 +931,12 @@ "sumchecker": "^3.0.1" } }, + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "peer": true + }, "@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -1085,9 +1101,9 @@ "dev": true }, "electron": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/electron/-/electron-17.0.0.tgz", - "integrity": "sha512-3UXcBQMwbMWdPvGHaSdPMluHrd+/bc+K143MyvE5zVZ+S1XCHt4sau7dj6svJHns5llN0YG/c6h/vRfadIp8Zg==", + "version": "17.4.7", + "resolved": "https://registry.npmjs.org/electron/-/electron-17.4.7.tgz", + "integrity": "sha512-CMdUpd6oEwqbF7wcXwy9VNNXfTTbaeRg+zrGZciPzyzsEmJ9vzWcR1WpOxIQ4sIMjUyo1pFbvaD0VOgI2t4x3A==", "dev": true, "requires": { "@electron/get": "^1.13.0", diff --git a/package.json b/package.json index 466e833..163e442 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "homepage": "https://github.com/tynanpurdy/grids#readme", "devDependencies": { - "electron": "^17.0.0" + "electron": "^17.4.7" }, "dependencies": { "bootstrap": "^5.1.3"