tessellate 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 98c460f94f2e79dada356dd2f6b6f8f5fb23e4182f3daa61909418af680c3885
+  data.tar.gz: 1cf8caa690838210fb2c6b6d8c57358eec5eebdc398913e877f5fff07f59ca15
+SHA512:
+  metadata.gz: 19b59b08698b396cb1b9a7bb4abdf69256e8bc517fc6ce8f3b790660ce5a3933c27afaf603b1c446f5f197d15cd032a36ffdfa8aabad5b5e5148830afb378dfd
+  data.tar.gz: 6c29fb13787e482773067f591b80247e947e97937d5b52bb027cadbc1ce945af3b3c608cfc9ef05d9348d6017a40ff377df5b8587d18bf6b4b33d164f3f6035d

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Preston Hager
+
+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.

data/README.md

@@ -0,0 +1,120 @@
+# tessellate
+
+Tessellate theme based on [HTML5 UP's Tessellate template][0].
+Aimed at sectioned content allowing for a wide range of layouts.
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "tessellate"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: tessellate
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install tessellate
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+The basic layout is `page`, it takes a `header` and `cta` parameter.
+
+```yaml
+---
+layout: page
+header:
+  background_image: /assets/images/cover.jpg
+  title: "Tessellate"
+  subtitle: |
+    A Jekyll theme based on <a href="https://html5up.net/tessellate">HTML5 UP's Tessellate template</a>
+  color: "#000"
+cta:
+  link: "#first"
+  text: "Get Started"
+---
+```
+
+Every subview then takes a `header` and `cta` parameter.
+Both parameters are optional.
+If not included, the header/link will be hidden.
+
+Define subviews in a seperate file such as `index_section_one.md`.
+The layout is then whatever section layout you want to use.
+The theme comes with sections one, two, and three.
+For example, to define a section one on the index page use:
+
+```yaml
+---
+layout: section_one
+header:
+  title: "Section One"
+cta:
+  link: "#second"
+  text: "Learn More"
+---
+
+The section content goes here.
+```
+
+Finally, we must include it in the main `index.md` page using the `subview`
+liquid tag.
+
+```liquid
+---
+Front matter goes here...
+---
+
+{% subview index_section_one.md %}
+{% subview index_section_two.md %}
+{% subview index_section_three.md %}
+```
+
+## Customization
+
+TODO: Write customization instructions here. Describe any available variables,
+layout options, and/or custom URL options.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at
+https://github.com/PrestonHager/tessellate. This project is intended to be a
+safe, welcoming space for collaboration, and contributors are expected to adhere
+to the [Contributor Covenant](https://www.contributor-covenant.org/) code of
+conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run
+`bundle exec jekyll serve` and open your browser at `http://localhost:4000`.
+This starts a Jekyll server using your theme. Add pages, documents, data, etc.
+like normal to test your theme's contents. As you make modifications to your
+theme and to your content, your site will regenerate and you should see the
+changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass`
+and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in
+`tessellate.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT
+License](https://opensource.org/licenses/MIT).
+
+
+[0]: https://html5up.net/tessellate
+

data/_config.yml

@@ -0,0 +1,24 @@
+# This config file loads the defaults for this theme.
+# You may override any of these values in your own config file.
+
+# Site Socials appear in the footer of the site
+# Overwrite the entire default by adding the `socials` key to your config file
+# Each social should have a `name` and `link` attribute, then the default icon
+# will be pulled from Font Awesome. You may override the icon with the `icon`
+# attribute with an image URL, or the `icon_class` attribute with a Font Awesome
+# class name.
+socials:
+  - name: Twitter
+    link: https://twitter.com
+  - name: Facebook
+    link: https://facebook.com
+    icon_class: fa-facebook-f
+  - name: Instagram
+    link: https://instagram.com
+  - name: Dribbble
+    link: https://dribbble.com
+  - name: GitHub
+    link: https://github.com
+
+copyright: '© 2025. All rights reserved.'
+

data/_includes/contact_form.html

@@ -0,0 +1,42 @@
+<!-- Contact form
+Check out formspree for an easy way to get forms!
+Setup a new form and then include the contact form with the form_id!
+
+{% comment %}
+
+{% include contact_form.html form_id="yourFormIDHere" %}
+
+{% endcomment %}
+-->
+<section id="fourth" class="main">
+  <header>
+    <div class="container">
+      <h2>{{ include.section_title }}</h2>
+      <p>{{ include.section_body }}</p>
+    </div>
+  </header>
+  <div class="content style4 featured">
+    <div class="container medium">
+      <form method="post" action="https://formspree.io/f/{{ include.form_id }}">
+        <div class="row gtr-50">
+          <div class="col-6 col-12-mobile">
+            <input type="text" placeholder="Name" name="name" />
+          </div>
+          <div class="col-6 col-12-mobile">
+            <input type="text" placeholder="Email" name="email" />
+          </div>
+          <div class="col-12">
+            <textarea name="message" placeholder="Message"></textarea>
+          </div>
+          <div class="col-12">
+            <ul class="actions special">
+              <li><input type="submit" class="button" value="Send Message" /></li>
+              <li><input type="reset" class="button alt" value="Clear Form" /></li>
+            </ul>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</section>
+

data/_includes/footer.html

@@ -0,0 +1,31 @@
+<!-- Footer section
+-->
+<section id="footer">
+  <ul class="icons">
+    {% for social in site.socials %}
+    <li>
+      <a
+        href="{{ social.link }}"
+        class="icon brands fa-brands {% if social.icon %}{% elsif social.icon_class %}{{ social.icon_class }}{% else %}fa-{{ social.name | downcase }}{% endif %}"
+        {% if social.icon %}
+        style="background-image: url({{ social.icon }})"
+        {% endif %}
+      >
+        <span class="label">{{ social.name }}</span>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  <div class="copyright">
+    <ul class="menu">
+      {% if site.copyright %}
+      {% assign copyright = site.copyright %}
+      {% else %}
+      {% assign copyright = site.time | date: "%Y" | prepend: "Untitled " %}
+      {% endif %}
+      <li>&copy; {{ copyright }}. </li>
+      <li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+    </ul>
+  </div>
+</section>
+

data/_includes/header.html

@@ -0,0 +1,40 @@
+<!-- Header include for image and CTA
+header:
+  title: Title Goes Here
+  subtitle: A short sentence for a subtitle
+cta:
+  link: #first
+  text: Proceed to #first element
+-->
+<section id="header" class="dark"
+  {% if include.header.background_image %}
+  style="background-image:{{ include.header.background_image }};"
+  {% else if include.header.background %}
+  style="background:{{ include.header.background }};"
+  {% endif %}
+>
+  <header>
+    <h1
+      {% if include.header.color %}
+      style="color: {{ include.header.color }}"
+      {% endif %}
+    >{{ include.header.title }}</h1>
+    <p
+      {% if include.header.color %}
+      style="color: {{ include.header.color }}"
+      {% endif %}
+    >{{ include.header.subtitle }}</p>
+  </header>
+  {% if include.cta %}
+  <footer>
+    <a
+      href="{{ include.cta.link }}"
+      class="button scrolly"
+      {% if include.header.color %}
+      style="color: {{ include.header.color }}; border: 1px solid {{ include.header.color }}"
+      {% endif %}
+    >{{ include.cta.text }}</a>
+  </footer>
+  {% endif %}
+</section>
+

data/_layouts/page.html

@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<!--
+  Tessellate Jekyll theme based on
+	Tessellate by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+    <title>{{ title }}</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<link rel="stylesheet" href="/assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+		<!-- Header -->
+    {% include header.html
+      header=page.header
+      cta=page.cta
+    %}
+    <div class="content">
+      {{ content }}
+    </div>
+    {% include footer.html %}
+		<!-- Scripts -->
+			<script src="/assets/js/jquery.min.js"></script>
+			<script src="/assets/js/jquery.scrolly.min.js"></script>
+			<script src="/assets/js/browser.min.js"></script>
+			<script src="/assets/js/breakpoints.min.js"></script>
+			<script src="/assets/js/util.js"></script>
+			<script src="/assets/js/main.js"></script>
+	</body>
+</html>
+
+

data/_layouts/section_one.html

@@ -0,0 +1,39 @@
+<section id="first" class="main">
+  {% if page.header %}
+  <header>
+    <div class="container">
+      <h2>{{ page.header.title }}</h2>
+      <p>{{ page.header.body }}</p>
+    </div>
+  </header>
+  {% endif %}
+  <div class="content dark style1 featured">
+    {% assign content_split = page.content | markdown_split %}
+    <div class="container">
+      <div class="row">
+        {% for i in (0..2) %}
+        <div class="col-4 col-12-narrow">
+          <section>
+            <span class="feature-icon"><span class="icon solid fa-solid {% if page.icons[i]
+              %}{{ page.icons[i].icon }}{% else %}fa-clock{% endif %}"></span></span>
+            {% if page.icons[i].title %}
+            <header>
+              <h3>{{ page.icons[i].title }}</h3>
+            </header>
+            {% endif %}
+            <div>{{ content_split[i] | markdownify }}</div>
+          </section>
+        </div>
+        {% endfor %}
+        {% if page.cta %}
+        <div class="col-12">
+          <footer>
+            <a href="#{{ cta.link }}" class="button scrolly">{{ cta.text }}</a>
+          </footer>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+

data/_layouts/section_three.html

@@ -0,0 +1,36 @@
+<section id="third" class="main">
+  {% if page.header %}
+  <header>
+    <div class="container">
+      <h2>{{ page.header.title }}</h2>
+      <p>{{ page.header.body }}</p>
+    </div>
+  </header>
+  {% endif %}
+  <div class="content dark style3">
+    <div class="container">
+      <span class="image featured"><img src="images/pic07.jpg" alt="" /></span>
+      <div class="row">
+        {% assign content_body = page.content | split: " " %}
+        {% assign length = content_body | size %}
+        {% assign part_length = length | divided_by: 3 %}
+        {% assign part_length_double = part_length | times: 2 %}
+        <div class="col-4 col-12-narrow">
+          {{ content_body | slice: 0, part_length | join: " " | markdownify }}
+        </div>
+        <div class="col-4 col-12-narrow">
+          {{ content_body | slice: part_length, part_length | join: " " | markdownify }}
+        </div>
+        <div class="col-4 col-12-narrow">
+          {{ content_body | slice: part_length_double, part_length | join: " " | markdownify }}
+          {% if page.cta %}
+          <footer>
+            <a href="{{ page.cta.link }}" class="button scrolly">{{ page.cta.text }}</a>
+          </footer>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+

data/_layouts/section_two.html

@@ -0,0 +1,44 @@
+<section id="second" class="main">
+  {% if page.header %}
+  <header>
+    <div class="container">
+      <h2>{{ page.header.title }}</h2>
+      <p>{{ page.header.subtitle }}</p>
+    </div>
+  </header>
+  {% endif %}
+  <div class="content dark style2">
+    <div class="container">
+      <div class="row">
+        <div class="col-4 col-12-narrow">
+          <section>
+            {{ content }}
+            {% if page.cta %}
+            <footer>
+              <a href="{{ page.cta.link }}" class="button scrolly">{{ page.cta.text }}</a>
+            </footer>
+            {% endif %}
+          </section>
+        </div>
+        <div class="col-8 col-12-narrow">
+          <div class="row">
+            {% for image in page.images %}
+            <div class="col-6">
+              <a href="{{ image.link }}" class="image fit">
+                <img
+                  src="{{ image.url }}"
+                  alt="{{ image.alt }}"
+                />
+                {% if image.caption %}
+                <span class="image-caption">{{ image.caption }}</span>
+                {% endif %}
+              </a>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+