diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..0757e99 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,74 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at parkrmoore@gmail.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/History.markdown b/History.markdown new file mode 100644 index 0000000..bf90d4d --- /dev/null +++ b/History.markdown @@ -0,0 +1,245 @@ +## HEAD + +### Documentation + + * Forward port v2.5.1 release (#399) + * Docs: remove Google+ (#373) + * Update README section on adding favicons to site (#438) + * Fix custom-styles.scss name in README (#610) + * Improve the msg to enable disqus in README (#627) + +### Minor Enhancements + + * Add Keybase to social links (#400) + * Solarized skins (#404) + * Add a placeholder of favicons (#433) + * fix: make page.list_title optional (#303) + * Add stackoverflow to social media list (#443) + * Add social support for dev.to (#410) + * Add GitLab to social (#352) + * Support mutiple authors on post layout (#348) + * Re-implement site footer markup and styles (#448) + * Support pagination through posts in home layout (#450) + * Show the last modified date of posts (#432) + * Set margins of hr to improve readability (#461) + * Export a variable to let users to custom the font family of code (#462) + * Set margin-bottom of pagination (#458) + * Adjust margins of headings to make sections clear (#467) + * Rename favicons.html to custom-head.html (#468) + * Remove RSS icon from the social media list (#470) + * Improve the readablility of blockquotes (#481) + * Extract more color rules into skins (#452) + * Introduce "Dark Minima" skin (#335) + +### Major Enhancements + + * Allow skins to be defined and customized easily (#336) + * Drop support for scalar 'author' configuration (#384) + * Place skins in `minima/skins` to clarify purpose (#479) + +### Bug Fixes + + * Add missing rel=me attributes to social links (#386) + * Set the border radius of highlight (#426) + * Removed unnecessary whitespace-controls (#390) + * fix: overflow auto for tables (#296) + * Add `overflow-wrap: break-word` to body tag (#321) + * Use "rem" unit in relative-font-size mixin (#436) + * Assign static value to variable outside forloop (#437) + * Add font-size styles for elements h5 and h6 (#441) + * Stop prefixing CSS calc with `-webkit-` (#445) + * Improve readability of post titles with diacritics (#449) + * Fix a bug of incorrect parsing of page.modified_date (#455) + * Specify the font size of the root element (#485) + * Fix script used for Google Analytics (#596) + * Open social links in new tabs (#625) + +### Development Fixes + + * Ignore .jekyll-cache (#439) + * Clean up and optimize .gitignore (#475) + * [chore] Normalize Travis CI builds (#480) + * chore(deps): bump Ruby version (#510) + * Conditionally load GFM-parser gem in CI builds (#535) + * Improve CI workflow configuration (#609) + * Migrate from TravisCI to GitHub Actions (#633) + +## 2.5.1 + +### Minor Enhancements + + * Allow use and testing with Jekyll 4.x (#398) + +### Bug Fixes + + * Footer overlapping issue (Support Microsoft Explorer 11) (#248) + * Update multiline config comment. (#346) + +### Development Fixes + + * remove deprecated `sudo: false` in .travis.yml (#347) + +## 2.5.0 + +### Bug Fixes + + * Add `jekyll-feed` plugin in config (#228) + +### Minor Enhancements + + * Stick footer for short posts (#223) + * Consolidate trigger SVG paths (#148) + +## 2.4.1 + +### Bug Fixes + + * Reintroduce removed social includes for backwards compatibility (#217) + +## 2.4.0 + +### Minor Enhancements + + * Add better system fonts (#205) + * Remove whitespace due to Liquid tags in generated HTML (#202) + * Adding Mastodon to the social networks (#198) + +### Bug Fixes + + * social icons should resolve baseurl properly (#201) + * fix: styling main element in IE 11 (#199) + +### Documentation + + * Improve thw wording in index.md (#175) + * Update config description comment (#203) + +## 2.3.0 + + * Add option to show excerpts on the homepage (#90) + * Handle RSS feed with jekyll-feed (#183) + * Test build with Ruby 2.4 on CI (#184) + * Document how to customize navigation links (#192) + +## 2.2.1 + + * Revert social_sites hash for retrocompatibility (#190) + +## 2.2.0 + +### Minor Enhancements + + * handling content outside of posts (#88) + * Add default table styles (#144) + * Add `jekyll-seo-tag` dependency (#139) + * Add Microformats markup (#160) + * Add more social links (#141) + +### Documentation + + * Docs: clarification about page title (#142) + +## 2.1.1 / 2017-04-13 + +### Minor Enhancements + + * Close #55: Improve mobile user experience (#62) + * Remove incomplete status from spec summary (#63) + * Use date_format if set in configuration (#70) + * Corrected misspelled word (#72) + * Scale headings relative to base-font-size (#78) + * Remove 2.0 post-install message (#82) + * Fixes #115 - Only include the nav tag if there are pages to be displayed in the menu (#116) + * Fixes #80, #106. Make the hamburger work with pure CSS. (#111) + * add `header_pages` config to link only specific files in header (#52) + * More easily customizable CSS (#117) + * Use relative size for fonts and line-height (#103) + * Add 404 page from jekyll `master` (#121) + +### Development Fixes + + * Remove duplicate .sass-cache (#71) + * Demo minima on GitHub Pages (#76) + * Remove the Rakefile (#118) + +### Documentation + + * Update README with theme content description (#91) + * Update default local URL (#120) + +## 2.1.0 / 2016-11-15 + +### Minor Enhancements + + * Update gemspec to require at least Jekyll 3.3 (#59) + * Use `absolute_url` filter for disqus (#66) + * replace `example/index.html` with `example/index.md` (#58) + +### Development Fixes + + * Example should require Jekyll 3.3 (#61) + +## 2.0.0 / 2016-10-06 + +### Minor Enhancements + + * priority to site.url when site.github.url is available (#46) + * Move contents of the index.html page to the 'home' layout (#48) + * Use new `absolute_url` and `relative_url` filters in minima (#57) + +### Development Fixes + + * Use standardized tab size of 2 spaces (#44) + +### Major Enhancements + + * move `css/` directory from jekyll into `assets/` (#43) + +### Bug Fixes + + * Fix html proofer errors (#49) + * Update gem regex to include new `assets` directory (#54) + +## 1.2.0 / 2016-09-12 + +### Minor Enhancements + + * Look to site.url when available (#35) + +### Documentation + + * Move instruction for CSS in install section (#37) + +## 1.1.0 / 2016-09-07 + +### Major Enhancements + + * Add support to Disqus (#21) + * Google analytics support (#26) + * Look for `site.github.url` if it exists (#25) + +### Minor Enhancements + + * Fixed Flash Of Unstyled SVG (#12) + * Added "author" in footer instead of double title (#22) + +### Documentation + + * Document how to link to the theme styles (#18) + * Update Example to resemble Default site (#24) + +### Development Enhancements + + * Use upstream gemspec file matcher (#9) + * Fix gemspec regex (#31) + * Add Travis and a basic smoke test (#33) + +## 1.0.1 / 2016-07-28 + + * include `_layouts`, `_includes`, and `_sass` dir in gem (#6) + +## 1.0.0 / 2016-07-27 + + * default layout: html `lang` attribute should allow user customization (#3) + * Use `normalize_whitespace` filter for meta description (#4) + * Fix repo's URL in contributing (#5) diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..0e7ecd8 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016-present Parker Moore and the minima contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..23e57aa --- /dev/null +++ b/README.md @@ -0,0 +1,322 @@ +# minima + +*Minima is a one-size-fits-all Jekyll theme for writers*. It's Jekyll's default (and first) theme. It's what you get when you run `jekyll new`. + +***Disclaimer:** The information here may vary depending on the version you're using. Please refer to the `README.md` bundled +within the theme-gem for information specific to your version or by pointing your browser to the Git tag corresponding to your +version. e.g. https://github.com/jekyll/minima/blob/v2.5.0/README.md* +*Running `bundle show minima` will provide you with the local path to your current theme version.* + + +[Theme preview](https://jekyll.github.io/minima/) + +![minima theme preview](/screenshot.png) + +## Installation + +Add this line to your Jekyll site's Gemfile: + +```ruby +gem "minima" +``` + +And then execute: + + $ bundle + + +## Contents At-A-Glance + +Minima has been scaffolded by the `jekyll new-theme` command and therefore has all the necessary files and directories to have a new Jekyll site up and running with zero-configuration. + +### Layouts + +Refers to files within the `_layouts` directory, that define the markup for your theme. + + - `default.html` — The base layout that lays the foundation for subsequent layouts. The derived layouts inject their contents into this file at the line that says ` {{ content }} ` and are linked to this file via [FrontMatter](https://jekyllrb.com/docs/frontmatter/) declaration `layout: default`. + - `home.html` — The layout for your landing-page / home-page / index-page. [[More Info.](#home-layout)] + - `page.html` — The layout for your documents that contain FrontMatter, but are not posts. + - `post.html` — The layout for your posts. + +#### Home Layout + +`home.html` is a flexible HTML layout for the site's landing-page / home-page / index-page.
+ +##### *Main Heading and Content-injection* + +From Minima v2.2 onwards, the *home* layout will inject all content from your `index.md` / `index.html` **before** the **`Posts`** heading. This will allow you to include non-posts related content to be published on the landing page under a dedicated heading. *We recommended that you title this section with a Heading2 (`##`)*. + +Usually the `site.title` itself would suffice as the implicit 'main-title' for a landing-page. But, if your landing-page would like a heading to be explicitly displayed, then simply define a `title` variable in the document's front matter and it will be rendered with an `

` tag. + +##### *Post Listing* + +This section is optional from Minima v2.2 onwards.
+It will be automatically included only when your site contains one or more valid posts or drafts (if the site is configured to `show_drafts`). + +The title for this section is `Posts` by default and rendered with an `

