[CSS] Base CSS polish, reset CSS additions for better cross-browser compatibility.
This commit is contained in:
parent
a77f51dd06
commit
bac6d2a490
GPG Key ID:
7D0C7EAFC9D835A0
@ -30,129 +30,12 @@
|
||||
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
h1 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--main-size);
|
||||
font-weight: 900;
|
||||
opacity: 1.00;
|
||||
letter-spacing: -0.40px;
|
||||
word-spacing: 4.00px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.75px;
|
||||
word-spacing: 3.00px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.00;
|
||||
letter-spacing: -0.20px;
|
||||
word-spacing: 1.00px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.30px;
|
||||
word-spacing: -0.10px;
|
||||
margin-bottom: var(--small-size) !important;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
border-radius: var(--unit-size) !important;
|
||||
background: var(--white) !important;
|
||||
color: var(--bg1) !important;
|
||||
padding: 0 var(--unit-size) 0 var(--unit-size) !important;
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
|
||||
button,
|
||||
input[type=file]::file-selector-button {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
padding: .2em .4em;
|
||||
|
||||
border-radius: var(--unit-size);
|
||||
border: 2px solid var(--bg2);
|
||||
|
||||
background-color: var(--translucent);
|
||||
color: var(--white);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
input[type=file]::file-selector-button:hover,
|
||||
button:hover {
|
||||
border: 2px solid var(--white) !important;
|
||||
background-color: var(--white) !important;
|
||||
color: var(--bg2) !important;
|
||||
}
|
||||
|
||||
button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#instance:focus svg,
|
||||
#instance:hover svg {
|
||||
fill: var(--bg1);
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
|
||||
summary:hover > svg,
|
||||
summary:focus > svg {
|
||||
border-radius: var(--unit-size);
|
||||
background-color: var(--white);
|
||||
fill: var(--bg1) !important;
|
||||
stroke: var(--bg1) !important;
|
||||
border: unset !important;
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
hr {
|
||||
all: unset;
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: var(--translucent);
|
||||
}
|
||||
|
||||
/* DEFAULTS */
|
||||
.bg {
|
||||
background-color: var(--bg3);
|
||||
@ -160,18 +43,6 @@ hr {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
background-attachment: fixed;
|
||||
color: var(--white);
|
||||
font-family: var(--main-font);
|
||||
}
|
||||
|
||||
#header {
|
||||
@ -183,9 +54,7 @@ html {
|
||||
background-color: var(--bg1);
|
||||
|
||||
padding: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
box-shadow: var(--shadow);
|
||||
@ -207,7 +76,7 @@ html {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
/*margin-top: calc(3 * var(--small-size) + var(--main-size));*/
|
||||
margin-top: 4.3rem;
|
||||
margin-top: 3.3rem;
|
||||
}
|
||||
|
||||
/* THE FOCUSED (middle) DIV */
|
||||
@ -216,7 +85,7 @@ html {
|
||||
flex-direction: column;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
padding: var(--small-size);
|
||||
padding: 0 var(--unit-size) 0 var(--unit-size);
|
||||
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
@ -289,11 +158,6 @@ html {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figcaption a:link {
|
||||
font-size: var(--small-size);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* SIDE PANELS */
|
||||
.panel {
|
||||
font-size: var(--main-size);
|
||||
@ -318,27 +182,30 @@ figcaption a:link {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--white);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* MEDIA RESIZE */
|
||||
@media (max-width: 1200px) {
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
display: flex;
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: unset;
|
||||
max-width: 100% !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.panel aside {
|
||||
display: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.panel[open] {
|
||||
@ -353,7 +220,7 @@ figcaption a:link {
|
||||
}
|
||||
|
||||
.panel aside {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel[open] aside {
|
||||
|
||||
@ -2,14 +2,6 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
width: var(--main-size);
|
||||
height: auto;
|
||||
|
||||
fill: var(--white);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* PROFILE */
|
||||
.profile-nav {
|
||||
font-family: var(--display-font);
|
||||
@ -83,7 +75,10 @@
|
||||
.timeline-nav h1 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.timeline-nav hr {
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, var(--bg3), transparent);
|
||||
}
|
||||
.timeline-nav a {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@ -12,11 +12,11 @@ ul, ol {
|
||||
/* avoid browser default inconsistent heading font-sizes */
|
||||
/* and pre/code too */
|
||||
h1, h2, h3, h4, h5, h6, pre, code {
|
||||
font-size: 1em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
|
||||
/* the default spacing on headings does not match nor align with
|
||||
/* the default spacing on headings does not match nor align with
|
||||
normal interline spacing at all, so let's get rid of it. */
|
||||
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
|
||||
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
|
||||
@ -29,12 +29,12 @@ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fields
|
||||
|
||||
/* whoever thought blue linked image borders were a good idea? */
|
||||
a img, :link img, :visited img {
|
||||
border: none
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* de-italicize address */
|
||||
address {
|
||||
font-style: normal
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* firefox focus outline */
|
||||
@ -64,4 +64,381 @@ details > summary::-webkit-details-marker {
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
line-height: inherit;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid currentColor;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type=color] {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration,
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
color: inherit;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ol dl,
|
||||
ul ol,
|
||||
ul ul,
|
||||
ul dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
dl dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
dialog {
|
||||
background-color: inherit;
|
||||
border: solid;
|
||||
color: inherit;
|
||||
display: block;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY AND GENERAL SELECTORS */
|
||||
body,
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
background-attachment: fixed;
|
||||
color: var(--white);
|
||||
font-family: var(--main-font);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--main-size);
|
||||
font-weight: 900;
|
||||
opacity: 1.00;
|
||||
letter-spacing: -0.40px;
|
||||
word-spacing: 4.00px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.75px;
|
||||
word-spacing: 3.00px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.00;
|
||||
letter-spacing: -0.20px;
|
||||
word-spacing: 1.00px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.30px;
|
||||
word-spacing: -0.10px;
|
||||
margin-bottom: var(--small-size);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
border-radius: var(--unit-size);
|
||||
background: var(--white);
|
||||
color: var(--bg1) !important;
|
||||
padding: 0 var(--unit-size) 0 var(--unit-size);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
figcaption a:link {
|
||||
font-size: var(--small-size);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=file]::file-selector-button {
|
||||
font-family: var(--display-font) ;
|
||||
font-size: var(--medium-size);
|
||||
padding: .2em .4em;
|
||||
|
||||
border-radius: var(--unit-size);
|
||||
border: 2px solid var(--bg2);
|
||||
|
||||
background-color: var(--translucent);
|
||||
color: var(--white);
|
||||
transition: var(--cubic-transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file]::-ms-browse,
|
||||
input[type=file]::-webkit-file-upload-button {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
padding: .2em .4em;
|
||||
|
||||
border-radius: var(--unit-size);
|
||||
border: 2px solid var(--bg2);
|
||||
|
||||
background-color: var(--translucent);
|
||||
color: var(--white);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
button:hover,
|
||||
input[type=file]::file-selector-button:hover
|
||||
{
|
||||
border: 2px solid var(--white) !important;
|
||||
background-color: var(--white) !important;
|
||||
color: var(--bg2) !important;
|
||||
}
|
||||
input[type=file]::-webkit-file-upload-button:hover,
|
||||
input[type=file]::-ms-browse:hover {
|
||||
border: 2px solid var(--white);
|
||||
background-color: var(--white);
|
||||
color: var(--bg2);
|
||||
}
|
||||
|
||||
button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary:hover > svg,
|
||||
summary:focus > svg {
|
||||
border-radius: var(--unit-size);
|
||||
background-color: var(--white);
|
||||
fill: var(--bg1);
|
||||
border: 2px solid var(--white);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
hr {
|
||||
all: unset;
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: var(--translucent);
|
||||
}
|
||||
@ -1,12 +1,3 @@
|
||||
.icon-right {
|
||||
width: var(--main-size);
|
||||
height: auto;
|
||||
|
||||
fill: var(--white);
|
||||
stroke-width: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#right-panel {
|
||||
right: 0;
|
||||
}
|
||||
@ -150,10 +141,4 @@
|
||||
|
||||
.attachments {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.create-notice details {
|
||||
font-family: var(--display-font);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
.main-nav {
|
||||
background-color: var(--translucent);
|
||||
margin-bottom: var(--unit-size);
|
||||
font-size: var(--main-size);
|
||||
border-radius: var(--unit-size);
|
||||
@ -31,9 +32,6 @@
|
||||
.main-nav ul li {
|
||||
font-size: var(--medium-size);
|
||||
border-radius: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.form {
|
||||
@ -48,7 +46,7 @@
|
||||
all: unset;
|
||||
display: flex;
|
||||
width: 2px;
|
||||
background-image: linear-gradient(to bottom, var(--bg3), transparent 90%);
|
||||
background-image: linear-gradient(to bottom, var(--bg2), transparent 90%);
|
||||
margin-right: var(--unit-size);
|
||||
}
|
||||
|
||||
@ -109,10 +107,11 @@
|
||||
|
||||
.section-title-settings summary:focus,
|
||||
.section-title-settings summary:hover {
|
||||
border-radius: var(--unit-size) !important;
|
||||
background: var(--white) !important;
|
||||
color: var(--bg1) !important;
|
||||
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
|
||||
border-radius: var(--unit-size);
|
||||
background: var(--white);
|
||||
color: var(--bg1);
|
||||
padding-left: var(--unit-size);
|
||||
padding-right: var(--unit-size);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user