├── .gitattributes ├── .gitignore ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public ├── assets │ ├── blog │ │ ├── new-demo2-added │ │ │ └── demo2-mockup.png │ │ ├── new-demo3-added │ │ │ └── demo3-mockup.png │ │ ├── new-demo4-added │ │ │ └── demo4-mockup.png │ │ ├── say-hello-to-kaamos │ │ │ └── kaamos-hero-image.jpg │ │ └── typography │ │ │ └── typography-calligraphy-work.jpg │ └── kaamos-logo.png ├── robots.txt ├── script │ ├── demo1.js │ ├── demo2.js │ ├── demo3.js │ └── demo4.js └── style │ ├── demo1.css │ ├── demo2.css │ ├── demo3.css │ ├── demo4.css │ ├── global.css │ └── normalize.css ├── sandbox.config.json └── src ├── components ├── BaseHead.astro ├── BlogPost.astro ├── BlogPostPreview.astro ├── Footer.astro ├── Header.astro ├── Navigation.astro ├── Paginator.astro └── Sidebar.astro ├── data └── site.js ├── layouts ├── BaseLayout.astro ├── BlogPostLayout.astro └── PageLayout.astro ├── pages ├── 404.astro ├── [...page].astro ├── about-themes.astro ├── blog │ ├── [...page].astro │ ├── categories │ │ ├── [slug].astro │ │ └── index.astro │ ├── new-demo2-added.md │ ├── new-demo3-added.md │ ├── new-demo4-added.md │ ├── say-hello-to-kaamos.md │ ├── typography.md │ └── youtube-embeds.md ├── license.astro └── typography.astro └── utils ├── helpers.js └── posts.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist 3 | 4 | # dependencies 5 | node_modules/ 6 | 7 | # logs 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # environment variables 13 | .env 14 | .env.production 15 | 16 | # macOS-specific files 17 | .DS_Store 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kaamos Astro 2 | Highly Search Engine Optimized Starter Blog for Astro 3 | 4 | Kaamos Astro ASCII logo 5 | 6 | ## [Demo site](https://www.kalervoraitanen.com/kaamos) 7 | 8 | Kaamos Astro is designed to give a strong semantic and lightweight foundation to a blog. It is highly Search Engine optimized especially for blogs with Schema.org Microdata. It is meant to be used as a starter blog which you can use to develop your own blog. 9 | 10 | Kaamos is minimalistic as possible and has only the essential features of a blog and no unnecessary CSS. However it comes with some CSS files for example a demo theme and some practical styles. You can easily remove these if you want just the bare bones starter blog. 11 | 12 | Kaamos is licensed under WTFPL so you can do what ever you want with it! However you are forbidden to hold me liable for anything, or claim that what you do with this is made by me. 13 | 14 | ## Some features 15 | 16 | - Open Graph Tags (Twitter, Facebook) 17 | - User Declared Canonical URLs 18 | - XML Sitemap 19 | - Robots.txt 20 | - Markdown based blog posts with featured images 21 | 22 | ## Getting Started 23 | 24 | To get started you should have Astro, Node and npm installed. Instructions can be found on Astro's website. After that follow these steps: 25 | ``` 26 | # Install Dependencies 27 | 28 | npm i 29 | 30 | # Run Site locally 31 | 32 | npm start 33 | 34 | # Build Site 35 | 36 | npm run build 37 | ``` 38 | 39 | Navigate to `src/data/site.js` and edit to match your site's information. 40 | 41 | Start writing new blog posts in Markdown at `src/pages/blog/` 42 | 43 | ## Activating a demo 44 | 45 | Kaamos Astro comes with demo themes to showcase what can be done with just CSS and a touch of Vanilla Javascript. All the demos are also WTFPL licensed so you can use them anyway you want. However you are forbidden to hold me liable for anything if you choose to use them. 46 | 47 | Demos so far: 48 | - [Demo #1](https://www.kalervoraitanen.com/kaamos) 49 | - [Demo #2](https://www.kalervoraitanen.com/demo2) 50 | - [Demo #3](https://www.kalervoraitanen.com/demo3) 51 | - [Demo #4](https://www.kalervoraitanen.com/demo4) 52 | 53 | 54 | Activating a demo is very simple. Below are the instructions how to do it: 55 | 56 | 1. Open `src/components/blog/BaseHead.astro`. 57 | 2. Find the line `` and change the 'demo1' to 'demo2' for example. 58 | 3. Find the line `` and change the 'demo1' to 'demo2' for example. 59 | 4. That's it, you're all set! Start your site locally and see the demo in your browser. 60 | 61 | ## Credits 62 | 63 | Kaamos Astro is also based on: 64 | - astro-minimal-starter by Jaydan Urwin 65 | - https://github.com/necolas/normalize.css 66 | 67 | And thanks to Tony-Sull of Astro Support Squad for some coding help! -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | export default /** @type {import('astro').AstroUserConfig} */ ({ 3 | buildOptions: { 4 | //site: 'https://my-site.dev/', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. 5 | //sitemap: true, // Generate sitemap (set to "false" to disable) 6 | }, 7 | // Comment out "renderers: []" to enable Astro's default component support. 8 | // renderers: ['@astrojs/renderer-preact'], 9 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kaamos-astro", 3 | "version": "v1.0.0", 4 | "description": "Highly Search Engine Optimized Starter Blog for Astro.", 5 | "private": false, 6 | "scripts": { 7 | "start": "astro dev", 8 | "build": "astro build" 9 | }, 10 | "devDependencies": { 11 | "astro": "^0.22.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/assets/blog/new-demo2-added/demo2-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/blog/new-demo2-added/demo2-mockup.png -------------------------------------------------------------------------------- /public/assets/blog/new-demo3-added/demo3-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/blog/new-demo3-added/demo3-mockup.png -------------------------------------------------------------------------------- /public/assets/blog/new-demo4-added/demo4-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/blog/new-demo4-added/demo4-mockup.png -------------------------------------------------------------------------------- /public/assets/blog/say-hello-to-kaamos/kaamos-hero-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/blog/say-hello-to-kaamos/kaamos-hero-image.jpg -------------------------------------------------------------------------------- /public/assets/blog/typography/typography-calligraphy-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/blog/typography/typography-calligraphy-work.jpg -------------------------------------------------------------------------------- /public/assets/kaamos-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalervoraitanen/kaamos-astro/d350d0eaf5467c902e6579950b48d9f9c4ffced5/public/assets/kaamos-logo.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /public/script/demo1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Kaamos Astro Demo #1 Scripts File 3 | */ 4 | 5 | // Wait till the DOM is fully loaded 6 | window.addEventListener('DOMContentLoaded', (event) => { 7 | 8 | // Toggle .menu-open class when menu button is clicked. 9 | document.querySelector(".nav-button").addEventListener('click', function(){ 10 | document.querySelector(".site-header").classList.toggle("menu-open"); 11 | document.querySelector(".header__nav").classList.toggle("active"); 12 | document.querySelector(".nav-button").classList.toggle("close"); 13 | document.querySelector("body").classList.toggle("no-scroll"); 14 | }); 15 | 16 | }); // End of Wait till the DOM is fully loaded 17 | -------------------------------------------------------------------------------- /public/script/demo2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Kaamos Astro Demo #1 Scripts File 3 | */ 4 | 5 | // Wait till the DOM is fully loaded 6 | window.addEventListener('DOMContentLoaded', (event) => { 7 | 8 | // Toggle .menu-open class when menu button is clicked. 9 | document.querySelector(".nav-button").addEventListener('click', function(){ 10 | document.querySelector(".site-header").classList.toggle("menu-open"); 11 | document.querySelector(".header__nav").classList.toggle("active"); 12 | document.querySelector(".nav-button").classList.toggle("close"); 13 | document.querySelector("body").classList.toggle("no-scroll"); 14 | }); 15 | 16 | }); // End of Wait till the DOM is fully loaded 17 | -------------------------------------------------------------------------------- /public/script/demo3.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Kaamos Astro Demo #3 Scripts File 3 | */ 4 | 5 | // Wait till the DOM is fully loaded 6 | window.addEventListener('DOMContentLoaded', (event) => { 7 | 8 | // Toggle .menu-open class when menu button is clicked. 9 | document.querySelector(".nav-button").addEventListener('click', function(){ 10 | document.querySelector(".site-header").classList.toggle("menu-open"); 11 | document.querySelector(".header__nav").classList.toggle("active"); 12 | document.querySelector(".nav-button").classList.toggle("close"); 13 | document.querySelector("body").classList.toggle("no-scroll"); 14 | }); 15 | 16 | }); // End of Wait till the DOM is fully loaded 17 | -------------------------------------------------------------------------------- /public/script/demo4.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Kaamos Astro Demo #4 Scripts File 3 | */ 4 | 5 | // Wait till the DOM is fully loaded 6 | window.addEventListener('DOMContentLoaded', (event) => { 7 | 8 | // Start of Masonry grid layout scripts 9 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } 10 | 11 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 12 | 13 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } 14 | 15 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } 16 | 17 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 18 | 19 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } 20 | 21 | var grids = _toConsumableArray(document.querySelectorAll('.grid-layout main')); 22 | 23 | if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') { 24 | var layout = function layout() { 25 | grids.forEach(function (grid) { 26 | /* get the post relayout number of columns */ 27 | var ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; 28 | grid.items.forEach(function (c) { 29 | var new_h = c.getBoundingClientRect().height; 30 | 31 | if (new_h !== +c.dataset.h) { 32 | c.dataset.h = new_h; 33 | grid.mod++; 34 | } 35 | }); 36 | /* if the number of columns has changed */ 37 | 38 | if (grid.ncol !== ncol || grid.mod) { 39 | /* update number of columns */ 40 | grid.ncol = ncol; 41 | /* revert to initial positioning, no margin */ 42 | 43 | grid.items.forEach(function (c) { 44 | return c.style.removeProperty('margin-top'); 45 | }); 46 | /* if we have more than one column */ 47 | 48 | if (grid.ncol > 1) { 49 | grid.items.slice(ncol).forEach(function (c, i) { 50 | var prev_fin = grid.items[i].getBoundingClientRect().bottom 51 | /* bottom edge of item above */ 52 | , 53 | curr_ini = c.getBoundingClientRect().top 54 | /* top edge of current item */ 55 | ; 56 | c.style.marginTop = "".concat(prev_fin + grid.gap - curr_ini, "px"); 57 | }); 58 | } 59 | 60 | grid.mod = 0; 61 | } 62 | }); 63 | }; 64 | 65 | grids = grids.map(function (grid) { 66 | return { 67 | _el: grid, 68 | gap: parseFloat(getComputedStyle(grid).gridRowGap), 69 | items: _toConsumableArray(grid.childNodes).filter(function (c) { 70 | return c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1; 71 | }), 72 | ncol: 0, 73 | mod: 0 74 | }; 75 | }); 76 | addEventListener('load', function (e) { 77 | layout(); 78 | /* initial load */ 79 | 80 | addEventListener('resize', layout, false); 81 | /* on resize */ 82 | }, false); 83 | } 84 | // End of Masonry grid layout scripts 85 | 86 | 87 | // Toggle .menu-open class when menu button is clicked. 88 | document.querySelector(".nav-button").addEventListener('click', function(){ 89 | document.querySelector(".site-header").classList.toggle("menu-open"); 90 | document.querySelector(".header__nav").classList.toggle("active"); 91 | document.querySelector(".nav-button").classList.toggle("close"); 92 | document.querySelector("body").classList.toggle("no-scroll"); 93 | }); 94 | 95 | }); // End of Wait till the DOM is fully loaded 96 | -------------------------------------------------------------------------------- /public/style/demo1.css: -------------------------------------------------------------------------------- 1 | /* 2 | Demo: Kaamos Astro - Demo #1 3 | Demo site: https://www.kalervoraitanen.com/kaamos 4 | Author: Kalervo Raitanen 5 | Author site: http://www.kalervoraitanen.com 6 | Description: Minimalist and timeless black&white demo for Kaamos Astro Starter Blog. 7 | License: WTFPL License. 8 | License URI: http://sam.zoy.org/wtfpl/ 9 | */ 10 | 11 | 12 | /*-------------------------------------------------------------- 13 | >>> TABLE OF CONTENTS: 14 | ---------------------------------------------------------------- 15 | # 1. VARIABLES 16 | # 2. GENERAL STYLES 17 | # 3. TYPOGRAPHY 18 | # 3.1. Font settings 19 | # 3.2. Font styles 20 | # 3.3. Link styles 21 | # 3.4. Paragraph styles 22 | # 3.4. Header styles 23 | # 3.5. Table styles 24 | # 3.6. Definition list styles 25 | # 3.7. UL and OL styles 26 | # 3.8. Other typographic styles 27 | # 4. MAIN HEADER STYLES 28 | # 5. NAVIGATION STYLES 29 | # 6. MAIN CONTENT STYLES 30 | # 7. SINGLE POST STYLES 31 | # 8. PAGE STYLES 32 | # 9. POSTS PAGINATION STYLES 33 | # 10. SIDEBAR STYLES 34 | # 11. FOOTER STYLES 35 | # 12. BUTTONS 36 | # 13. Z-INDEXES 37 | # 14. ANIMATIONS 38 | # 15. MEDIA QUERIES 39 | # 15.1. Styles for 768px and larger screen sizes 40 | # 15.1.1. MAIN LAYOUT STYLES 41 | # 15.1.2. PAGE STYLES 42 | # 15.1.3. SIDEBAR STYLES 43 | # 15.2. Styles for 1024px and larger screen sizes 44 | # 15.2.1. TYPOGRAPHY 45 | # 15.2.2. MAIN LAYOUT STYLES 46 | # 15.2.3. MAIN HEADER STYLES 47 | # 15.2.4. MAIN NAVIGATION STYLES 48 | # 15.2.5. MAIN CONTENT STYLES 49 | # 15.2.6. Z-INDEXES 50 | --------------------------------------------------------------*/ 51 | 52 | 53 | /****************************************************************** 54 | 1. VARIABLES 55 | ******************************************************************/ 56 | 57 | :root { 58 | /* Colors */ 59 | --black: #111111; 60 | --pure-black: #000000; 61 | --white: #eeeeee; 62 | --gray: #333333; 63 | --red: red; 64 | } 65 | 66 | 67 | /****************************************************************** 68 | 2. GENERAL STYLES 69 | ******************************************************************/ 70 | 71 | html { 72 | scroll-behavior: smooth; 73 | /* Standard version (Firefox only for now) */ 74 | scrollbar-color: var(--white) var(--pure-black); 75 | } 76 | 77 | /* For Google Chrome */ 78 | html::-webkit-scrollbar { 79 | width: 10px; 80 | height: 10px; 81 | } 82 | 83 | html::-webkit-scrollbar-thumb { 84 | background: var(--pure-black); 85 | } 86 | 87 | html::-webkit-scrollbar-track { 88 | background: var(--white); 89 | } 90 | 91 | body { 92 | background: var(--black); 93 | color: var(--white); 94 | } 95 | 96 | 97 | /****************************************************************** 98 | 3. TYPOGRAPHY 99 | ******************************************************************/ 100 | 101 | /* # 3.1. Font settings */ 102 | 103 | /* Fluid typography sizes */ 104 | :root { 105 | --size-300: clamp(0.7rem, 0.8rem + 0.2vw, 0.9rem); 106 | --size-400: clamp(0.9rem, 0.9rem + 0.24vw, 1rem); 107 | --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem); 108 | --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem); 109 | --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); 110 | --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem); 111 | --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem); 112 | --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem); 113 | 114 | --font-main: 'Merriweather', Georgia, serif; 115 | --font-heading: 'Playball', cursive; 116 | --font-button: 'Arimo', Helvetica, Arial, sans-serif; 117 | } 118 | 119 | 120 | /* # 3.2. Font styles */ 121 | body { 122 | font-family: var(--font-main); 123 | } 124 | 125 | .site-header:after { 126 | font-size: 3rem; 127 | } 128 | 129 | .site-header.site-description { 130 | font-size: var(--size-600); 131 | } 132 | 133 | .main-nav a { 134 | font-family: var(--font-button); 135 | font-size: var(--size-700); 136 | } 137 | 138 | .pagination { 139 | font-size: var(--size-500); 140 | } 141 | 142 | .site-sidebar__heading { 143 | font-family: var(--font-main); 144 | font-size: var(--size-600); 145 | } 146 | 147 | .site-sidebar .archives summary { 148 | font-size: var(--size-500); 149 | font-weight: 700; 150 | } 151 | 152 | .site-sidebar__archives__post-date { 153 | font-size: var(--size-300); 154 | } 155 | 156 | .header__nav a { 157 | font-family: var(--font-button); 158 | } 159 | 160 | 161 | /* # 3.3. Link styles */ 162 | a { 163 | color: var(--white); 164 | } 165 | 166 | 167 | /* # 3.4. Paragraph styles */ 168 | p:first-child { 169 | margin-top: 0; 170 | } 171 | 172 | p, 173 | textarea, 174 | figcaption { 175 | font-size: var(--size-400); 176 | line-height: 1.8; 177 | } 178 | 179 | h1 + p, 180 | h2 + p, 181 | h3 + p, 182 | h4 + p, 183 | h5 + p, 184 | h6 + p { 185 | margin-top: 0; 186 | } 187 | 188 | 189 | /* # 3.4. Header styles */ 190 | h1, 191 | h2, 192 | h3, 193 | h4, 194 | h5, 195 | h6 { 196 | font-family: var(--font-heading); 197 | font-weight: 700; 198 | line-height: 1; 199 | margin: 0; 200 | max-width: 100%; 201 | } 202 | 203 | h1:first-child, 204 | h2:first-child, 205 | h3:first-child, 206 | h4:first-child, 207 | h5:first-child, 208 | h6:first-child { 209 | padding-top: 0; 210 | } 211 | 212 | h1 { 213 | font-size: var(--size-800); 214 | padding: 0.8em 0 0.6em 0; 215 | } 216 | 217 | h2 { 218 | font-size: var(--size-700); 219 | padding: 1em 0 0.6em 0; 220 | } 221 | 222 | h3 { 223 | font-size: var(--size-600); 224 | padding: 1em 0 0.6em 0; 225 | } 226 | 227 | h4 { 228 | font-size: var(--size-500); 229 | padding: 1em 0 0.6em 0; 230 | } 231 | 232 | h5 { 233 | font-size: var(--size-500); 234 | padding: 1em 0 0.6em 0; 235 | } 236 | 237 | h6 { 238 | font-size: var(--size-400); 239 | padding: 1em 0 0.6em 0; 240 | } 241 | 242 | 243 | /* # 3.5. Table styles */ 244 | table { 245 | border-collapse: collapse; 246 | } 247 | 248 | table tr { 249 | border-bottom: 1px solid var(--gray); 250 | } 251 | 252 | table tr:first-child { 253 | border-top: 1px solid var(--gray); 254 | } 255 | 256 | table th, 257 | table td { 258 | border-left: 1px solid var(--gray); 259 | border-right: 1px solid var(--gray); 260 | padding: 0.5rem; 261 | } 262 | 263 | 264 | /* # 3.6. Definition list styles */ 265 | dl { 266 | line-height: 1.8; 267 | } 268 | 269 | dt { 270 | font-weight: 700; 271 | } 272 | 273 | dd { 274 | margin: 0.25rem 0 1rem 1rem; 275 | } 276 | 277 | 278 | /* # 3.7. UL and OL styles */ 279 | ul, 280 | ol { 281 | line-height: 1.5; 282 | list-style-position: inside; 283 | margin: 0.5rem 0 0 1rem; 284 | padding: 0; 285 | } 286 | 287 | li { 288 | margin: 0 0 0.5rem 0; 289 | } 290 | 291 | li:last-child { 292 | margin: 0; 293 | } 294 | 295 | 296 | /* # 3.8. Other typographic styles */ 297 | hr { 298 | color: var(--gray); 299 | } 300 | 301 | dfn, 302 | cite, 303 | em, 304 | i { 305 | font-style: italic; 306 | } 307 | 308 | blockquote { 309 | background: var(--pure-black); 310 | border-left: 6px solid var(--gray); 311 | color: var(--white); 312 | font-style: italic; 313 | margin: 0; 314 | overflow: hidden; 315 | padding: 1rem 1rem 1rem 2rem; 316 | quotes: "" ""; 317 | } 318 | 319 | blockquote cite { 320 | display: block; 321 | font-weight: 700; 322 | margin-top: 0.5rem; 323 | } 324 | 325 | blockquote:before, 326 | blockquote:after { 327 | content: ""; 328 | } 329 | 330 | address { 331 | margin: 0 0 1.5rem; 332 | } 333 | 334 | pre { 335 | margin: 1rem 0; 336 | max-width: 300px; 337 | overflow: auto; 338 | padding: 0 0 0 1rem; 339 | } 340 | 341 | code, 342 | kbd, 343 | tt, 344 | var { 345 | font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 346 | } 347 | 348 | code { 349 | background: var(--pure-black); 350 | color: var(--white); 351 | display: block; 352 | margin: 1rem 0; 353 | padding: 0.5rem 1rem; 354 | } 355 | 356 | abbr, 357 | acronym { 358 | border-bottom: 1px dotted var(--gray); 359 | cursor: help; 360 | } 361 | 362 | mark, 363 | ins { 364 | text-decoration: none; 365 | } 366 | 367 | big { 368 | font-size: 125%; 369 | } 370 | 371 | q { 372 | quotes: "“" "”" "‘" "’"; 373 | } 374 | 375 | 376 | /****************************************************************** 377 | 4. MAIN HEADER STYLES 378 | ******************************************************************/ 379 | 380 | .site-header { 381 | background-color: var(--pure-black); 382 | height: auto; 383 | padding: 0 4vw; 384 | position: relative; 385 | } 386 | 387 | .site-header__desc { 388 | color: var(--white); 389 | margin: 0; 390 | } 391 | 392 | .site-header__logo-link { 393 | display: inline-block; 394 | } 395 | 396 | .site-header__logo-img { 397 | height: 32px; 398 | margin: 16px 0; 399 | position: relative; 400 | text-align: center; 401 | width: auto; 402 | } 403 | 404 | 405 | /****************************************************************** 406 | 5. NAVIGATION STYLES 407 | ******************************************************************/ 408 | 409 | .header__nav { 410 | display: none; 411 | } 412 | 413 | .header__nav.active { 414 | align-items: center; 415 | animation: openLightbox .5s forwards ease-out; 416 | background: rgba(0,0,0,0.9); 417 | bottom: 0; 418 | display: grid; 419 | justify-content: center; 420 | left: 0; 421 | opacity: 0; 422 | overflow-y: scroll; 423 | padding: 2em 0; 424 | position: fixed; 425 | right: 0; 426 | top: 0; 427 | transform: scale(0.1); 428 | } 429 | 430 | .header__nav ul { 431 | list-style-type: none; 432 | } 433 | 434 | .header__nav > ul { 435 | padding: 0; 436 | width: 70vw; 437 | } 438 | 439 | .header__nav.active > ul { 440 | animation: fadeInMenu .5s forwards ease-out 0.5s; 441 | opacity: 0; 442 | } 443 | 444 | .header__nav li { 445 | padding: 0 0 4px 0; 446 | position: relative; 447 | } 448 | 449 | .header__nav li:after { 450 | background: var(--gray); 451 | content: ""; 452 | display: block; 453 | height: 1px; 454 | width: 100%; 455 | } 456 | 457 | .header__nav li:last-child:after { 458 | display: none; 459 | } 460 | 461 | .header__nav a { 462 | color: var(--white); 463 | text-decoration: none; 464 | text-transform: uppercase; 465 | } 466 | 467 | .nav-btn-wrap { 468 | background: var(--pure-black); 469 | padding: 16px 8px; 470 | position: fixed; 471 | right: 16px; 472 | top: 16px; 473 | } 474 | 475 | 476 | /****************************************************************** 477 | 6. MAIN CONTENT STYLES 478 | ******************************************************************/ 479 | 480 | main { 481 | margin: 160px auto 80px auto; 482 | } 483 | 484 | .post-preview { 485 | border-bottom: 4px solid var(--gray); 486 | padding: 4vw; 487 | position: relative; 488 | } 489 | 490 | .post { 491 | padding: 0 4vw 4vw 4vw; 492 | } 493 | 494 | .post-preview:nth-child(odd) { 495 | border-left: 4px solid var(--gray); 496 | } 497 | 498 | .post-preview:nth-child(even) { 499 | border-right: 4px solid var(--gray); 500 | } 501 | 502 | .post-preview:first-child { 503 | border-top: 4px solid var(--gray); 504 | } 505 | 506 | .post-preview__header { 507 | display: flex; 508 | flex-flow: column; 509 | } 510 | 511 | .post__date { 512 | margin: 0 0 1rem 0; 513 | order: 0; 514 | } 515 | 516 | .post__title { 517 | margin: 0; 518 | padding: 0 0 1rem 0; 519 | order: 1; 520 | } 521 | 522 | .post__feature-img { 523 | display: block; 524 | margin: 0 0 1.5rem 0; 525 | order: 1; 526 | position: relative; 527 | } 528 | 529 | .post-preview__footer { 530 | margin: 2rem 0 0 0; 531 | } 532 | 533 | .post__footer-categories { 534 | display: flex; 535 | flex-wrap: wrap; 536 | list-style-type: none; 537 | margin: 0; 538 | padding: 0; 539 | } 540 | 541 | .post__footer-categories li { 542 | margin: 0 1rem 0 0; 543 | } 544 | 545 | .post__footer-categories a { 546 | padding: 0 0 0 1rem; 547 | position: relative; 548 | } 549 | 550 | .post__footer-categories a:before { 551 | content: "#"; 552 | left: 0; 553 | position: absolute; 554 | } 555 | 556 | 557 | /****************************************************************** 558 | 7. SINGLE POST STYLES 559 | ******************************************************************/ 560 | 561 | .single-post main { 562 | margin: 160px 4vw 80px 4vw; 563 | } 564 | 565 | .single-post .post__header { 566 | display: flex; 567 | flex-flow: column; 568 | } 569 | 570 | .single-post .post__date { 571 | align-items: center; 572 | display: flex; 573 | order: 0; 574 | } 575 | 576 | .single-post .post__title { 577 | order: 1; 578 | } 579 | 580 | .single-post .post__feature-img { 581 | order: 2; 582 | } 583 | 584 | .single-post .post__title:after { 585 | background: var(--gray); 586 | content: ""; 587 | display: block; 588 | height: 1px; 589 | margin: 0.5rem 0 0 0; 590 | width: 100%; 591 | } 592 | 593 | .single-post .post__footer { 594 | margin: 2rem 0 0 0; 595 | } 596 | 597 | 598 | /****************************************************************** 599 | 8. PAGE STYLES 600 | ******************************************************************/ 601 | 602 | .page main { 603 | background: var(--gray); 604 | margin: 160px 0 80px 0; 605 | padding: 4vw; 606 | } 607 | 608 | .page h1:after { 609 | background: var(--gray); 610 | content: ""; 611 | display: block; 612 | height: 1px; 613 | margin: 0.5rem 0 0 0; 614 | width: 100%; 615 | } 616 | 617 | 618 | /****************************************************************** 619 | 9. POSTS PAGINATION STYLES 620 | ******************************************************************/ 621 | 622 | 623 | /****************************************************************** 624 | 10. SIDEBAR STYLES 625 | ******************************************************************/ 626 | 627 | .site-sidebar { 628 | margin: 3rem 4vw 0 4vw; 629 | } 630 | 631 | .site-sidebar__section { 632 | padding: 0; 633 | margin: 0 0 3rem 0; 634 | max-width: 25rem; 635 | } 636 | 637 | .site-sidebar__heading { 638 | margin: 0 0 0.5rem 0; 639 | padding: 0 0 0.25rem 0; 640 | } 641 | 642 | .site-sidebar__heading:after { 643 | background: var(--gray); 644 | content: ""; 645 | display: block; 646 | height: 1px; 647 | margin: 6px 0 0 0; 648 | width: 100%; 649 | } 650 | 651 | .site-sidebar ul { 652 | list-style-position: inside; 653 | list-style-type: disc; 654 | margin: 0; 655 | padding: 0; 656 | } 657 | 658 | .site-sidebar li { 659 | margin: 0 0 0.5rem 0; 660 | } 661 | 662 | .site-sidebar li:last-child { 663 | margin: 0; 664 | } 665 | 666 | .site-sidebar .archives details { 667 | margin: 0 0 0.5rem 0; 668 | } 669 | 670 | .site-sidebar .archives ul { 671 | margin: 0 0 0 1rem; 672 | } 673 | 674 | .site-sidebar__archives__post { 675 | margin: 0 0 0.5rem 0; 676 | } 677 | 678 | .site-sidebar__archives__post-date { 679 | display: block; 680 | } 681 | 682 | 683 | /****************************************************************** 684 | 11. FOOTER STYLES 685 | ******************************************************************/ 686 | 687 | .site-footer { 688 | background: var(--pure-black); 689 | padding: 1rem 2.5rem 1rem 0; 690 | } 691 | 692 | .site-footer p { 693 | text-align: center; 694 | } 695 | 696 | 697 | /****************************************************************** 698 | 12. BUTTONS 699 | ******************************************************************/ 700 | 701 | /* Read More button */ 702 | .read-more { 703 | background: var(--white); 704 | color: var(--black); 705 | font-family: var(--font-button); 706 | padding: 0.5rem 1rem; 707 | text-decoration: none; 708 | } 709 | 710 | /* Navigation toggle button */ 711 | .nav-button { 712 | background: var(--white); 713 | border: none; 714 | border-radius: 0; 715 | cursor: pointer; 716 | display: block; 717 | height: 2px; 718 | margin: 0; 719 | padding: 0; 720 | position: relative; 721 | text-indent: -9999px; 722 | transition: all 0.25s ease-out; 723 | width: 24px; 724 | } 725 | 726 | .nav-button:before { 727 | background: var(--white); 728 | content: ""; 729 | display: block; 730 | height: 2px; 731 | left: 0; 732 | margin-top: -8px; 733 | position: absolute; 734 | transition: margin 0.25s ease-out 0.25s, transform 0.25s ease-out, background-color 0.25s ease-out; 735 | width: 24px; 736 | } 737 | 738 | .nav-button:after { 739 | background: var(--white); 740 | bottom: 0; 741 | content: ""; 742 | display: block; 743 | height: 2px; 744 | left: 0; 745 | margin-bottom: -8px; 746 | position: absolute; 747 | transition: margin 0.25s ease-out 0.25s, transform 0.25s ease-out, background-color 0.25s ease-out; 748 | width: 24px; 749 | } 750 | 751 | .nav-button.close { 752 | height: 0; 753 | } 754 | 755 | .nav-button.close:before { 756 | background-color: var(--red); 757 | margin-top: 0; 758 | opacity: 1; 759 | top: 0; 760 | transform: rotate(45deg); 761 | transform-origin: center; 762 | transition: margin 0.25s ease-out, transform 0.25s ease-out 0.25s, background-color 0.25s ease-out 0.25s; 763 | } 764 | 765 | .nav-button.close:after { 766 | background-color: var(--red); 767 | bottom: -2px; 768 | margin-bottom: 0; 769 | opacity: 1; 770 | transform: rotate(-45deg); 771 | transform-origin: -center; 772 | transition: margin 0.25s ease-out, transform 0.25s ease-out 0.25s, background-color 0.25s ease-out 0.25s; 773 | } 774 | 775 | 776 | /****************************************************************** 777 | 13. Z-INDEXES 778 | ******************************************************************/ 779 | 780 | .header__nav.active { 781 | z-index: var(--layer4); 782 | } 783 | 784 | .nav-btn-wrap { 785 | z-index: var(--layer5); 786 | } 787 | 788 | .site-header__logo-link { 789 | z-index: var(--layer2); 790 | } 791 | 792 | .site-header__logo-link:after { 793 | z-index: var(--layer1); 794 | } 795 | 796 | .site-header__logo-img { 797 | z-index: var(--layer2); 798 | } 799 | 800 | 801 | /****************************************************************** 802 | 14. ANIMATIONS 803 | ******************************************************************/ 804 | 805 | @keyframes openLightbox { 806 | 0% { 807 | transform: scale(0.1); 808 | opacity: 0; 809 | } 810 | 811 | 100% { 812 | transform: scale(1); 813 | opacity: 1; 814 | } 815 | } 816 | 817 | @keyframes fadeInMenu { 818 | 0% { 819 | opacity: 0; 820 | } 821 | 822 | 100% { 823 | opacity: 1; 824 | } 825 | } 826 | 827 | 828 | /****************************************************************** 829 | 15. MEDIA QUERIES 830 | ******************************************************************/ 831 | 832 | /* 15.1. Styles for 768px and larger screen sizes */ 833 | @media only screen and (min-width: 768px) { 834 | 835 | /****************************************************************** 836 | 15.1.1. MAIN LAYOUT STYLES 837 | ******************************************************************/ 838 | 839 | .grid-layout { 840 | display: grid; 841 | grid-template-columns: 1fr 320px; 842 | grid-template-areas: 843 | "header header" 844 | "main sidebar" 845 | "pagenav sidebar" 846 | "footer footer"; 847 | } 848 | 849 | .site-header { 850 | grid-area: header; 851 | } 852 | 853 | main { 854 | grid-area: main; 855 | margin: 160px 0 80px 0; 856 | } 857 | 858 | .site-sidebar { 859 | grid-area: sidebar; 860 | } 861 | 862 | .pagination { 863 | grid-area: pagenav; 864 | } 865 | 866 | .site-footer { 867 | grid-area: footer; 868 | } 869 | 870 | 871 | /****************************************************************** 872 | 15.1.2. PAGE STYLES 873 | ******************************************************************/ 874 | 875 | .page main { 876 | margin: 160px auto 80px auto; 877 | max-width: 50em; 878 | } 879 | 880 | 881 | /****************************************************************** 882 | 15.1.3. SIDEBAR STYLES 883 | ******************************************************************/ 884 | 885 | .site-sidebar { 886 | border-left: 1px solid var(--pure-black); 887 | margin: 160px 32px 80px 0; 888 | max-width: 25rem; 889 | padding: 0 0 0 32px; 890 | } 891 | 892 | .single-post .site-sidebar, 893 | .page .site-sidebar { 894 | border-left: none; 895 | margin: 0 auto; 896 | max-width: 25em; 897 | padding: 0; 898 | } 899 | 900 | } 901 | /* End of 768px Media Query */ 902 | 903 | 904 | /* 15.2. Styles for 1024px and larger screen sizes */ 905 | @media only screen and (min-width: 1024px) { 906 | 907 | /****************************************************************** 908 | 15.2.1. TYPOGRAPHY 909 | ******************************************************************/ 910 | 911 | pre { 912 | max-width: 500px; 913 | } 914 | 915 | 916 | /* # Font styles */ 917 | .header__nav a { 918 | font-size: var(--size-400); 919 | } 920 | 921 | 922 | /****************************************************************** 923 | 15.2.2. MAIN LAYOUT STYLES 924 | ******************************************************************/ 925 | 926 | body:not(.single-post) { 927 | grid-template-columns: 1fr 400px; 928 | } 929 | 930 | 931 | /****************************************************************** 932 | 15.2.3. MAIN HEADER STYLES 933 | ******************************************************************/ 934 | 935 | .site-header { 936 | display: grid; 937 | grid-template-columns: 1fr 1fr; 938 | grid-template-areas: 939 | "logo nav" 940 | "desc nav"; 941 | align-items: center; 942 | justify-content: flex-start; 943 | } 944 | 945 | .site-header__logo-link { 946 | grid-area: logo; 947 | } 948 | 949 | .site-header__desc { 950 | grid-area: desc; 951 | } 952 | 953 | /****************************************************************** 954 | 15.2.4. MAIN NAVIGATION STYLES 955 | ******************************************************************/ 956 | 957 | .nav-btn-wrap { 958 | display: none; 959 | } 960 | 961 | .header__nav { 962 | align-items: center; 963 | background: var(--pure-black); 964 | display: flex; 965 | grid-area: nav; 966 | height: 2rem; 967 | justify-content: center; 968 | margin: 0 auto; 969 | max-width: 60vw; 970 | padding: 0; 971 | width: calc(70vw - 2.5rem - 200px); 972 | } 973 | 974 | .header__nav > ul { 975 | background-color: transparent; 976 | box-shadow: none; 977 | height: auto; 978 | list-style: none; 979 | margin: 0; 980 | overflow-y: unset; 981 | padding: 0; 982 | position: relative; 983 | transform: translateX(0); 984 | transition: none; 985 | width: 100%; 986 | } 987 | 988 | .header__nav > ul > li { 989 | margin: 0 1rem 0 0; 990 | padding: 0; 991 | } 992 | 993 | .header__nav li { 994 | display: inline-block; 995 | position: relative; 996 | text-align: left; /* Reset text alignment */ 997 | } 998 | 999 | .header__nav li:after { 1000 | background: none; 1001 | background-color: var(--white); 1002 | content: ""; 1003 | display: block; 1004 | height: 2px; 1005 | margin: 0 auto; 1006 | transition: width 0.5s ease; 1007 | width: 0; 1008 | } 1009 | 1010 | .header__nav li:hover:after { 1011 | width: 100%; 1012 | } 1013 | 1014 | .header__nav li:last-child:after { 1015 | display: block; 1016 | } 1017 | 1018 | .header__nav a { 1019 | color: var(--white); 1020 | } 1021 | 1022 | 1023 | /****************************************************************** 1024 | 15.2.5. MAIN CONTENT STYLES 1025 | ******************************************************************/ 1026 | 1027 | .single-post main { 1028 | width: 50rem; 1029 | margin: 160px auto 80px auto; 1030 | } 1031 | 1032 | body:not(.single-post) .post-preview__header, 1033 | body:not(.single-post) .post-preview__content, 1034 | body:not(.single-post) .post-preview__footer { 1035 | max-width: 640px; 1036 | } 1037 | 1038 | 1039 | /****************************************************************** 1040 | 15.2.6. Z-INDEXES 1041 | ******************************************************************/ 1042 | 1043 | .header__nav { 1044 | z-index: var(--layer2); 1045 | } 1046 | 1047 | .header__nav > ul { 1048 | z-index: var(--layer2); 1049 | } 1050 | 1051 | } 1052 | /* End of 1024px Media Query */ -------------------------------------------------------------------------------- /public/style/demo2.css: -------------------------------------------------------------------------------- 1 | /* 2 | Demo: Kaamos Astro - Demo #2 3 | Demo site: https://www.kalervoraitanen.com/kaamos 4 | Author: Kalervo Raitanen 5 | Author site: http://www.kalervoraitanen.com 6 | Description: Minimalist blogging theme for Kaamos Astro Starter Blog. 7 | License: WTFPL License. 8 | License URI: http://sam.zoy.org/wtfpl/ 9 | */ 10 | 11 | 12 | /*-------------------------------------------------------------- 13 | >>> TABLE OF CONTENTS: 14 | ---------------------------------------------------------------- 15 | # 1. VARIABLES 16 | # 2. GENERAL STYLES 17 | # 3. TYPOGRAPHY 18 | # 3.1. Font settings 19 | # 3.2. Font styles 20 | # 3.3. Link styles 21 | # 3.4. Paragraph styles 22 | # 3.5. Header styles 23 | # 3.6. Table styles 24 | # 3.7. Definition list styles 25 | # 3.8. UL and OL styles 26 | # 3.9. Other typographic styles 27 | # 4. MAIN HEADER STYLES 28 | # 5. NAVIGATION STYLES 29 | # 6. MAIN CONTENT STYLES 30 | # 7. SINGLE POST STYLES 31 | # 8. PAGE STYLES 32 | # 9. POSTS PAGINATION STYLES 33 | # 10. SIDEBAR STYLES 34 | # 11. FOOTER STYLES 35 | # 12. BUTTONS 36 | # 13. Z-INDEXES 37 | # 14. ANIMATIONS 38 | # 15. MEDIA QUERIES 39 | # 15.1. Styles for 768px and larger screen sizes 40 | # 15.1.1. TYPOGRAPHY 41 | # 15.1.2. MAIN HEADER STYLES 42 | # 15.1.3. NAVIGATION STYLES 43 | # 15.1.4. MAIN CONTENT LAYOUT STYLES 44 | # 15.1.5. SINGLE POST STYLES 45 | # 15.1.6. PAGE STYLES 46 | # 15.1.7. Z-INDEXES 47 | # 15.1.8. SIDEBAR STYLES 48 | # 15.2. Styles for 1024px and larger screen sizes 49 | # 15.2.1. TYPOGRAPHY 50 | # 15.2.2. MAIN LAYOUT STYLES 51 | # 15.2.3. MAIN CONTENT LAYOUT STYLES 52 | # 15.2.4. SINGLE POST STYLES 53 | # 15.2.5. PAGE STYLES 54 | # 15.2.6. SIDEBAR STYLES 55 | # 15.2.7. Z-INDEXES 56 | --------------------------------------------------------------*/ 57 | 58 | 59 | /****************************************************************** 60 | 1. VARIABLES 61 | ******************************************************************/ 62 | 63 | :root { 64 | /* Colors */ 65 | --button_bgcolor: #134347; 66 | --button_color: #eeeeee; 67 | --white: #eeeeee; 68 | --black: #111111; 69 | --gray: #555555; 70 | --green: #134347; 71 | --light-gray: #bbbbbb; 72 | --light-green: #bdd6c7; 73 | --site_text_color: #325050; 74 | } 75 | 76 | 77 | /****************************************************************** 78 | 2. GENERAL STYLES 79 | ******************************************************************/ 80 | 81 | html { 82 | /* Standard version (Firefox only for now) */ 83 | scrollbar-color: var(--white) var(--green); 84 | } 85 | 86 | /* For Google Chrome */ 87 | html::-webkit-scrollbar { 88 | width: 10px; 89 | height: 10px; 90 | } 91 | 92 | html::-webkit-scrollbar-thumb { 93 | background: var(--green); 94 | } 95 | 96 | html::-webkit-scrollbar-track { 97 | background: var(--white); 98 | } 99 | 100 | body { 101 | color: var(--white); 102 | } 103 | 104 | 105 | /****************************************************************** 106 | 3. TYPOGRAPHY 107 | ******************************************************************/ 108 | 109 | /* # 3.1. Font settings */ 110 | 111 | /* Fluid typography sizes */ 112 | :root { 113 | --size-300: clamp(0.7rem, 0.8rem + 0.2vw, 0.9rem); 114 | --size-400: clamp(0.9rem, 0.9rem + 0.24vw, 1rem); 115 | --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem); 116 | --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem); 117 | --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); 118 | --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem); 119 | --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem); 120 | --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem); 121 | 122 | /* Fonts */ 123 | --font-heading: Helvetica, Arial, sans-serif; 124 | --font-main: Georgia, sans-serif; 125 | --font-button: 'Arial Black', sans-serif; 126 | } 127 | 128 | 129 | /* # 3.2. Font styles */ 130 | body { 131 | color: var(--site_text_color); 132 | font-family: var(--font-main); 133 | font-size: 100%; 134 | line-height: 1; 135 | position: relative; 136 | } 137 | 138 | .site-header__desc { 139 | font-size: var(--size-600); 140 | } 141 | 142 | .pagination { 143 | font-size: var(--size-500); 144 | } 145 | 146 | .site-sidebar__heading { 147 | font-family: var(--font-main); 148 | font-size: var(--size-600); 149 | } 150 | 151 | .site-sidebar .archives summary { 152 | font-size: var(--size-500); 153 | font-weight: 700; 154 | } 155 | 156 | .site-sidebar__archives__post-date { 157 | font-size: var(--size-300); 158 | } 159 | 160 | .header__nav a { 161 | font-family: var(--font-button); 162 | font-size: var(--size-700); 163 | } 164 | 165 | 166 | /* 3.3. Link styles */ 167 | a { 168 | color: var(--green); 169 | font-weight: 700; 170 | text-decoration: underline; 171 | } 172 | 173 | /* 3.4. Paragraph styles */ 174 | p:first-child { 175 | margin-top: 0; 176 | } 177 | 178 | p, 179 | textarea, 180 | figcaption { 181 | font-size: var(--size-400); 182 | line-height: 1.8; 183 | } 184 | 185 | h1 + p, 186 | h2 + p, 187 | h3 + p, 188 | h4 + p, 189 | h5 + p, 190 | h6 + p { 191 | margin-top: 0; 192 | } 193 | 194 | 195 | /* # 3.5. Header styles */ 196 | h1, 197 | h2, 198 | h3, 199 | h4, 200 | h5, 201 | h6 { 202 | font-family: var(--font-heading); 203 | font-weight: 700; 204 | line-height: 1; 205 | margin: 0; 206 | max-width: 100%; 207 | } 208 | 209 | h1:first-child, 210 | h2:first-child, 211 | h3:first-child, 212 | h4:first-child, 213 | h5:first-child, 214 | h6:first-child { 215 | padding-top: 0; 216 | } 217 | 218 | h1 { 219 | font-size: var(--size-800); 220 | padding: 0.8em 0 0.6em 0; 221 | } 222 | 223 | h2 { 224 | font-size: var(--size-700); 225 | padding: 1em 0 0.6em 0; 226 | } 227 | 228 | h3 { 229 | font-size: var(--size-600); 230 | padding: 1em 0 0.6em 0; 231 | } 232 | 233 | h4 { 234 | font-size: var(--size-500); 235 | padding: 1em 0 0.6em 0; 236 | } 237 | 238 | h5 { 239 | font-size: var(--size-500); 240 | padding: 1em 0 0.6em 0; 241 | } 242 | 243 | h6 { 244 | font-size: var(--size-400); 245 | padding: 1em 0 0.6em 0; 246 | } 247 | 248 | 249 | /* # 3.6. Table styles */ 250 | table { 251 | border-collapse: collapse; 252 | } 253 | 254 | table tr { 255 | border-bottom: 1px solid var(--light-gray); 256 | } 257 | 258 | table tr:first-child { 259 | border-top: 1px solid var(--light-gray); 260 | } 261 | 262 | table th, 263 | table td { 264 | border-left: 1px solid var(--light-gray); 265 | border-right: 1px solid var(--light-gray); 266 | padding: 0.5em; 267 | } 268 | 269 | 270 | /* # 3.7. Definition list styles */ 271 | dl { 272 | line-height: 1.8; 273 | } 274 | 275 | dt { 276 | font-weight: 700; 277 | } 278 | 279 | dd { 280 | margin: 0.25em 0 1em 1em; 281 | } 282 | 283 | 284 | /* # 3.8. UL and OL styles */ 285 | ul, 286 | ol { 287 | line-height: 1.5; 288 | list-style-position: inside; 289 | margin: 1em 0; 290 | } 291 | 292 | li { 293 | margin: 0 0 0.5em 0; 294 | } 295 | 296 | li:last-child { 297 | margin: 0; 298 | } 299 | 300 | 301 | /* # 3.9. Other typographic styles */ 302 | hr { 303 | color: var(--gray); 304 | } 305 | 306 | dfn, 307 | cite, 308 | em, 309 | i { 310 | font-style: italic; 311 | } 312 | 313 | blockquote { 314 | background: var(--light-gray); 315 | border-left: 6px solid var(--gray); 316 | color: var(--black); 317 | font-style: italic; 318 | margin: 0; 319 | overflow: hidden; 320 | quotes: "" ""; 321 | padding: 1em 1em 1em 2em; 322 | } 323 | 324 | blockquote cite { 325 | display: block; 326 | font-weight: 700; 327 | margin-top: 0.5em; 328 | } 329 | 330 | blockquote:before, 331 | blockquote:after { 332 | content: ""; 333 | } 334 | 335 | address { 336 | margin: 0 0 1.5em; 337 | } 338 | 339 | pre { 340 | margin: 1em 0; 341 | max-width: 300px; 342 | overflow: auto; 343 | padding: 0 0 0 1em; 344 | } 345 | 346 | code, 347 | kbd, 348 | tt, 349 | var { 350 | font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 351 | } 352 | 353 | code { 354 | background: #1b1b1b; 355 | color: var(--white); 356 | display: block; 357 | margin: 1em 0; 358 | padding: 0.5em 1em; 359 | } 360 | 361 | abbr, 362 | acronym { 363 | border-bottom: 1px dotted var(--gray); 364 | cursor: help; 365 | } 366 | 367 | mark, 368 | ins { 369 | text-decoration: none; 370 | } 371 | 372 | big { 373 | font-size: 125%; 374 | } 375 | 376 | q { 377 | quotes: "“" "”" "‘" "’"; 378 | } 379 | 380 | 381 | /****************************************************************** 382 | 4. MAIN HEADER STYLES 383 | ******************************************************************/ 384 | 385 | .site-header { 386 | --c : var(--green); 387 | --t : transparent; 388 | align-items: center; 389 | background-image: 390 | repeating-linear-gradient(45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0), 391 | repeating-linear-gradient(-45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0), 392 | linear-gradient(to bottom right, #064f5e, #275f5d); 393 | display: flex; 394 | flex-flow: column; 395 | padding: 6rem 4vw 2rem 4vw; 396 | } 397 | 398 | .site-title a { 399 | text-decoration: none; 400 | } 401 | 402 | .site-header__desc { 403 | color: var(--light-gray); 404 | font-size: var(--size-500); 405 | line-height: 1.5; 406 | margin: 1rem 0; 407 | max-width: 60vw; 408 | } 409 | 410 | .site-header__logo-link { 411 | max-width: 70vw; 412 | } 413 | 414 | .nav-btn-wrap { 415 | position: fixed; 416 | top: 2vw; 417 | right: 2vw; 418 | background: var(--green); 419 | padding: calc(0.5rem + 12px) 0.5rem; 420 | } 421 | 422 | 423 | /****************************************************************** 424 | 5. NAVIGATION STYLES 425 | ******************************************************************/ 426 | 427 | .header__nav { 428 | display: none; 429 | } 430 | 431 | .header__nav.active { 432 | align-items: center; 433 | -webkit-animation: openLightbox .5s forwards ease-out; 434 | animation: openLightbox .5s forwards ease-out; 435 | background: rgba(0,0,0,0.9); 436 | bottom: 0; 437 | display: grid; 438 | justify-content: center; 439 | left: 0; 440 | opacity: 0; 441 | overflow-y: scroll; 442 | padding: 2rem 0; 443 | position: fixed; 444 | right: 0; 445 | top: 0; 446 | transform: scale(0.1); 447 | } 448 | 449 | .primary-menu { 450 | list-style-type: none; 451 | padding: 0; 452 | width: 70vw; 453 | } 454 | 455 | .header__nav.active .primary-menu { 456 | animation: fadeInMenu .5s forwards ease-out 0.5s; 457 | -webkit-animation: fadeInMenu .5s forwards ease-out 0.5s; 458 | opacity: 0; 459 | } 460 | 461 | .primary-menu__item { 462 | position: relative; 463 | padding: 0 0 4px 0; 464 | } 465 | 466 | .primary-menu__item:after { 467 | content: ""; 468 | display: block; 469 | width: 100%; 470 | height: 1px; 471 | background: var(--light-gray); 472 | } 473 | 474 | .primary-menu__item:last-child:after { 475 | display: none; 476 | } 477 | 478 | .primary-menu__item a { 479 | color: var(--white); 480 | font-family: var(--font-button); 481 | font-size: var(--size-600); 482 | text-decoration: none; 483 | text-transform: uppercase; 484 | } 485 | 486 | 487 | /****************************************************************** 488 | 6. MAIN CONTENT STYLES 489 | ******************************************************************/ 490 | 491 | .post-preview { 492 | margin: 0; 493 | padding: 6vw; 494 | } 495 | 496 | .post-preview:nth-child(odd) { 497 | background: linear-gradient(90deg, var(--white) 0%, #dddddd 100%); 498 | } 499 | 500 | .post-preview:nth-child(even) { 501 | background: 502 | radial-gradient(var(--light-green) 3px, transparent 5px, var(--light-green) 7px, transparent 9px, var(--light-green) 11px, transparent 13px, var(--light-green) 15px, transparent 17px, var(--light-green) 19px, transparent 21px, var(--light-green) 23px, transparent 25px, var(--light-green) 27px, transparent 29px, var(--light-green) 31px, transparent 33px); 503 | background-color: var(--white); 504 | background-size: 30px 30px; 505 | } 506 | 507 | .post-preview__header { 508 | display: flex; 509 | flex-flow: column; 510 | } 511 | 512 | .post__title { 513 | order: 1; 514 | } 515 | 516 | .post__date { 517 | font-weight: var(--size-300); 518 | font-weight: 700; 519 | line-height: 1; 520 | margin: 0 0 1rem 0; 521 | order: 0; 522 | } 523 | 524 | .post__feature-img { 525 | display: block; 526 | margin: 1rem 0 1.5rem 0; 527 | order: 2; 528 | position: relative; 529 | } 530 | 531 | .post-preview__footer { 532 | margin: 2rem 0 0 0; 533 | } 534 | 535 | .post__footer-categories { 536 | display: flex; 537 | flex-wrap: wrap; 538 | list-style-type: none; 539 | margin: 0; 540 | padding: 0; 541 | } 542 | 543 | .post__footer-categories li { 544 | margin: 0 1rem 0 0; 545 | } 546 | 547 | .post__footer-categories a { 548 | padding: 0 0 0 1rem; 549 | position: relative; 550 | } 551 | 552 | .post__footer-categories a:before { 553 | content: "#"; 554 | left: 0; 555 | position: absolute; 556 | } 557 | 558 | 559 | /****************************************************************** 560 | 7. SINGLE POST STYLES 561 | ******************************************************************/ 562 | 563 | .single-post main { 564 | background-color: var(--light-green); 565 | } 566 | 567 | .post { 568 | padding: 1.5rem; 569 | position: relative; 570 | } 571 | 572 | .post .post__header { 573 | display: flex; 574 | flex-flow: column; 575 | } 576 | 577 | .post .post__title { 578 | margin: 0 0 0.5rem 0; 579 | padding: 0; 580 | order: 1; 581 | } 582 | 583 | .post .post__title:after { 584 | background: var(--gray); 585 | content: ""; 586 | display: block; 587 | height: 1px; 588 | margin: 0.75rem 0 0 0; 589 | width: 100%; 590 | } 591 | 592 | .single-post .post__feature-img { 593 | order: 2; 594 | } 595 | 596 | .post .post__date { 597 | font-weight: 700; 598 | order: 0; 599 | } 600 | 601 | .post .post__footer { 602 | margin: 2rem 0 0 0; 603 | } 604 | 605 | 606 | /****************************************************************** 607 | 8. PAGE STYLES 608 | ******************************************************************/ 609 | 610 | .page main { 611 | background-color: var(--white); 612 | } 613 | 614 | .page__content { 615 | padding: 2rem; 616 | } 617 | 618 | .page h1 { 619 | margin: 0 0 0.5rem 0; 620 | } 621 | 622 | .page h1:after { 623 | background: var(--gray); 624 | content: ""; 625 | display: block; 626 | height: 1px; 627 | margin: 0.75rem 0 0 0; 628 | width: 100%; 629 | } 630 | 631 | 632 | /****************************************************************** 633 | 9. POSTS PAGINATION STYLES 634 | ******************************************************************/ 635 | 636 | 637 | /****************************************************************** 638 | 10. SIDEBAR STYLES 639 | ******************************************************************/ 640 | 641 | .site-sidebar { 642 | background-color: rgba(199, 205, 202, 0.8); 643 | display: flex; 644 | flex-flow: column; 645 | padding: 1.5rem; 646 | } 647 | 648 | .site-sidebar__section { 649 | padding: 0; 650 | margin: 0 0 3rem 0; 651 | } 652 | 653 | .site-sidebar ul { 654 | margin: 0; 655 | padding: 0; 656 | list-style-position: inside; 657 | list-style-type: disc; 658 | } 659 | 660 | .site-sidebar li { 661 | margin: 0 0 0.5rem 0; 662 | } 663 | 664 | .site-sidebar li:last-child { 665 | margin: 0; 666 | } 667 | 668 | .site-sidebar__heading { 669 | font-size: 1.5rem; 670 | margin: 0 0 0.25rem 0; 671 | padding: 0 0 0.25rem 0; 672 | } 673 | 674 | .site-sidebar__heading:after { 675 | background: var(--light-gray); 676 | content: ""; 677 | display: block; 678 | height: 1px; 679 | margin: 6px 0 0 0; 680 | width: 100%; 681 | } 682 | 683 | .site-sidebar .archives details { 684 | margin: 0 0 0.5rem 0; 685 | } 686 | 687 | .site-sidebar .archives ul { 688 | margin: 0 0 0 1rem; 689 | } 690 | 691 | .site-sidebar__archives__post { 692 | margin: 0 0 0.5rem 0; 693 | } 694 | 695 | .site-sidebar__archives__post-date { 696 | display: block; 697 | padding: 0 0 0 1rem; 698 | } 699 | 700 | 701 | /****************************************************************** 702 | 11. FOOTER STYLES 703 | ******************************************************************/ 704 | 705 | .site-footer { 706 | background: var(--green); 707 | padding: 1rem 3vw; 708 | } 709 | 710 | .site-footer p { 711 | color: var(--light-gray); 712 | margin: 0; 713 | text-align: center; 714 | } 715 | 716 | .site-footer a { 717 | color: var(--light-gray); 718 | } 719 | 720 | 721 | /****************************************************************** 722 | 12. BUTTONS 723 | ******************************************************************/ 724 | 725 | /* Read More Button */ 726 | .read-more { 727 | background-color: var(--button_bgcolor); 728 | border: none; 729 | box-sizing: border-box; 730 | color: var(--button_color); 731 | cursor: pointer; 732 | font-family: var(--font-button); 733 | outline: 0; 734 | padding: 0.5rem; 735 | position: relative; 736 | text-decoration: none; 737 | transition: all 0.5s ease-out; 738 | } 739 | 740 | /* Navigation toggle button */ 741 | .nav-button { 742 | background: var(--white); 743 | border: none; 744 | border-radius: 0; 745 | cursor: pointer; 746 | display: block; 747 | height: 4px; 748 | margin: 0; 749 | padding: 0; 750 | position: relative; 751 | text-indent: -9999px; 752 | transition: all 0.25s ease-out; 753 | width: 30px; 754 | } 755 | 756 | .nav-button:before { 757 | background: var(--white); 758 | content: ""; 759 | display: block; 760 | height: 4px; 761 | left: 0; 762 | margin-top: -10px; 763 | position: absolute; 764 | transition: margin 0.25s ease-out 0.25s, transform 0.25s ease-out, background-color 0.25s ease-out; 765 | width: 30px; 766 | } 767 | 768 | .nav-button:after { 769 | background: var(--white); 770 | bottom: 0; 771 | content: ""; 772 | display: block; 773 | height: 4px; 774 | left: 0; 775 | margin-bottom: -10px; 776 | position: absolute; 777 | transition: margin 0.25s ease-out 0.25s, transform 0.25s ease-out, background-color 0.25s ease-out; 778 | width: 30px; 779 | } 780 | 781 | .nav-button.close { 782 | height: 0; 783 | } 784 | 785 | .nav-button.close:before { 786 | background-color: red; 787 | margin-top: 0; 788 | opacity: 1; 789 | top: 0; 790 | transform-origin: center; 791 | transform: rotate(45deg); 792 | transition: margin 0.25s ease-out, transform 0.25s ease-out 0.25s, background-color 0.25s ease-out 0.25s; 793 | } 794 | 795 | .nav-button.close:after { 796 | background-color: red; 797 | bottom: -4px; 798 | margin-bottom: 0; 799 | opacity: 1; 800 | transform: rotate(-45deg); 801 | transform-origin: -center; 802 | transition: margin 0.25s ease-out, transform 0.25s ease-out 0.25s, background-color 0.25s ease-out 0.25s; 803 | } 804 | 805 | 806 | /****************************************************************** 807 | 13. Z-INDEXES 808 | ******************************************************************/ 809 | 810 | .header__nav.active { 811 | z-index: 4; 812 | } 813 | 814 | .nav-btn-wrap { 815 | z-index: 5; 816 | } 817 | 818 | 819 | /****************************************************************** 820 | 14. ANIMATIONS 821 | ******************************************************************/ 822 | 823 | @-webkit-keyframes openLightbox { 824 | 0% { 825 | transform: scale(0.1); 826 | opacity: 0; 827 | } 828 | 829 | 100% { 830 | transform: scale(1); 831 | opacity: 1; 832 | } 833 | } 834 | 835 | 836 | @keyframes openLightbox { 837 | 0% { 838 | transform: scale(0.1); 839 | opacity: 0; 840 | } 841 | 842 | 100% { 843 | transform: scale(1); 844 | opacity: 1; 845 | } 846 | } 847 | 848 | @-webkit-keyframes fadeInMenu { 849 | 0% { 850 | opacity: 0; 851 | } 852 | 853 | 100% { 854 | opacity: 1; 855 | } 856 | } 857 | 858 | 859 | @keyframes fadeInMenu { 860 | 0% { 861 | opacity: 0; 862 | } 863 | 864 | 100% { 865 | opacity: 1; 866 | } 867 | } 868 | 869 | 870 | /****************************************************************** 871 | 15. MEDIA QUERIES 872 | ******************************************************************/ 873 | 874 | /* 15.1. Styles for 768px and larger screen sizes */ 875 | @media only screen and (min-width: 768px) { 876 | 877 | /****************************************************************** 878 | 15.1.1. TYPOGRAPHY 879 | ******************************************************************/ 880 | 881 | pre { 882 | max-width: 480px; 883 | } 884 | 885 | 886 | /****************************************************************** 887 | 15.1.2. MAIN HEADER STYLES 888 | ******************************************************************/ 889 | 890 | .site-header { 891 | display: flex; 892 | flex-flow: column; 893 | margin: 0; 894 | padding: 100px 0 2rem 0; 895 | } 896 | 897 | .site-header__desc { 898 | max-width: unset; 899 | } 900 | 901 | .site-header__logo-link { 902 | margin: 0 auto; 903 | display: inline-block; 904 | width: 320px; 905 | } 906 | 907 | .nav-btn-wrap { 908 | display: none; 909 | } 910 | 911 | 912 | /****************************************************************** 913 | 15.1.3. NAVIGATION STYLES 914 | ******************************************************************/ 915 | 916 | .nav-button { 917 | display: none; 918 | } 919 | 920 | .header__nav { 921 | align-items: center; 922 | background: var(--green); 923 | display: flex; 924 | grid-area: nav; 925 | justify-content: center; 926 | height: 3rem; 927 | left: 0; 928 | padding: 0; 929 | position: fixed; 930 | top: 0; 931 | width: 100vw; 932 | } 933 | 934 | .primary-menu { 935 | background-color: transparent; 936 | display: flex; 937 | list-style: none; 938 | margin: 0; 939 | overflow-y: unset; 940 | padding: 0; 941 | text-align: center; 942 | transition: none; 943 | width: auto; 944 | } 945 | 946 | .primary-menu__item { 947 | margin: 0 1rem 0 0; 948 | padding: 0; 949 | position: relative; 950 | } 951 | 952 | .primary-menu__item:after { 953 | background: none; 954 | background-color: var(--white); 955 | content: ""; 956 | display: block; 957 | height: 2px; 958 | margin: 0 auto; 959 | transition: width 0.5s ease; 960 | width: 0; 961 | } 962 | 963 | .primary-menu__item:hover:after { 964 | width: 100%; 965 | } 966 | 967 | .primary-menu__item:last-child:after { 968 | display: block; 969 | } 970 | 971 | .primary-menu__item a { 972 | color: var(--white); 973 | font-size: 1rem; 974 | } 975 | 976 | 977 | /****************************************************************** 978 | 15.1.4. MAIN CONTENT LAYOUT STYLES 979 | ******************************************************************/ 980 | 981 | main { 982 | margin: 0; 983 | } 984 | 985 | .post-preview__header, 986 | .post-preview__content, 987 | .post-preview__footer { 988 | max-width: 69ch; 989 | } 990 | 991 | 992 | /****************************************************************** 993 | 15.1.5. SINGLE POST STYLES 994 | ******************************************************************/ 995 | 996 | .single-post main { 997 | align-self: start; 998 | } 999 | 1000 | .single-post .post__header { 1001 | display: flex; 1002 | flex-flow: column; 1003 | margin: 0 0 1rem 0; 1004 | position: relative; 1005 | } 1006 | 1007 | .single-post .post__title { 1008 | margin: 1rem 0; 1009 | order: 1; 1010 | } 1011 | 1012 | .single-post .post__date { 1013 | order: 0; 1014 | } 1015 | 1016 | .single-post .post__date { 1017 | font-size: var(--size-500); 1018 | margin: 0; 1019 | } 1020 | 1021 | .single-post .post__header, 1022 | .single-post .post__content, 1023 | .single-post .post__footer { 1024 | max-width: 69ch; 1025 | } 1026 | 1027 | 1028 | /****************************************************************** 1029 | 15.1.6. PAGE STYLES 1030 | ******************************************************************/ 1031 | 1032 | .page main { 1033 | align-self: start; 1034 | } 1035 | 1036 | .page__content { 1037 | max-width: 69ch; 1038 | } 1039 | 1040 | .page__content h1:after { 1041 | margin: 0.5rem 0 0 0; 1042 | } 1043 | 1044 | 1045 | /****************************************************************** 1046 | 15.1.7. SIDEBAR STYLES 1047 | ******************************************************************/ 1048 | 1049 | .site-sidebar { 1050 | flex-flow: row; 1051 | flex-wrap: wrap; 1052 | padding: 6vw; 1053 | } 1054 | 1055 | .site-sidebar__section { 1056 | padding: 0 0 0 1.5rem; 1057 | width: 50%; 1058 | } 1059 | 1060 | .site-sidebar__section:nth-child(odd) { 1061 | padding: 0 1.5rem 0 0; 1062 | } 1063 | 1064 | .site-sidebar__section li { 1065 | margin-right: 3rem; 1066 | } 1067 | 1068 | .site-sidebar__section li:first-child { 1069 | margin-top: 0; 1070 | } 1071 | 1072 | 1073 | /****************************************************************** 1074 | 15.1.8. Z-INDEXES 1075 | ******************************************************************/ 1076 | 1077 | .header__nav { 1078 | z-index: 3; 1079 | } 1080 | } 1081 | /* End of 768px Media Query */ 1082 | 1083 | 1084 | /* 15.2. Styles for 1024px and larger screen sizes */ 1085 | @media only screen and (min-width: 1024px) { 1086 | 1087 | /****************************************************************** 1088 | 15.2.1. TYPOGRAPHY 1089 | ******************************************************************/ 1090 | 1091 | pre { 1092 | max-width: 69ch; 1093 | } 1094 | 1095 | 1096 | /****************************************************************** 1097 | 15.2.2. MAIN LAYOUT STYLES 1098 | ******************************************************************/ 1099 | 1100 | body { 1101 | display: grid; 1102 | grid-template-columns: 3fr 320px; 1103 | grid-template-areas: 1104 | "header header" 1105 | "main sidebar" 1106 | "pagenavi ..." 1107 | "footer footer"; 1108 | } 1109 | 1110 | .site-header { 1111 | grid-area: header; 1112 | } 1113 | 1114 | main { 1115 | grid-area: main; 1116 | margin: 0; 1117 | } 1118 | 1119 | .site-sidebar { 1120 | grid-area: sidebar; 1121 | } 1122 | 1123 | .site-footer { 1124 | grid-area: footer; 1125 | } 1126 | 1127 | 1128 | /****************************************************************** 1129 | 15.2.3. MAIN CONTENT LAYOUT STYLES 1130 | ******************************************************************/ 1131 | 1132 | .post-preview { 1133 | position: relative; 1134 | } 1135 | 1136 | .post-preview:nth-child(odd):after { 1137 | background-color: #dddddd; 1138 | bottom: 0; 1139 | content: ""; 1140 | display: block; 1141 | position: absolute; 1142 | right: -320px; 1143 | top: 0; 1144 | width: 320px; 1145 | } 1146 | 1147 | .post-preview:nth-child(even):after { 1148 | background: 1149 | radial-gradient(var(--light-green) 3px, transparent 5px, var(--light-green) 7px, transparent 9px, var(--light-green) 11px, transparent 13px, var(--light-green) 15px, transparent 17px, var(--light-green) 19px, transparent 21px, var(--light-green) 23px, transparent 25px, var(--light-green) 27px, transparent 29px, var(--light-green) 31px, transparent 33px); 1150 | background-color: var(--green); 1151 | background-size: 30px 30px; 1152 | bottom: 0; 1153 | content: ""; 1154 | display: block; 1155 | position: absolute; 1156 | right: -320px; 1157 | top: 0; 1158 | width: 320px; 1159 | } 1160 | 1161 | 1162 | /****************************************************************** 1163 | 15.2.4. SINGLE POST STYLES 1164 | ******************************************************************/ 1165 | 1166 | .single-post main { 1167 | margin: 0; 1168 | padding: 4rem; 1169 | } 1170 | 1171 | 1172 | /****************************************************************** 1173 | 15.2.5. PAGE STYLES 1174 | ******************************************************************/ 1175 | 1176 | .page main { 1177 | margin: 0; 1178 | padding: 4rem; 1179 | } 1180 | 1181 | .page__content { 1182 | padding: 1.5rem; 1183 | } 1184 | 1185 | /****************************************************************** 1186 | 15.2.6. SIDEBAR STYLES 1187 | ******************************************************************/ 1188 | 1189 | .site-sidebar { 1190 | flex-flow: column; 1191 | margin: 0; 1192 | padding: 2rem; 1193 | position: relative; 1194 | } 1195 | 1196 | .site-sidebar__section { 1197 | padding: 0; 1198 | width: auto; 1199 | } 1200 | 1201 | .site-sidebar__section:nth-child(odd) { 1202 | padding: 0; 1203 | } 1204 | 1205 | 1206 | /****************************************************************** 1207 | 15.2.7. Z-INDEXES 1208 | ******************************************************************/ 1209 | 1210 | .post-preview { 1211 | z-index: 1; 1212 | } 1213 | 1214 | .site-sidebar { 1215 | z-index: 2; 1216 | } 1217 | 1218 | } 1219 | /* End of 1024px Media Query */ -------------------------------------------------------------------------------- /public/style/demo3.css: -------------------------------------------------------------------------------- 1 | /* 2 | Demo: Kaamos Astro - Demo #3 3 | Demo site: https://www.kalervoraitanen.com/demo3 4 | Author: Kalervo Raitanen 5 | Author site: http://www.kalervoraitanen.com 6 | Description: Minimalist blogging theme for Kaamos Astro Starter Blog. 7 | License: WTFPL License. 8 | License URI: http://sam.zoy.org/wtfpl/ 9 | */ 10 | 11 | 12 | /*-------------------------------------------------------------- 13 | >>> TABLE OF CONTENTS: 14 | ---------------------------------------------------------------- 15 | # 1. VARIABLES 16 | # 2. GENERAL STYLES 17 | # 3. TYPOGRAPHY 18 | # 3.1. Font settings 19 | # 3.2. Font styles 20 | # 3.3. Link styles 21 | # 3.4. Paragraph styles 22 | # 3.5. Header styles 23 | # 3.6. Table styles 24 | # 3.7. Definition list styles 25 | # 3.8. UL and OL styles 26 | # 3.9. Other typographic styles 27 | # 4. MAIN HEADER STYLES 28 | # 5. NAVIGATION STYLES 29 | # 6. MAIN CONTENT LAYOUT STYLES 30 | # 7. SINGLE POST STYLES 31 | # 8. PAGE STYLES 32 | # 9. SIDEBAR STYLES 33 | # 10. FOOTER STYLES 34 | # 11. BUTTONS 35 | # 12. MEDIA QUERIES 36 | # 12.1. Styles for 768px and larger screen sizes 37 | # 12.1.1. TYPOGRAPHY 38 | # 12.1.2. MAIN HEADER STYLES 39 | # 12.1.3. NAVIGATION STYLES 40 | # 12.1.4. MAIN CONTENT LAYOUT STYLES 41 | # 12.1.5. SINGLE POST STYLES 42 | # 12.1.6. PAGE STYLES 43 | # 12.1.7. SIDEBAR STYLES 44 | # 12.2. Styles for 1024px and larger screen sizes 45 | # 12.2.1. TYPOGRAPHY 46 | # 12.2.2. MAIN LAYOUT STYLES 47 | # 12.2.3. MAIN HEADER STYLES 48 | # 12.2.4. SIDEBAR STYLES 49 | --------------------------------------------------------------*/ 50 | 51 | 52 | /****************************************************************** 53 | 1. VARIABLES 54 | ******************************************************************/ 55 | 56 | :root { 57 | /* Colors */ 58 | --white: #eeeeee; 59 | --black: #222222; 60 | --gray: #555555; 61 | --light-gray: #cccccc; 62 | --orange: #fc6f38; 63 | --dark-orange: #ff5410; 64 | --dark-blue: #17102b; 65 | --sidebar_bgcolor: #d3d3d3; 66 | } 67 | 68 | 69 | /****************************************************************** 70 | 2. GENERAL STYLES 71 | ******************************************************************/ 72 | 73 | html { 74 | background: var(--black); 75 | background: linear-gradient(135deg, var(--black) 0%,#1e3b51 100%); 76 | } 77 | 78 | /* For Google Chrome */ 79 | html::-webkit-scrollbar { 80 | width: 10px; 81 | height: 10px; 82 | } 83 | 84 | html::-webkit-scrollbar-thumb { 85 | background: var(--dark-orange); 86 | } 87 | 88 | html::-webkit-scrollbar-track { 89 | background: var(--white); 90 | } 91 | 92 | body { 93 | position: relative; 94 | } 95 | 96 | 97 | /****************************************************************** 98 | 3. TYPOGRAPHY 99 | ******************************************************************/ 100 | 101 | /* # 3.1. Font settings */ 102 | 103 | /* Fluid typography sizes */ 104 | :root { 105 | --size-300: clamp(0.7rem, 0.8rem + 0.2vw, 0.9rem); 106 | --size-400: clamp(0.9rem, 0.9rem + 0.24vw, 1rem); 107 | --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem); 108 | --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem); 109 | --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); 110 | --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem); 111 | --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem); 112 | --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem); 113 | 114 | /* Fonts */ 115 | --font-heading: Georgia, serif; 116 | --font-main: Georgia, serif; 117 | --font-button: 'Arial Black', sans-serif; 118 | } 119 | 120 | 121 | /* # 3.2. Font styles */ 122 | body { 123 | color: var(--white); 124 | font-family: var(--font-main); 125 | font-size: 100%; 126 | font-weight: 300; 127 | line-height: 1; 128 | } 129 | 130 | .site-header__desc { 131 | font-size: var(--size-600); 132 | } 133 | 134 | .pagination { 135 | font-size: var(--size-500); 136 | } 137 | 138 | .site-sidebar__heading { 139 | font-family: var(--font-main); 140 | font-size: var(--size-600); 141 | } 142 | 143 | .site-sidebar .archives summary { 144 | font-size: var(--size-500); 145 | font-weight: 700; 146 | } 147 | 148 | .site-sidebar__archives__post-date { 149 | font-size: var(--size-300); 150 | } 151 | 152 | .header__nav a { 153 | font-family: var(--font-button); 154 | font-size: var(--size-600); 155 | } 156 | 157 | .post-preview .post__date{ 158 | font-size: var(--size-300); 159 | font-weight: 700; 160 | } 161 | 162 | 163 | /* 3.3. Link styles */ 164 | a { 165 | color: var(--orange); 166 | font-weight: 700; 167 | text-decoration: underline; 168 | } 169 | 170 | 171 | /* 3.4. Paragraph styles */ 172 | p:first-child { 173 | margin-top: 0; 174 | } 175 | 176 | p, 177 | textarea, 178 | figcaption { 179 | font-size: var(--size-400); 180 | line-height: 1.8; 181 | } 182 | 183 | h1 + p, 184 | h2 + p, 185 | h3 + p, 186 | h4 + p, 187 | h5 + p, 188 | h6 + p { 189 | margin-top: 0; 190 | } 191 | 192 | 193 | /* # 3.5. Header styles */ 194 | h1, 195 | h2, 196 | h3, 197 | h4, 198 | h5, 199 | h6 { 200 | font-family: var(--font-heading); 201 | font-weight: 700; 202 | line-height: 1; 203 | margin: 0; 204 | max-width: 100%; 205 | } 206 | 207 | h1:first-child, 208 | h2:first-child, 209 | h3:first-child, 210 | h4:first-child, 211 | h5:first-child, 212 | h6:first-child { 213 | padding-top: 0; 214 | } 215 | 216 | h1 { 217 | font-size: var(--size-800); 218 | padding: 0.8em 0 0.6em 0; 219 | } 220 | 221 | h2 { 222 | font-size: var(--size-700); 223 | padding: 1em 0 0.6em 0; 224 | } 225 | 226 | h3 { 227 | font-size: var(--size-600); 228 | padding: 1em 0 0.6em 0; 229 | } 230 | 231 | h4 { 232 | font-size: var(--size-500); 233 | padding: 1em 0 0.6em 0; 234 | } 235 | 236 | h5 { 237 | font-size: var(--size-500); 238 | padding: 1em 0 0.6em 0; 239 | } 240 | 241 | h6 { 242 | font-size: var(--size-400); 243 | padding: 1em 0 0.6em 0; 244 | } 245 | 246 | 247 | /* # 3.6. Table styles */ 248 | table { 249 | border-collapse: collapse; 250 | } 251 | 252 | table tr { 253 | border-bottom: 1px solid var(--light-gray); 254 | } 255 | 256 | table tr:first-child { 257 | border-top: 1px solid var(--light-gray); 258 | } 259 | 260 | table th, 261 | table td { 262 | border-left: 1px solid var(--light-gray); 263 | border-right: 1px solid var(--light-gray); 264 | padding: 0.5em; 265 | } 266 | 267 | 268 | /* # 3.7. Definition list styles */ 269 | dl { 270 | line-height: 1.8; 271 | } 272 | 273 | dt { 274 | font-weight: 700; 275 | } 276 | 277 | dd { 278 | margin: 0.25em 0 1em 1em; 279 | } 280 | 281 | 282 | /* # 3.8. UL and OL styles */ 283 | ul, 284 | ol { 285 | line-height: 1.5; 286 | list-style-position: inside; 287 | margin: 1em 0; 288 | } 289 | 290 | li { 291 | margin: 0 0 0.5em 0; 292 | } 293 | 294 | li:last-child { 295 | margin: 0; 296 | } 297 | 298 | 299 | /* # 3.9. Other typographic styles */ 300 | hr { 301 | color: var(--gray); 302 | } 303 | 304 | dfn, 305 | cite, 306 | em, 307 | i { 308 | font-style: italic; 309 | } 310 | 311 | blockquote { 312 | background: var(--light-gray); 313 | border-left: 6px solid var(--gray); 314 | color: var(--black); 315 | font-style: italic; 316 | margin: 0; 317 | overflow: hidden; 318 | quotes: "" ""; 319 | padding: 1em 1em 1em 2em; 320 | } 321 | 322 | blockquote cite { 323 | display: block; 324 | font-weight: 700; 325 | margin-top: 0.5em; 326 | } 327 | 328 | blockquote:before, 329 | blockquote:after { 330 | content: ""; 331 | } 332 | 333 | address { 334 | margin: 0 0 1.5em; 335 | } 336 | 337 | pre { 338 | margin: 1em 0; 339 | max-width: 300px; 340 | overflow: auto; 341 | padding: 0 0 0 1em; 342 | } 343 | 344 | code, 345 | kbd, 346 | tt, 347 | var { 348 | font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 349 | } 350 | 351 | code { 352 | background: #1b1b1b; 353 | color: var(--white); 354 | display: block; 355 | margin: 1em 0; 356 | padding: 0.5em 1em; 357 | } 358 | 359 | abbr, 360 | acronym { 361 | border-bottom: 1px dotted var(--gray); 362 | cursor: help; 363 | } 364 | 365 | mark, 366 | ins { 367 | text-decoration: none; 368 | } 369 | 370 | big { 371 | font-size: 125%; 372 | } 373 | 374 | q { 375 | quotes: "“" "”" "‘" " 376 | } 377 | 378 | 379 | /****************************************************************** 380 | 4. MAIN HEADER STYLES 381 | ******************************************************************/ 382 | 383 | .site-header { 384 | background: var(--black); 385 | display: grid; 386 | grid-template-columns: 50vw 1fr; 387 | grid-template-areas: 388 | "title nav-btn"; 389 | padding: 1rem 4vw; 390 | } 391 | 392 | 393 | .site-header__desc { 394 | color: var(--white); 395 | font-size: 2.5rem; 396 | font-style: italic; 397 | left: 6vw; 398 | line-height: 1; 399 | margin: 0; 400 | position: absolute; 401 | top: 25vh; 402 | } 403 | 404 | .single-post .site-header__desc, 405 | .page .site-header__desc { 406 | display: none; 407 | } 408 | 409 | .nav-btn-wrap { 410 | align-items: center; 411 | display: flex; 412 | grid-area: nav-btn; 413 | justify-content: flex-end; 414 | } 415 | 416 | 417 | /****************************************************************** 418 | 5. NAVIGATION STYLES 419 | ******************************************************************/ 420 | 421 | .header__nav { 422 | display: none; 423 | } 424 | 425 | .header__nav.active { 426 | align-items: center; 427 | background: rgba(0,0,0,0.9); 428 | bottom: 0; 429 | display: grid; 430 | justify-content: center; 431 | left: 0; 432 | overflow-y: scroll; 433 | padding: 2rem 0; 434 | position: fixed; 435 | right: 0; 436 | top: 0; 437 | z-index: 100; 438 | } 439 | 440 | .primary-menu { 441 | list-style-type: none; 442 | padding: 0; 443 | width: 70vw; 444 | } 445 | 446 | .primary-menu__item { 447 | position: relative; 448 | padding: 0 0 4px 0; 449 | } 450 | 451 | .primary-menu__item:after { 452 | content: ""; 453 | display: block; 454 | width: 100%; 455 | height: 1px; 456 | background: var(--light-gray); 457 | } 458 | 459 | .primary-menu__item:last-child:after { 460 | display: none; 461 | } 462 | 463 | .primary-menu__item a { 464 | color: var(--white); 465 | text-decoration: none; 466 | text-transform: uppercase; 467 | } 468 | 469 | 470 | /****************************************************************** 471 | 6. MAIN CONTENT LAYOUT STYLES 472 | ******************************************************************/ 473 | 474 | main { 475 | margin: 50vh 4vw 0 4vw; 476 | } 477 | 478 | .post-preview { 479 | display: flex; 480 | flex-flow: column; 481 | padding: 1.5rem; 482 | } 483 | 484 | .post-preview__header { 485 | display: flex; 486 | flex-flow: column; 487 | } 488 | 489 | .post-preview .post__title { 490 | margin: 0; 491 | line-height: 1; 492 | padding: 0 0 0.6rem 0; 493 | order: 1; 494 | } 495 | 496 | .post__feature-img { 497 | margin: 2rem 0; 498 | order: 2; 499 | } 500 | 501 | .post-preview .post__date { 502 | margin: 0 0 1rem 0; 503 | order: 0; 504 | } 505 | 506 | .post-preview a { 507 | color: var(--white); 508 | } 509 | 510 | .post-preview:nth-child(odd) { 511 | background: var(--dark-blue); 512 | color: var(--white); 513 | } 514 | 515 | .post-preview:nth-child(odd) a { 516 | color: var(--white); 517 | } 518 | 519 | .post-preview:nth-child(even) { 520 | background: var(--orange); 521 | color: var(--black); 522 | } 523 | 524 | .post-preview:nth-child(even) a { 525 | color: var(--black); 526 | } 527 | 528 | .post-preview__footer { 529 | margin: auto 0 0 0; 530 | } 531 | 532 | .post__footer-categories { 533 | display: flex; 534 | flex-wrap: wrap; 535 | list-style-type: none; 536 | margin: 0; 537 | padding: 0; 538 | } 539 | 540 | .post__footer-categories li { 541 | margin: 0 1rem 0 0; 542 | } 543 | 544 | .post__footer-categories a { 545 | padding: 0 0 0 1rem; 546 | position: relative; 547 | } 548 | 549 | .post__footer-categories a:before { 550 | content: "#"; 551 | left: 0; 552 | position: absolute; 553 | } 554 | 555 | 556 | /****************************************************************** 557 | 7. SINGLE POST STYLES 558 | ******************************************************************/ 559 | 560 | .single-post main { 561 | background-color: var(--dark-blue); 562 | margin: 4rem 4vw; 563 | } 564 | 565 | .post { 566 | padding: 2rem; 567 | } 568 | 569 | .post .post__header { 570 | position: relative; 571 | } 572 | 573 | .post .post__date { 574 | background-color: var(--black); 575 | border: 4px solid var(--dark-blue); 576 | left: -3rem; 577 | margin: 0; 578 | padding: 0.5rem 1rem; 579 | position: absolute; 580 | top: 0; 581 | } 582 | 583 | .post .post__title { 584 | padding: 4rem 0 0.3rem 0; 585 | margin: 0 0 1rem 0; 586 | } 587 | 588 | .post .post__title:after { 589 | background: var(--gray); 590 | background: linear-gradient(to right, var(--gray) 0%, transparent 100%); 591 | content: ""; 592 | display: block; 593 | height: 1px; 594 | margin: 0.75rem 0 0 0; 595 | width: 100%; 596 | } 597 | 598 | .post .post__footer { 599 | margin: 2rem 0 0 0; 600 | } 601 | 602 | 603 | /****************************************************************** 604 | 8. PAGE STYLES 605 | ******************************************************************/ 606 | 607 | .page main { 608 | background-color: var(--orange); 609 | color: var(--black); 610 | padding: 1.5rem 1rem; 611 | margin: 2rem 4vw; 612 | } 613 | 614 | .page__content a { 615 | color: var(--white); 616 | padding: 0 0 1rem 0; 617 | } 618 | 619 | .page__content h1:after { 620 | background: var(--gray); 621 | background: linear-gradient(to right, var(--gray) 0%, transparent 100%); 622 | content: ""; 623 | display: block; 624 | height: 1px; 625 | margin: 0.75rem 0 0 0; 626 | width: 100%; 627 | } 628 | 629 | 630 | /****************************************************************** 631 | 9. SIDEBAR STYLES 632 | ******************************************************************/ 633 | 634 | .site-sidebar { 635 | background-color: var(--sidebar_bgcolor); 636 | color: var(--black); 637 | display: flex; 638 | flex-flow: column; 639 | grid-area: sidebar; 640 | margin: 4rem 4vw; 641 | padding: 1rem; 642 | } 643 | 644 | .site-sidebar__section { 645 | padding: 0; 646 | margin: 0 0 3rem 0; 647 | max-width: 25rem; 648 | } 649 | 650 | .site-sidebar a { 651 | color: var(--black); 652 | } 653 | 654 | .site-sidebar ul { 655 | margin: 0; 656 | padding: 0; 657 | list-style-position: inside; 658 | list-style-type: disc; 659 | } 660 | 661 | .site-sidebar li { 662 | margin: 0 0 0.5rem 0; 663 | } 664 | 665 | .site-sidebar li:last-child { 666 | margin: 0; 667 | } 668 | 669 | .site-sidebar__heading { 670 | font-size: 1.5rem; 671 | margin: 0 0 0.25rem 0; 672 | padding: 0 0 0.25rem 0; 673 | } 674 | 675 | .site-sidebar__heading:after { 676 | background: var(--gray); 677 | background: linear-gradient(to right, var(--gray) 0%, transparent 100%); 678 | content: ""; 679 | display: block; 680 | height: 1px; 681 | margin: 6px 0 0 0; 682 | width: 100%; 683 | } 684 | 685 | .site-sidebar .archives details { 686 | margin: 0 0 0.5rem 0; 687 | } 688 | 689 | .site-sidebar .archives ul { 690 | margin: 0 0 0 1rem; 691 | } 692 | 693 | .site-sidebar__archives__post { 694 | margin: 0 0 0.5rem 0; 695 | } 696 | 697 | .site-sidebar__archives__post-date { 698 | display: block; 699 | padding: 0 0 0 1rem; 700 | } 701 | 702 | 703 | /****************************************************************** 704 | 10. FOOTER STYLES 705 | ******************************************************************/ 706 | 707 | .site-footer { 708 | background-color: var(--black); 709 | padding: 1em 4vw; 710 | } 711 | 712 | .site-footer p { 713 | color: var(--white); 714 | margin: 0; 715 | text-align: center; 716 | } 717 | 718 | 719 | /****************************************************************** 720 | 11. BUTTONS 721 | ******************************************************************/ 722 | 723 | /* Example button defaults */ 724 | button { 725 | background-color: var(--orange); 726 | border: none; 727 | border-radius: 0; 728 | color: var(--white); 729 | cursor: pointer; 730 | font-family: var(--font-button); 731 | letter-spacing: 1px; 732 | outline: 0; 733 | padding: 0.5em; 734 | position: relative; 735 | text-decoration: none; 736 | } 737 | 738 | 739 | /* Example button defaults */ 740 | .nav-button { 741 | background: none; 742 | border: none; 743 | border-radius: 0; 744 | color: var(--white); 745 | cursor: pointer; 746 | font-family: var(--font-button); 747 | letter-spacing: 1px; 748 | outline: 0; 749 | padding: 0; 750 | position: relative; 751 | text-transform: uppercase; 752 | top: 10px; 753 | z-index: 110; 754 | } 755 | 756 | .nav-button:before { 757 | background: var(--white); 758 | content: ""; 759 | display: block; 760 | height: 4px; 761 | left: 50%; 762 | margin: 0 0 0 -20px; 763 | position: absolute; 764 | top: -10px; 765 | transition: all .3s ease-out; 766 | width: 40px; 767 | } 768 | 769 | .nav-button:after { 770 | background: var(--white); 771 | content: ""; 772 | display: block; 773 | height: 4px; 774 | left: 50%; 775 | margin: 0 0 0 -20px; 776 | position: absolute; 777 | top: -20px; 778 | transition: all .3s ease-out; 779 | width: 40px; 780 | } 781 | 782 | .nav-button.close { 783 | color: red; 784 | } 785 | 786 | .nav-button.close:before { 787 | background: red; 788 | margin: 0 0 0 -13px; 789 | top: -15px; 790 | transform: rotate(45deg); 791 | width: 25px; 792 | } 793 | 794 | .nav-button.close:after { 795 | background: red; 796 | margin: 0 0 0 -13px; 797 | top: -15px; 798 | transform: rotate(-45deg); 799 | width: 25px; 800 | } 801 | 802 | 803 | /* Read More Button */ 804 | .read-more { 805 | background-color: var(--white) !important; 806 | border: none; 807 | box-sizing: border-box; 808 | color: var(--black) !important; 809 | cursor: pointer; 810 | display: inline-block; 811 | font-family: var(--font-button); 812 | margin: 0 0 1rem 0; 813 | outline: 0; 814 | padding: 0.5em; 815 | position: relative; 816 | text-decoration: none; 817 | transition: all 0.5s ease-out; 818 | } 819 | 820 | 821 | /****************************************************************** 822 | 12. MEDIA QUERIES 823 | ******************************************************************/ 824 | 825 | /* 12.1. Styles for 768px and larger screen sizes */ 826 | @media only screen and (min-width: 768px) { 827 | 828 | /****************************************************************** 829 | 12.1.1. TYPOGRAPHY 830 | ******************************************************************/ 831 | 832 | pre { 833 | max-width: 480px; 834 | } 835 | 836 | 837 | /****************************************************************** 838 | 12.1.2. MAIN HEADER STYLES 839 | ******************************************************************/ 840 | 841 | .site-header { 842 | align-items: center; 843 | display: grid; 844 | grid-template-columns: 1fr 3fr; 845 | grid-template-areas: 846 | "title nav"; 847 | padding: 1rem 4vw; 848 | } 849 | 850 | .site-header__desc { 851 | max-width: 50vw; 852 | } 853 | 854 | 855 | /****************************************************************** 856 | 12.1.3. NAVIGATION STYLES 857 | ******************************************************************/ 858 | 859 | .nav-button { 860 | display: none; 861 | } 862 | 863 | .header__nav { 864 | display: block; 865 | position: static; 866 | grid-area: nav; 867 | padding: 0 0 0 4rem; 868 | } 869 | 870 | .primary-menu { 871 | background-color: transparent; 872 | box-shadow: none; 873 | height: auto; 874 | list-style: none; 875 | margin: 0; 876 | overflow-y: unset; 877 | padding: 0; 878 | position: relative; 879 | text-align: center; 880 | transform: translateX(0); 881 | transition: none; 882 | width: 100%; 883 | } 884 | 885 | .primary-menu__item { 886 | display: inline-block; 887 | margin: 0 1rem 0 0; 888 | padding: 0; 889 | } 890 | 891 | .primary-menu__item:after { 892 | background: none; 893 | background-color: var(--white); 894 | content: ""; 895 | display: block; 896 | height: 2px; 897 | margin: 0 auto; 898 | transition: width 0.5s ease; 899 | width: 0; 900 | } 901 | 902 | .primary-menu__item:hover:after { 903 | width: 100%; 904 | } 905 | 906 | .header__nav a { 907 | font-size: 1rem; 908 | } 909 | 910 | 911 | /****************************************************************** 912 | 12.1.4. MAIN CONTENT LAYOUT STYLES 913 | ******************************************************************/ 914 | 915 | main { 916 | align-self: start; 917 | display: grid; 918 | grid-template-columns: 1fr 1fr; 919 | margin: 50vh 0 0 0; 920 | } 921 | 922 | .post-preview { 923 | background-color: var(--dark-blue); 924 | color: var(--white); 925 | padding: 4vw; 926 | } 927 | 928 | .post-preview__header, 929 | .post-preview__content, 930 | .post-preview__footer { 931 | max-width: 69ch; 932 | } 933 | 934 | .post-preview a { 935 | color: var(--white); 936 | } 937 | 938 | .post-preview:nth-child(odd), 939 | .post-preview:nth-child(odd) a, 940 | .post-preview:nth-child(even), 941 | .post-preview:nth-child(even) a { 942 | color: unset; 943 | } 944 | 945 | .post-preview:nth-child(even) { 946 | background-color: var(--dark-blue); 947 | color: var(--white); 948 | } 949 | 950 | .post-preview:nth-child(4n+2), 951 | .post-preview:nth-child(4n+3), 952 | .post-preview:nth-child(2), 953 | .post-preview:nth-child(3) { 954 | background-color: var(--orange); 955 | color: black; 956 | } 957 | 958 | .post-preview:nth-child(4n+2) a, 959 | .post-preview:nth-child(4n+3) a, 960 | .post-preview:nth-child(2) a, 961 | .post-preview:nth-child(3) a { 962 | background-color: var(--orange); 963 | color: black; 964 | } 965 | 966 | 967 | /****************************************************************** 968 | 12.1.5. SINGLE POST STYLES 969 | ******************************************************************/ 970 | 971 | .single-post main { 972 | display: block; 973 | margin: 2rem 4vw; 974 | } 975 | 976 | .post { 977 | max-width: 69ch; 978 | padding: 2rem; 979 | } 980 | 981 | 982 | /****************************************************************** 983 | 12.1.6. PAGE STYLES 984 | ******************************************************************/ 985 | 986 | .page main { 987 | display: block; 988 | margin: 2rem 4vw; 989 | } 990 | 991 | .page .page__content { 992 | max-width: 69ch; 993 | padding: 2rem; 994 | } 995 | 996 | 997 | /****************************************************************** 998 | 12.1.7. SIDEBAR STYLES 999 | ******************************************************************/ 1000 | 1001 | .site-sidebar { 1002 | flex-flow: row; 1003 | flex-wrap: wrap; 1004 | padding: 1rem; 1005 | } 1006 | 1007 | .site-sidebar__section { 1008 | padding: 0 0 0 1.5rem; 1009 | width: 50%; 1010 | } 1011 | 1012 | .site-sidebar__section li:first-child { 1013 | margin-top: 0; 1014 | } 1015 | 1016 | } 1017 | /* End of 768px Media Query */ 1018 | 1019 | 1020 | /* 16.2. Styles for 1024px and larger screen sizes */ 1021 | @media only screen and (min-width: 1024px) { 1022 | 1023 | /****************************************************************** 1024 | 12.2.1. TYPOGRAPHY 1025 | ******************************************************************/ 1026 | 1027 | pre { 1028 | max-width: 75ch; 1029 | } 1030 | 1031 | 1032 | /****************************************************************** 1033 | 12.2.2. MAIN LAYOUT STYLES 1034 | ******************************************************************/ 1035 | 1036 | body { 1037 | display: grid; 1038 | grid-template-columns: 1fr 320px; 1039 | grid-template-areas: 1040 | "header header" 1041 | "main sidebar" 1042 | "footer footer"; 1043 | } 1044 | 1045 | .site-header { 1046 | grid-area: header; 1047 | } 1048 | 1049 | main { 1050 | grid-area: main; 1051 | } 1052 | 1053 | .site-sidebar { 1054 | grid-area: sidebar; 1055 | } 1056 | 1057 | .site-footer { 1058 | grid-area: footer; 1059 | } 1060 | 1061 | 1062 | /****************************************************************** 1063 | 12.2.3. MAIN HEADER STYLES 1064 | ******************************************************************/ 1065 | 1066 | .site-header__desc { 1067 | max-width: 40vw; 1068 | left: 10vw; 1069 | } 1070 | 1071 | /****************************************************************** 1072 | 12.2.4. SIDEBAR STYLES 1073 | ******************************************************************/ 1074 | 1075 | .site-sidebar { 1076 | align-self: stretch; 1077 | flex-flow: column; 1078 | margin: 0; 1079 | padding: 4rem 2rem; 1080 | } 1081 | 1082 | .site-sidebar__section { 1083 | padding: 0; 1084 | width: auto; 1085 | } 1086 | 1087 | } 1088 | /* End of 1024px Media Query */ -------------------------------------------------------------------------------- /public/style/demo4.css: -------------------------------------------------------------------------------- 1 | /* 2 | Demo: Kaamos Astro - Demo #4 3 | Demo site: https://www.kalervoraitanen.com/demo4 4 | Author: Kalervo Raitanen 5 | Author site: http://www.kalervoraitanen.com 6 | Description: Fresh blogging theme for Kaamos Astro Starter Blog. 7 | License: WTFPL License. 8 | License URI: http://sam.zoy.org/wtfpl/ 9 | */ 10 | 11 | 12 | /*-------------------------------------------------------------- 13 | >>> TABLE OF CONTENTS: 14 | ---------------------------------------------------------------- 15 | # 1. VARIABLES 16 | # 2. GENERAL STYLES 17 | # 3. TYPOGRAPHY 18 | # 3.1. Font settings 19 | # 3.2. Font styles 20 | # 3.3. Paragraph styles 21 | # 3.4. Link styles 22 | # 3.5. Header styles 23 | # 3.6. Table styles 24 | # 3.7. Definiton list styles 25 | # 3.8. UL and OL styles 26 | # 3.9. Other typographic styles 27 | # 4. MAIN HEADER STYLES 28 | # 5. NAVIGATION STYLES 29 | # 6. MAIN CONTENT LAYOUT STYLES 30 | # 7. SINGLE POST STYLES 31 | # 8. PAGE STYLES 32 | # 9. SIDEBAR STYLES 33 | # 10. POST THUMBNAIL STYLES 34 | # 11. FOOTER STYLES 35 | # 12. BUTTONS 36 | # 13. MEDIA QUERIES 37 | # 13.1 Styles for 768px and larger screen sizes 38 | # 13.1.1. TYPOGRAPHY 39 | # 13.1.2. MAIN HEADER STYLES 40 | # 13.1.3. NAVIGATION STYLES 41 | # 13.1.4. MAIN CONTENT LAYOUT STYLES 42 | # 13.1.5. SINGLE POST STYLES 43 | # 13.1.6. PAGE STYLES 44 | # 13.1.7. SIDEBAR STYLES 45 | # 13.2. Styles for 1024px and larger screen sizes 46 | # 13.2.1. TYPOGRAPHY 47 | # 13.2.2. MAIN LAYOUT STYLES 48 | # 13.2.3. SIDEBAR STYLES 49 | --------------------------------------------------------------*/ 50 | 51 | 52 | /****************************************************************** 53 | 1. VARIABLES 54 | ******************************************************************/ 55 | 56 | :root { 57 | /* Colors */ 58 | --site_text_color: #222222; 59 | --site_bg_color: #eeeeee; 60 | --posts_bgcolor: #faecc9; 61 | --sidebar_bgcolor: #D2E4D8; 62 | --footer_bgcolor: #CB7E54; 63 | --button_bgcolor: #344F59; 64 | --button_color: #eeeeee; 65 | --link_color: #344F59; 66 | --gray: #555555; 67 | --light-gray: #cccccc; 68 | } 69 | 70 | 71 | /****************************************************************** 72 | 2. GENERAL STYLES 73 | ******************************************************************/ 74 | 75 | html { 76 | background-color: var(--site_bg_color); 77 | } 78 | 79 | html::-webkit-scrollbar { 80 | width: 10px; 81 | height: 10px; 82 | } 83 | 84 | html::-webkit-scrollbar-thumb { 85 | background: var(--footer_bgcolor); 86 | } 87 | 88 | html::-webkit-scrollbar-track { 89 | background: var(--white); 90 | } 91 | 92 | 93 | /****************************************************************** 94 | 3. TYPOGRAPHY 95 | ******************************************************************/ 96 | 97 | /* # 3.1. Font settings */ 98 | 99 | /* Fluid typography sizes */ 100 | :root { 101 | --size-300: clamp(0.7rem, 0.8rem + 0.2vw, 0.9rem); 102 | --size-400: clamp(0.9rem, 0.9rem + 0.24vw, 1rem); 103 | --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem); 104 | --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem); 105 | --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); 106 | --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem); 107 | --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem); 108 | --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem); 109 | 110 | /* Fonts */ 111 | --font-main: Georgia, serif; 112 | --font-heading: "Playball", Georgia, serif; 113 | --font-button: "Arimo", Helvetica, Arial, sans-serif; 114 | } 115 | 116 | 117 | /* # 3.2. Font styles */ 118 | body { 119 | color: var(--site_text_color); 120 | font-family: var(--font-main); 121 | font-size: 100%; 122 | } 123 | 124 | 125 | /* 3.3. Paragraph styles */ 126 | p, 127 | textarea, 128 | figcaption { 129 | font-size: var(--size-400); 130 | line-height: 1.5; 131 | } 132 | 133 | h1 + p, 134 | h2 + p, 135 | h3 + p, 136 | h4 + p, 137 | h5 + p, 138 | h6 + p { 139 | margin-top: 0; 140 | } 141 | 142 | 143 | /* 3.4. Link styles */ 144 | a { 145 | color: var(--link_color); 146 | } 147 | 148 | 149 | /* # 3.5. Header styles */ 150 | h1, 151 | h2, 152 | h3, 153 | h4, 154 | h5, 155 | h6 { 156 | font-family: var(--font-heading); 157 | line-height: 1; 158 | margin: 0; 159 | max-width: 100%; 160 | } 161 | 162 | h1:first-child, 163 | h2:first-child, 164 | h3:first-child, 165 | h4:first-child, 166 | h5:first-child, 167 | h6:first-child { 168 | padding-top: 0; 169 | } 170 | 171 | h1 { 172 | font-size: var(--size-800); 173 | padding: 0.8em 0 0.6em 0; 174 | } 175 | 176 | h2 { 177 | font-size: var(--size-700); 178 | padding: 1em 0 0.6em 0; 179 | } 180 | 181 | h3 { 182 | font-size: var(--size-600); 183 | padding: 1em 0 0.6em 0; 184 | } 185 | 186 | h4 { 187 | font-size: var(--size-500); 188 | padding: 1em 0 0.6em 0; 189 | } 190 | 191 | h5 { 192 | font-size: var(--size-500); 193 | padding: 1em 0 0.6em 0; 194 | } 195 | 196 | h6 { 197 | font-size: var(--size-400); 198 | padding: 1em 0 0.6em 0; 199 | } 200 | 201 | 202 | /* 3.6. Table styles */ 203 | table { 204 | border-collapse: collapse; 205 | } 206 | 207 | table tr { 208 | border-bottom: 1px solid var(--light-gray); 209 | } 210 | 211 | table tr:first-child { 212 | border-top: 1px solid var(--light-gray); 213 | } 214 | 215 | table th, 216 | table td { 217 | padding: 0.5rem; 218 | border-left: 1px solid var(--light-gray); 219 | border-right: 1px solid var(--light-gray); 220 | } 221 | 222 | 223 | /* 3.7. Definiton list styles */ 224 | dl { 225 | line-height: 1.8; 226 | } 227 | 228 | dt { 229 | font-weight: bold; 230 | } 231 | 232 | dd { 233 | margin: 0.25rem 0 1rem 1rem; 234 | } 235 | 236 | 237 | /* 3.8. UL and OL styles */ 238 | ul, 239 | ol { 240 | line-height: 1.5; 241 | list-style-position: inside; 242 | margin: 1rem 0; 243 | } 244 | 245 | li { 246 | margin: 0 0 0.5rem 0; 247 | } 248 | 249 | li:last-child { 250 | margin: 0; 251 | } 252 | 253 | ul, 254 | ol { 255 | margin: 0.5rem 0 0 1rem; 256 | } 257 | 258 | 259 | /* 3.9. Other typographic styles */ 260 | hr { 261 | color: var(--gray); 262 | } 263 | 264 | dfn, 265 | cite, 266 | em, 267 | i { 268 | font-style: italic; 269 | } 270 | 271 | blockquote { 272 | background: var(--light-gray); 273 | border-left: 6px solid var(--footer_bgcolor); 274 | font-style: italic; 275 | margin: 0; 276 | overflow: hidden; 277 | quotes: "" ""; 278 | padding: 1rem 1rem 1rem 2rem; 279 | } 280 | 281 | blockquote cite { 282 | display: block; 283 | font-weight: bold; 284 | margin-top: 0.5rem; 285 | } 286 | 287 | blockquote:before, 288 | blockquote:after { 289 | content: ""; 290 | } 291 | 292 | address { 293 | margin: 0 0 1.5rem; 294 | } 295 | 296 | pre { 297 | margin: 1rem 0; 298 | max-width: 300px; 299 | overflow: auto; 300 | padding: 0 0 0 1rem; 301 | } 302 | 303 | code, 304 | kbd, 305 | tt, 306 | var { 307 | font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 308 | } 309 | 310 | code { 311 | background: #1b1b1b; 312 | color: var(--site_bg_color); 313 | display: block; 314 | margin: 1rem 0; 315 | padding: 0.5rem 1rem; 316 | } 317 | 318 | abbr, 319 | acronym { 320 | border-bottom: 1px dotted var(--gray); 321 | cursor: help; 322 | } 323 | 324 | mark, 325 | ins { 326 | text-decoration: none; 327 | } 328 | 329 | big { 330 | font-size: 125%; 331 | } 332 | 333 | q { 334 | quotes: "“" "”" "‘" "’"; 335 | } 336 | 337 | 338 | /****************************************************************** 339 | 4. MAIN HEADER STYLES 340 | ******************************************************************/ 341 | 342 | .site-header { 343 | box-shadow: 1px 1px 8px rgba(0,0,0,0.5); 344 | display: grid; 345 | grid-template-columns: 6fr 2fr; 346 | grid-template-areas: 347 | "title nav-btn" 348 | "desc ...."; 349 | padding: 1rem 3vw; 350 | } 351 | 352 | .site-title { 353 | grid-area: title; 354 | margin: 0; 355 | padding: 0; 356 | line-height: 1; 357 | } 358 | 359 | .site-header__logo-img { 360 | background: #111111; 361 | height: 48px; 362 | margin: 16px 0; 363 | padding: 8px; 364 | position: relative; 365 | text-align: center; 366 | width: auto; 367 | } 368 | 369 | .site-header__desc { 370 | align-items: center; 371 | color: var(--gray); 372 | display: flex; 373 | font-style: italic; 374 | font-weight: 700; 375 | grid-area: desc; 376 | line-height: 1; 377 | margin: 0; 378 | } 379 | 380 | .nav-btn-wrap { 381 | align-items: center; 382 | display: flex; 383 | grid-area: nav-btn; 384 | justify-content: flex-end; 385 | } 386 | 387 | 388 | /****************************************************************** 389 | 5. NAVIGATION STYLES 390 | ******************************************************************/ 391 | 392 | .header__nav { 393 | transition: all 1s ease; 394 | } 395 | 396 | #primary-menu-list { 397 | background-color: var(--site_bg_color); 398 | box-shadow: 1px 1px 8px rgba(0,0,0,0.5); 399 | display: block; 400 | height: 100vh; 401 | left: 0; 402 | list-style-type: none; 403 | margin: 0; 404 | overflow-y: scroll; 405 | padding: 4rem 2rem 2rem 1rem; 406 | position: fixed; 407 | top: 0; 408 | transform: translateX(-60vw); 409 | transition: all 0.5s ease; 410 | width: 60vw; 411 | z-index: 30; 412 | } 413 | 414 | .header__nav.active #primary-menu-list { 415 | transform: translateX(0); 416 | } 417 | 418 | .primary-menu__item { 419 | margin: 0 0 0.5rem 0; 420 | padding: 0 0 0.5rem 0; 421 | } 422 | 423 | .primary-menu__item:last-child { 424 | margin: 0; 425 | } 426 | 427 | .primary-menu__item:after { 428 | background: var(--gray); 429 | background: linear-gradient(to right, var(--gray) 0%, transparent 100%); 430 | content: ""; 431 | display: block; 432 | height: 1px; 433 | margin: 6px 0 0 0; 434 | width: 100%; 435 | } 436 | 437 | .header__nav a { 438 | color: var(--site_text_color); 439 | font-family: var(--font-button); 440 | text-decoration: none; 441 | text-transform: uppercase; 442 | } 443 | 444 | 445 | /****************************************************************** 446 | 6. MAIN CONTENT LAYOUT STYLES 447 | ******************************************************************/ 448 | 449 | main { 450 | margin: 2rem 3vw; 451 | } 452 | 453 | .post-preview { 454 | background-color: var(--posts_bgcolor); 455 | border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; 456 | margin: 0 0 2rem 0; 457 | padding: 1.5rem; 458 | } 459 | 460 | .post-preview .post__title { 461 | font-size: 2.5rem; 462 | margin: 0; 463 | padding: 0; 464 | line-height: 1; 465 | } 466 | 467 | .post-preview .post__date { 468 | font-size: var(--size-300); 469 | font-weight: 700; 470 | margin: 0.5rem 0 0 0; 471 | } 472 | 473 | .post-preview__footer { 474 | margin: 2rem 0 0 0; 475 | } 476 | 477 | .post__footer-categories { 478 | display: flex; 479 | flex-wrap: wrap; 480 | list-style-type: none; 481 | margin: 0; 482 | padding: 0; 483 | } 484 | 485 | .post__footer-categories li { 486 | margin: 0 1rem 0 0; 487 | } 488 | 489 | .post__footer-categories a { 490 | padding: 0 0 0 1rem; 491 | position: relative; 492 | } 493 | 494 | .post__footer-categories a:before { 495 | content: "#"; 496 | left: 0; 497 | position: absolute; 498 | } 499 | 500 | 501 | /****************************************************************** 502 | 7. SINGLE POST STYLES 503 | ******************************************************************/ 504 | 505 | .single-post main { 506 | align-self: start; 507 | background-color: var(--posts_bgcolor); 508 | border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; 509 | padding: 1.5rem 1rem; 510 | margin: 2rem 3vw; 511 | } 512 | 513 | .post { 514 | padding: 0 0 1rem 0; 515 | position: relative; 516 | } 517 | 518 | .post .post__date { 519 | background-color: var(--footer_bgcolor); 520 | font-weight: 700; 521 | left: -1.5rem; 522 | margin: 0; 523 | padding: 0.5rem 1rem; 524 | position: absolute; 525 | top: 0; 526 | } 527 | 528 | .post .post__title { 529 | padding: 3rem 0 0.3rem 0; 530 | margin: 0 0 1rem 0; 531 | } 532 | 533 | .post .post__title:after { 534 | background: var(--gray); 535 | background: linear-gradient(to right, var(--gray) 0%, var(--site_bg_color) 100%); 536 | content: ""; 537 | display: block; 538 | height: 1px; 539 | width: 100%; 540 | } 541 | 542 | .post .post__footer { 543 | margin: 2rem 0 0 0; 544 | } 545 | 546 | 547 | /****************************************************************** 548 | 8. PAGE STYLES 549 | ******************************************************************/ 550 | 551 | .page main { 552 | align-self: start; 553 | background-color: var(--posts_bgcolor); 554 | border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; 555 | padding: 1.5rem 1rem; 556 | margin: 2rem 3vw; 557 | } 558 | 559 | .page__content { 560 | padding: 0 0 1rem 0; 561 | } 562 | 563 | .page__content h1:after { 564 | background: var(--gray); 565 | background: linear-gradient(to right, var(--gray) 0%, var(--site_bg_color) 100%); 566 | content: ""; 567 | display: block; 568 | height: 1px; 569 | margin: 0.75rem 0 0 0; 570 | width: 100%; 571 | } 572 | 573 | 574 | /****************************************************************** 575 | 9. SIDEBAR STYLES 576 | ******************************************************************/ 577 | 578 | .site-sidebar { 579 | align-self: start; 580 | background-color: var(--sidebar_bgcolor); 581 | border-radius: 2px; 582 | color: var(--site_text_color); 583 | display: flex; 584 | flex-flow: column; 585 | grid-area: sidebar; 586 | margin: 0 16px 32px 16px; 587 | padding: 16px; 588 | } 589 | 590 | .site-sidebar__section { 591 | padding: 0; 592 | margin: 0 0 48px 0; 593 | max-width: 25rem; 594 | } 595 | 596 | .site-sidebar a { 597 | color: var(--site_text_color); 598 | } 599 | 600 | .site-sidebar ul { 601 | margin: 0; 602 | padding: 0; 603 | list-style-position: inside; 604 | list-style-type: disc; 605 | } 606 | 607 | .site-sidebar li { 608 | margin: 0 0 0.5rem 0; 609 | } 610 | 611 | .site-sidebar li:last-child { 612 | margin: 0; 613 | } 614 | 615 | .site-sidebar__heading { 616 | font-size: 1.5rem; 617 | margin: 0 0 0.25rem 0; 618 | padding: 0 0 0.25rem 0; 619 | } 620 | 621 | .site-sidebar__heading { 622 | font-size: 2rem; 623 | margin: 0 0 8px 0; 624 | padding: 0 0 8px 0; 625 | } 626 | 627 | .site-sidebar__heading:after { 628 | background: var(--gray); 629 | background: linear-gradient(to right, var(--gray) 0%, transparent 100%); 630 | content: ""; 631 | display: block; 632 | height: 1px; 633 | margin: 6px 0 0 0; 634 | width: 100%; 635 | } 636 | 637 | .site-sidebar .archives details { 638 | margin: 0 0 0.5rem 0; 639 | } 640 | 641 | .site-sidebar__archives__year { 642 | font-size: var(--size-500); 643 | font-weight: 700; 644 | } 645 | 646 | .site-sidebar .archives ul { 647 | margin: 0 0 0 1rem; 648 | } 649 | 650 | .site-sidebar__archives__post { 651 | font-weight: 700; 652 | margin: 0 0 0.5rem 0; 653 | } 654 | 655 | .site-sidebar__archives__post-date { 656 | display: block; 657 | font-size: var(--size-300); 658 | font-weight: 400; 659 | padding: 0 0 0 1rem; 660 | } 661 | 662 | 663 | /****************************************************************** 664 | 10. POST THUMBNAIL STYLES 665 | ******************************************************************/ 666 | 667 | .post__feature-img { 668 | background: linear-gradient(#344F59, #648C8C); 669 | border-radius: 0 160px 160px 160px; 670 | height: auto; 671 | margin: 1rem 0; 672 | max-width: 100%; 673 | padding: 5px; 674 | } 675 | 676 | 677 | /****************************************************************** 678 | 11. FOOTER STYLES 679 | ******************************************************************/ 680 | 681 | .site-footer { 682 | background-color: var(--footer_bgcolor); 683 | padding: 1rem 3vw; 684 | } 685 | 686 | .site-footer p { 687 | text-align: center; 688 | margin: 0; 689 | } 690 | 691 | 692 | /****************************************************************** 693 | 12. BUTTONS 694 | ******************************************************************/ 695 | 696 | /* Example button defaults */ 697 | button { 698 | background-color: var(--button_bgcolor); 699 | border: none; 700 | border-radius: 0; 701 | color: var(--button_color); 702 | cursor: pointer; 703 | font-family: var(--font-button); 704 | letter-spacing: 1px; 705 | outline: 0; 706 | padding: 0.5rem; 707 | position: relative; 708 | text-decoration: none; 709 | } 710 | 711 | 712 | /* Example button defaults */ 713 | .nav-button { 714 | background: none; 715 | border: none; 716 | border-radius: 0; 717 | color: var(--site_text_color); 718 | cursor: pointer; 719 | font-family: var(--font-button); 720 | letter-spacing: 1px; 721 | outline: 0; 722 | padding: 0; 723 | position: relative; 724 | text-transform: uppercase; 725 | top: 10px; 726 | } 727 | 728 | .nav-button:before { 729 | background: var(--site_text_color); 730 | content: ""; 731 | display: block; 732 | height: 4px; 733 | left: 50%; 734 | margin: 0 0 0 -20px; 735 | position: absolute; 736 | top: -10px; 737 | transition: all .3s ease-out; 738 | width: 40px; 739 | } 740 | 741 | .nav-button:after { 742 | background: var(--site_text_color); 743 | content: ""; 744 | display: block; 745 | height: 4px; 746 | left: 50%; 747 | margin: 0 0 0 -20px; 748 | position: absolute; 749 | top: -20px; 750 | transition: all .3s ease-out; 751 | width: 40px; 752 | } 753 | 754 | 755 | .nav-button.close:before { 756 | background: red; 757 | margin: 0 0 0 -13px; 758 | top: -15px; 759 | transform: rotate(45deg); 760 | width: 25px; 761 | } 762 | 763 | .nav-button.close:after { 764 | background: red; 765 | margin: 0 0 0 -13px; 766 | top: -15px; 767 | transform: rotate(-45deg); 768 | width: 25px; 769 | } 770 | 771 | 772 | /* Read More Button */ 773 | .read-more { 774 | background-color: var(--button_bgcolor); 775 | border: none; 776 | border-radius: 1px 0.5rem 1px 0.5rem; 777 | box-sizing: border-box; 778 | color: var(--button_color); 779 | cursor: pointer; 780 | display: inline-block; 781 | font-family: var(--font-button); 782 | letter-spacing: 1px; 783 | outline: 0; 784 | padding: 0.5rem; 785 | position: relative; 786 | text-decoration: none; 787 | } 788 | 789 | /* End of base styles */ 790 | 791 | 792 | /****************************************************************** 793 | 13. MEDIA QUERIES 794 | ******************************************************************/ 795 | 796 | /* 13.1 Styles for 768px and larger screen sizes */ 797 | @media only screen and (min-width: 768px) { 798 | 799 | /****************************************************************** 800 | 13.1.1. TYPOGRAPHY 801 | ******************************************************************/ 802 | 803 | pre { 804 | max-width: 480px; 805 | } 806 | 807 | 808 | /****************************************************************** 809 | 13.1.2. MAIN HEADER STYLES 810 | ******************************************************************/ 811 | 812 | .site-header { 813 | align-items: center; 814 | display: grid; 815 | grid-template-columns: 2fr 3fr; 816 | grid-template-areas: 817 | "title nav" 818 | "desc ..."; 819 | padding: 1rem 3vw; 820 | } 821 | 822 | 823 | /****************************************************************** 824 | 13.1.3. NAVIGATION STYLES 825 | ******************************************************************/ 826 | 827 | .nav-button { 828 | display: none; 829 | } 830 | 831 | .header__nav { 832 | grid-area: nav; 833 | } 834 | 835 | #primary-menu-list { 836 | background-color: transparent; 837 | box-shadow: none; 838 | height: auto; 839 | list-style: none; 840 | margin: 0; 841 | overflow-y: unset; 842 | padding: 0; 843 | position: relative; 844 | text-align: center; 845 | transform: translateX(0); 846 | transition: none; 847 | width: 100%; 848 | } 849 | 850 | .primary-menu__item { 851 | display: inline-block; 852 | margin: 0 1rem 0 0; 853 | padding: 0; 854 | } 855 | 856 | .primary-menu__item:after { 857 | background: none; 858 | background-color: var(--site_text_color); 859 | content: ""; 860 | display: block; 861 | height: 2px; 862 | margin: 0; 863 | transition: width 0.5s ease; 864 | width: 0; 865 | } 866 | 867 | .primary-menu__item:hover:after { 868 | width: 100%; 869 | } 870 | 871 | 872 | /****************************************************************** 873 | 13.1.4. MAIN CONTENT LAYOUT STYLES 874 | ******************************************************************/ 875 | 876 | main { 877 | align-self: start; 878 | display: grid; 879 | grid-template-columns: repeat(auto-fit, minmax(Min(20em, 100%), 1fr)); 880 | grid-template-rows: masonry; 881 | grid-gap: 3vw; 882 | justify-content: center; 883 | margin: 2rem 3vw; 884 | } 885 | 886 | .post-preview { 887 | align-self: start; 888 | margin: 0; 889 | } 890 | 891 | 892 | /****************************************************************** 893 | 13.1.5. SINGLE POST STYLES 894 | ******************************************************************/ 895 | 896 | .single-post main { 897 | padding: 2rem; 898 | } 899 | 900 | .post { 901 | max-width: 69ch; 902 | } 903 | 904 | .post .post__date { 905 | left: -2.5rem; 906 | } 907 | 908 | 909 | /****************************************************************** 910 | 13.1.6. PAGE STYLES 911 | ******************************************************************/ 912 | 913 | .page main { 914 | padding: 2rem; 915 | } 916 | 917 | .page__content { 918 | max-width: 69ch; 919 | } 920 | 921 | 922 | /****************************************************************** 923 | 13.1.7. SIDEBAR STYLES 924 | ******************************************************************/ 925 | 926 | .site-sidebar { 927 | flex-flow: row; 928 | flex-wrap: wrap; 929 | padding: 1rem; 930 | } 931 | 932 | .site-sidebar__section { 933 | padding: 0 0 0 1.5rem; 934 | width: 50%; 935 | } 936 | 937 | .site-sidebar__section:nth-child(odd) { 938 | padding: 0 1.5rem 0 0; 939 | } 940 | 941 | .site-sidebar__section > li { 942 | margin-right: 3rem; 943 | } 944 | 945 | .site-sidebar__section > li:first-child { 946 | margin-top: 0; 947 | } 948 | 949 | } 950 | /* End of 768px Media Query */ 951 | 952 | 953 | /* 13.2. Styles for 1024px and larger screen sizes */ 954 | @media only screen and (min-width: 1024px) { 955 | 956 | /****************************************************************** 957 | 13.2.1. TYPOGRAPHY 958 | ******************************************************************/ 959 | 960 | pre { 961 | max-width: 69ch; 962 | } 963 | 964 | 965 | /****************************************************************** 966 | 13.2.2. MAIN LAYOUT STYLES 967 | ******************************************************************/ 968 | 969 | body { 970 | display: grid; 971 | grid-template-columns: 3fr 1fr; 972 | grid-template-areas: 973 | "header header" 974 | "main sidebar" 975 | "footer footer"; 976 | } 977 | 978 | .site-header { 979 | grid-area: header; 980 | } 981 | 982 | main { 983 | grid-area: main; 984 | } 985 | 986 | .site-sidebar { 987 | grid-area: sidebar; 988 | } 989 | 990 | .site-footer { 991 | grid-area: footer; 992 | } 993 | 994 | 995 | /****************************************************************** 996 | 13.2.3. SIDEBAR STYLES 997 | ******************************************************************/ 998 | 999 | .site-sidebar { 1000 | flex-flow: column; 1001 | margin: 2rem 3vw 0 0; 1002 | } 1003 | 1004 | .site-sidebar__section { 1005 | padding: 0; 1006 | width: auto; 1007 | } 1008 | 1009 | .site-sidebar__section:nth-child(odd) { 1010 | padding: 0; 1011 | } 1012 | 1013 | } 1014 | /* End of 1024px Media Query */ -------------------------------------------------------------------------------- /public/style/global.css: -------------------------------------------------------------------------------- 1 | /* 2 | Stylesheet: Kaamos Astro - Global base styles 3 | Author: Kalervo Raitanen 4 | Author site: http://www.kalervoraitanen.com 5 | Description: Global base styles for Kaamos Astro Starter Blog to be used in projects. 6 | Version: 1.0 7 | */ 8 | 9 | 10 | /*-------------------------------------------------------------- 11 | >>> TABLE OF CONTENTS: 12 | ---------------------------------------------------------------- 13 | # 1. VARIABLES 14 | # 2. GENERAL STYLES 15 | # 3. TYPOGRAPHY 16 | # 3.1. Typography defaults 17 | # 3.2. Fonts 18 | # 3.3. Paragraphs and headings typography settings 19 | # 4. BUTTON DEFAULTS 20 | --------------------------------------------------------------*/ 21 | 22 | 23 | /****************************************************************** 24 | 1. VARIABLES 25 | ******************************************************************/ 26 | 27 | :root { 28 | /* Some examples of variables to use */ 29 | 30 | /* # Colors 31 | --black: #111111; 32 | --pure-black: #000000; 33 | --white: #eeeeee; 34 | --gray: #333333; 35 | --red: red; 36 | */ 37 | 38 | /* # Fonts 39 | --font-heading: 'Lora', Georgia, serif;; 40 | --font_main: 'Open Sans', Arial, sans-serif; 41 | --font_button: "Arimo", Arial, sans-serif; 42 | */ 43 | 44 | /* # Z-Indexes. These will help to layer site elements more easily. */ 45 | --layer1: 1; 46 | --layer2: 2; 47 | --layer3: 3; 48 | --layer4: 4; 49 | --layer5: 5; 50 | --layer6: 6; 51 | --layer7: 7; 52 | --layer8: 8; 53 | --layer9: 9; 54 | --layer10: 10; 55 | } 56 | 57 | 58 | /****************************************************************** 59 | 2. GENERAL STYLES 60 | ******************************************************************/ 61 | 62 | * { 63 | box-sizing: border-box; 64 | } 65 | 66 | html { 67 | scroll-behavior: smooth; 68 | } 69 | 70 | img { 71 | height: auto; 72 | max-width: 100%; 73 | } 74 | 75 | figure { 76 | display: block; 77 | height: auto; 78 | margin: 0; 79 | max-width: 100%; 80 | } 81 | 82 | 83 | /* # 2.1. Accessibility styles */ 84 | .screen-reader-text { 85 | border: 0; 86 | clip: rect(1px, 1px, 1px, 1px); 87 | clip-path: inset(50%); 88 | height: 1px; 89 | margin: -1px; 90 | overflow: hidden; 91 | padding: 0; 92 | position: absolute; 93 | width: 1px; 94 | word-wrap: normal !important; 95 | } 96 | 97 | .screen-reader-text:focus { 98 | background-color: #eee; 99 | clip: auto !important; 100 | clip-path: none; 101 | color: #444; 102 | display: block; 103 | font-size: 1em; 104 | height: auto; 105 | left: 5px; 106 | line-height: normal; 107 | padding: 15px 23px 14px; 108 | text-decoration: none; 109 | top: 5px; 110 | width: auto; 111 | z-index: 100000; 112 | } 113 | 114 | /* Skip to main content link */ 115 | .skip-link:focus, 116 | .skip-link:focus-visible { 117 | background-color: #555555; 118 | border-radius: 3px; 119 | clip: auto !important; 120 | -webkit-clip-path: none; 121 | clip-path: none; 122 | color: #eeeeee; 123 | display: block; 124 | font-weight: 700; 125 | height: auto; 126 | left: 5px; 127 | line-height: normal; 128 | padding: 15px 23px 14px; 129 | text-decoration: none; 130 | top: 5px; 131 | width: auto; 132 | z-index: 100000; 133 | } 134 | 135 | a.skip-link:focus { 136 | outline: 2px solid blue; 137 | } 138 | 139 | 140 | /****************************************************************** 141 | 3. TYPOGRAPHY 142 | ******************************************************************/ 143 | 144 | /* # 3.1. Typography defaults */ 145 | body { 146 | /* Enable OpenType features to enhance the legibility and appearance of text */ 147 | font-feature-settings: "kern", "liga", "clig", "calt"; 148 | font-kerning: normal; 149 | font-variant-ligatures: common-ligatures contextual; 150 | 151 | font-size: 100%; 152 | 153 | /* 154 | -webkit-font-smoothing: antialiased; // Smooth the font 155 | -moz-osx-font-smoothing: grayscale; // Makes light text on dark backgrounds look lighter on Firefox 156 | */ 157 | } 158 | 159 | 160 | /* # 3.2. Fonts */ 161 | /* Import Google Fonts 162 | @import url('https://fonts.googleapis.com/css2?family=Lora&family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Arimo&display=swap'); 163 | */ 164 | 165 | /* 166 | To embed local fonts uncomment the below section and use this syntax. 167 | Remember to check the path for the font files. 168 | */ 169 | /* 170 | @font-face { 171 | font-family: 'Font Name'; 172 | src: url('font-name.eot'); 173 | src: url('font-name.eot?#iefix') format('embedded-opentype'), 174 | url('font-name.woff') format('woff'), 175 | url('font-name.ttf') format('truetype'), 176 | url('font-name.svg#font-name') format('svg'); 177 | font-weight: normal; 178 | font-style: normal; 179 | } 180 | */ 181 | 182 | 183 | /* # 3.3. Paragraphs and headings typography settings */ 184 | p, 185 | h1, 186 | h2, 187 | h3, 188 | h4, 189 | h5, 190 | h6 { 191 | /* Emphasize legibility to produce the most legible text */ 192 | text-rendering: optimizelegibility; 193 | 194 | /* Break long words to prevent overflowing */ 195 | word-break: break-word; 196 | word-wrap: break-word; 197 | overflow-wrap: break-word; 198 | } 199 | 200 | 201 | /********************* 202 | 4. BUTTON DEFAULTS 203 | *********************/ 204 | 205 | button { 206 | border: none; 207 | border-radius: 0; 208 | box-sizing: border-box; 209 | cursor: pointer; 210 | outline: 0; 211 | text-decoration: none; 212 | } 213 | 214 | /* Focusing the button with a keyboard will show a blue solid line. */ 215 | button:focus-visible { 216 | outline: 2px solid blue; 217 | } 218 | 219 | /* Focusing the button with a mouse, touch, or stylus won't show outline. */ 220 | button:focus:not(:focus-visible) { 221 | outline: none; 222 | } -------------------------------------------------------------------------------- /public/style/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "template": "node", 6 | "container": { 7 | "port": 3000, 8 | "startScript": "start", 9 | "node": "14" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/BaseHead.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string; 4 | description: string; 5 | permalink: string; 6 | publishDate: string; 7 | ogImageUrl: string; 8 | canonicalURL?: string; 9 | } 10 | 11 | import site from "../data/site.js"; 12 | 13 | const { title, description, permalink, publishDate, ogImageUrl, canonicalURL } = Astro.props; 14 | let fullTitle = title + ' | ' + site.title; 15 | let fullDesc = description + ' | ' + site.description; 16 | 17 | if ( title === '' ) { 18 | fullTitle = site.title; 19 | } 20 | if ( description === '' ) { 21 | fullDesc = site.description; 22 | } 23 | --- 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | {fullTitle} 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /src/components/BlogPost.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Imports 3 | import {generateCategoryData} from '../utils/helpers.js' 4 | 5 | // Exports 6 | export interface Props { 7 | title: string; 8 | publishDate: string; 9 | heroImage: string; 10 | } 11 | 12 | // Constants 13 | const { content, title, publishDate, heroImage, alt } = Astro.props; 14 | const allCategoriesData = generateCategoryData(content.categories); 15 | --- 16 | 17 |
18 |
19 |