` tag. You can customize this heading by defining a `list_title` variable in the document's front matter. + + +### Includes + +Refers to snippets of code within the `_includes` directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem. + + - `disqus_comments.html` — Code to markup disqus comment box. + - `footer.html` — Defines the site's footer section. + - `google-analytics.html` — Inserts Google Analytics module (active only in production environment). + - `head.html` — Code-block that defines the `` in *default* layout. + - `custom-head.html` — Placeholder to allow users to add more metadata to ``. + - `header.html` — Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here. + - `social.html` — Renders social-media icons based on the `minima:social_links` data in the config file. + + +### Sass + +Refers to `.scss` files within the `_sass` directory that define the theme's styles. + + - `minima/skins/classic.scss` — The "classic" skin of the theme. *Used by default.* + - `minima/initialize.scss` — A component that defines the theme's *skin-agnostic* variable defaults and sass partials. + It imports the following components (in the following order): + - `minima/custom-variables.scss` — A hook that allows overriding variable defaults and mixins. (*Note: Cannot override styles*) + - `minima/_base.scss` — Sass partial for resets and defines base styles for various HTML elements. + - `minima/_layout.scss` — Sass partial that defines the visual style for various layouts. + - `minima/custom-styles.scss` — A hook that allows overriding styles defined above. (*Note: Cannot override variables*) + +Refer the [skins](#skins) section for more details. + + +### Assets + +Refers to various asset files within the `assets` directory. + + - `assets/css/style.scss` — Imports sass files from within the `_sass` directory and gets processed into the theme's + stylesheet: `assets/css/styles.css`. + - `assets/minima-social-icons.svg` — A composite SVG file comprised of *symbols* related to various social-media icons. + This file is used as-is without any processing. Refer [section on social networks](#social-networks) for its usage. + + +### Plugins + +Minima comes with [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin preinstalled to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag#usage) to know how to set it up. + + +## Usage + +Have the following line in your config file: + +```yaml +theme: minima +``` + + +### Customizing templates + +To override the default structure and style of minima, simply create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file. +e.g., to override the [`_includes/head.html `](_includes/head.html) file to specify a custom style path, create an `_includes` directory, copy `_includes/head.html` from minima gem folder to `/_includes` and start editing that file. + +The site's default CSS has now moved to a new place within the gem itself, [`assets/css/style.scss`](assets/css/style.scss). + +In Minima 3.0, if you only need to customize the colors of the theme, refer to the subsequent section on skins. To have your +*CSS overrides* in sync with upstream changes released in future versions, you can collect all your overrides for the Sass +variables and mixins inside a sass file placed at `_sass/minima/custom-variables.scss` and all other overrides inside a sass file +placed at path `_sass/minima/custom-styles.scss`. + +You need not maintain entire partial(s) at the site's source just to override a few styles. However, your stylesheet's primary +source (`assets/css/style.scss`) should contain the following: + + - Front matter dashes at the very beginning (can be empty). + - Directive to import a skin. + - Directive to import the base styles (automatically loads overrides when available). + +Therefore, your `assets/css/style.scss` should contain the following at minimum: + +```sass +--- +--- + +@import "minima/skins/{{ site.minima.skin | default: 'classic' }}"; +@import "minima/initialize"; +``` + +#### Skins + +Minima 3.0 supports defining and switching between multiple color-palettes (or *skins*). + +``` +. +├── minima.scss +└── minima + └── _syntax-highlighting.scss +``` + + +A skin is a Sass file placed in the directory `_sass/minima/skins` and it defines the variable defaults related to the "color" +aspect of the theme. It also embeds the Sass rules related to syntax-highlighting since that is primarily related to color and +has to be adjusted in harmony with the current skin. + +The default color palette for Minima is defined within `_sass/minima/skins/classic.scss`. To switch to another available skin, +simply declare it in the site's config file. For example, to activate `_sass/minima/skins/dark.scss` as the skin, the setting +would be: + +```yaml +minima: + skin: dark +``` + +As part of the migration to support skins, some existing Sass variables have been retired and some **have been redefined** as +summarized in the following table: + +Minima 2.0 | Minima 3.0 +--------------- | ---------- +`$brand-color` | `$link-base-color` +`$grey-*` | `$brand-*` +`$orange-color` | *has been removed* + +##### Available skins + +- classic +- dark +- solarized +- solarized-dark + +### Customize navigation links + +This allows you to set which pages you want to appear in the navigation area and configure order of the links. + +For instance, to only link to the `about` and the `portfolio` page, add the following to your `_config.yml`: + +```yaml +header_pages: + - about.md + - portfolio.md +``` + + +### Change default date format + +You can change the default date format by specifying `site.minima.date_format` +in `_config.yml`. + +``` +# Minima date format +# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this +minima: + date_format: "%b %-d, %Y" +``` + + +### Extending the `` + +You can *add* custom metadata to the `` of your layouts by creating a file `_includes/custom-head.html` in your source directory. For example, to add favicons: + +1. Head over to [https://realfavicongenerator.net/](https://realfavicongenerator.net/) to add your own favicons. +2. [Customize](#customization) default `_includes/custom-head.html` in your source directory and insert the given code snippet. + + +### Enabling comments (via Disqus) + +Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post. + +:warning: `url`, e.g. `https://example.com`, must be set in you config file for Disqus to work. + +To enable it, after setting the url field, you also need to add the following lines to your Jekyll site: + +```yaml + disqus: + shortname: my_disqus_shortname +``` + +You can find out more about Disqus' shortnames [here](https://help.disqus.com/installation/whats-a-shortname). + +Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production` + +If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that post's YAML Front Matter. + +### Author Metadata + +From `Minima-3.0` onwards, `site.author` is expected to be a mapping of attributes instead of a simple scalar value: + +```yaml +author: + name: John Smith + email: "john.smith@foobar.com" +``` + +To migrate existing metadata, update your config file and any reference to the object in your layouts and includes as summarized below: + +Minima 2.x | Minima 3.0 +------------- | ------------------- +`site.author` | `site.author.name` +`site.email` | `site.author.email` + + +### Social networks + +You can add links to the accounts you have on other sites, with respective icon, by adding one or more of the following options in your config. +From `Minima-3.0` onwards, the usernames are to be nested under `minima.social_links`, with the keys being simply the social-network's name: + +```yaml +minima: + social_links: + twitter: jekyllrb + github: jekyll + stackoverflow: "11111" + dribbble: jekyll + facebook: jekyll + flickr: jekyll + instagram: jekyll + linkedin: jekyll + pinterest: jekyll + telegram: jekyll + microdotblog: jekyll + keybase: jekyll + + mastodon: + - username: jekyll + instance: example.com + - username: jekyll2 + instance: example.com + + gitlab: + - username: jekyll + instance: example.com + - username: jekyll2 + instance: example.com + + youtube: jekyll + youtube_channel: UC8CXR0-3I70i1tfPg1PAE1g + youtube_channel_name: CloudCannon +``` + + +### Enabling Google Analytics + +To enable Google Analytics, add the following lines to your Jekyll site: + +```yaml + google_analytics: UA-NNNNNNNN-N +``` + +Google Analytics will only appear in production, i.e., `JEKYLL_ENV=production` + +### Enabling Excerpts on the Home Page + +To display post-excerpts on the Home Page, simply add the following to your `_config.yml`: + +```yaml +show_excerpts: true +``` + + +## Contributing + +Bug reports and pull requests are welcome on GitHub at https://github.com/jekyll/minima. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. + +## Development + +To set up your environment to develop this theme, run `script/bootstrap`. + +To test your theme, run `script/server` (or `bundle exec jekyll serve`) and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme and the contents. As you make modifications, your site will regenerate and you should see the changes in the browser after a refresh. + +## License + +The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). diff --git a/_config.yml b/_config.yml index a1dff64..71c0a65 100644 --- a/_config.yml +++ b/_config.yml @@ -30,6 +30,7 @@ github_username: sjwild # Build settings theme: minima +markdown: kramdown plugins: - jekyll-feed diff --git a/_includes/custom-head.html b/_includes/custom-head.html new file mode 100644 index 0000000..8559a67 --- /dev/null +++ b/_includes/custom-head.html @@ -0,0 +1,6 @@ +{% comment %} + Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons: + + 1. Head over to https://realfavicongenerator.net/ to add your own favicons. + 2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet. +{% endcomment %} diff --git a/_includes/disqus_comments.html b/_includes/disqus_comments.html new file mode 100644 index 0000000..d9400f2 --- /dev/null +++ b/_includes/disqus_comments.html @@ -0,0 +1,20 @@ +{%- if page.comments != false and jekyll.environment == "production" -%} + +
+ + +{%- endif -%} diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..707d523 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,37 @@ +
+ + +
+ +
+
+

+ + + + Subscribe + +

+ {%- if site.author %} +
    + {% if site.author.name -%} +
  • {{ site.author.name | escape }}
    • + {% endif -%} + {% if site.author.email -%} +
  • {{ site.author.email }}
    • + {%- endif %} +
+ {%- endif %} +
+
+

{{ site.description | escape }}

