fix: simplification stylesheet
This commit is contained in:
parent
3d009750d0
commit
fe54b8668e
1 changed files with 69 additions and 95 deletions
|
@ -4,9 +4,15 @@
|
|||
--text-color: #212529;
|
||||
--border-color: rgba(0,0,0,0.1);
|
||||
--hover-color: rgba(0,0,0,0.05);
|
||||
|
||||
--accent-color-dark: #1971c2;
|
||||
--accent-color-light: #d0ebff;
|
||||
|
||||
--background-color: #f8f9fa;
|
||||
--well-color: #e9ecef;
|
||||
--accent-color: #1971c2;
|
||||
|
||||
--accent-color: var(--accent-color-dark);
|
||||
--accent-color-back: var(--accent-color-light);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
@ -14,7 +20,8 @@
|
|||
--text-color: #f1f3f5;
|
||||
--background-color: #212529;
|
||||
--well-color: #343a40;
|
||||
--accent-color: #d0ebff;
|
||||
--accent-color: var(--accent-color-light);
|
||||
--accent-color-back: var(--accent-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -22,12 +29,6 @@
|
|||
// make code more readable
|
||||
$lineheight: 1rem;
|
||||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
text-align: left;
|
||||
|
@ -59,12 +60,32 @@ nav ul {
|
|||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
// Typography
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ul,
|
||||
ol,
|
||||
hr,
|
||||
table,
|
||||
.tabs,
|
||||
details
|
||||
main,
|
||||
article {
|
||||
padding: 0;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -77,44 +98,24 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
p, time {
|
||||
@include paragraph();
|
||||
&:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
@include paragraph();
|
||||
ul {
|
||||
margin-bottom:0;
|
||||
}
|
||||
li {
|
||||
margin-left: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
/* sup, sub */
|
||||
|
||||
sup, sub {
|
||||
margin:0;
|
||||
padding:0;
|
||||
line-height:$lineheight;
|
||||
font-size: 0.8rem;
|
||||
vertical-align:baseline;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -$lineheight/4;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: $lineheight/4;
|
||||
:is(ul, ol) > :is(ul, ol) {
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
::selection, ::-moz-selection { background: var(--accent-color); color: var(--background-color); }
|
||||
li {
|
||||
margin-left: $lineheight;
|
||||
}
|
||||
|
||||
::selection, ::-moz-selection {
|
||||
background: var(--accent-color-back);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
border:0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* ------------------ TITLES ------------------- */
|
||||
|
||||
|
@ -126,10 +127,7 @@ sub {
|
|||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: left;
|
||||
line-height: 1;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight:400;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
@ -158,43 +156,29 @@ h6 {
|
|||
|
||||
/* ------------------ HR ------------------- */
|
||||
|
||||
hr {
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-bottom: 1px;
|
||||
border-color: var(--border-color);
|
||||
border-style: solid;
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
/* ------------------ QUOTE ------------------- */
|
||||
|
||||
@mixin well() {
|
||||
border-width: 0 0 0 $lineheight/4;
|
||||
border-style: solid;
|
||||
border-radius: $lineheight/8;
|
||||
margin:0;
|
||||
margin-bottom: $lineheight;
|
||||
padding: $lineheight;
|
||||
font-size:1.1rem;
|
||||
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
.well,
|
||||
blockquote,
|
||||
pre,
|
||||
.alert,
|
||||
.code,
|
||||
.menu,
|
||||
.breadcrumb,
|
||||
.toolbar,
|
||||
details {
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
margin: 0 0 1rem 0;
|
||||
padding: .75rem;
|
||||
max-width: 100%;
|
||||
background-color: var(--well-color);
|
||||
border: 0;
|
||||
border-left: 6px solid var(--accent-color);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@include well();
|
||||
border-color: var(--accent-color);
|
||||
background-color:var(--well-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
@include well();
|
||||
border-color: var(--accent-color);
|
||||
background-color:var(--well-color);
|
||||
pre, code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
code {
|
||||
|
@ -210,16 +194,6 @@ mark {
|
|||
border-radius: 0.2em;
|
||||
padding:0 $lineheight/4 0 $lineheight/4;
|
||||
|
||||
background-color:rgba(255,255,0,0.33);
|
||||
background-color: var(--accent-color-back);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ------------------ SPECIAL STYLING ------------------- */
|
||||
|
||||
.time {
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue