Merge pull request #9 from lowcodelounge/local-css

Numerous updates

LICENSE

@@ -21,28 +21,4 @@ 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.
 
-For more information, please refer to <https://unlicense.org>
-
----
-
-For HTML 5 Boilerplate:
-
-Copyright (c) HTML5 Boilerplate
-
-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.
+For more information, please refer to <https://unlicense.org>

README.md

@@ -15,12 +15,18 @@ You'll see a URL show up, but the site takes a few minutes before it's actually
 ### Creating your first page
 1. Go to the `Code` tab.
 1. Press the `Add File` button and select `Create new file`.
-1. Give the page a title, for example, `first-page.md`. (Note the lack of spaces and the inclusion of the .md extension.)
+1. Name the page, for example, `first-page.md`. (Note the lack of spaces and the inclusion of the .md extension.)
+1. Add a title in the front matter:
+    ```
+    ---
+    title: First Page
+    ---
+    ```
 1. Add some content using [markdown](https://guides.github.com/features/mastering-markdown/) syntax. For example, you could start with a heading and paragraph like this:
-```
-# First page
-This is my first page.
-```
+    ```
+    # First page
+    This is my first page.
+    ```
 5. Scroll down to the bottom of the page and press `Commit new file`.
 
 ### Checking your page online
@@ -37,17 +43,49 @@ Now that you know how to create pages, here are some other things you can do:
 - Add links between pages so it works like a website.
 - Copy component code snippets from the [GitHub Primer design system](https://primer.style/css/components) to add more advanced functionality to your pages.
 
+## Default `body` and `main` styling classes
+- By default, the `body` element includes the `p-3` utility class from Primer. This adds some padding to the page on all sides.
+- The `main` element includes these two classes: `container-md` and `markdown-body`. The first one sets a maximum width for the content area and the second provides the default GitHub styling for Markdown content.
+- To override these, add these settings to the front matter of your content page: `body-style` and `main-style`.
+
+For example:
+```
+title: Home
+body-style: p-0
+main-style: container-lg
+```
+
+If you want to replace the defaults with nothing, do this:
+```
+title: My Page
+body-style: ""
+main-style: ""
+```
+
+## Local CSS
+If you want to work locally and/or offline, you can use a local copy of the Primer CSS instead of referencing the hosted version. Note the local copy may not be the latest version because it will need to kept up-to-date manually.
+
+To switch to local CSS, replace this line in `_layouts/default.html`:
+```
+<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css">
+```
+
+with this:
+```
+<link rel="stylesheet" href="assets/css/primer.css">
+```
+
 ## What to do if you're having problems
 - Try starting over with a new repository and follow the instructions again.
-- If it's still not working, [create an issue in the original Plain Vanilla GitHub Pages repo](https://github.com/pglevy/plain-vanilla-gh-pages/issues), and I'll try to help.
+- If it's still not working, [create an issue in the original Plain Vanilla GitHub Pages repo](https://github.com/lowcodelounge/plain-vanilla-gh-pages/issues), and I'll try to help.
 
 ## Getting started with Gitpod
 Gitpod is a cloud-based development environment that allows you to work with code and static site compilers without having to install software on your local machine.
 
 To use Gitpod:
-1. [Create a copy](https://github.com/githubfornocoders/plain-vanilla-gh-pages/generate) of the repo template.
+1. [Create a copy](https://github.com/lowcodelounge/plain-vanilla-gh-pages/generate) of the repo template.
 2. [Log into Gitpod](https://gitpod.io/login/) using your GitHub account.
-3. [Open a new workspace using this Gitpod link](https://gitpod.io/#https://github.com/githubfornocoders/plain-vanilla-gh-pages/tree/main).
+3. [Open a new workspace using this Gitpod link](https://gitpod.io/#https://github.com/lowcodelounge/plain-vanilla-gh-pages/tree/main).
 
 What happens next:
 - An instance of the VS Code text editor opens in your browser.
@@ -60,6 +98,6 @@ What happens next:
 To run the site locally, you'll need to install [Jekyll](https://jekyllrb.com/), which requires a few steps. See the [official installation instructions](https://jekyllrb.com/docs/installation/).
 
 ## Credit and license
-This project was created primarily using the [GitHub Pages gem for Jekyll](https://github.com/github/pages-gem) and a slightly modified [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate). It is licensed under [The Unlicense](https://github.com/pglevy/plain-vanilla-gh-pages/blob/main/LICENSE), which allows everything and promises nothing. 😎
+This project was created using the [GitHub Pages gem for Jekyll](https://github.com/github/pages-gem). It is licensed under [The Unlicense](https://github.com/pglevy/plain-vanilla-gh-pages/blob/main/LICENSE), which allows everything and promises nothing. 😎
 
-Favicon is `Soft Ice Cream` from [Twemoji](https://twemoji.twitter.com/), licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
+Favicon is `Soft Ice Cream` from [Twemoji](https://twemoji.twitter.com/), licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).

_config.yml

@@ -7,8 +7,5 @@ description: Free, easy, low-tech website template using GitHub Pages
 # Set the language for the site. Used for "html lang." Default is English.
 lang: en
 
-# Add Google Analytics if needed. Replace placeholder with site ID.
-ga: UA-XXXXX-Y
-
-# Avoid GitHub API authentication when building locally. (Not working)
+# Avoid GitHub API authentication when building locally.
 github: [metadata]

_layouts/default.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="{{site.lang}}">
+
+<head>
+  <meta charset="utf-8">
+  <title>{{ site.title }}</title>
+  <meta name="description" content="{{ site.description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="icon" href="favicon.ico" sizes="any">
+
+  <link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css">
+  <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+
+<body class="{% if page.body-style %}{{ page.body-style }}{% else %}p-3{% endif %}">
+  <main class="{% if page.main-style %}{{ page.main-style }}{% else %}container-md markdown-body{% endif %}">
+    {{ content }}
+  </main>
+  <script src="assets/js/main.js"></script>
+</body>
+
+</html>

assets/css/custom.css

@@ -1,3 +1 @@
-main {
-    font-size: 125% !important;
-}
+/* Add CSS rules to override Primer */