{title}

20 | Posted 21 | {heroImage && {alt}} 22 |
23 |
24 | 25 |
26 | 33 |
-------------------------------------------------------------------------------- /src/components/BlogPostPreview.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Imports 3 | import {generateCategoryData} from '../utils/helpers.js' 4 | 5 | // Exports 6 | export interface Props { 7 | post: any; 8 | } 9 | 10 | // Variables 11 | const {post} = Astro.props; 12 | const allCategoriesData = generateCategoryData(post.categories); 13 | let postTitleLink = 'Read more about ' + post.title; 14 | --- 15 | 16 |
17 |
18 |

19 | Posted 20 | { post.heroImage && {post.alt}} 21 |
22 |
23 |

{post.description}

24 | Read more about {post.title} 25 |
26 |
27 | 32 |
33 |
-------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 7 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Navigation from '../components/Navigation.astro'; 3 | --- 4 | 5 |
6 | 9 |

10 | 11 |

12 |

13 | Highly Search Engine Optimized Starter Blog for Astro 14 |

15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | -------------------------------------------------------------------------------- /src/components/Navigation.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 20 | -------------------------------------------------------------------------------- /src/components/Paginator.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { page } = Astro.props 3 | --- 4 | 8 | -------------------------------------------------------------------------------- /src/components/Sidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Component Imports 3 | import {generateCategoryData} from '../utils/helpers.js' 4 | import { getPosts } from '../utils/posts.js' 5 | 6 | // Constants 7 | const allPosts = await getPosts() 8 | const sortedPosts = allPosts.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate)); 9 | const allYearsSet = new Set(); 10 | const allCategoriesUnique = new Set(); 11 | const postsByYear = []; 12 | 13 | // Loop through all posts and fetch all post years and unique categories 14 | allPosts.map(post => { 15 | let dateUTC = Date.parse(post.publishDate); 16 | let date = new Date(dateUTC); 17 | let dateYear = date.getFullYear(date); 18 | allYearsSet.add(dateYear); 19 | 20 | post.categories && post.categories.map(category => { 21 | allCategoriesUnique.add(category); 22 | }) 23 | }) 24 | 25 | // Create an array of all unique categories 26 | const allCategoriesData = generateCategoryData(allCategoriesUnique); 27 | 28 | // Loop through all the post years list 29 | for (let year of allYearsSet) { 30 | postsByYear.push('
' + year.valueOf() + '
'); 56 | } 57 | 58 | --- 59 | 73 | 74 | -------------------------------------------------------------------------------- /src/data/site.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: `Kaamos Astro`, 3 | description: `Astro Starter Blog with high Search Engine Optimization.`, 4 | url: `https://my-site.dev`, // No trailing slash! 5 | // JSON LD 6 | name: `Example`, 7 | // Facebook URL 8 | facebookURL: `https://facebook.com`, 9 | // Twitter URL 10 | twitterURL: `https://twitter.com`, 11 | // Instagram URL 12 | instagramURL: `https://instagram.com/`, 13 | } -------------------------------------------------------------------------------- /src/layouts/BaseLayout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Imports 3 | import BaseHead from '../components/BaseHead.astro'; 4 | import Header from '../components/Header.astro'; 5 | import Sidebar from '../components/Sidebar.astro'; 6 | import Footer from '../components/Footer.astro'; 7 | import {generateCategoryData} from '../utils/helpers.js' 8 | 9 | // Constants 10 | const allPosts = Astro.fetchContent('../pages/blog/*.md'); 11 | const allCategoriesUnique = new Set(); 12 | 13 | allPosts.map(post => { 14 | post.categories && post.categories.map(category => { 15 | allCategoriesUnique.add(category); 16 | }) 17 | }) 18 | const allCategoriesData = generateCategoryData(allCategoriesUnique); 19 | const {title, description, permalink, canonicalURL } = Astro.props; 20 | --- 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 |