+
+
+ + + +
+ +
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html new file mode 100644 index 0000000..b8b4d38 --- /dev/null +++ b/_includes/google-analytics.html @@ -0,0 +1,9 @@ + + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..9ee139f --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,14 @@ + + + + + {%- seo -%} + + {%- feed_meta -%} + {%- if jekyll.environment == 'production' and site.google_analytics -%} + {%- include google-analytics.html -%} + {%- endif -%} + + {%- include custom-head.html -%} + + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..ed5a382 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,31 @@ +
+ +
+ {%- assign default_paths = site.pages | map: "path" -%} + {%- assign page_paths = site.header_pages | default: default_paths -%} + {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%} + + + {%- if titles_size > 0 -%} + + {%- endif -%} +
+
diff --git a/_includes/social.html b/_includes/social.html new file mode 100644 index 0000000..1370f8b --- /dev/null +++ b/_includes/social.html @@ -0,0 +1,21 @@ +{%- assign social = site.minima.social_links -%} + + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..553c74e --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,24 @@ + + + + {%- include head.html -%} + + + + {%- include header.html -%} + +
+
+ {{ content }} +
+
+ + {%- include footer.html -%} + + + + + + diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..622b5e1 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,61 @@ +--- +layout: default +--- + +
+ {%- if page.title -%} +

{{ page.title }}

+ {%- endif -%} + + {{ content }} + + + {% if site.paginate %} + {% assign posts = paginator.posts %} + {% else %} + {% assign posts = site.posts %} + {% endif %} + + + {%- if posts.size > 0 -%} + {%- if page.list_title -%} +

{{ page.list_title }}

+ {%- endif -%} +
    + {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%} + {%- for post in posts -%} +
  • + {{ post.date | date: date_format }} +

    + + {{ post.title | escape }} + +

    + {%- if site.show_excerpts -%} + {{ post.excerpt }} + {%- endif -%} +
    • + {%- endfor -%} +
+ + {% if site.paginate %} +
+ +
+ {%- endif %} + + {%- endif -%} + +
diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..01e4b2a --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,14 @@ +--- +layout: default +--- +
+ +
+

{{ page.title | escape }}

+
+ +
+ {{ content }} +
+ +
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..c9a03be --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,38 @@ +--- +layout: default +--- +
+ +
+

{{ page.title | escape }}

+

+ {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%} + + {%- if page.modified_date -%} + ~ + {%- assign mdate = page.modified_date | date_to_xmlschema -%} + + {%- endif -%} + {%- if page.author -%} + • {% for author in page.author %} + + {%- if forloop.last == false %}, {% endif -%} + {% endfor %} + {%- endif -%}

