kaholaz/hello-friend-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve tables and blockquotes

Browse source
This commit is contained in:
Djordje Atlialp 2021-01-10 22:57:19 +01:00
parent 833de605e3
commit f43bf66f28
3 changed files with 39 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/scss/_main.scss
View file

@ -57,6 +57,7 @@ h1 {
h2 {
font-size: 1.625rem;
margin-top: 2.5em;
}
h3 {
@ -171,6 +172,14 @@ figure {
}
}
em, i, strong {
color: black;
.dark-theme & {
color: white;
}
}
code {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-display: auto;
@ -212,7 +221,7 @@ pre {
}
blockquote {
border-left: 2px solid;
border-left: 3px solid #3eb0ef;
margin: 40px;
padding: 10px 20px;

44
assets/scss/_tables.scss
View file

@ -1,33 +1,41 @@
.post-content {
table {
display: inline-block;
border-collapse: collapse;
margin: 25px auto;
font-size: 0.9em;
min-width: 400px;
max-width: 100%;
overflow-x: auto;
table {
border-collapse: collapse;
margin: 25px auto;
font-size: 0.9em;
min-width: 400px;
max-width: 100%;
th,
td {
padding: 12px 15px;
border: 1px solid $light-table-color;
.dark-theme & {
border: 1px solid $dark-table-color;
}
}
table thead tr {
thead {
tr {
background-color: $light-table-color;
color: $light-color;
text-align: left;
.dark-theme & {
background-color: $dark-table-color;
color: $dark-color
background-color: $dark-table-color;
color: $dark-color;
}
}
}
th, td {
padding: 12px 15px;
}
tbody tr {
tbody {
tr {
border: 1px solid $light-table-color;
.dark-theme & {
border: 1px solid $dark-table-color;
border: 1px solid $dark-table-color;
}
}
}
}
}

6
assets/scss/_variables.scss
View file

@ -11,10 +11,10 @@ $light-table-color: #dcdcdc;
/* Dark theme colors */
$dark-background: #232425;
$dark-background-secondary: #3b3d42;
$dark-color: #e2e2e2;
$dark-color: #dfdfdf;
$dark-color-secondary: #b3b3bd;
$dark-border-color: #73747b;
$dark-table-color: #73747b;
$dark-border-color: #4e4e57;
$dark-table-color: #4e4e57;
$media-size-phone: "(max-width: 684px)";
$media-size-tablet: "(max-width: 900px)";