hugo-coder-fork/assets/scss/_base.scss

226 lines
3.3 KiB
SCSS
Raw Normal View History

*,
*:after,
*:before {
2020-02-02 17:13:35 +00:00
box-sizing: inherit;
}
html {
2020-02-02 17:13:35 +00:00
box-sizing: border-box;
2020-02-09 19:48:18 +00:00
@media only screen and (max-width: 768px) {
font-size: 61.5%;
}
font-size: 72%;
}
body {
color: $fg-color;
background-color: $bg-color;
2020-02-02 17:13:35 +00:00
font-family: $text-font-family;
font-size: 1.6em;
font-weight: $text-font-weight;
line-height: 1.8em;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 1.6em;
line-height: 1.6em;
}
}
a {
2020-02-02 17:13:35 +00:00
font-family: $text-font-family;
font-weight: $text-font-weight;
color: $link-color;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
2020-02-09 17:58:47 +00:00
.content a {
opacity: 1;
text-decoration: underline;
&:hover {
opacity: 0.6;
}
}
p {
2020-02-02 17:13:35 +00:00
margin: 2rem 0 2rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $heading-font-family;
2020-02-02 17:13:35 +00:00
font-weight: $heading-font-weight;
color: $alt-fg-color;
margin: 6.4rem 0 3.2rem 0;
}
h1 {
font-size: 3.2rem;
line-height: 3.6rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 3rem;
line-height: 3.4rem;
}
}
h2 {
font-size: 2.8rem;
line-height: 3.2rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 2.6rem;
2020-02-02 17:13:35 +00:00
line-height: 3rem;
}
}
h3 {
font-size: 2.4rem;
line-height: 2.8rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 2.2rem;
line-height: 2.6rem;
}
}
h4 {
font-size: 2.2rem;
line-height: 2.6rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 2rem;
line-height: 2.4rem;
}
}
h5 {
2020-02-02 17:13:35 +00:00
font-size: 2rem;
line-height: 2.4rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 1.8rem;
line-height: 2.2rem;
}
}
h6 {
font-size: 1.8rem;
line-height: 2.2rem;
2020-02-02 17:13:35 +00:00
@media only screen and (max-width: 768px) {
font-size: 1.6rem;
2020-02-02 17:13:35 +00:00
line-height: 2rem;
}
}
2020-02-02 17:13:35 +00:00
b,
strong {
font-family: $text-font-family;
font-weight: $text-font-weight--bold;
}
.highlight > div,
.highlight > pre {
margin: 0 0 2rem;
padding: 1rem;
border-radius: 1rem;
}
pre {
display: block;
font-family: $code-font-family;
font-size: 1.6rem;
2020-02-02 17:13:35 +00:00
font-weight: $code-font-weight;
line-height: 2.6rem;
overflow-x: auto;
margin: 0;
code {
display: inline-block;
background-color: inherit;
color: inherit;
}
}
code {
font-family: $code-font-family;
font-size: 1.6rem;
2020-02-02 17:13:35 +00:00
font-weight: $code-font-weight;
background-color: $alt-bg-color;
color: $fg-color;
}
blockquote {
border-left: 2px solid $alt-bg-color;
2020-02-02 17:13:35 +00:00
padding-left: 2rem;
line-height: 2.2rem;
2020-02-02 17:13:35 +00:00
font-weight: $text-font-weight;
font-style: italic;
}
2020-02-02 17:13:35 +00:00
th,
td {
padding: 1.6rem;
}
table {
border-collapse: collapse;
}
2020-02-02 17:13:35 +00:00
table td,
table th {
border: 2px solid $alt-fg-color;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
img {
max-width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.container {
margin: 0 auto;
2020-02-02 17:13:35 +00:00
max-width: 90rem;
width: 100%;
2020-02-02 17:13:35 +00:00
padding-left: 2rem;
padding-right: 2rem;
}
.fab {
font-weight: 400;
}
.fas {
font-weight: 700;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
2018-09-17 14:48:27 +00:00
.fab {
font-weight: 400;
}
.fas {
font-weight: 900;
}