tessellate 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ceb5c38f7a9941df38ae587424835e301bb3b5be92f228f5b2c507eeb91a3ebb
-  data.tar.gz: 3ebdcb72c9ca03adba412e48843e748b186552698a501d06aafa560bb9a817df
+  metadata.gz: d31a4253197a1e21c9f7b25c9eaf0bb0e915f06a9e082f37c9e0e917a1810404
+  data.tar.gz: 814f5471df4c253443015542c2578c59806bb9134d4837560bc682d24dbae043
 SHA512:
-  metadata.gz: 820a16caac5600d567f32132bf3fae8eb32fb6e93aeb52d97cf518478cdac15904a25e2440a5daa7bd2269b3e6874928f169cd569ee086d38076d49e21f4dfe3
-  data.tar.gz: 9abe0f07750ae38efa7964c4f87d8452454cbc75229e707411aacb0ccfb7cc735d45b0da36164677d9e02401021d5b83b3bbdb6c624ba739441c5f0112737eeb
+  metadata.gz: 48ae618914fcd234b8117db1ae1657d237afbac523a181141baaa3a88930174539164ab5a3eba313e8ca4eee683da96107810717831fce35af517ce997545589
+  data.tar.gz: c42b0793038eeffe3cf9ba88284c4b750b989450190c141b263cfa67dc0a20ebbf27baa1b50b1840c5222b9e3e3168fa940bff7e6422753aec42c2ed8c99ed57

data/README.md

@@ -1,7 +1,29 @@
 # tessellate
 
