All the files
supply % tree
.
├── 301.txt
├── CNAME
├── CODE_OF_CONDUCT.md
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── SECURITY.md
├── _config.yml
├── _data
│ ├── navigation.yml
│ └── theme.yml
├── _includes
│ ├── Gumroad-secured.html
│ ├── category_tag_list.html
│ ├── figure
│ ├── footer.html
│ ├── formcarry.html
│ ├── gumroad-embed.html
│ ├── gumroad-link.html
│ ├── gumroad-overlay.html
│ ├── navigation.html
│ ├── post_pagination.html
│ ├── product-styles.html
│ ├── relative-src.html
│ ├── site-search.html
│ ├── social-icon.html
│ └── video.html
├── _layouts
│ ├── archive.html
│ ├── default.html
│ ├── page.html
│ ├── post.html
│ └── product.html
├── _pages
│ ├── 404.md
│ ├── about.md
│ ├── blog.html
│ ├── contact-success.html
│ ├── contact.html
│ ├── faq.md
│ ├── free-products.html
│ ├── privacy.md
│ └── support.md
├── _posts
│ ├── 2020-04-12-how-to-use-jekyll.md
│ ├── 2020-04-12-supply-theme-setup.md
│ ├── 2020-04-14-theme-development.md
│ ├── 2020-04-15-custom-variables.md
│ ├── 2020-04-16-post-formatting.md
│ ├── 2020-04-17-code-blocks.md
│ ├── 2020-04-19-post-updated.md
│ ├── 2020-04-20-post-video.md
│ ├── 2020-04-21-built-in-site-search.md
│ ├── 2020-04-22-add-a-product-page.md
│ ├── 2020-04-23-gumroad-embed.md
│ ├── 2020-04-23-gumroad-hyperlink.md
│ ├── 2020-04-23-gumroad-overlay.md
│ ├── 2020-04-23-post-with-products.md
│ └── 2021-08-26-jekyll-SEO.md
├── _products
│ ├── Screenplay-template-for-Apple-Pages-Warner-Brothers.md
│ ├── assignments-tracker.md
│ ├── free-Japanese-anime-storyboard-template-widescreen-a4-vertical.md
│ ├── free-anime-storyboard-template-widescreen-a4-vertical.md
│ ├── soon-temporary-jekyll-site-template.md
│ └── supply-jekyll-e-commerce-theme.md
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── assets
│ ├── css
│ │ ├── sup-tachyons.css
│ │ └── sup-tachyons.min.css
│ ├── js
│ │ ├── fetch.js
│ │ └── script.min.js
│ └── search.json
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── images
│ ├── image-1200.jpg
│ ├── image-600.jpg
│ ├── screenshot.png
│ └── templates
│ ├── assignments
│ │ └── assignments_tracker_spreadsheet.png
│ ├── free-pdf-storyboards
│ │ ├── Japanese_Anime_storyboard-template_1.85x1_A4-vertical.png
│ │ ├── storyboard-anime-template_1.85x1_A4-vertical_photoshop_preview.png
│ │ └── storyboard-anime-template_1.85x1_A4-vertical_print_preview.png
│ ├── jekyll
│ │ ├── Soon_Jekyll-template-sample.png
│ │ └── Supply-temp.png
│ └── screenplay
│ ├── Screenplay_Cole_Haag_template.png
│ └── Screenplay_Warner_Brothers_template.png
├── index.html
├── mstile-144x144.png
├── mstile-150x150.png
├── mstile-310x150.png
├── mstile-310x310.png
├── mstile-70x70.png
├── package-lock.json
├── package.json
├── postcss.config.js
├── robots.txt
├── safari-pinned-tab.svg
├── site.webmanifest
├── siteicon.png
└── src
├── _aspect-ratios.css
├── _background-position.css
├── _background-size.css
├── _border-colors.css
├── _border-radius.css
├── _border-style.css
├── _border-widths.css
├── _borders.css
├── _box-shadow.css
├── _box-sizing.css
├── _clears.css
├── _code.css
├── _colors.css
├── _coordinates.css
├── _debug-children.css
├── _debug-grid.css
├── _debug.css
├── _display.css
├── _flexbox.css
├── _floats.css
├── _font-family.css
├── _font-style.css
├── _font-weight.css
├── _forms.css
├── _heights.css
├── _hovers.css
├── _images.css
├── _letter-spacing.css
├── _line-height.css
├── _links.css
├── _lists.css
├── _max-widths.css
├── _media-queries.css
├── _module-template.css
├── _negative-margins.css
├── _nested.css
├── _normalize.css
├── _opacity.css
├── _outlines.css
├── _overflow.css
├── _position.css
├── _rotations.css
├── _skins-pseudo.css
├── _skins.css
├── _spacing.css
├── _styles.css
├── _tables.css
├── _text-align.css
├── _text-decoration.css
├── _text-transform.css
├── _type-scale.css
├── _typography.css
├── _utilities.css
├── _vertical-align.css
├── _visibility.css
├── _white-space.css
├── _widths.css
├── _word-break.css
├── _z-index.css
├── sup-tachyons.css
├── sup-theme.css
└── tachyons.css
The _layouts folder is where you can change the structure of your pages layout.
By default, products are showcased in _products collection, all or only highlighted templates are show on the home page. You can also add Gumroad overlay for products in posts thanks to an include. You’ll find a few product pages as samples
You can change the site styling using Tachyons, look for the CSS in the sup-theme file, located in the src folder.
Tachyons is a CSS toolkit and design system based on using components. Please refer to Tachyons documentation, you can also start with https://github.com/dwyl/learn-tachyons
Once you are done with your style changes, run:
Run the npm run
build:css
That will process all your CSS files in one readable file located in assets/css/sup-tachyons.css.
to minify your css you can run
npm run minify-css
or
npm run start
to minify and build the site locally.
Supply uses a couple of custom Postcss npm scripts. Make sure your dependencies are installed: npm install. Type npm outdated to see if you have outdated versions, then install any outdated dependencies.
Once that is done, to build your site & concatenate your CSS (in assets -> CSS), simply run:
npm run start
This command builds the site locally on port 4000, you can quickly revise design changes thanks to livereload.
Supply code is freely available and contributions are welcome. If you find a bug or have an idea how to improve this theme, please open a pull request on GitHub.
Contribute to Supply Supply repo