gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling home page; reorg scss files;

This commit is contained in:
Reorx 2023-02-08 01:30:46 +08:00
parent af0f9aaa91
commit 47da5ace24
8 changed files with 111 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/index.html
View File

@ -5,13 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONCV Editor</title> <title>JSONCV Editor</title>
<link rel="stylesheet" href="../scss/styles.scss" /> <link rel="stylesheet" href="../scss/editor/index.scss" />
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div class="sidebar column"> <div class="sidebar column">
<div class="logo"> <div class="logo">
<div><span style="display: inline-block; border: 1px solid #aaa; padding: 2px 4px;"><span style="color: #aaa;">JSON</span>CV</span></div> <div><span class="t-jsoncv"><span class="t-json">JSON</span>CV</span></div>
<div style="padding: 2px 5px;">Editor</div> <div style="padding: 2px 5px;">Editor</div>
</div> </div>
<div class="editor-toc"></div> <div class="editor-toc"></div>

22
src/index.html
View File

@ -4,10 +4,26 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>JSONCV</title>
<link rel="stylesheet" href="./scss/home.scss" />
</head> </head>
<body> <body>
<div>JSONCV</div> <main>
<a href="/editor/">Editor</a> <div class="logo">
<div><span class="t-jsoncv"><span class="t-json">JSON</span>CV</span></div>
</div>
<p>A toolset to build your CV / Resume with JSON and generate elegant HTML and PDF documents.</p>
<div class="links">
<a href="/editor/"><button>Open JSONCV Editor</button></a>
<a href="https://github.com/reorx/jsoncv" target="_blank"><button>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6l7.2.6l-3.2 2.8H18c-3.1 0-5.6 2.3-6 5.3L5.8 21m12 .2l4.8-4.8l-1.3-1.4l-3.6 3.6l-1.5-1.6l-1.2 1.2l2.8 3"/></svg>
on GitHub</button></a>
</div>
<footer>
Made with
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"/></svg>
by <a href="https://reorx.com" target="_blank">Reorx</a>.
</footer>
</main>
</body> </body>
</html> </html>

23
src/scss/_shared.scss Normal file
View File

@ -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;
}
}

21
src/scss/_vars.scss
View File

@ -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 { @mixin button-base {
appearance: none; appearance: none;
user-select: none; user-select: none;

3
src/scss/_basic.scss → src/scss/editor/_basic.scss
View File

@ -1,4 +1,5 @@
@use 'vars'; /* basic elements */
@use '../vars';
input[type=text], input[type=text],
input[type=email] { input[type=email] {

2
src/scss/_json-editor.scss → src/scss/editor/_json-editor.scss
View File

@ -1,4 +1,4 @@
@use 'vars'; @use '../vars';
.editor-container { .editor-container {
font-size: 14px; font-size: 14px;

30
src/scss/styles.scss → src/scss/editor/index.scss
View File

@ -1,37 +1,11 @@
@use 'basic'; @use 'basic';
@use 'json-editor'; @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 { button {
font-size: 13px; font-size: 13px;
} }
body {
margin: 0;
}
#main { #main {
display: grid; display: grid;
grid-template-columns: 150px 1fr 1fr; grid-template-columns: 150px 1fr 1fr;
@ -62,8 +36,6 @@ body {
padding: var(--gap2) 0; padding: var(--gap2) 0;
margin-bottom: var(--gap2); margin-bottom: var(--gap2);
border-bottom: 1px solid var(--grey-2); border-bottom: 1px solid var(--grey-2);
font-weight: 700;
user-select: none;
} }
.editor-toc { .editor-toc {

42
src/scss/home.scss Normal file
View File

@ -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;
}