+<p align="center">
+    <a href="https://github.com/PrestonHager/tessellate/actions/workflows/gem-push.yml">
+        <img
+            src="https://github.com/PrestonHager/tessellate/actions/workflows/gem-push.yml/badge.svg"
+            alt="Ruby Gem" />
+    </a>
+    <a href="https://rubygems.org/gems/tessellate">
+        <img src="http://img.shields.io/gem/v/tessellate.svg?style=flat-square"
+            alt="Gem Version" />
+    </a>
+</p>
+
 Tessellate theme based on [HTML5 UP's Tessellate template][0].
 Aimed at sectioned content allowing for a wide range of layouts.
+This theme is great for use with a one-page site or a multi-page site.
+
+## Preview
+
+<details>
+  <summary>See screenshot (very long image).</summary>
+
+![Preview](_showcase/preview.png)
+
+</details>
 
 ## Installation
 
@@ -27,9 +49,8 @@ Or install it yourself as:
 
 ## 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.
+The basic layout is `page`, it takes a `header` and `cta` parameter in the
+frontmatter.
 
 ```yaml
 ---
@@ -83,8 +104,15 @@ Front matter goes here...
 
 ## Customization
 
-TODO: Write customization instructions here. Describe any available variables,
-layout options, and/or custom URL options.
+You may change the syntax highlighting theme by overwriting the `syntax.css`
+file in the `assets/css` directory. Either find a rouge theme online, or use
+`rougify` to generate the css from a sublime theme file. The default theme is
+`monokai`. Two command you may find useful are:
+
+```sh
+$ bundle exec rougify help style
+$ bundle exec rougify style monokai > assets/css/syntax.css
+```
 
 ## Contributing
 

data/_config.yml

@@ -22,3 +22,11 @@ socials:
 
 copyright: '© 2025. All rights reserved.'
 
+
+# These attributes are required for theme highlighting, only overwrite if you
+# know what you're doing.
+markdown: kramdown
+highlighter: rouge
+kramdown:
+  input: GFM
+

data/_data/navigation.yml

@@ -2,60 +2,15 @@
   url: "/"
   side: left
 
-- title: About
-  url: "/about/project/"
+- title: Project
+  url: "/project/"
   side: left
   dropdown:
-  - title: "Project"
-    url: "/about/project/"
-  - title: "Team"
-    url: "/about/team/"
+  - title: "About"
+    url: "/project/#about"
+  - title: "Documentation"
+    url: "/project/documentation/"
 
-- title: Research
-  url: "/research/"
-  side: left
-  dropdown:
-  - title: "Task 1"
-    url: "/research/task-1/"
-  - title: "Task 2"
-    url: "/research/task-2/"
-  - title: "Task 3"
-    url: "/research/task-3/"
-  - title: "Task 4"
-    url: "/research/task-4/"
-  - title: "Task 5"
-    url: "/research/task-5/"
-  - title: "Task 6"
-    url: "/research/task-6/"
-
-- title: "Education & Outreach"
-  url: "/education-outreach/"
-  side: left
-
-- title: Resources
-  url: "/resources/"
-  side: left
-  dropdown:
-  - title: "Publications"
-    url: "/resources/publications/"
-  - title: "Code"
-    url: "/resources/code/"
-  - title: "Data"
-    url: "/resources/data/"
-
-- title: "News & Events"
-  url: "/news-and-events/"
-  side: left
-  dropdown:
-  - title: "News"
-    url: "/news-and-events/news/"
-  - title: "Calendar"
-    url: "/calendar/"
-
-- title: "Search"
-  url: "/search/"
-  side: right
-
-- title: "Contact"
+- title: Contact
   url: "/contact/"
   side: right

data/_includes/contact_form.html

@@ -14,8 +14,8 @@ To use this contact form use the following:
 <section id="{{ section-id }}" class="main">
   <header>
     <div class="container">
-      <h2>{{ include.section_title }}</h2>
-      <p>{{ include.section_body }}</p>
+      <h2>{{ include.title }}</h2>
+      <p>{{ include.body }}</p>
     </div>
   </header>
   <div class="content style4 featured">

data/_layouts/default.html

@@ -12,11 +12,11 @@
     </div>
   </header>
   {% endif %}
-  {% assign style = style4 %}
+  {% assign style = style1 %}
   {% if page.style %}
   {% assign style = page.style %}
   {% endif %}
-  <div class="content dark {{ style }} featured">
+  <div class="content dark {{ style }} featured default">
     <div class="container">
       {{ content }}
     </div>

data/_layouts/page.html

@@ -11,8 +11,13 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="/assets/css/style.css" />
+    <link rel="stylesheet" href="/assets/css/syntax.css" />
 	</head>
-	<body class="is-preload">
+	<body
+    class="is-preload"
+    {% if page.section-id %} id="{{ page.section-id }}"{% endif %}
+    {% if page.class %} class="{{ page.class }}"{% endif %}
+  >
     {% if site.data.navigation %}
     {% include navigation.html %}
     {% endif %}

data/_layouts/section_four.html

@@ -22,7 +22,8 @@
         {% if page.columns %}
         {% assign column_width = 12 | divided_by: page.columns %}
         {% endif %}
-        {% assign content_split = page.content | markdown_split %}
+        {% assign columns = page.columns | default: 3 %}
+        {% assign content_split = page.content | paragraph_split: columns %}
         {% for body in content_split %}
         <div class="col-{{ column_width }} col-12-narrow">
           {{ body | markdownify }}

data/_layouts/section_one.html

@@ -33,7 +33,7 @@
         {% if page.cta %}
         <div class="col-12">
           <footer>
-            <a href="#{{ cta.link }}" class="button scrolly">{{ cta.text }}</a>
+            <a href="{{ page.cta.link }}" class="button scrolly">{{ page.cta.text }}</a>
           </footer>
         </div>
         {% endif %}

data/_layouts/section_three.html

@@ -18,6 +18,14 @@
       <span class="image featured"><img src="{{ page.image }}" alt="" /></span>
       {% endif %}
       <div class="row">
+        {% assign content_paragraphs = page.content | paragraph_split: 3 %}
+        {% for paragraph in content_paragraphs %}
+        <div class="col-4 col-12-narrow">
+          {{ paragraph | markdownify }}
+        </div>
+        {% endfor %}
+
+        {% comment %}
         {% assign content_body = page.content | split: " " %}
         {% assign length = content_body | size %}
         {% assign part_length = length | divided_by: 3 %}
@@ -30,12 +38,13 @@
         </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>
+        {% endcomment %}
+        {% if page.cta %}
+        <footer>
+          <a href="{{ page.cta.link }}" class="button scrolly">{{ page.cta.text }}</a>
+        </footer>
+        {% endif %}
       </div>
     </div>
   </div>

data/_layouts/section_two.html

@@ -8,7 +8,7 @@
   <header>
     <div class="container">
       <h2>{{ page.header.title }}</h2>
-      <p>{{ page.header.subtitle }}</p>
+      <p>{{ page.header.body }}</p>
     </div>
   </header>
   {% endif %}
@@ -33,7 +33,7 @@
             {% endif %}
             {% for image in page.images %}
             <div class="col-{{ column_width }}">
-              <a href="{{ image.link }}" class="image fit">
+              <a href="{{ image.link }}" class="image fit scrolly">
                 <img
                   src="{{ image.url }}"
                   alt="{{ image.alt }}"

data/_sass/tessellate.scss

@@ -47,6 +47,7 @@
 	article, aside, details, figcaption, figure,
 	footer, header, hgroup, menu, nav, section {
 		display: block;
+    width: 100%;
 	}
 
 	body {
@@ -147,7 +148,7 @@
     }
   }
 
-  .nav-item.nav-item-right {
+  .nav-item.nav-item-right:last-child {
     margin-right: 1em;
   }
 }
@@ -317,7 +318,7 @@
 		clear: both;
 	}
 
-	.featured {
+	.featured:not(.default) {
 		text-align: center;
 
 		p {
@@ -1281,8 +1282,8 @@
 		/* Button */
 
 			.button {
-				padding-left: 0;
-				padding-right: 0;
+				padding-left: 0.5em;
+				padding-right: 0.5em;
 				width: 100%;
 				max-width: 24em;
 			}
@@ -1337,3 +1338,14 @@
 			}
 
 	}
+
+/* Code section formatting
+-------------------------------------------------- */
+
+  pre.highlight {
+    padding: 0.25em 0.5em 0.25em 0.5em;
+    overflow-x: scroll;
+    margin-bottom: 1em;
+    overflow: auto;
+  }
+

data/assets/css/syntax.css

@@ -0,0 +1,203 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .gh {
+  color: #999999;
+}
+.highlight .sr {
+  color: #f6aa11;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .nb {
+  color: #f6aa11;
+}
+.highlight .cm {
+  color: #75715e;
+}
+.highlight .cp {
+  color: #75715e;
+}
+.highlight .c1 {
+  color: #75715e;
+}
+.highlight .cs {
+  color: #75715e;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
+  color: #75715e;
+}
+.highlight .err {
+  color: #960050;
+}
+.highlight .gr {
+  color: #960050;
+}
+.highlight .gt {
+  color: #960050;
+}
+.highlight .gd {
+  color: #49483e;
+}
+.highlight .gi {
+  color: #49483e;
+}
+.highlight .kc {
+  color: #66d9ef;
+}
+.highlight .kd {
+  color: #66d9ef;
+}
+.highlight .kr {
+  color: #66d9ef;
+}
+.highlight .no {
+  color: #66d9ef;
+}
+.highlight .kt {
+  color: #66d9ef;
+}
+.highlight .mf {
+  color: #ae81ff;
+}
+.highlight .mh {
+  color: #ae81ff;
+}
+.highlight .il {
+  color: #ae81ff;
+}
+.highlight .mi {
+  color: #ae81ff;
+}
+.highlight .mo {
+  color: #ae81ff;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #ae81ff;
+}
+.highlight .sc {
+  color: #ae81ff;
+}
+.highlight .se {
+  color: #ae81ff;
+}
+.highlight .ss {
+  color: #ae81ff;
+}
+.highlight .sd {
+  color: #e6db74;
+}
+.highlight .s2 {
+  color: #e6db74;
+}
+.highlight .sb {
+  color: #e6db74;
+}
+.highlight .sh {
+  color: #e6db74;
+}
+.highlight .si {
+  color: #e6db74;
+}
+.highlight .sx {
+  color: #e6db74;
+}
+.highlight .s1 {
+  color: #e6db74;
+}
+.highlight .s, .highlight .sa, .highlight .dl {
+  color: #e6db74;
+}
+.highlight .na {
+  color: #a6e22e;
+}
+.highlight .nc {
+  color: #a6e22e;
+}
+.highlight .nd {
+  color: #a6e22e;
+}
+.highlight .ne {
+  color: #a6e22e;
+}
+.highlight .nf, .highlight .fm {
+  color: #a6e22e;
+}
+.highlight .vc {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .nn {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .nl {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .ni {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .bp {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .vg {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .vi {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .nv, .highlight .vm {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .w {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .n, .highlight .py, .highlight .nx {
+  color: #ffffff;
+  background-color: #272822;
+}
+.highlight .ow {
+  color: #f92672;
+}
+.highlight .nt {
+  color: #f92672;
+}
+.highlight .k, .highlight .kv {
+  color: #f92672;
+}
+.highlight .kn {
+  color: #f92672;
+}
+.highlight .kp {
+  color: #f92672;
+}
+.highlight .o {
+  color: #f92672;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tessellate
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.1.10
 platform: ruby
 authors:
 - Preston Hager
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-07 00:00:00.000000000 Z
+date: 2025-04-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -63,6 +63,25 @@ files:
 - assets/css/images/ie/content-style3.svg
 - assets/css/images/overlay.png
 - assets/css/style.scss
+- assets/css/syntax.css
+- assets/images/IMG_0001.jpg
+- assets/images/IMG_0001_cropped.jpg
+- assets/images/IMG_0002.jpg
+- assets/images/IMG_0002_cropped.jpg
+- assets/images/IMG_0003.jpg
+- assets/images/IMG_0003_cropped.jpg
+- assets/images/IMG_0004.jpg
+- assets/images/IMG_0004_cropped.jpg
+- assets/images/IMG_0005.jpg
+- assets/images/IMG_0005_cropped.jpg
+- assets/images/IMG_0006.jpg
+- assets/images/IMG_0006_cropped.jpg
+- assets/images/IMG_0007.jpg
+- assets/images/IMG_0007_banner.jpg
+- assets/images/IMG_0008.jpg
+- assets/images/IMG_0009.jpg
+- assets/images/IMG_0009_banner.jpg
+- assets/images/IMG_0010.jpg
 - assets/js/breakpoints.min.js
 - assets/js/browser.min.js
 - assets/js/jquery.min.js