mirror of
https://github.com/msfjarvis/msfjarvis.dev.git
synced 2024-06-03 04:18:56 +05:30
51fa4ecebb
Prettier has been added as a dev dependency along with a few other tools that run prettier on staged files before committing them. This prevents any file from being committed that hasn't gone through the project's formatting. Check the prettier.config.js file for details on how we format files.
152 lines
2.2 KiB
SCSS
152 lines
2.2 KiB
SCSS
@import "vars";
|
|
|
|
$baseFontSize: 16;
|
|
$fontSizeMobile: 14;
|
|
$baseLineHeight: 1.5;
|
|
$scale: 1.414;
|
|
$leading: $baseLineHeight * 1rem;
|
|
|
|
html {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 95%;
|
|
|
|
@media screen and (min-width: $medium) {
|
|
font-size: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: $large) {
|
|
font-size: 115%;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: $leading;
|
|
margin-bottom: 0;
|
|
line-height: $leading;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5 * $scale * 1rem;
|
|
line-height: 1.5 * $leading;
|
|
margin-top: 1.5 * $leading;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $scale * 1rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: ($scale / 1.2) * 1rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: ($scale / 1.44) * 1rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: ($scale / 1.728) * 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-top: $leading;
|
|
margin-bottom: 0;
|
|
line-height: $leading;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: $leading;
|
|
margin-top: $leading;
|
|
margin-bottom: $leading;
|
|
|
|
li {
|
|
line-height: $leading;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
&::before {
|
|
position: absolute;
|
|
content: "\201C";
|
|
|
|
font-size: 6em;
|
|
font-family: "Roboto", serif;
|
|
margin-top: 0.1em;
|
|
margin-left: -0.2em;
|
|
|
|
z-index: -1;
|
|
color: darken($white, 7%);
|
|
}
|
|
|
|
margin-top: $leading;
|
|
margin-bottom: $leading;
|
|
line-height: $leading;
|
|
color: $black;
|
|
|
|
cite {
|
|
&::before {
|
|
content: "— ";
|
|
}
|
|
|
|
font-style: italic;
|
|
font-size: 0.95em;
|
|
color: $darkGrey;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
line-height: 1.45;
|
|
margin-top: $leading;
|
|
padding: 16px;
|
|
word-wrap: normal;
|
|
overflow: auto;
|
|
background-color: #f6f8fa;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
code {
|
|
font-size: 85%;
|
|
font-family: "SFMono-Regular", Consolas, Menlo, monospace;
|
|
padding: 0.2em 0.4em;
|
|
margin: 0;
|
|
background-color: rgba(27, 31, 35, 0.05);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre > code {
|
|
word-break: normal;
|
|
white-space: pre;
|
|
}
|
|
|
|
pre code {
|
|
display: inline;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
line-height: inherit;
|
|
word-wrap: normal;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.lead {
|
|
font-size: $scale * 1rem;
|
|
}
|
|
|
|
abbr[title] {
|
|
text-decoration: underline double;
|
|
}
|