more comfortable line height
This commit is contained in:
Nolan Lawson
parent
ccc1efb42a
commit
af98b62deb
|
|
@ -2,7 +2,7 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.2;
|
line-height: 1.3;
|
||||||
color: var(--body-text-color);
|
color: var(--body-text-color);
|
||||||
background: var(--body-bg);
|
background: var(--body-bg);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,138 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* auto-generated w/ build-sass.js */
|
/* auto-generated w/ build-sass.js */
|
||||||
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff}
|
:root {
|
||||||
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.2;color:var(--body-text-color);background:var(--body-bg)}#svelte{display:flex;flex-direction:column}main{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:800px;padding:15px 15px;box-sizing:border-box;margin:85px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:75px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
|
--button-primary-bg: #6081e6;
|
||||||
|
--button-primary-text: white;
|
||||||
|
--button-primary-border: #132c76;
|
||||||
|
--button-primary-bg-active: #456ce2;
|
||||||
|
--button-primary-bg-hover: #6988e7;
|
||||||
|
--button-bg: #e6e6e6;
|
||||||
|
--button-text: #333;
|
||||||
|
--button-border: #a7a7a7;
|
||||||
|
--button-bg-active: #bfbfbf;
|
||||||
|
--button-bg-hover: #f2f2f2;
|
||||||
|
--input-border: #dadada;
|
||||||
|
--anchor-text: royalblue;
|
||||||
|
--main-bg: white;
|
||||||
|
--body-bg: #e8edfb;
|
||||||
|
--body-text-color: #333;
|
||||||
|
--main-border: #dadada;
|
||||||
|
--svg-fill: royalblue;
|
||||||
|
--form-bg: #f7f7f7;
|
||||||
|
--form-border: #c1c1c1;
|
||||||
|
--nav-bg: royalblue;
|
||||||
|
--nav-border: #214cce;
|
||||||
|
--nav-a-border: royalblue;
|
||||||
|
--nav-a-selected-border: white;
|
||||||
|
--nav-a-selected-bg: #6d8ce8;
|
||||||
|
--nav-svg-fill: white;
|
||||||
|
--nav-text-color: white;
|
||||||
|
--nav-a-selected-border-hover: white;
|
||||||
|
--nav-a-selected-bg-hover: #839deb;
|
||||||
|
--nav-a-bg-hover: #577ae4;
|
||||||
|
--nav-a-border-hover: royalblue;
|
||||||
|
--nav-svg-fill-hover: white;
|
||||||
|
--nav-text-color-hover: white;
|
||||||
|
--action-button-fill-color: #839deb;
|
||||||
|
--action-button-fill-color-hover: #99afef;
|
||||||
|
--action-button-fill-color-active: #577ae4;
|
||||||
|
--settings-list-item-bg: white;
|
||||||
|
--settings-list-item-text: royalblue;
|
||||||
|
--settings-list-item-text-hover: royalblue;
|
||||||
|
--settings-list-item-border: #dadada;
|
||||||
|
--settings-list-item-bg-active: #e6e6e6;
|
||||||
|
--settings-list-item-bg-hover: #fafafa;
|
||||||
|
--toast-bg: #333;
|
||||||
|
--toast-border: #fafafa;
|
||||||
|
--toast-text: white;
|
||||||
|
--mask-bg: #333;
|
||||||
|
--mask-svg-fill: white; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--body-text-color);
|
||||||
|
background: var(--body-bg); }
|
||||||
|
|
||||||
|
#svelte {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; }
|
||||||
|
|
||||||
|
main {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
position: relative;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 15px 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 85px auto 15px;
|
||||||
|
background: var(--main-bg);
|
||||||
|
border: 1px solid var(--main-border);
|
||||||
|
border-radius: 1px; }
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
main {
|
||||||
|
padding: 5px 5px;
|
||||||
|
margin: 75px auto 15px; } }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.2; }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--anchor-text);
|
||||||
|
text-decoration: none; }
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--anchor-text); }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
padding: 5px; }
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 1.2em;
|
||||||
|
background: var(--button-bg);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid var(--button-border);
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--button-text); }
|
||||||
|
button:hover {
|
||||||
|
background: var(--button-bg-hover); }
|
||||||
|
button:active {
|
||||||
|
background: var(--button-bg-active); }
|
||||||
|
button[disabled] {
|
||||||
|
opacity: 0.35;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed; }
|
||||||
|
button.primary {
|
||||||
|
border: 1px solid var(--button-primary-border);
|
||||||
|
background: var(--button-primary-bg);
|
||||||
|
color: var(--button-primary-text); }
|
||||||
|
button.primary:hover {
|
||||||
|
background: var(--button-primary-bg-hover); }
|
||||||
|
button.primary:active {
|
||||||
|
background: var(--button-primary-bg-active); }
|
||||||
|
|
||||||
|
p, label, input {
|
||||||
|
font-size: 1.3em; }
|
||||||
|
|
||||||
|
ul, li, p {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue