Welcome to the official Astro blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to diff --git a/src/styles/base/index.css b/src/styles/base/index.css new file mode 100644 index 00000000..59a61b8a --- /dev/null +++ b/src/styles/base/index.css @@ -0,0 +1,38 @@ + +*::selection { + background-color: var(--primary-main); + color: var(--white); +} + +html, +body { + overflow: hidden auto; + scroll-behavior: smooth; + scrollbar-gutter: stable; + + @media (prefers-reduced-motion: reduce) { + scroll-behavior: auto; + } +} + +body { + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: var(--base-font-size); + -webkit-touch-callout: none; + text-rendering: optimizeLegibility; +} + + +a { + -webkit-tap-highlight-color: transparent; + color: inherit; + cursor: pointer; +} + +summary { + -webkit-tap-highlight-color: transparent; +} + +svg { + -webkit-tap-highlight-color: transparent; +} diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index fe9ecf0b..00000000 --- a/src/styles/global.css +++ /dev/null @@ -1,154 +0,0 @@ -/* - The CSS in this style tag is based off of Bear Blog's default CSS. - https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css - License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md - */ - -:root { - --accent: #2337ff; - --accent-dark: #000d8a; - --black: 15, 18, 25; - --gray: 96, 115, 159; - --gray-light: 229, 233, 240; - --gray-dark: 34, 41, 57; - --gray-gradient: rgba(var(--gray-light), 50%), #fff; - --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), - 0 16px 32px rgba(var(--gray), 33%); -} -@font-face { - font-family: 'Atkinson'; - src: url('/fonts/atkinson-regular.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Atkinson'; - src: url('/fonts/atkinson-bold.woff') format('woff'); - font-weight: 700; - font-style: normal; - font-display: swap; -} -body { - font-family: 'Atkinson', sans-serif; - margin: 0; - padding: 0; - text-align: left; - background: linear-gradient(var(--gray-gradient)) no-repeat; - background-size: 100% 600px; - word-wrap: break-word; - overflow-wrap: break-word; - color: rgb(var(--gray-dark)); - font-size: 20px; - line-height: 1.7; -} -main { - width: 720px; - max-width: calc(100% - 2em); - margin: auto; - padding: 3em 1em; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0 0 0.5rem 0; - color: rgb(var(--black)); - line-height: 1.2; -} -h1 { - font-size: 3.052em; -} -h2 { - font-size: 2.441em; -} -h3 { - font-size: 1.953em; -} -h4 { - font-size: 1.563em; -} -h5 { - font-size: 1.25em; -} -strong, -b { - font-weight: 700; -} -a { - color: var(--accent); -} -a:hover { - color: var(--accent); -} -p { - margin-bottom: 1em; -} -.prose p { - margin-bottom: 2em; -} -textarea { - width: 100%; - font-size: 16px; -} -input { - font-size: 16px; -} -table { - width: 100%; -} -img { - max-width: 100%; - height: auto; - border-radius: 8px; -} -code { - padding: 2px 5px; - background-color: rgb(var(--gray-light)); - border-radius: 2px; -} -pre { - padding: 1.5em; - border-radius: 8px; -} -pre > code { - all: unset; -} -blockquote { - border-left: 4px solid var(--accent); - padding: 0 0 0 20px; - margin: 0px; - font-size: 1.333em; -} -hr { - border: none; - border-top: 1px solid rgb(var(--gray-light)); -} -@media (max-width: 720px) { - body { - font-size: 18px; - } - main { - padding: 1em; - } -} - -.sr-only { - border: 0; - padding: 0; - margin: 0; - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ - clip: rect(1px 1px 1px 1px); - /* maybe deprecated but we need to support legacy browsers */ - clip: rect(1px, 1px, 1px, 1px); - /* modern browsers, clip-path works inwards from each corner */ - clip-path: inset(50%); - /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ - white-space: nowrap; -} diff --git a/src/styles/global/index.css b/src/styles/global/index.css new file mode 100644 index 00000000..c219577a --- /dev/null +++ b/src/styles/global/index.css @@ -0,0 +1,29 @@ +@import url('variables.css'); + +body, html, p, article { + color: var(--neutral-main); + font-size: var(--base-font-size); +} + +body, html { + font-family: 'Literata Variable', serif; +} + +p, article { + font-family: 'Zilla Slab', sans-serif; +} + +img { + height: 100%; + max-width: 100%; + width: 100%; +} + +svg { + fill: var(--base-font-size); + width: 1rem; +} + +mark { + background-color: var(--primary-main); +} diff --git a/src/styles/global/variables.css b/src/styles/global/variables.css new file mode 100644 index 00000000..82a1de1f --- /dev/null +++ b/src/styles/global/variables.css @@ -0,0 +1,39 @@ +:root { + --primary-light-4: #fff9f1; + --primary-light-3: #fff0da; + --primary-light-2: #ffe3bb; + --primary-light-1: #fbcf90; + --primary-main: #d4a259; + --primary-dark-1: #b37e33; + --primary-dark-2: #8b5a14; + --primary-dark-3: #633a00; + --neutral-main: #1e2021; + --neutral-1: #3d4042; + --neutral-2: #6d7275; + --neutral-3: #b5babd; + --neutral-4: #ddd; + --neutral-5: #f3f7fa; + --error-light-2: #ffecef; + --error-light-1: #d09d9e; + --error-main: #d63737; + --success-light-2: #2cb235; + --success-light-1: #0e9b17; + --success-main: #008108; + --x: #1da1f2; + --facebook: #3b5998; + --linkedin: #0077b5; + --whatsapp: #24d367; + --email: #7d7d7d; + --white: #fff; + --black: #000; + --global-max-width: 1440px; + --base-font-size: 1rem; + --base-line-height: calc(var(--base-font-size) * 1.25); + --global-border-radius: 0.25rem; + --grid-extra-small: 575px; + --grid-small: 720px; + --grid-medium: 960px; + --grid-article: 75ch; + --grid-large: 1024px; + --grid-extra-large: 1440px; +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 00000000..c4617a4a --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,3 @@ +@import url('reset/index.css'); +@import url('base/index.css'); +@import url('global/index.css'); diff --git a/src/styles/reset/index.css b/src/styles/reset/index.css new file mode 100644 index 00000000..be48436d --- /dev/null +++ b/src/styles/reset/index.css @@ -0,0 +1,27 @@ +*:where(:not(iframe, canvas, img, svg, video):not(svg *)) { + all: unset; + display: revert; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +ol, ul { + list-style: none; +} + +table { + border-collapse: collapse; +} + +input[type="search"] { + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + display: none; + } +} diff --git a/yarn.lock b/yarn.lock index 131b005e..4a84868e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -619,6 +619,20 @@ __metadata: languageName: node linkType: hard +"@fontsource-variable/literata@npm:^5.0.19": + version: 5.0.19 + resolution: "@fontsource-variable/literata@npm:5.0.19" + checksum: 7f55b78d3c573534da79465f0f98f07bcb29c2c83c4a84929b0e95b439a62d6dd69af287cae3292e5c418e397913af7d2a76ffcec3ea4b425d4d5cc517a50c4f + languageName: node + linkType: hard + +"@fontsource/zilla-slab@npm:^5.0.8": + version: 5.0.8 + resolution: "@fontsource/zilla-slab@npm:5.0.8" + checksum: 6cebfc603cd5189501f071d14140338a295de066ec3a421e3e92b90f53c38ff0d249fdf07f35c455ded1841e2eacce17b635ee55776a4cae660c9f992f77e776 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -1352,6 +1366,8 @@ __metadata: "@astrojs/react": "npm:^3.0.7" "@astrojs/rss": "npm:^4.0.1" "@astrojs/sitemap": "npm:^3.0.3" + "@fontsource-variable/literata": "npm:^5.0.19" + "@fontsource/zilla-slab": "npm:^5.0.8" "@types/react": "npm:^18.0.21" "@types/react-dom": "npm:^18.0.6" astro: "npm:^4.0.3"