Change to use more consistent size framework
This commit is contained in:
Christian Bundy
parent
c3d650018a
commit
2f565ceacf
|
|
@ -29,17 +29,23 @@
|
|||
--fg-light: var(--base06);
|
||||
--bg-light: var(--base07);
|
||||
|
||||
/* rhythm */
|
||||
--rhythm: 1.5rem;
|
||||
--small: 1rem;
|
||||
--smaller: 0.5rem;
|
||||
--measure: 36rem;
|
||||
/* line */
|
||||
|
||||
--peta: 32rem;
|
||||
--tera: 16rem;
|
||||
--giga: 8rem;
|
||||
--mega: 4rem;
|
||||
--kilo: 2rem;
|
||||
--whole: 1rem;
|
||||
--milli: 0.5rem;
|
||||
--micro: 0.25rem;
|
||||
--nano: 0.125rem;
|
||||
--pico: 0.0625rem;
|
||||
|
||||
/* size */
|
||||
--thin: 0.0625rem;
|
||||
--medium: 0.25rem;
|
||||
--thick: var(--smaller);
|
||||
--common-radius: var(--medium);
|
||||
--common-radius: var(--nano);
|
||||
--measure: calc(var(--peta) + var(--mega));
|
||||
--line: 1.5rem;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -91,12 +97,12 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: var(--small) 0;
|
||||
margin: var(--whole) 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--rhythm);
|
||||
padding-left: var(--whole);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -107,8 +113,8 @@ button {
|
|||
cursor: pointer;
|
||||
background: var(--fg);
|
||||
color: var(--bg);
|
||||
border: var(--thin) solid var(--fg);
|
||||
padding: var(--smaller) var(--small);
|
||||
border: var(--pico) solid var(--fg);
|
||||
padding: var(--milli) var(--whole);
|
||||
border-radius: var(--common-radius);
|
||||
}
|
||||
|
||||
|
|
@ -116,9 +122,9 @@ select,
|
|||
input {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: var(--thin) solid var(--bg-selection);
|
||||
padding: var(--smaller);
|
||||
margin-right: var(--small);
|
||||
border: var(--pico) solid var(--bg-selection);
|
||||
padding: var(--milli);
|
||||
margin-right: var(--whole);
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: var(--common-radius);
|
||||
|
|
@ -127,10 +133,10 @@ input {
|
|||
pre {
|
||||
overflow-x: auto;
|
||||
background-color: var(--bg);
|
||||
padding: var(--smaller);
|
||||
padding: var(--milli);
|
||||
font-size: 92%;
|
||||
border-radius: var(--common-radius);
|
||||
border: var(--thin) solid var(--bg-status);
|
||||
border: var(--pico) solid var(--bg-status);
|
||||
}
|
||||
|
||||
.message code {
|
||||
|
|
@ -141,7 +147,7 @@ pre {
|
|||
font-size: 85%;
|
||||
background-color: var(--bg);
|
||||
border-radius: var(--common-radius);
|
||||
border: var(--thin) solid var(--bg-status);
|
||||
border: var(--pico) solid var(--bg-status);
|
||||
}
|
||||
|
||||
.message pre code {
|
||||
|
|
@ -156,8 +162,8 @@ pre {
|
|||
|
||||
.message blockquote {
|
||||
margin-left: 0;
|
||||
border-left: var(--thick) solid var(--bg-status);
|
||||
padding-left: var(--small);
|
||||
border-left: var(--milli) solid var(--bg-status);
|
||||
padding-left: var(--whole);
|
||||
}
|
||||
|
||||
.profile > img,
|
||||
|
|
@ -168,31 +174,31 @@ pre {
|
|||
.profile > img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: var(--small);
|
||||
margin-right: var(--whole);
|
||||
border-radius: var(--common-radius);
|
||||
}
|
||||
|
||||
.private {
|
||||
border-left: var(--medium) solid var(--violet);
|
||||
border-left: var(--milli) solid var(--violet);
|
||||
}
|
||||
|
||||
.message img,
|
||||
.message video {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
border: var(--thin) solid var(--bg-status);
|
||||
border: var(--pico) solid var(--bg-status);
|
||||
border-radius: var(--common-radius);
|
||||
}
|
||||
|
||||
.message.thread-target {
|
||||
border: var(--thin) solid var(--blue);
|
||||
box-shadow: 0 0 var(--medium) var(--blue);
|
||||
border: var(--pico) solid var(--blue);
|
||||
box-shadow: 0 0 var(--micro) var(--blue);
|
||||
}
|
||||
|
||||
.message.thread-target.private {
|
||||
border: var(--thin) solid var(--violet);
|
||||
border-left: var(--medium) solid var(--violet);
|
||||
box-shadow: 0 0 var(--medium) var(--violet);
|
||||
border: var(--pico) solid var(--violet);
|
||||
border-left: var(--micro) solid var(--violet);
|
||||
box-shadow: 0 0 var(--micro) var(--violet);
|
||||
}
|
||||
|
||||
.message audio {
|
||||
|
|
@ -223,7 +229,7 @@ pre {
|
|||
}
|
||||
|
||||
nav {
|
||||
margin: var(--small) 0;
|
||||
margin: var(--whole) 0;
|
||||
}
|
||||
|
||||
nav > ul > li > a {
|
||||
|
|
@ -237,38 +243,38 @@ nav > ul > li > a.current {
|
|||
}
|
||||
|
||||
section {
|
||||
padding: var(--small);
|
||||
padding: var(--whole);
|
||||
border-radius: var(--common-radius);
|
||||
margin: var(--thick) 0;
|
||||
box-shadow: 0 var(--thin) var(--thin) rgba(0, 0, 0, 0.33);
|
||||
margin: var(--milli) 0;
|
||||
box-shadow: 0 var(--pico) var(--pico) rgba(0, 0, 0, 0.33);
|
||||
word-wrap: break-word;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.message > header.metadata {
|
||||
height: var(--rhythm);
|
||||
height: var(--line);
|
||||
display: flex;
|
||||
margin-bottom: var(--small);
|
||||
margin-bottom: var(--whole);
|
||||
}
|
||||
|
||||
.message > header > a > .avatar {
|
||||
width: var(--rhythm);
|
||||
height: var(--rhythm);
|
||||
width: var(--line);
|
||||
height: var(--line);
|
||||
border-radius: var(--common-radius);
|
||||
margin-right: var(--smaller);
|
||||
margin-right: var(--milli);
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: var(--bg);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: var(--small);
|
||||
padding: var(--small);
|
||||
font-size: var(--whole);
|
||||
padding: var(--whole);
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
margin: var(--small) 0;
|
||||
margin: var(--whole) 0;
|
||||
height: 12rem;
|
||||
border: var(--thin) solid var(--bg-selection);
|
||||
border: var(--pico) solid var(--bg-selection);
|
||||
border-radius: var(--common-radius);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
|
@ -312,7 +318,7 @@ textarea:focus {
|
|||
* We also use `pointer-events: none` to ensure that this invisible div doesn't
|
||||
* capture cursor events (clicks, drags, etc) on surrounding elements, because
|
||||
* otherwise we could have a problem where someone clicks above the invisible
|
||||
* div but the browser things they're clicking the gigantic amount of padding.
|
||||
* div but the browser picogs they're clicking the gigantic amount of padding.
|
||||
*/
|
||||
.message > .centered-footer {
|
||||
padding-top: 50vh;
|
||||
|
|
@ -323,7 +329,7 @@ textarea:focus {
|
|||
.message > footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--small);
|
||||
margin-top: var(--whole);
|
||||
}
|
||||
|
||||
.message > footer > * {
|
||||
|
|
@ -359,9 +365,9 @@ nav > ul > li {
|
|||
}
|
||||
|
||||
.profile {
|
||||
margin-top: var(--rhythm);
|
||||
margin-top: var(--whole);
|
||||
display: flex;
|
||||
margin-bottom: var(--rhythm);
|
||||
margin-bottom: var(--whole);
|
||||
}
|
||||
|
||||
progress {
|
||||
|
|
@ -378,12 +384,10 @@ progress {
|
|||
|
||||
/* content warning! */
|
||||
summary {
|
||||
padding: var(--small) var(--smaller);
|
||||
background-color: var(--bg-status);
|
||||
padding: var(--milli);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: var(--fg-status);
|
||||
border: var(--thin) solid var(--bg-selection);
|
||||
border: var(--pico) solid var(--bg-selection);
|
||||
}
|
||||
|
||||
.md-mention {
|
||||
|
|
@ -402,8 +406,8 @@ table {
|
|||
|
||||
td,
|
||||
th {
|
||||
padding: var(--smaller);
|
||||
outline: var(--thin) solid var(--bg-status);
|
||||
padding: var(--milli);
|
||||
outline: var(--pico) solid var(--bg-status);
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -413,9 +417,9 @@ th {
|
|||
|
||||
input[type="search"] {
|
||||
width: 100%;
|
||||
margin: var(--small) 0;
|
||||
margin: var(--whole) 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: var(--thin) solid var(--fg-alt);
|
||||
border: var(--pico) solid var(--fg-alt);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue