diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss new file mode 100644 index 0000000..e07f084 --- /dev/null +++ b/_sass/minima/_base.scss @@ -0,0 +1,281 @@ +html { + font-size: $base-font-size; + } + + /** + * Reset some basic elements + */ + body, h1, h2, h3, h4, h5, h6, + p, blockquote, pre, hr, + dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + + } + + + + /** + * Basic styling + */ + body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; + overflow-wrap: break-word; + } + + + + /** + * Set `margin-bottom` to maintain vertical rhythm + */ + h1, h2, h3, h4, h5, h6, + p, blockquote, pre, + ul, ol, dl, figure, + %vertical-rhythm { + margin-bottom: calc($spacing-unit / 2); + } + + hr { + margin-top: $spacing-unit; + margin-bottom: $spacing-unit; + } + + /** + * `main` element + */ + main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ + } + + + + /** + * Images + */ + img { + max-width: 100%; + vertical-align: middle; + } + + + + /** + * Figures + */ + figure > img { + display: block; + } + + figcaption { + font-size: $small-font-size; + } + + + + /** + * Lists + */ + ul, ol { + margin-left: $spacing-unit; + } + + li { + > ul, + > ol { + margin-bottom: 0; + } + } + + + + /** + * Headings + */ + h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; + } + + + + /** + * Links + */ + a { + color: $link-base-color; + text-decoration: none; + + &:visited { + color: $link-visited-color; + } + + &:hover { + color: $link-hover-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } + } + + + /** + * Blockquotes + */ + blockquote { + color: $brand-color; + border-left: 4px solid $border-color-01; + padding-left: calc($spacing-unit / 2); + @include relative-font-size(1.125); + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + + i, em { + font-style: normal; + } + } + + + + /** + * Code formatting + */ + pre, + code { + font-family: $code-font-family; + font-size: 0.9375em; + border: 1px solid $border-color-01; + border-radius: 3px; + background-color: $code-background-color; + } + + code { + padding: 1px 5px; + } + + pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } + } + + .highlight { + border-radius: 3px; + background: $code-background-color; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: $code-background-color; + } + } + + + + /** + * Wrapper + */ + .wrapper { + max-width: calc(#{$content-width} - (#{$spacing-unit})); + margin-right: auto; + margin-left: auto; + padding-right: calc($spacing-unit / 2); + padding-left: calc($spacing-unit / 2); + @extend %clearfix; + + @media screen and (min-width: $on-large) { + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + padding-right: $spacing-unit; + padding-left: $spacing-unit; + } + } + + + + /** + * Clearfix + */ + %clearfix:after { + content: ""; + display: table; + clear: both; + } + + + + /** + * Icons + */ + + .orange { + color: #f66a0a; + } + + .grey { + color: #828282; + } + + .svg-icon { + width: 1.25em; + height: 1.25em; + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; + } + + + /** + * Tables + */ + table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: $table-text-color; + border-collapse: collapse; + border: 1px solid $table-border-color; + tr { + &:nth-child(even) { + background-color: $table-zebra-color; + } + } + th, td { + padding: calc($spacing-unit / 3) ($spacing-unit / 2); + } + th { + background-color: $table-header-bg-color; + border: 1px solid $table-header-border; + } + td { + border: 1px solid $table-border-color; + } + + @include media-query($on-laptop) { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 329c76a..0cd377f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "cssnano": "^7.0.1", "postcss": "^8.4.38", "postcss-cli": "^11.0.0", + "sass": "^1.77.2", "tailwindcss": "^3.4.3" } }, @@ -1011,6 +1012,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==", + "dev": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2084,6 +2091,23 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.77.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz", + "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index b64386d..4d43623 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "cssnano": "^7.0.1", "postcss": "^8.4.38", "postcss-cli": "^11.0.0", + "sass": "^1.77.2", "tailwindcss": "^3.4.3" } }