kazhnuz/moineau
1
0
Fork 0
Code Issues 7 Pull requests Releases 2 Wiki Activity

fix: simplification stylesheet

Browse source
This commit is contained in:
Kazhnuz 2024-09-22 22:37:52 +02:00
parent 3d009750d0
commit fe54b8668e
1 changed files with 69 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
scss/clear-typography.scss
View file

@ -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,45 +98,25 @@ a {
}
}
p, time {
@include paragraph();
&:last-child {
:is(ul, ol) > :is(ul, ol) {
margin-bottom:0;
}
}
ul, ol {
@include paragraph();
ul {
margin-bottom:0;
}
li {
margin-left: $lineheight;
}
::selection, ::-moz-selection {
background: var(--accent-color-back);
color: var(--text-color);
}
/* sup, sub */
sup, sub {
margin:0;
padding:0;
line-height:$lineheight;
font-size: 0.8rem;
vertical-align:baseline;
position:relative;
hr {
border:0;
border-bottom: 1px solid var(--border-color);
}
sup {
top: -$lineheight/4;
}
sub {
top: $lineheight/4;
}
::selection, ::-moz-selection { background: var(--accent-color); color: var(--background-color); }
/* ------------------ TITLES ------------------- */
@mixin title($size, $weight) {
@ -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;
.well,
blockquote,
pre,
.alert,
.code,
.menu,
.breadcrumb,
.toolbar,
details {
border: 0;
border-radius: 6px;
margin: 0 0 1rem 0;
padding: .75rem;
max-width: 100%;
overflow: auto;
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;
}