+
+ +
+ {{ content }} +
+ + {%- if site.disqus.shortname -%} + {%- include disqus_comments.html -%} + {%- endif -%} + + +
diff --git a/_posts/2022-04-29-always-centre-variables-multilevel-model copy.markdown b/_posts/2022-04-29-always-centre-variables-multilevel-model copy.markdown new file mode 100644 index 0000000..baf6f33 --- /dev/null +++ b/_posts/2022-04-29-always-centre-variables-multilevel-model copy.markdown @@ -0,0 +1,570 @@ +--- +layout: post +title: "Always center your variables in multilevel models" +date: 2022-04-02 21:00:00 -0400 +categories: blog +usemathjax: true +--- +$$ y = x^2 $$ +This is a post about why you should always center your variables in multilevel models. Always. And by always, I mean it depends. But I think as a default, you should center your variables in a multilevel model unless there is a strong reason to do otherwise. + +What inspired this post is a recent article, [Worldwide increases in adolescent loneliness](https://www.sciencedirect.com/science/article/pii/S0140197121000853), by Jean Twenge, Jonathan Haidt, et al. In the article, they claim to show that the psychological well-being of adolescents began to decline in 2012, and that this decline is associated with increased smart phone access and internet usage. Twitter had several threads or tweets ([here](https://twitter.com/sTeamTraen/status/1421860781503700993), [here](https://twitter.com/cjsewall9/status/1421461127892979712), and [here](https://twitter.com/academia_shores/status/1428052060512129029), for example) about why Twenge et al. were wrong. I have no informed view about whether smartphone access and internet usage are associated with loneliness. That isn't my area of expertise, and I don't want to give the impression that it is. + +But I am able to critique their model. + +Part of their argument rests on a multilevel model they conduct on smartphone access and internet usage. But they make a common but elementary error in how they structure their model. Once you properly structure the model, their effects mostly disappear. + +Before I look at their model, I am going to make a few assumptions: +* There is no measurement error, that is, their constructs measure what they say the constructs should measure and does so accurately +* The predictors they include are correct and appropriate for what they are looking at +* Their decisions to include or exclude certain countries are justifiable +* Missing data is Missing Completely At Random (MCAR), so missing countries/year have no effect on the outcome +* It makes sense to aggregate the data to conduct an ecological regression + +In short, I am going to assume that everything was done correctly except for the final two models. + +You can find the code I used for my models [here](https://github.com/sjwild/sjwild.github.io/raw/main/assets/2021-09-02-always_centre-variables-multilevel-model/Load_and_Prep_PISA_data.R). If I am wrong, please tell me so I can correct it. + +# _Twenge et al._'s results +In their final two models, Twenge et al. run a comprehensive model using smartphone access and internet usage as their treatment variables--that is, as their main variables of interest. Here is a copy of their results. + +![alt text](https://github.com/sjwild/sjwild.github.io/raw/main/assets/2021-09-02-always-centre-variables-multilevel-model/Table_4_Twenge_et_al.png "Image of Table 4 from Twenge et al..") + +In both their models, smartphone access and internet usage are statistically significant. Unfortunately, Twenge et al.'s model is misspecified, and their results showing smartphone access and internet usage are not significant once we make the requisite adjustments. + +# How is the model misspecified? +Multilevel models are loved in some fields (looking at you, education and psychology) and reviled in others (looking at you, economics). The issue is the use of random effects. Random effects are awesome, but they lead to biased esimates when the fixed effects are correlated with the random effects. + +To see what I mean, take a look at the image below. In it, I have chosen three illustrative countries and their smartphone access. As you can see, there is a relationship between smartphone access in 2012 and the rate of smartphone access increases over time. Countries with lower rates of smartphone access increase at faster rates. That is, we can say that the intercept (initial smartphone access) is negatively correlated with the slope (change in access over time): in countries with higher initial smartphone access, smartphone access increases more slowly compared to countries with lower initial smartphone access. As a result, smartphone access coverges over time. + +![alt text](https://github.com/sjwild/sjwild.github.io/raw/main/assets/2021-09-02-always-centre-variables-multilevel-model/example_smushed_effects.png "Illustrative example showing slopes increase faster for lower intial rates of smartphone access") + +Here is what is happening in our multilevel model. The model is trying to estimate the effect of smartphone access in two areas: within each country, and between each country. The problem is that the model has no way to separate these two effects. Therefore the coefficient ends up "smushed" (the technical term, according to Hoffman, 2015), and reflects both within country and between country effects. + +But we can help it by breaking the variable in two. + +The most common way to make the adjustment is to center the predictors in the model. Three methods are common: group-mean centering, grand-mean centering, and baseline centering. + +With group-mean centering--also called adaptive centering, person-mean centering, or centering within context--for each observation in a group, we subtract out the mean for that group. So for a given predictor what we have is $$x_{ij} - \bar{x_{j}}$$. Using this method, we can decompose our effect into within groups and between groups. Why? Because we took out the group differences. This type of centering is common in cross-sectional multilevel models. + +With grand-mean centering, we take out the grand mean or any other meaningful constant. We then have $$x_{i} - \bar{x}$$. We often see this in bayesian modelling, where we center our predictors and then divide by the standard deviation (this helps the samplers run faster). + +The third option is baseline centering. Baseline centering is similar to grand-mean centering. But instead of the grand-mean, we subtract out the value at a baseline--say, the value at time 0. This method is common for longitudinal data. + +With all three centering methods, it is common to add the group means as predictors, to help detect any between group differences. This is relevant for the work in Twenge et al., because there might be an effect of smartphone access within a country, but not between countries, or vice versa. Or there might be an effect within and between countries. Or there might not be. + +# What happens when we center our variables? +As you can see in the image for our illustrative example below, one we remove the means for our baseline year, 2012, the slopes are not longer correlated with the values at year 0. The model can therefore pick up both within and between effects if me include the initial values in the model as well. Mission accomplished. + +![alt text](https://github.com/sjwild/sjwild.github.io/raw/main/assets/2021-09-02-always-centre-variables-multilevel-model/example_smushed_effects_0_intercept.png "Illustrative example showing intercept at zero") + +# Modelling PISA data +Moving on to Twenge et al. Let's take a look at their comprehensive model for the effect of smartphone access. I've done some data cleaning to try duplicate their coding, and I think I managed to get reasonably close to their results. + +```r + +> mod_sp <- lmer(loneliness ~ 1 + Smartphone + + year + + SL.UEM.TOTL.ZS + + I(NY.GDP.MKTP.CD / 1e9) + + SI.POV.GINI + + SP.DYN.TFRT.IN + + (1 + year | cnt), + data = df) +> summary(mod_sp) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Smartphone + year + SL.UEM.TOTL.ZS + I(NY.GDP.MKTP.CD/1e+09) + + SI.POV.GINI + SP.DYN.TFRT.IN + (1 + year | cnt) + Data: df + +REML criterion at convergence: -66.4 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.79365 -0.53021 -0.02431 0.51172 1.37116 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 1.318e-02 0.11480 + year 5.882e-05 0.00767 0.02 + Residual 2.103e-03 0.04586 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.389e+00 1.794e-01 7.741 +Smartphone 3.684e-03 1.117e-03 3.297 +year 1.815e-02 5.656e-03 3.209 +SL.UEM.TOTL.ZS -3.444e-03 3.714e-03 -0.927 +I(NY.GDP.MKTP.CD/1e+09) -5.470e-05 3.473e-05 -1.575 +SI.POV.GINI 8.355e-03 4.450e-03 1.877 +SP.DYN.TFRT.IN -4.608e-02 6.341e-02 -0.727 + +Correlation of Fixed Effects: + (Intr) Smrtph year SL.UEM I(NY.G SI.POV +Smartphone -0.624 +year 0.384 -0.752 +SL.UEM.TOTL -0.125 -0.023 0.366 +I(NY.GDP.MK 0.129 0.030 -0.002 0.137 +SI.POV.GINI -0.594 0.198 -0.242 -0.345 -0.398 +SP.DYN.TFRT -0.324 -0.016 0.129 0.347 0.055 -0.373 +fit warnings: +Some predictor variables are on very different scales: consider rescaling + + + +> mod_int <- lmer(loneliness ~ 1 + Internet + + year + + SL.UEM.TOTL.ZS + + I(NY.GDP.MKTP.CD / 1e9) + + SI.POV.GINI + + SP.DYN.TFRT.IN + + (1 + year | cnt), + data = df) +boundary (singular) fit: see ?isSingular +Warning message: +Some predictor variables are on very different scales: consider rescaling + +> summary(mod_int) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Internet + year + SL.UEM.TOTL.ZS + I(NY.GDP.MKTP.CD/1e+09) + + SI.POV.GINI + SP.DYN.TFRT.IN + (1 + year | cnt) + Data: df + +REML criterion at convergence: -69.6 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.77904 -0.45423 -0.00952 0.55724 1.67040 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 1.056e-02 0.102743 + year 1.003e-05 0.003167 1.00 + Residual 2.867e-03 0.053545 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.569e+00 1.626e-01 9.650 +Internet 7.030e-02 3.512e-02 2.002 +year 1.814e-02 8.130e-03 2.232 +SL.UEM.TOTL.ZS -2.972e-03 3.628e-03 -0.819 +I(NY.GDP.MKTP.CD/1e+09) -4.400e-05 3.431e-05 -1.282 +SI.POV.GINI 4.903e-03 4.285e-03 1.144 +SP.DYN.TFRT.IN -3.368e-02 6.175e-02 -0.546 + +Correlation of Fixed Effects: + (Intr) Intrnt year SL.UEM I(NY.G SI.POV +Internet -0.566 +year 0.447 -0.890 +SL.UEM.TOTL -0.163 0.013 0.227 +I(NY.GDP.MK 0.118 0.061 -0.037 0.157 +SI.POV.GINI -0.457 -0.074 0.000 -0.358 -0.437 +SP.DYN.TFRT -0.405 0.121 -0.029 0.369 0.098 -0.407 +fit warnings: +Some predictor variables are on very different scales: consider rescaling +optimizer (nloptwrap) convergence code: 0 (OK) +boundary (singular) fit: see ?isSingular + + +``` + +They made an interesting choice here with GDP. I think they took gross GDP and then divided by 1 billion. When I do so, I get coefficients that are similar. + +If you look at the correlation of the fixed effects, you can see that they are -0.624 for smartphone access and -0.584 for internet usage. Those are pretty strong, and are good suggestions that our coefficients are biased. + + +## Centering the variables +Now let's center our variables at their first observed values. For most countries, this is 2012, but for a few it is 2015. We are also going to grand-mean center the baseline means, to help break the correlation between the random effects and the fixed effects. + + +```r + +> df <- df %>% + group_by(cnt) %>% + mutate(Smartphone_2012 = dplyr::first(Smartphone, order_by = year), + Internet_2012 = dplyr::first(Internet, order_by = year), + SL.UEM.TOTL.ZS_2012 = dplyr::first(SL.UEM.TOTL.ZS, order_by = year), + NY.GDP.MKTP.CD_2012 = dplyr::first(log(NY.GDP.MKTP.CD), order_by = year), + NY.GDP.MKTP.CD_2012_unlogged = dplyr::first(NY.GDP.MKTP.CD, order_by = year) / 1e9, + NY.GDP.PCAP.CD_2012 = dplyr::first(log(NY.GDP.PCAP.CD), order_by = year), + SI.POV.GINI_2012 = dplyr::first(SI.POV.GINI, order_by = year), + SP.DYN.TFRT.IN_2012 = dplyr::first(SP.DYN.TFRT.IN, order_by = year), + Smartphone_tc = Smartphone - Smartphone_2012, + Internet_tc = Internet - Internet_2012, + SL.UEM.TOTL.ZS_tc = SL.UEM.TOTL.ZS - SL.UEM.TOTL.ZS_2012, + NY.GDP.MKTP.CD_tc = log(NY.GDP.MKTP.CD) - NY.GDP.MKTP.CD_2012, + NY.GDP.PCAP.CD_tc_unlogged = (NY.GDP.PCAP.CD / 1e9) - NY.GDP.MKTP.CD_2012_unlogged, + NY.GDP.PCAP.CD_tc = log(NY.GDP.PCAP.CD) - NY.GDP.PCAP.CD_2012, + SI.POV.GINI_tc = SI.POV.GINI - SI.POV.GINI_2012, + SP.DYN.TFRT.IN_tc = SP.DYN.TFRT.IN - SP.DYN.TFRT.IN_2012) %>% + ungroup() %>% + mutate(Smartphone_2012 = Smartphone_2012 - mean(Smartphone_2012), + Internet_2012 = Internet_2012 - mean(Internet_2012), + SL.UEM.TOTL.ZS_2012 = SL.UEM.TOTL.ZS_2012 - mean(SL.UEM.TOTL.ZS_2012), + NY.GDP.MKTP.CD_2012 = NY.GDP.MKTP.CD_2012 - mean(NY.GDP.MKTP.CD_2012), + NY.GDP.MKTP.CD_2012_unlogged = NY.GDP.MKTP.CD_2012_unlogged - mean(NY.GDP.MKTP.CD_2012_unlogged), + NY.GDP.PCAP.CD_2012 = NY.GDP.PCAP.CD_2012 - mean(NY.GDP.PCAP.CD_2012), + SI.POV.GINI_2012 = SI.POV.GINI_2012 - mean(SI.POV.GINI_2012), + SP.DYN.TFRT.IN_2012 = SP.DYN.TFRT.IN_2012 - mean(SP.DYN.TFRT.IN_2012)) + +``` + +We're going to run the model and look at the results. I've included the baseline means in the model, but given the number of observations (61), this is asking a lot of the data. For 64 observations, there's 11 predictors plus the random intercepts and slopes for year. This model is almost certainly overfit (though I think their original model is too). + +In the model below, I have also used the natural log of gross GDP, which makes more sense to me (so much as using gross GDP makes sense). + +```r + +> mod_sp_tc <- lmer(loneliness ~ 1 + Smartphone_tc + + year + + SL.UEM.TOTL.ZS_tc + + NY.GDP.MKTP.CD_tc + + SI.POV.GINI_tc + + SP.DYN.TFRT.IN_tc + + Internet_2012 + + SL.UEM.TOTL.ZS_2012 + + NY.GDP.MKTP.CD_2012 + + SI.POV.GINI_2012 + + SP.DYN.TFRT.IN_2012 + + (1 + year | cnt), + data = df) +> summary(mod_sp_tc) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Smartphone_tc + year + SL.UEM.TOTL.ZS_tc + NY.GDP.MKTP.CD_tc + + SI.POV.GINI_tc + SP.DYN.TFRT.IN_tc + Smartphone_2012 + SL.UEM.TOTL.ZS_2012 + + NY.GDP.MKTP.CD_2012 + SI.POV.GINI_2012 + SP.DYN.TFRT.IN_2012 + (1 + year | cnt) + Data: df + +REML criterion at convergence: -59.4 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.54401 -0.39900 0.03901 0.40098 1.43279 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 0.0135895 0.116574 + year 0.0000978 0.009889 -0.35 + Residual 0.0015830 0.039787 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.794916 0.025806 69.554 +Smartphone_tc 0.001882 0.001317 1.429 +year 0.026335 0.006494 4.055 +SL.UEM.TOTL.ZS_tc -0.005489 0.006203 -0.885 +NY.GDP.MKTP.CD_tc -0.249820 0.100478 -2.486 +SI.POV.GINI_tc -0.004329 0.009862 -0.439 +SP.DYN.TFRT.IN_tc -0.087007 0.116167 -0.749 +Smartphone_2012 0.003587 0.002286 1.569 +SL.UEM.TOTL.ZS_2012 -0.008922 0.004819 -1.851 +NY.GDP.MKTP.CD_2012 -0.029471 0.018625 -1.582 +SI.POV.GINI_2012 0.010315 0.004443 2.322 +SP.DYN.TFRT.IN_2012 -0.079967 0.070667 -1.132 + +Correlation of Fixed Effects: + (Intr) Smrtp_ year SL.UEM.TOTL.ZS_t NY.GDP.MKTP.CD_t SI.POV.GINI_t SP.DYN.TFRT.IN_t +Smartphn_tc 0.044 +year -0.267 -0.781 +SL.UEM.TOTL.ZS_t -0.004 0.247 0.134 +NY.GDP.MKTP.CD_t 0.088 0.582 -0.414 0.594 +SI.POV.GINI_t -0.018 -0.076 -0.046 -0.570 -0.439 +SP.DYN.TFRT.IN_t -0.016 0.074 0.056 0.353 0.284 -0.287 +Smrtph_2012 -0.012 0.336 -0.305 0.033 0.159 -0.135 -0.045 +SL.UEM.TOTL.ZS_2 -0.013 -0.040 0.102 0.153 0.027 -0.075 -0.018 +NY.GDP.MKTP.CD_2 0.041 0.020 -0.065 -0.091 0.048 0.072 -0.024 +SI.POV.GINI_2 -0.015 0.211 -0.193 0.033 0.145 0.010 0.087 +SP.DYN.TFRT.IN_2 -0.076 -0.062 0.054 -0.070 -0.124 0.041 0.065 + S_2012 SL.UEM.TOTL.ZS_2 NY.GDP.MKTP.CD_2 SI.POV.GINI_2 +Smartphn_tc +year +SL.UEM.TOTL.ZS_t +NY.GDP.MKTP.CD_t +SI.POV.GINI_t +SP.DYN.TFRT.IN_t +Smrtph_2012 +SL.UEM.TOTL.ZS_2 0.275 +NY.GDP.MKTP.CD_2 -0.045 0.042 +SI.POV.GINI_2 0.072 -0.268 -0.293 +SP.DYN.TFRT.IN_2 0.095 0.413 0.015 -0.434 + +``` + +You can see now that within countries, smartphone access is no longer statistically significant , nor is it significant between countries (t-value < 1.96 for both). We can also see that the fixed effects are not correlated with the intercept, as the correlations are below 0.1. The results are substantively similar with group-mean centering. If you're curious about the difference, you can check out the code. + +We see a similar pattern with internet access: we get lower t-values when the predictor is split to account for within and between country effects. + +```r + +> mod_int_tc <- lmer(loneliness ~ 1 + Internet_tc + + year + + SL.UEM.TOTL.ZS_tc + + NY.GDP.MKTP.CD_tc + + SI.POV.GINI_tc + + SP.DYN.TFRT.IN_tc + + Internet_2012 + + SL.UEM.TOTL.ZS_2012 + + NY.GDP.MKTP.CD_2012 + + SI.POV.GINI_2012 + + SP.DYN.TFRT.IN_2012 + + (1 + year | cnt), + data = df) +> summary(mod_int_tc) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Internet_tc + year + SL.UEM.TOTL.ZS_tc + NY.GDP.MKTP.CD_tc + + SI.POV.GINI_tc + SP.DYN.TFRT.IN_tc + Internet_2012 + SL.UEM.TOTL.ZS_2012 + + NY.GDP.MKTP.CD_2012 + SI.POV.GINI_2012 + SP.DYN.TFRT.IN_2012 + (1 + year | cnt) + Data: df + +REML criterion at convergence: -72.8 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.96459 -0.34791 -0.03333 0.37145 1.68167 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 1.124e-02 0.10601 + year 7.691e-05 0.00877 -0.08 + Residual 1.730e-03 0.04159 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.797110 0.024049 74.728 +Internet_tc 0.040006 0.035844 1.116 +year 0.025601 0.008544 2.996 +SL.UEM.TOTL.ZS_tc -0.006334 0.006083 -1.041 +NY.GDP.MKTP.CD_tc -0.302126 0.086721 -3.484 +SI.POV.GINI_tc -0.003565 0.010082 -0.354 +SP.DYN.TFRT.IN_tc -0.087549 0.117947 -0.742 +Internet_2012 0.090039 0.049641 1.814 +SL.UEM.TOTL.ZS_2012 -0.007012 0.004628 -1.515 +NY.GDP.MKTP.CD_2012 -0.016003 0.019074 -0.839 +SI.POV.GINI_2012 0.006421 0.004665 1.376 +SP.DYN.TFRT.IN_2012 -0.053932 0.070147 -0.769 + +Correlation of Fixed Effects: + (Intr) Intrn_ year SL.UEM.TOTL.ZS_t NY.GDP.MKTP.CD_t SI.POV.GINI_t SP.DYN.TFRT.IN_t +Internet_tc 0.128 +year -0.242 -0.883 +SL.UEM.TOTL.ZS_t -0.013 0.048 0.212 +NY.GDP.MKTP.CD_t 0.107 0.221 -0.164 0.566 +SI.POV.GINI_t -0.035 -0.056 -0.025 -0.576 -0.498 +SP.DYN.TFRT.IN_t -0.007 0.017 0.070 0.364 0.306 -0.307 +Intrnt_2012 0.059 0.300 -0.304 -0.007 0.086 -0.104 -0.001 +SL.UEM.TOTL.ZS_2 -0.009 -0.055 0.085 0.114 0.039 -0.059 0.007 +NY.GDP.MKTP.CD_2 0.031 -0.033 -0.003 -0.066 0.032 0.006 -0.016 +SI.POV.GINI_2 -0.012 0.090 -0.088 -0.009 0.029 0.052 0.045 +SP.DYN.TFRT.IN_2 -0.059 0.020 -0.022 -0.041 -0.071 0.012 0.037 + I_2012 SL.UEM.TOTL.ZS_2 NY.GDP.MKTP.CD_2 SI.POV.GINI_2 +Internet_tc +year +SL.UEM.TOTL.ZS_t +NY.GDP.MKTP.CD_t +SI.POV.GINI_t +SP.DYN.TFRT.IN_t +Intrnt_2012 +SL.UEM.TOTL.ZS_2 0.259 +NY.GDP.MKTP.CD_2 0.294 0.173 +SI.POV.GINI_2 -0.346 -0.371 -0.407 +SP.DYN.TFRT.IN_2 0.244 0.453 0.120 -0.488 + + +``` + +# But wait, what if we use per capita GDP? +Now it starts to get more interesting. I mentioned earlier that I think they use gross GDP as one of their predictors. Gross GDP is an odd choice because it does not properly adjust for population size. Using gross GDP, the country with a greater population would have higher GDP even if the countries had an equal GDP per capita. That is not the measure what we want to use. + +Think of it this way. Imagine we had two schools where, on average, students had the same scores. But to figure out which school has "smarter" students, we simply added up the scores of the students and used that as our total. Now imagine that the larger school has more students but a lower aerage test score. The greater number of students means that the lower-scoring school can have a higher gross score, even if the average student is less smart than the smaller school. + +Put simply, but using gross GDP, Twenge et al. are not using a predictor that measures what we want to adjust for, which is how well off the country is _per person_. + + +```r + +> mod_sp_tc2 <- lmer(loneliness ~ 1 + Smartphone_tc + + year + + SL.UEM.TOTL.ZS_tc + + NY.GDP.PCAP.CD_tc + + SI.POV.GINI_tc + + SP.DYN.TFRT.IN_tc + + Smartphone_2012 + + SL.UEM.TOTL.ZS_2012 + + NY.GDP.PCAP.CD_2012 + + SI.POV.GINI_2012 + + SP.DYN.TFRT.IN_2012 + + (1 + year | cnt), + data = df) +> summary(mod_sp_tc2) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Smartphone_tc + year + SL.UEM.TOTL.ZS_tc + NY.GDP.PCAP.CD_tc + + SI.POV.GINI_tc + SP.DYN.TFRT.IN_tc + Smartphone_2012 + SL.UEM.TOTL.ZS_2012 + + NY.GDP.PCAP.CD_2012 + SI.POV.GINI_2012 + SP.DYN.TFRT.IN_2012 + (1 + year | cnt) + Data: df + +REML criterion at convergence: -71.9 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.78007 -0.43656 -0.02092 0.39519 1.40685 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 6.641e-03 0.08150 + year 8.208e-05 0.00906 -0.11 + Residual 1.593e-03 0.03992 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.794731 0.019156 93.692 +Smartphone_tc 0.001776 0.001271 1.398 +year 0.025929 0.006038 4.294 +SL.UEM.TOTL.ZS_tc -0.006048 0.006331 -0.955 +NY.GDP.PCAP.CD_tc -0.270802 0.098602 -2.746 +SI.POV.GINI_tc -0.002465 0.009726 -0.253 +SP.DYN.TFRT.IN_tc -0.066107 0.113767 -0.581 +Smartphone_2012 0.005225 0.001838 2.844 +SL.UEM.TOTL.ZS_2012 -0.002432 0.003800 -0.640 +NY.GDP.PCAP.CD_2012 -0.140300 0.033194 -4.227 +SI.POV.GINI_2012 -0.005088 0.004498 -1.131 +SP.DYN.TFRT.IN_2012 0.026188 0.058734 0.446 + +Correlation of Fixed Effects: + (Intr) Smrtp_ year SL.UEM.TOTL.ZS_t NY.GDP.PCAP.CD_t SI.POV.GINI_t SP.DYN.TFRT.IN_t +Smartphn_tc 0.045 +year -0.243 -0.751 +SL.UEM.TOTL.ZS_t -0.009 0.266 0.174 +NY.GDP.PCAP.CD_t 0.095 0.552 -0.310 0.638 +SI.POV.GINI_t -0.023 -0.047 -0.108 -0.570 -0.435 +SP.DYN.TFRT.IN_t -0.019 0.050 0.103 0.345 0.252 -0.280 +Smrtph_2012 0.019 0.322 -0.315 0.014 0.114 -0.062 -0.038 +SL.UEM.TOTL.ZS_2 -0.022 -0.040 0.090 0.111 -0.013 -0.057 -0.004 +NY.GDP.PCAP.CD_2 0.003 -0.045 0.029 -0.035 0.027 -0.016 -0.028 +SI.POV.GINI_2 0.014 0.128 -0.142 -0.027 0.117 0.023 0.019 +SP.DYN.TFRT.IN_2 -0.067 -0.013 0.008 -0.036 -0.104 0.032 0.055 + S_2012 SL.UEM.TOTL.ZS_2 NY.GDP.PCAP.CD_2 SI.POV.GINI_2 +Smartphn_tc +year +SL.UEM.TOTL.ZS_t +NY.GDP.PCAP.CD_t +SI.POV.GINI_t +SP.DYN.TFRT.IN_t +Smrtph_2012 +SL.UEM.TOTL.ZS_2 0.334 +NY.GDP.PCAP.CD_2 -0.306 -0.278 +SI.POV.GINI_2 -0.153 -0.380 0.687 +SP.DYN.TFRT.IN_2 0.218 0.487 -0.403 -0.568 + +``` + +In this model, we can see that within countries, smartphone access is not a stastically significant predictor of loneliness. But differences between countries' rates of smartphone access in 2012 is statistically significant predictor. So, had they used this model, they might have been able to use this result to strengthen their case that smartphone access is associated with loneliness, but only between countries, not within countries. + +But what if we look at both internet use __and__ smartphone access? + +```r + +> mod_sp_tc3 <- lmer(loneliness ~ 1 + Smartphone_tc + + Internet_tc + + year + + SL.UEM.TOTL.ZS_tc + + NY.GDP.PCAP.CD_tc + + SI.POV.GINI_tc + + SP.DYN.TFRT.IN_tc + + Smartphone_2012 + + Internet_2012 + + SL.UEM.TOTL.ZS_2012 + + NY.GDP.PCAP.CD_2012 + + SI.POV.GINI_2012 + + SP.DYN.TFRT.IN_2012 + + (1 + year | cnt), + data = df) +> summary(mod_sp_tc3) + +Linear mixed model fit by REML ['lmerMod'] +Formula: loneliness ~ 1 + Smartphone_tc + Internet_tc + year + SL.UEM.TOTL.ZS_tc + + NY.GDP.PCAP.CD_tc + SI.POV.GINI_tc + SP.DYN.TFRT.IN_tc + + Smartphone_2012 + Internet_2012 + SL.UEM.TOTL.ZS_2012 + NY.GDP.PCAP.CD_2012 + + SI.POV.GINI_2012 + SP.DYN.TFRT.IN_2012 + (1 + year | cnt) + Data: df + +REML criterion at convergence: -63.9 + +Scaled residuals: + Min 1Q Median 3Q Max +-1.72288 -0.40690 -0.07131 0.37473 1.41784 + +Random effects: + Groups Name Variance Std.Dev. Corr + cnt (Intercept) 6.967e-03 0.083470 + year 9.413e-05 0.009702 -0.10 + Residual 1.532e-03 0.039136 +Number of obs: 61, groups: cnt, 24 + +Fixed effects: + Estimate Std. Error t value +(Intercept) 1.797047 0.019667 91.373 +Smartphone_tc 0.001593 0.001344 1.185 +Internet_tc 0.025369 0.036619 0.693 +year 0.021199 0.008644 2.453 +SL.UEM.TOTL.ZS_tc -0.006155 0.006376 -0.965 +NY.GDP.PCAP.CD_tc -0.265332 0.099032 -2.679 +SI.POV.GINI_tc -0.003345 0.009856 -0.339 +SP.DYN.TFRT.IN_tc -0.067687 0.114965 -0.589 +Smartphone_2012 0.004146 0.002287 1.813 +Internet_2012 0.046150 0.047559 0.970 +SL.UEM.TOTL.ZS_2012 -0.002412 0.003883 -0.621 +NY.GDP.PCAP.CD_2012 -0.131473 0.036442 -3.608 +SI.POV.GINI_2012 -0.005148 0.004596 -1.120 +SP.DYN.TFRT.IN_2012 0.031158 0.060145 0.518 + +Correlation matrix not shown by default, as p = 14 > 12. +Use print(x, correlation=TRUE) or + vcov(x) if you need it + +``` + +Our model now has nearly as many predictors and random effects as there are observations. But we can see that both smartphone access and internet usage are no longer statistically significant. + + +# Final thoughts +Twenge et al.'s mistake is common. The main multilevel modelling textbooks barely cover it (e.g., Snjiders & Bosker, 2011; Raudenbush & Bryk, 2002). They mention it briefly, and then rarely make use of it the rest of the book. + +To be clear, I don't think that Twenge et al.'s model (or mine in this post) is appropriate for what they are trying to measure. There's too few observations, too many preditors, and variables that don't make sense (like gross GDP). By aggregating their data, they have a study that is underpowered and noisy. + + +# References +Below are a few references I've found helpful in using mixed effects models to model longitudinal data. In particular, I recommend Lesa Hoffman's _Longitudinal analysis: Modeling within-person fluctuation and change_. To understand group-mean centering, I also recommend the articles by Bell and coauthors. + + +## Centering +Bell, A., Fairbrother, M., & Jones, K. (2019). Fixed and random effects models: making an informed choice. _Quality & Quantity_, _53_(2), 1051-1074. + +Bell, A., & Jones, K. (2015). Explaining fixed effects: Random effects modeling of time-series cross-sectional and panel data. _Political Science Research and Methods_, _3_(1), 133-153. + +Bell, A., Jones, K., & Fairbrother, M. (2018). Understanding and misunderstanding group mean centering: a commentary on Kelley et al.’s dangerous practice. _Quality & quantity_, _52_(5), 2031-2036. + +Enders, C. K. & Tofighi, D. (2007). Centering Predictor Variables in Cross-Sectional Multilevel Models: A New Look at an Old Issue. _Psychological Methods_, _12_(2). 121-138 + +Hamaker, E. L., & Grasman, R. P. (2015). To center or not to center? Investigating inertia with a multilevel autoregressive model. _Frontiers in psychology_, _5_, 1492. + +Hamaker, E. L., & Muthén, B. (2020). The fixed versus random effects debate and how it relates to centering in multilevel modeling. _Psychological methods_, _25_(3), 365. + +Hoffman, L. (2015). _Longitudinal analysis: Modeling within-person fluctuation and change_. Routledge. + +Raudenbush, S. W., & Bryk, A. S. (2002). _Hierarchical linear models: Applications and data analysis methods_. sage. + +Snijders, T. A., & Bosker, R. J. (2011). _Multilevel analysis: An introduction to basic and advanced multilevel modeling_. sage. + + +## Twenge et al. +Twenge, J. M., Haidt, J., Blake, A. B., McAllister, C., Lemon, H., & Le Roy, A. (2021). Worldwide increases in adolescent loneliness. _Journal of Adolescence_. diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss new file mode 100644 index 0000000..a6f104e --- /dev/null +++ b/_sass/minima/_base.scss @@ -0,0 +1,282 @@ +html { + font-size: $base-font-size; +} + +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + +} + + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; + overflow-wrap: break-word; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + +hr { + margin-top: $spacing-unit; + margin-bottom: $spacing-unit; +} + +/** + * `main` element + */ +main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; +} + + + +/** + * Links + */ +a { + color: $link-base-color; + text-decoration: none; + + &:visited { + color: $link-visited-color; + } + + &:hover { + color: $link-hover-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } +} + + +/** + * Blockquotes + */ +blockquote { + color: $brand-color; + border-left: 4px solid $border-color-01; + padding-left: $spacing-unit / 2; + @include relative-font-size(1.125); + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + + i, em { + font-style: normal; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-family: $code-font-family; + font-size: 0.9375em; + border: 1px solid $border-color-01; + border-radius: 3px; + background-color: $code-background-color; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + +.highlight { + border-radius: 3px; + background: $code-background-color; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: $code-background-color; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: calc(#{$content-width} - (#{$spacing-unit})); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + @extend %clearfix; + + @media screen and (min-width: $on-large) { + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + padding-right: $spacing-unit; + padding-left: $spacing-unit; + } +} + + + +/** + * Clearfix + */ +%clearfix:after { + content: ""; + display: table; + clear: both; +} + + + +/** + * Icons + */ + +.orange { + color: #f66a0a; +} + +.grey { + color: #828282; +} + +.svg-icon { + width: 16px; + height: 16px; + display: inline-block; + fill: currentColor; + padding: 5px 3px 2px 5px; + vertical-align: text-bottom; +} + + +/** + * Tables + */ +table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: $table-text-color; + border-collapse: collapse; + border: 1px solid $table-border-color; + tr { + &:nth-child(even) { + background-color: $table-zebra-color; + } + } + th, td { + padding: ($spacing-unit / 3) ($spacing-unit / 2); + } + th { + background-color: $table-header-bg-color; + border: 1px solid $table-header-border; + } + td { + border: 1px solid $table-border-color; + } + + @include media-query($on-laptop) { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } +} diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss new file mode 100644 index 0000000..40d2cd1 --- /dev/null +++ b/_sass/minima/_layout.scss @@ -0,0 +1,342 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $border-color-03; + border-bottom: 1px solid $border-color-01; + min-height: $spacing-unit * 1.865; + line-height: $base-line-height * $base-font-size * 2.25; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + @include relative-font-size(1.625); + font-weight: 300; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + @include media-query($on-palm) { + padding-right: 45px; + } + + &, + &:visited { + color: $site-title-color; + } +} + +.site-nav { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $border-color-01; + border-radius: 5px; + text-align: right; + + .nav-trigger { + display: none; + } + + .menu-icon { + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg path { + fill: $border-color-03; + } + } + + label[for="nav-trigger"] { + display: block; + float: right; + width: 36px; + height: 36px; + z-index: 2; + cursor: pointer; + } + + input ~ .trigger { + clear: both; + display: none; + } + + input:checked ~ .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + display: block; + padding: 5px 10px; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + + @media screen and (min-width: $on-medium) { + position: static; + float: right; + border: none; + background-color: inherit; + + label[for="nav-trigger"] { + display: none; + } + + .menu-icon { + display: none; + } + + input ~ .trigger { + display: block; + } + + .page-link { + display: inline; + padding: 0; + + &:not(:last-child) { + margin-right: 20px; + } + margin-left: auto; + } + } +} + + + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid $border-color-01; + padding: $spacing-unit 0; +} + +.footer-heading { + @include relative-font-size(1.125); + margin-bottom: $spacing-unit / 2; +} + +.feed-subscribe .svg-icon { + padding: 5px 5px 2px 0 +} + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; +} + +.footer-col-wrapper, +.social-links { + @include relative-font-size(0.9375); + color: $brand-color; +} + +.footer-col { + margin-bottom: $spacing-unit / 2; +} + +.footer-col-1, +.footer-col-2 { + width: calc(50% - (#{$spacing-unit} / 2)); +} + +.footer-col-3 { + width: calc(100% - (#{$spacing-unit} / 2)); +} + +@media screen and (min-width: $on-large) { + .footer-col-1 { + width: calc(35% - (#{$spacing-unit} / 2)); + } + + .footer-col-2 { + width: calc(20% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: calc(45% - (#{$spacing-unit} / 2)); + } +} + +@media screen and (min-width: $on-medium) { + .footer-col-wrapper { + display: flex + } + + .footer-col { + width: calc(100% - (#{$spacing-unit} / 2)); + padding: 0 ($spacing-unit / 2); + + &:first-child { + padding-right: $spacing-unit / 2; + padding-left: 0; + } + + &:last-child { + padding-right: 0; + padding-left: $spacing-unit / 2; + } + } +} + + + +/** + * Page content + */ +.page-content { + padding: $spacing-unit 0; + flex: 1 0 auto; +} + +.page-heading { + @include relative-font-size(2); +} + +.post-list-heading { + @include relative-font-size(1.75); +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $brand-color; +} + +.post-link { + display: block; + @include relative-font-size(1.5); +} + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title, +.post-content h1 { + @include relative-font-size(2.625); + letter-spacing: -1px; + line-height: 1.15; + + @media screen and (min-width: $on-large) { + @include relative-font-size(2.625); + } +} + +.post-content { + margin-bottom: $spacing-unit; + + h1, h2, h3 { margin-top: $spacing-unit * 2 } + h4, h5, h6 { margin-top: $spacing-unit } + + h2 { + @include relative-font-size(1.75); + + @media screen and (min-width: $on-large) { + @include relative-font-size(2); + } + } + + h3 { + @include relative-font-size(1.375); + + @media screen and (min-width: $on-large) { + @include relative-font-size(1.625); + } + } + + h4 { + @include relative-font-size(1.25); + } + + h5 { + @include relative-font-size(1.125); + } + h6 { + @include relative-font-size(1.0625); + } +} + + +.social-media-list { + display: table; + margin: 0 auto; + li { + float: left; + margin: 5px 10px 5px 0; + &:last-of-type { margin-right: 0 } + a { + display: block; + padding: $spacing-unit / 4; + border: 1px solid $border-color-01; + &:hover { border-color: $border-color-02 } + } + } +} + + + +/** + * Pagination navbar + */ +.pagination { + margin-bottom: $spacing-unit; + @extend .social-media-list; + li { + a, div { + min-width: 41px; + text-align: center; + box-sizing: border-box; + } + div { + display: block; + padding: $spacing-unit / 4; + border: 1px solid transparent; + + &.pager-edge { + color: $border-color-01; + border: 1px dashed; + } + } + } +} + + + +/** + * Grid helpers + */ +@media screen and (min-width: $on-large) { + .one-half { + width: calc(50% - (#{$spacing-unit} / 2)); + } +} diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss new file mode 100644 index 0000000..7c1417f --- /dev/null +++ b/_sass/minima/custom-styles.scss @@ -0,0 +1,2 @@ +// Placeholder to allow defining custom styles that override everything else. +// (Use `_sass/minima/custom-variables.scss` to override variable defaults) diff --git a/_sass/minima/custom-variables.scss b/_sass/minima/custom-variables.scss new file mode 100644 index 0000000..2a2d0fa --- /dev/null +++ b/_sass/minima/custom-variables.scss @@ -0,0 +1 @@ +// Placeholder to allow overriding predefined variables smoothly. diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss new file mode 100644 index 0000000..ab55458 --- /dev/null +++ b/_sass/minima/initialize.scss @@ -0,0 +1,50 @@ +@charset "utf-8"; + +// Define defaults for each variable. + +$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default; +$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; +$base-font-size: 16px !default; +$base-font-weight: 400 !default; +$small-font-size: $base-font-size * 0.875 !default; +$base-line-height: 1.5 !default; + +$spacing-unit: 30px !default; + +$table-text-align: left !default; + +// Width of the content area +$content-width: 800px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +$on-medium: $on-palm !default; +$on-large: $on-laptop !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +// Notice the following mixin uses max-width, in a deprecated, desktop-first +// approach, whereas media queries used elsewhere now use min-width. +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: #{$ratio}rem; +} + +// Import pre-styling-overrides hook and style-partials. +@import + "minima/custom-variables", // Hook to override predefined variables. + "minima/base", // Defines element resets. + "minima/layout", // Defines structure and style based on CSS selectors. + "minima/custom-styles" // Hook to override existing styles. +; diff --git a/_sass/minima/skins/classic.scss b/_sass/minima/skins/classic.scss new file mode 100644 index 0000000..c6dc292 --- /dev/null +++ b/_sass/minima/skins/classic.scss @@ -0,0 +1,91 @@ +@charset "utf-8"; + +$brand-color: #828282 !default; +$brand-color-light: lighten($brand-color, 40%) !default; +$brand-color-dark: darken($brand-color, 25%) !default; + +$site-title-color: $brand-color-dark !default; + +$text-color: #111111 !default; +$background-color: #fdfdfd !default; +$code-background-color: #eeeeff !default; + +$link-base-color: #2a7ae2 !default; +$link-visited-color: darken($link-base-color, 15%) !default; +$link-hover-color: $text-color !default; + +$border-color-01: $brand-color-light !default; +$border-color-02: lighten($brand-color, 35%) !default; +$border-color-03: $brand-color-dark !default; + +$table-text-color: lighten($text-color, 18%) !default; +$table-zebra-color: lighten($brand-color, 46%) !default; +$table-header-bg-color: lighten($brand-color, 43%) !default; +$table-header-border: lighten($brand-color, 37%) !default; +$table-border-color: $border-color-01 !default; + + +// Syntax highlighting styles should be adjusted appropriately for every "skin" +// ---------------------------------------------------------------------------- + +.highlight { + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/_sass/minima/skins/dark.scss b/_sass/minima/skins/dark.scss new file mode 100644 index 0000000..39b893f --- /dev/null +++ b/_sass/minima/skins/dark.scss @@ -0,0 +1,95 @@ +@charset "utf-8"; + +$brand-color: #999999 !default; +$brand-color-light: lighten($brand-color, 5%) !default; +$brand-color-dark: darken($brand-color, 35%) !default; + +$site-title-color: $brand-color-light !default; + +$text-color: #bbbbbb !default; +$background-color: #181818 !default; +$code-background-color: #212121 !default; + +$link-base-color: #79b8ff !default; +$link-visited-color: $link-base-color !default; +$link-hover-color: $text-color !default; + +$border-color-01: $brand-color-dark !default; +$border-color-02: $brand-color-light !default; +$border-color-03: $brand-color !default; + +$table-text-color: $text-color !default; +$table-zebra-color: lighten($background-color, 4%) !default; +$table-header-bg-color: lighten($background-color, 10%) !default; +$table-header-border: lighten($background-color, 21%) !default; +$table-border-color: $border-color-01 !default; + + +// Syntax highlighting styles should be adjusted appropriately for every "skin" +// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens +// Some colors come from Material Theme Darker: +// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts +// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts +// ---------------------------------------------------------------------------- + +.highlight { + .c { color: #545454; font-style: italic } // Comment + .err { color: #f07178; background-color: #e3d2d2 } // Error + .k { color: #89DDFF; font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #545454; font-style: italic } // Comment.Multiline + .cp { color: #545454; font-weight: bold } // Comment.Preproc + .c1 { color: #545454; font-style: italic } // Comment.Single + .cs { color: #545454; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #f07178 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #f07178 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #FFCB6B; font-weight: bold } // Keyword.Type + .m { color: #F78C6C } // Literal.Number + .s { color: #C3E88D } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #EEFFFF } // Name.Builtin + .nc { color: #FFCB6B; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #82AAFF; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #FFCB6B } // Name.Tag + .nv { color: #EEFFFF } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #EEFFFF } // Text.Whitespace + .mf { color: #F78C6C } // Literal.Number.Float + .mh { color: #F78C6C } // Literal.Number.Hex + .mi { color: #F78C6C } // Literal.Number.Integer + .mo { color: #F78C6C } // Literal.Number.Oct + .sb { color: #C3E88D } // Literal.String.Backtick + .sc { color: #C3E88D } // Literal.String.Char + .sd { color: #C3E88D } // Literal.String.Doc + .s2 { color: #C3E88D } // Literal.String.Double + .se { color: #EEFFFF } // Literal.String.Escape + .sh { color: #C3E88D } // Literal.String.Heredoc + .si { color: #C3E88D } // Literal.String.Interpol + .sx { color: #C3E88D } // Literal.String.Other + .sr { color: #C3E88D } // Literal.String.Regex + .s1 { color: #C3E88D } // Literal.String.Single + .ss { color: #C3E88D } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #FFCB6B } // Name.Variable.Class + .vg { color: #EEFFFF } // Name.Variable.Global + .vi { color: #EEFFFF } // Name.Variable.Instance + .il { color: #F78C6C } // Literal.Number.Integer.Long +} diff --git a/_sass/minima/skins/solarized-dark.scss b/_sass/minima/skins/solarized-dark.scss new file mode 100644 index 0000000..f3b1f38 --- /dev/null +++ b/_sass/minima/skins/solarized-dark.scss @@ -0,0 +1,4 @@ +@charset "utf-8"; + +$sol-is-dark: true; +@import "minima/skins/solarized"; diff --git a/_sass/minima/skins/solarized.scss b/_sass/minima/skins/solarized.scss new file mode 100644 index 0000000..6253d69 --- /dev/null +++ b/_sass/minima/skins/solarized.scss @@ -0,0 +1,140 @@ +@charset "utf-8"; + +// Solarized skin +// ============== +// Created by Sander Voerman using the Solarized +// color scheme by Ethan Schoonover . + +// This style sheet implements two options for the minima.skin setting: +// "solarized" for light mode and "solarized-dark" for dark mode. +$sol-is-dark: false !default; + + +// Color scheme +// ------------ +// The inline comments show the canonical L*a*b values for each color. + +$sol-base03: #002b36; // 15 -12 -12 +$sol-base02: #073642; // 20 -12 -12 +$sol-base01: #586e75; // 45 -07 -07 +$sol-base00: #657b83; // 50 -07 -07 +$sol-base0: #839496; // 60 -06 -03 +$sol-base1: #93a1a1; // 65 -05 -02 +$sol-base2: #eee8d5; // 92 -00 10 +$sol-base3: #fdf6e3; // 97 00 10 +$sol-yellow: #b58900; // 60 10 65 +$sol-orange: #cb4b16; // 50 50 55 +$sol-red: #dc322f; // 50 65 45 +$sol-magenta: #d33682; // 50 65 -05 +$sol-violet: #6c71c4; // 50 15 -45 +$sol-blue: #268bd2; // 55 -10 -45 +$sol-cyan: #2aa198; // 60 -35 -05 +$sol-green: #859900; // 60 -20 65 + +$sol-mono3: $sol-base3; +$sol-mono2: $sol-base2; +$sol-mono1: $sol-base1; +$sol-mono00: $sol-base00; +$sol-mono01: $sol-base01; + +@if $sol-is-dark { + $sol-mono3: $sol-base03; + $sol-mono2: $sol-base02; + $sol-mono1: $sol-base01; + $sol-mono00: $sol-base0; + $sol-mono01: $sol-base1; +} + + +// Minima color variables +// ---------------------- + +$brand-color: $sol-mono1 !default; +$brand-color-light: mix($sol-mono1, $sol-mono3) !default; +$brand-color-dark: $sol-mono00 !default; + +$site-title-color: $sol-mono00 !default; + +$text-color: $sol-mono01 !default; +$background-color: $sol-mono3 !default; +$code-background-color: $sol-mono2 !default; + +$link-base-color: $sol-blue !default; +$link-visited-color: mix($sol-blue, $sol-mono00) !default; +$link-hover-color: $sol-mono00 !default; + +$border-color-01: $brand-color-light !default; +$border-color-02: $sol-mono1 !default; +$border-color-03: $sol-mono00 !default; + +$table-text-color: $sol-mono00 !default; +$table-zebra-color: mix($sol-mono2, $sol-mono3) !default; +$table-header-bg-color: $sol-mono2 !default; +$table-header-border: $sol-mono1 !default; +$table-border-color: $sol-mono1 !default; + + +// Syntax highlighting styles +// -------------------------- + +.highlight { + .c { color: $sol-mono1; font-style: italic } // Comment + .err { color: $sol-red } // Error + .k { color: $sol-mono01; font-weight: bold } // Keyword + .o { color: $sol-mono01; font-weight: bold } // Operator + .cm { color: $sol-mono1; font-style: italic } // Comment.Multiline + .cp { color: $sol-mono1; font-weight: bold } // Comment.Preproc + .c1 { color: $sol-mono1; font-style: italic } // Comment.Single + .cs { color: $sol-mono1; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: $sol-red } // Generic.Deleted + .gd .x { color: $sol-red } // Generic.Deleted.Specific + .ge { color: $sol-mono00; font-style: italic } // Generic.Emph + .gr { color: $sol-red } // Generic.Error + .gh { color: $sol-mono1 } // Generic.Heading + .gi { color: $sol-green } // Generic.Inserted + .gi .x { color: $sol-green } // Generic.Inserted.Specific + .go { color: $sol-mono00 } // Generic.Output + .gp { color: $sol-mono00 } // Generic.Prompt + .gs { color: $sol-mono01; font-weight: bold } // Generic.Strong + .gu { color: $sol-mono1 } // Generic.Subheading + .gt { color: $sol-red } // Generic.Traceback + .kc { color: $sol-mono01; font-weight: bold } // Keyword.Constant + .kd { color: $sol-mono01; font-weight: bold } // Keyword.Declaration + .kp { color: $sol-mono01; font-weight: bold } // Keyword.Pseudo + .kr { color: $sol-mono01; font-weight: bold } // Keyword.Reserved + .kt { color: $sol-violet; font-weight: bold } // Keyword.Type + .m { color: $sol-cyan } // Literal.Number + .s { color: $sol-magenta } // Literal.String + .na { color: $sol-cyan } // Name.Attribute + .nb { color: $sol-blue } // Name.Builtin + .nc { color: $sol-violet; font-weight: bold } // Name.Class + .no { color: $sol-cyan } // Name.Constant + .ni { color: $sol-violet } // Name.Entity + .ne { color: $sol-violet; font-weight: bold } // Name.Exception + .nf { color: $sol-blue; font-weight: bold } // Name.Function + .nn { color: $sol-mono00 } // Name.Namespace + .nt { color: $sol-blue } // Name.Tag + .nv { color: $sol-cyan } // Name.Variable + .ow { color: $sol-mono01; font-weight: bold } // Operator.Word + .w { color: $sol-mono1 } // Text.Whitespace + .mf { color: $sol-cyan } // Literal.Number.Float + .mh { color: $sol-cyan } // Literal.Number.Hex + .mi { color: $sol-cyan } // Literal.Number.Integer + .mo { color: $sol-cyan } // Literal.Number.Oct + .sb { color: $sol-magenta } // Literal.String.Backtick + .sc { color: $sol-magenta } // Literal.String.Char + .sd { color: $sol-magenta } // Literal.String.Doc + .s2 { color: $sol-magenta } // Literal.String.Double + .se { color: $sol-magenta } // Literal.String.Escape + .sh { color: $sol-magenta } // Literal.String.Heredoc + .si { color: $sol-magenta } // Literal.String.Interpol + .sx { color: $sol-magenta } // Literal.String.Other + .sr { color: $sol-green } // Literal.String.Regex + .s1 { color: $sol-magenta } // Literal.String.Single + .ss { color: $sol-magenta } // Literal.String.Symbol + .bp { color: $sol-mono1 } // Name.Builtin.Pseudo + .vc { color: $sol-cyan } // Name.Variable.Class + .vg { color: $sol-cyan } // Name.Variable.Global + .vi { color: $sol-cyan } // Name.Variable.Instance + .il { color: $sol-cyan } // Literal.Number.Integer.Long +} diff --git a/about.md b/about.md new file mode 100644 index 0000000..8b4e0b2 --- /dev/null +++ b/about.md @@ -0,0 +1,18 @@ +--- +layout: page +title: About +permalink: /about/ +--- + +This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/) + +You can find the source code for Minima at GitHub: +[jekyll][jekyll-organization] / +[minima](https://github.com/jekyll/minima) + +You can find the source code for Jekyll at GitHub: +[jekyll][jekyll-organization] / +[jekyll](https://github.com/jekyll/jekyll) + + +[jekyll-organization]: https://github.com/jekyll diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..0d1fce9 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,7 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- + +@import + "minima/skins/{{ site.minima.skin | default: 'classic' }}", + "minima/initialize"; diff --git a/assets/minima-social-icons.svg b/assets/minima-social-icons.svg new file mode 100644 index 0000000..ff02f3e --- /dev/null +++ b/assets/minima-social-icons.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.md b/index.md new file mode 100644 index 0000000..6b5ccc6 --- /dev/null +++ b/index.md @@ -0,0 +1,9 @@ +--- +# +# By default, content added below the "---" mark will appear in the home page +# between the top bar and the list of recent posts. +# To change the home page layout, edit the _layouts/home.html file. +# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults +# +layout: home +--- diff --git a/minima.gemspec b/minima.gemspec new file mode 100644 index 0000000..39042b3 --- /dev/null +++ b/minima.gemspec @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +Gem::Specification.new do |spec| + spec.name = "minima" + spec.version = "2.5.1" + spec.authors = ["Joel Glovier"] + spec.email = ["jglovier@github.com"] + + spec.summary = "A beautiful, minimal theme for Jekyll." + spec.homepage = "https://github.com/jekyll/minima" + spec.license = "MIT" + + spec.metadata["plugin_type"] = "theme" + + spec.files = `git ls-files -z`.split("\x0").select do |f| + f.match(%r!^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md|markdown)|$)))!i) + end + + spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0" + spec.add_runtime_dependency "jekyll-feed", "~> 0.9" + spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.1" + + spec.add_development_dependency "bundler" +end diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..6200392 Binary files /dev/null and b/screenshot.png differ diff --git a/script/bootstrap b/script/bootstrap new file mode 100755 index 0000000..492e553 --- /dev/null +++ b/script/bootstrap @@ -0,0 +1,6 @@ +#!/bin/sh + +set -e + +gem install bundler +bundle install diff --git a/script/build b/script/build new file mode 100755 index 0000000..c4ac84f --- /dev/null +++ b/script/build @@ -0,0 +1,6 @@ +#!/bin/sh + +set -e + +echo "Building the example site..." +bundle exec jekyll build diff --git a/script/cibuild b/script/cibuild new file mode 100755 index 0000000..c3c0e99 --- /dev/null +++ b/script/cibuild @@ -0,0 +1,15 @@ +#!/bin/sh + +set -e + +script/build + +if test -e "./_site/index.html";then + echo "It builds!" + rm -Rf _site +else + echo "Huh. That's odd. The example site doesn't seem to build." + exit 1 +fi + +gem build minima.gemspec diff --git a/script/server b/script/server new file mode 100755 index 0000000..d8c3e15 --- /dev/null +++ b/script/server @@ -0,0 +1,3 @@ +#!/bin/sh + +bundle exec jekyll serve