[CSS] Improved reset.css, better and more granular sizes added

Search form dimensions fixed, page header alignment issues fixed, and consistent font sizes used throughout
v3
Eliseu Amaro 1 year ago
parent 9cf83db62a
commit 87559e9a8c
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5

@ -1,9 +1,9 @@
:root {
--s: .6rem;
--unit: 1rem;
--m: 1.3rem;
--xl: 1.62rem;
--xxl: 3rem;
--font-size-sm: .6rem;
--font-size-base: 1rem;
--font-size-base: 1.3rem;
--font-size-md: 1.62rem;
--font-size-xxxl: 3rem;
}
@media (prefers-color-scheme: dark) {

@ -1,268 +1,490 @@
details summary > *,
menu,
ul {
margin: unset;
padding: unset;
}
details > summary,
menu,
ul {
list-style: none;
}
:link,
:visited,
ul {
text-decoration: none;
}
.header-title,
.page-content-wrapper {
margin-left: auto;
margin-right: auto;
overflow-wrap: anywhere;
word-break: break-word;
}
.header-title,
.page-header .header-title {
text-align: center;
}
fieldset,
hr {
all: unset;
}
hr,
p {
margin-bottom: var(--font-size-sm);
}
* {
box-sizing: border-box !important;
max-width: 100%;
}
body,
html {
font-family:'Open Sans',sans-serif;
background-image:url(images/noise.png);
background-blend-mode: soft-light;
align-self: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-attachment: fixed;
background-color: var(--background-hard);
}
.icon {
fill: var(--foreground);
body,
input,
select,
textarea {
color: var(--foreground);
}
:link,
:visited {
color: currentColor;
}
li,
ul {
margin: 0;
padding: 0;
}
blockquote,
body,
fieldset,
form,
html,
input,
pre,
textarea {
border: 0;
margin: 0;
padding: 0;
}
:link img,
:visited img,
a img {
border: 0;
}
address {
font-style: normal;
}
:focus {
outline: 0;
}
::-moz-focus-inner {
border: 0;
}
details summary {
cursor: pointer !important;
}
details > summary::-webkit-details-marker {
display: none;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
line-height: 1.5em;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5 {
font-family: Poppins, sans-serif;
margin: var(--font-size-base) 0 var(--font-size-sm);
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
legend:first-child {
margin-top: initial;
}
.doc-navigation {
font-size: 1.383em;
font-weight: 700;
margin-top: 0;
}
.page-content,
hr {
margin-top: var(--font-size-sm);
}
h1 {
font-size: var(--font-size-lg);
font-weight: 900;
}
h2 {
font-size: var(--font-size-lg);
font-weight: 800;
}
label,
legend {
font-weight: 500;
}
h3 {
font-size: var(--font-size-md);
font-weight: 700;
}
h4 {
font-size: var(--font-size-md);
font-weight: 600;
}
h5 {
font-size: var(--font-size-base);
font-weight: 500;
}
.text_small,
small {
font-size: var(--font-size-sm);
}
label,
legend {
font-size: var(--font-size-base);
}
input[type="password"],
input[type="text"],
textarea {
padding: 6px 8px;
}
a:focus,
a:hover {
text-decoration: underline;
}
:focus-visible {
box-shadow: var(--shadow-inset-accent) !important;
}
html {
font-family: "Open Sans", sans-serif;
background-image: url(images/noise.png);
background-blend-mode: soft-light;
}
.accessibility-menu {
background-color:var(--background-hard)!important;
border:2px solid var(--border);
border-radius:var(--s);
display:block;
height:min-content;
left:-90%;
padding:var(--s);
position:absolute;
top:-90%;
width:30%;
z-index:999;
background-color: var(--background-hard) !important;
border: 2px solid var(--border);
border-radius: var(--font-size-sm);
display: block;
height: min-content;
left: -90%;
padding: var(--font-size-sm);
position: absolute;
top: -90%;
width: 30%;
z-index: 999;
}
.doc-navigation,
.markdown-blocks {
background-color: var(--background-card) !important;
padding: var(--font-size-sm);
}
.accessibility-menu ul {
list-style-type:disc;
margin-left:var(--m);
list-style-type: disc;
margin-left: var(--font-size-base);
}
.accessibility-menu:focus-within:not(:active) {
left:var(--s);
top:var(--s);
left: var(--font-size-sm);
top: var(--font-size-sm);
}
.active {
font:900 1em "Open Sans",sans-serif;
font: 900 1em "Open Sans", sans-serif;
}
.anchor-hidden {
height:1px;
overflow:hidden;
width:1px;
height: 1px;
overflow: hidden;
width: 1px;
}
.doc-navigation {
background-color:var(--background-card)!important;
border-bottom:0;
border-radius:var(--s) var(--s) 0 0;
padding:var(--s);
border-bottom: 0;
border-radius: var(--font-size-sm) var(--font-size-sm) 0 0;
}
.doc-navigation ul {
display:flex;
}
.header-instance {
margin-left:auto;
margin-right:auto;
text-align:center;
display: flex;
}
.icon {
height:1em;
vertical-align:center;
width:1em;
fill: var(--foreground);
height: 1em;
vertical-align: center;
width: 1em;
}
.markdown-blocks {
background-color:var(--background-card)!important;
border-radius:0 0 var(--s) var(--s);
padding:var(--s);
border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
}
.markdown-blocks ul {
list-style:disc;
margin-left:1em;
list-style: disc;
margin-left: 1em;
}
.markdown-blocks ul li {
margin-bottom:.2em;
margin-bottom: 0.2em;
}
.page-content {
margin-top:var(--s);
width:100%;
width: 100%;
}
.page-content-wrapper {
margin-left:auto;
margin-right:auto;
padding:var(--s) var(--s) 0;
position:relative;
top:var(--xxl);
padding: var(--font-size-sm) var(--font-size-sm) 0;
position: relative;
top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
}
.page-header,
.section-panel {
padding: var(--font-size-sm);
position: fixed;
}
.page-header {
background:var(--background-card);
box-shadow:var(--shadow);
display:inline-flex;
height:var(--xxl);
padding:var(--s);
position:fixed;
top:0;
z-index:1;
display: inline-flex;
background: var(--background-card);
box-shadow: var(--shadow);
height: calc(2 * var(--font-size-sm) + var(--font-size-lg));
top: 0;
z-index: 1;
}
.page-header #toggle-panel-left {
float:left;
.page-header h1 {
display: inline-flex;
margin: unset;
}
.page-header #toggle-panel-right {
float:right;
.page-header h1 svg {
margin-right: 6px;
}
.page-header .header-instance {
text-align:center;
.page-header #toggle-panel-left {
float: left;
}
.page-header #toggle-panel-right {
float: right;
}
.section-panel {
padding:var(--s);
position:fixed;
top:var(--xxl);
top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
}
.section-panel .panel-content {
display:block;
height:calc(100vh - var(--xxl));
overflow:auto;
display: block;
height: calc(100vh - var(--font-size-xxl));
overflow: auto;
}
.section-panel-left {
left:0;
left: 0;
}
.section-panel-right {
right:0;
right: 0;
}
.panel-left-icon,
.panel-right-icon {
align-self: self-end;
}
hr {
margin-bottom:var(--s);
margin-top:var(--s);
background-color: var(--border) !important;
display: block;
height: 1px;
}
@media only screen and (max-width: 512px) {
html {
font-size:85%;
font-size: 85%;
}
}
@media only screen and (max-width: 1280px) {
#toggle-panel-left:checked~.section-panel-left,#toggle-panel-right:checked~.section-panel-right {
background-color:var(--background-hard);
box-shadow:var(--shadow);
left:0;
width:100vw;
z-index:auto;
#toggle-panel-left:checked ~ .section-panel-left,
#toggle-panel-right:checked ~ .section-panel-right {
background-color: var(--background-hard);
box-shadow: var(--shadow);
left: 0;
width: 100vw;
z-index: auto;
}
#toggle-panel-left:not(:checked)~.section-panel-left,#toggle-panel-right:not(:checked)~.section-panel-right {
display:none;
#toggle-panel-left:not(:checked) ~ .section-panel-left,
#toggle-panel-right:not(:checked) ~ .section-panel-right {
display: none;
}
.page-content {
max-width:100%;
max-width: 100%;
}
.page-header,.page-content-wrapper {
width:100%;
.page-content-wrapper,
.page-header {
width: 100%;
}
input[id|=toggle-panel] {
position:absolute;
top:-100%;
input[id|="toggle-panel"] {
position: absolute;
top: -100%;
}
label[for|=toggle-panel] {
cursor:pointer;
label[for|="toggle-panel"] {
cursor: pointer;
}
}
@media only screen and (min-width: 1281px) {
.page-content-wrapper {
width:66vw;
width: 66vw;
}
.page-header {
width:100%;
width: 100%;
}
.section-panel {
width:17vw;
width: 17vw;
}
a[id|=anchor]:target+.accessibility-target {
animation-duration:.6s;
animation-name:highlight;
animation-timing-function:ease-in-out;
a[id|="anchor"]:target + .accessibility-target {
animation-duration: 0.6s;
animation-name: highlight;
animation-timing-function: ease-in-out;
}
label[for|=toggle-panel],input[id|=toggle-panel] {
display:none!important;
input[id|="toggle-panel"],
label[for|="toggle-panel"] {
display: none !important;
}
}
@media only screen and (min-width: 1921px) {
.page-content-wrapper {
width:44vw;
width: 44vw;
}
.page-header {
width:66vw;
width: 66vw;
}
.section-panel {
width:11vw;
width: 11vw;
}
.page-header,.section-panel-left {
left:17vw;
.page-header,
.section-panel-left {
left: 17vw;
}
.section-panel-right {
right:17vw;
right: 17vw;
}
label[for|=toggle-panel],input[id|=toggle-panel] {
display:none!important;
input[id|="toggle-panel"],
label[for|="toggle-panel"] {
display: none !important;
}
}
@keyframes fadeIn {
0% {
opacity:0;
transform:translateY(-10px);
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity:unset;
transform:none;
opacity: unset;
transform: none;
}
}
@keyframes fadeOut {
0% {
opacity:unset;
transform:none;
opacity: unset;
transform: none;
}
100% {
opacity:0;
transform:translateY(-10px);
opacity: 0;
transform: translateY(-10px);
}
}
@keyframes highlight {
0%,100% {
border-radius:var(--s);
box-shadow:initial;
0%,
100% {
border-radius: var(--font-size-sm);
box-shadow: initial;
}
50% {
border-radius:var(--s);
box-shadow:inset 0 20px 40px #fff;
transition:box-shadow .3s ease-in-out;
z-index:666;
border-radius: var(--font-size-sm);
box-shadow: inset 0 20px 40px #fff;
transition: box-shadow 0.3s ease-in-out;
z-index: 666;
}
}
}

@ -1,388 +1,413 @@
.embed,
.feed-empty,
.feed-header,
.h-entry,
.note-end {
display: flex;
}
.note-info,
[id|="note-compact"] {
overflow: auto;
touch-action: manipulation;
}
.note-text,
[id|="note-compact"] {
word-break: break-all;
}
.delete-button-container {
-moz-mask-image:url(icons/delete.svg);
-o-mask-image:url(icons/delete.svg);
-webkit-mask-image:url(icons/delete.svg);
mask-image:url(icons/delete.svg);
-moz-mask-image: url(icons/delete.svg);
-o-mask-image: url(icons/delete.svg);
-webkit-mask-image: url(icons/delete.svg);
mask-image: url(icons/delete.svg);
}
.embed {
border:unset;
display:flex;
padding:var(--s);
border: unset;
padding: var(--font-size-sm);
}
.embed .p-author,.embed .p-name,.note-author-url,.note-complementary-info a {
font-weight:600;
.embed .p-author,
.embed .p-name,
.note-author-url,
.note-complementary-info a {
font-weight: 600;
}
.embed .p-summary {
width:60%;
width: 60%;
}
.embed .p-summary hr {
margin-bottom:var(--s);
margin-top:var(--s);
margin-bottom: var(--font-size-sm);
margin-top: var(--font-size-sm);
}
.embed header {
margin-bottom:var(--m);
width:100%;
margin-bottom: var(--font-size-base);
width: 100%;
}
.embed img {
margin-right:var(--s);
max-block-size:128px;
padding:unset;
width:auto;
margin-right: var(--font-size-sm);
max-block-size: 128px;
padding: unset;
width: auto;
}
.favourite-button-container {
-moz-mask-image:url(icons/heart.svg);
-o-mask-image:url(icons/heart.svg);
-webkit-mask-image:url(icons/heart.svg);
mask-image:url(icons/heart.svg);
-moz-mask-image: url(icons/heart.svg);
-o-mask-image: url(icons/heart.svg);
-webkit-mask-image: url(icons/heart.svg);
mask-image: url(icons/heart.svg);
}
.feed-actions-details summary,.note-actions-extra-details summary {
display:block;
.feed-actions-details summary,
.note-actions-extra-details summary {
display: block;
}
.feed-actions-details-dropdown {
font-size:.937rem;
font-size: 0.937rem;
}
.feed-actions-details[open] svg {
height:auto;
width:1em;
height: auto;
width: 1em;
}
.feed-actions-details[open]>.feed-actions-details-dropdown,.note-actions-extra-details[open]>summary+* {
background:var(--background-card);
border:1px solid var(--border);
border-radius:var(--s);
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
padding:4px 8px;
position:absolute;
right:0;
width:max-content;
z-index:1;
.feed-actions-details[open] > .feed-actions-details-dropdown,
.note-actions-extra-details[open] > summary + * {
background: var(--background-card);
border: 1px solid var(--border);
border-radius: var(--font-size-sm);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
padding: 4px 8px;
position: absolute;
right: 0;
width: max-content;
z-index: 1;
}
.feed-actions-details[open]>summary,.note-actions-extra-details[open]>summary,.note-actions-set {
opacity:1!important;
.feed-actions-details[open] > summary,
.note-actions-extra-details[open] > summary,
.note-actions-set {
opacity: 1 !important;
}
.feed-empty .feed-background {
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:var(--xxl);
opacity:3%;
width:40%;
}
.feed-empty,.note-end {
display:flex;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: var(--font-size-xxxl);
opacity: 3%;
width: 40%;
}
.feed-header {
align-items:center;
display:flex;
margin-bottom:var(--m);
align-items: center;
margin-bottom: var(--font-size-base);
}
.feed-header .feed-actions {
margin-left:auto;
text-transform:capitalize;
margin-left: auto;
text-transform: capitalize;
}
.feed-header>h1,.feed-header>h2,.feed-header>h3,.feed-header>h4,.feed-header>h5,.feed-header>h6 {
margin-bottom:unset;
.feed-header > h1,
.feed-header > h2,
.feed-header > h3,
.feed-header > h4,
.feed-header > h5,
.feed-header > h6 {
margin-bottom: unset;
}
.h-entry {
background-color:var(--background-card);
border-radius:var(--s);
display:flex;
flex-wrap:wrap;
background-color: var(--background-card);
border-radius: var(--font-size-sm);
flex-wrap: wrap;
}
.h-entry .embed[class*="p-"] {
padding:unset;
padding: unset;
}
.h-entry a:focus {
text-decoration:underline;
text-decoration: underline;
}
.h-entry figure,.note-attachments-unit figure {
background:var(--gradient);
border-radius:var(--s);
margin:unset;
padding:var(--s);
.h-entry figure,
.note-attachments-unit figure {
background: var(--gradient);
border-radius: var(--font-size-sm);
margin: unset;
padding: var(--font-size-sm);
}
.h-entry img,.note-attachments-unit figure img {
background:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
.h-entry img,
.note-attachments-unit figure img {
background: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
}
.h-entry-language {
background:var(--gradient-backwards);
border-radius:0 0 var(--s) 0;
color:var(--foreground);
float:right;
padding:6px 12px;
position:relative;
background: var(--gradient-backwards);
border-radius: 0 0 var(--font-size-sm) 0;
color: var(--foreground);
float: right;
padding: 6px 12px;
position: relative;
}
.icon-eye-closed,
.icon-eye-opened {
background-color: var(--foreground);
height: 1em;
width: 1em;
}
.h-entry:not(:first-child) {
margin-top:var(--s);
margin-top: var(--font-size-sm);
}
.h-entry:not(embed) {
border:1px solid var(--border);
border: 1px solid var(--border);
}
.h-entry[id^="note-anchor-"]:target {
border:2px solid var(--accent)!important;
border: 2px solid var(--accent) !important;
}
.hr-replies-end:last-of-type,.note-text-details[open] .note-text-details-summary small {
display:none;
.hr-replies-end:last-of-type,
.note-text-details[open] .note-text-details-summary small {
display: none;
}
.icon-eye-closed {
-moz-mask-image:url(icons/eye-closed.svg);
-o-mask-image:url(icons/eye-closed.svg);
-webkit-mask-image:url(icons/eye-closed.svg);
background-color:var(--foreground);
display:inline-flex;
height:1em;
mask-image:url(icons/eye-closed.svg);
width:1em;
-moz-mask-image: url(icons/eye-closed.svg);
-o-mask-image: url(icons/eye-closed.svg);
-webkit-mask-image: url(icons/eye-closed.svg);
display: inline-flex;
mask-image: url(icons/eye-closed.svg);
}
.icon-eye-opened {
-moz-mask-image:url(icons/eye-opened.svg);
-o-mask-image:url(icons/eye-opened.svg);
-webkit-mask-image:url(icons/eye-opened.svg);
background-color:var(--foreground);
display:inline-flex;
height:1em;
mask-image:url(icons/eye-opened.svg);
width:1em;
-moz-mask-image: url(icons/eye-opened.svg);
-o-mask-image: url(icons/eye-opened.svg);
-webkit-mask-image: url(icons/eye-opened.svg);
display: inline-flex;
mask-image: url(icons/eye-opened.svg);
}
.note-actions {
align-items:center;
display:flex;
flex:1;
flex-direction:initial;
justify-content:flex-end;
align-items: center;
display: flex;
flex: 1;
flex-direction: initial;
justify-content: flex-end;
}
.note-actions-extra-details hr {
margin:unset;
margin: unset;
}
.note-actions-extra-details ul {
display:flex;
flex-direction:column;
display: flex;
flex-direction: column;
}
.note-actions-extra-details[open]>summary+*>a {
font-size:.937rem;
line-height:2;
.note-actions-extra-details[open] > summary + * > a {
font-size: 0.937rem;
line-height: 2;
}
.note-actions>li {
display:inline-block;
margin-left:8px;
.note-actions * {
display: flex;
margin-left: 8px;
}
.note-attachments {
display:flex;
flex-wrap:wrap;
display: flex;
flex-wrap: wrap;
}
.note-attachments-unit {
border-radius:var(--s);
display:flex;
height:min-content;
max-width:max-content;
padding:4px;
border-radius: var(--font-size-sm);
display: flex;
height: min-content;
max-width: max-content;
padding: 4px;
}
.note-attachments-unit:not(:only-child) {
margin-right:var(--s);
margin-right: var(--font-size-sm);
}
.note-attachments-unit>figure figcaption {
display:flex;
word-break:break-all;
.note-attachments-unit > figure figcaption {
display: flex;
word-break: break-all;
}
.note-attachments-unit>figure img {
.note-attachments-unit > figure img {
height: auto;
}
.note-author-uri,.note-conversation-info,.note-text-details .note-text-details-summary small {
font-style:italic;
.note-author-uri,
.note-conversation-info,
.note-text-details .note-text-details-summary small {
font-style: italic;
}
.note-complementary {
background:var(--gradient-backwards);
border-radius:var(--s) 0 var(--s) var(--s);
display:flex;
flex-wrap:wrap;
font-size:.937rem;
padding:4px 8px;
width:100%;
background: var(--gradient-backwards);
border-radius: var(--font-size-sm) 0 var(--font-size-sm) var(--font-size-sm);
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-sm);
padding: 8px 12px;
width: 100%;
}
.note-complementary-info span {
display:block;
line-height:1.3;
display: block;
line-height: 1.3;
}
.note-content {
border-radius:0 0 var(--s) var(--s);
display:block;
flex:1;
border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
display: block;
flex: 1;
}
.note-info {
align-items:center;
display:flex;
overflow:auto;
text-overflow:ellipsis;
touch-action:manipulation;
white-space:nowrap;
align-items: center;
display: flex;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-info .note-conversation-info,.note-info .note-author-uri {
margin-left:4px;
.note-info .note-author-uri,
.note-info .note-conversation-info {
margin-left: 4px;
}
.note-info small,.note-actions-extra-details summary,.note-replies-start {
opacity:.5;
.note-actions-extra-details summary,
.note-info small,
.note-replies-start {
opacity: 0.5;
}
.note-info,embed header {
border-bottom:unset;
border-radius:0 var(--s) 0 0;
display:flex;
line-height:initial;
.note-info,
embed header {
border-bottom: unset;
border-radius: 0 var(--font-size-sm) 0 0;
display: flex;
line-height: initial;
}
.note-replies .note-replies {
margin-left:1em;
margin-left: 1em;
}
.note-replies-indicator {
float:left;
margin-right:8px;
opacity:.66;
float: left;
margin-right: 8px;
opacity: 0.66;
}
.note-replies-indicator::before {
content:'\201C';
font-size:1.5em;
opacity:.66;
content: "\201C";
font-size: 1.5em;
opacity: 0.66;
}
.note-replies-parent {
font-size:.937rem;
opacity:.66;
font-size: 0.937rem;
opacity: 0.66;
}
.note-sidebar {
display:flex;
flex-direction:column;
padding:var(--s) 4px 4px var(--s);
}
.note-text {
word-break:break-all;
display: flex;
flex-direction: column;
padding: var(--font-size-sm) 4px 4px var(--font-size-sm);
}
.note-text a {
text-decoration:underline!important;
text-decoration: underline !important;
}
.note-text-details-summary:after {
content:"\2193";
content: "\2193";
}
.note-text-details[open] summary:after {
content:"\2191";
float:right;
content: "\2191";
float: right;
}
.note-wrapper {
flex:1;
height:inherit;
padding:4px;
flex: 1;
height: inherit;
padding: 4px;
}
.posting-extra [id|="note-compact"] {
border:unset;
border-bottom:1px solid var(--border);
border: unset;
border-bottom: 1px solid var(--border);
}
.repeat-button-container {
-moz-mask-image:url(icons/repeat.svg);
-o-mask-image:url(icons/repeat.svg);
-webkit-mask-image:url(icons/repeat.svg);
mask-image:url(icons/repeat.svg);
-moz-mask-image: url(icons/repeat.svg);
-o-mask-image: url(icons/repeat.svg);
-webkit-mask-image: url(icons/repeat.svg);
mask-image: url(icons/repeat.svg);
}
.reply-button-container {
-moz-mask-image:url(icons/reply.svg);
-o-mask-image:url(icons/reply.svg);
-webkit-mask-image:url(icons/reply.svg);
mask-image:url(icons/reply.svg);
-moz-mask-image: url(icons/reply.svg);
-o-mask-image: url(icons/reply.svg);
-webkit-mask-image: url(icons/reply.svg);
mask-image: url(icons/reply.svg);
}
[id|="note-compact"] {
display:block;
max-height:16vh;
overflow:auto;
touch-action:manipulation;
width:100%;
word-break:break-all;
display: block;
max-height: 16vh;
width: 100%;
}
[id|="note-compact"] .note-sidebar {
all:unset;
display:inline-flex;
margin-right:4px;
all: unset;
display: inline-flex;
margin-right: 4px;
}
[id|="note-compact"] .note-sidebar img,.note-sidebar img {
background:unset!important;
.note-sidebar img,
[id|="note-compact"] .note-sidebar img {
background: unset !important;
}
[id|="note-compact"] .note-wrapper {
padding:var(--s);
padding: var(--font-size-sm);
}
[id|="note-compact"] hr {
margin-bottom:4px;
margin-top:4px;
margin-bottom: 4px;
margin-top: 4px;
}
@media only screen and (max-width:1280px) {
@media only screen and (max-width: 1280px) {
.note-replies .note-replies {
margin-left:.33em;
margin-left: 0.33em;
}
.note-replies-indicator::before {
content:'\201C';
font-size:1em;
opacity:.66;
content: "\201C";
font-size: 1em;
opacity: 0.66;
}
}
}

@ -1,166 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
* {
box-sizing:border-box!important;
max-width:100%;
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body,html {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
background-attachment:fixed;
background-color:var(--background-hard);
font-family:"var(--unit) 'Open Sans'",sans-serif;
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
body,input,select,textarea {
color:var(--foreground);
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
:link,:visited {
color:currentColor;
text-decoration:none;
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
all:unset;
background-color:var(--border)!important;
display:block;
height:1px;
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
menu,ul {
list-style:none;
margin:unset;
padding:unset;
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
blockquote,body,fieldset,form,html,input,pre,textarea {
border:0;
margin:0;
padding:0;
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
fieldset {
all:unset;
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
:link img,:visited img,a img {
border:0;
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
address {
font-style:normal;
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
:focus {
outline:0;
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
::-moz-focus-inner {
border:0;
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
details summary {
cursor:pointer!important;
sub {
bottom: -0.25em;
}
details summary>* {
margin:unset;
padding:unset;
sup {
top: -0.5em;
}
details>summary {
list-style:none;
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
details>summary::-webkit-details-marker {
display:none;
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
[hidden] {
display:none;
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
html {
font-size:100%;
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
body {
font-family:'Open Sans',sans-serif;
font-weight:400;
line-height:1.75;
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
p {
margin-bottom:var(--s);
margin-top:0;
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
h1,h2,h3,h4,h5 {
font-family:'Poppins',sans-serif;
line-height:1.3;
margin:var(--m) 0 var(--s);
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legend:first-child {
margin-top:initial;
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
.doc-navigation,h1 {
font-size:1.383em;
font-weight:700;
margin-top:0;
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out