From 47da5ace241ece5d0e1ed1fa00e8cbbf1be169d8 Mon Sep 17 00:00:00 2001 From: Reorx Date: Wed, 8 Feb 2023 01:30:46 +0800 Subject: [PATCH] styling home page; reorg scss files; --- src/editor/index.html | 4 +- src/index.html | 22 +++++++++-- src/scss/_shared.scss | 23 +++++++++++ src/scss/_vars.scss | 21 +++++++++++ src/scss/{ => editor}/_basic.scss | 3 +- src/scss/{ => editor}/_json-editor.scss | 2 +- src/scss/{styles.scss => editor/index.scss} | 30 +-------------- src/scss/home.scss | 42 +++++++++++++++++++++ 8 files changed, 111 insertions(+), 36 deletions(-) create mode 100644 src/scss/_shared.scss rename src/scss/{ => editor}/_basic.scss (96%) rename src/scss/{ => editor}/_json-editor.scss (99%) rename src/scss/{styles.scss => editor/index.scss} (67%) create mode 100644 src/scss/home.scss diff --git a/src/editor/index.html b/src/editor/index.html index 86cedc4..a370798 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -5,13 +5,13 @@ JSONCV Editor - +
diff --git a/src/index.html b/src/index.html index cbc7906..0a25502 100644 --- a/src/index.html +++ b/src/index.html @@ -4,10 +4,26 @@ - Document + JSONCV + -
JSONCV
- Editor +
+ +

A toolset to build your CV / Resume with JSON and generate elegant HTML and PDF documents.

+
+ + +
+ +
diff --git a/src/scss/_shared.scss b/src/scss/_shared.scss new file mode 100644 index 0000000..582a25f --- /dev/null +++ b/src/scss/_shared.scss @@ -0,0 +1,23 @@ +/* shared styles */ +@use 'vars'; + +html, +body * { + font-family: var(--font-default); +} + +html, body { + margin: 0; + padding: 0; +} + +.logo { + font-weight: 700; + user-select: none; + .t-jsoncv { + display: inline-block; border: 1px solid #aaa; padding: 2px 4px; + } + .t-json { + color: #aaa; + } +} diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index d93a39a..4286c36 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -1,3 +1,24 @@ +/* variables and mixins */ + +:root { + --gap: 8px; + --gap2: calc(var(--gap) * 2); + --blue-0: #D0EBFF; + --blue-1: #A5D8FF; + --red-0: #FFE3E3; + --red-1: #FFC9C9; + --yellow-0: #FFF3BF; + --yellow-1: #FFEC99; + --green-0: #D3F9D8; + --green-1: #B2F2BB; + --grey-0: #eee; + --grey-1: #e1e1e1; + --grey-2: #ddd; + --color-text-dim: #777; + --font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + --font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace; +} + @mixin button-base { appearance: none; user-select: none; diff --git a/src/scss/_basic.scss b/src/scss/editor/_basic.scss similarity index 96% rename from src/scss/_basic.scss rename to src/scss/editor/_basic.scss index 4403713..c17315d 100644 --- a/src/scss/_basic.scss +++ b/src/scss/editor/_basic.scss @@ -1,4 +1,5 @@ -@use 'vars'; +/* basic elements */ +@use '../vars'; input[type=text], input[type=email] { diff --git a/src/scss/_json-editor.scss b/src/scss/editor/_json-editor.scss similarity index 99% rename from src/scss/_json-editor.scss rename to src/scss/editor/_json-editor.scss index 3e81883..0a36dfa 100644 --- a/src/scss/_json-editor.scss +++ b/src/scss/editor/_json-editor.scss @@ -1,4 +1,4 @@ -@use 'vars'; +@use '../vars'; .editor-container { font-size: 14px; diff --git a/src/scss/styles.scss b/src/scss/editor/index.scss similarity index 67% rename from src/scss/styles.scss rename to src/scss/editor/index.scss index 50afaa4..0886c74 100644 --- a/src/scss/styles.scss +++ b/src/scss/editor/index.scss @@ -1,37 +1,11 @@ @use 'basic'; @use 'json-editor'; +@use '../shared'; -:root { - --gap: 8px; - --gap2: calc(var(--gap) * 2); - --blue-0: #D0EBFF; - --blue-1: #A5D8FF; - --red-0: #FFE3E3; - --red-1: #FFC9C9; - --yellow-0: #FFF3BF; - --yellow-1: #FFEC99; - --green-0: #D3F9D8; - --green-1: #B2F2BB; - --grey-0: #eee; - --grey-1: #e1e1e1; - --grey-2: #ddd; - --font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - --font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace; -} - - -html, -body * { - font-family: var(--font-default); -} button { font-size: 13px; } -body { - margin: 0; -} - #main { display: grid; grid-template-columns: 150px 1fr 1fr; @@ -62,8 +36,6 @@ body { padding: var(--gap2) 0; margin-bottom: var(--gap2); border-bottom: 1px solid var(--grey-2); - font-weight: 700; - user-select: none; } .editor-toc { diff --git a/src/scss/home.scss b/src/scss/home.scss new file mode 100644 index 0000000..ca1b43a --- /dev/null +++ b/src/scss/home.scss @@ -0,0 +1,42 @@ +@use 'vars'; +@use 'shared'; + +html, body { + height: 100vh; +} +body { + display: flex; + align-items: center; + justify-content: center; +} + +main { + width: min(400px, calc(100vw - 2 * var(--gap2))); + padding: var(--gap2); + border: 1px solid var(--grey-2); + + .links { + display: flex; + a { + margin: var(--gap) var(--gap) var(--gap) 0; + } + } + + footer { + margin-top: var(--gap2); + color: var(--color-text-dim); + } +} + +a { + color: #333; + text-decoration: underline; +} + +button { + @include vars.normal-button; +} + +svg { + vertical-align: bottom; +}