jekyll-theme-mastodon 1.0.0

data/_layouts/profile.html

@@ -0,0 +1,199 @@
+---
+layout: default
+---
+
+<div class=container>
+	<div class=public-account-header>
+		<div class=public-account-header__image {% if site.banner == nil %} style="background-color: #191b22;" {% endif %}>
+			{% if page.banner %}<img class=parallax src="{{ page.banner | relative_url }}" alt="Header Image">{% endif %}
+		</div>
+		<div class=public-account-header__bar>
+			<div class=avatar>
+				<img id=profile_page_avatar src='{{ page.avatar.path | relative_url }}' alt="Avatar Image">
+			</div>
+			<div class=public-account-header__tabs>
+				<div class=public-account-header__tabs__name>
+					<h1>
+						{{ page.author.name }}
+						<small>
+						@{{ page.author.handle }}@{{ site.host }}
+						</small>
+					</h1>
+				</div>
+				<div class=public-account-header__tabs__tabs>
+					<div class=details-counters>
+						<div class="counter active">
+							<span class="u-url u-uid">
+								<span class=counter-number>{%- for post in site.posts -%}{% if post.author.handle == page.author.handle %}{% assign var = var | plus: 1 %}{% endif %}{%- endfor -%}{{ var | default: "0" }}</span>
+								<span class=counter-label>Toots</span>
+							</span>
+						</div>
+					</div>
+					<div class=spacer></div>
+					<div class=public-account-header__tabs__tabs__buttons>
+						<a class="button logo-button modal-button" target=_new href="{{ '/feed.xml' | relative_url }}">Subscribe to RSS</a>
+					</div>
+				</div>
+			</div>
+			<div class="public-account-header__extra sf-hidden"></div>
+		</div>
+	</div>
+	<div class=grid>
+		<div class=column-0>
+			<div class=h-feed>
+				<data class=p-name value="ethanmcbloxxer on mastodon.online">
+					<div class="activity-stream activity-stream--under-tabs">
+						{% assign pinnedcontent = content | strip %}
+						{% if pinnedcontent != "" %}
+						<div class="entry h-entry">
+							<div class="status__prepend" style="margin-left: 50px;">
+								<div class="status__prepend-icon-wrapper">
+									<i class="fa fa-thumbtack fa-fw" title="Pinned"></i>
+								</div>
+								<span>&nbsp;</span>
+							</div>
+							<div class="status status-public">
+								<div class=status__info>
+									<div class="p-author h-card">
+										<div class=status__avatar>
+											<div>
+												<img alt class="u-photo account__avatar" src="{{ page.avatar.path | relative_url }}">
+											</div>
+										</div>
+										<span class=display-name>
+											<bdi>
+												<strong class="display-name__html p-name">{{ page.author.name }}</strong>
+											</bdi>
+											<span class=display-name__account style="color: #606984">@{{ page.author.handle }}@{{ site.host }}</span>
+										</span>
+									</div>
+								</div>
+								<div class="status__content">
+									<div class=e-content>
+										{% if page.truncate %}
+											{% assign truncate = page.truncate %}
+											{{ content | truncatewords: truncate }}
+											{% assign truncate = nil %}
+										{% else %}
+											{{ content }}
+										{% endif %}
+										{% for tag in post.tags %}
+											<a href="{{ '/tags/' | append: "#" | append: tag | relative_url }}" style="color: #9baec8">#{{ tag }}</a>
+										{% endfor %}
+									</div>
+								</div>
+							</div>
+						</div>
+						{% endif %}
+						{% assign pinnedcontent = nil %}
+
+						{% for post in site.posts reversed %}
+						{% if post.author.handle == page.author.handle %}
+						<div class="entry h-entry">
+							<div class="status status-public">
+								<div class=status__info>
+									<a class="status__relative-time u-url u-uid" rel="noopener noreferrer" href="{{ post.url | relative_url }}">
+										<time class=time-ago datetime="{{ post.date | date_to_xmlschema }}" title="{{ post.date | date: '%B %-d, %Y'}}">{{ post.date | date: '%b %-d, %Y'}}</time>
+									</a>
+									<data class=dt-published value=2021-02-23T18:57:11+00:00></data>
+									<div class="p-author h-card">
+										<span class="status__display-name u-url">
+											<div class=status__avatar>
+												<div>
+													<img alt class="u-photo account__avatar" src="{{ page.avatar.path | relative_url }}">
+												</div>
+											</div>
+											<span class=display-name>
+												<a href="{{ post.url | relative_url }}" style="text-decoration: none;">
+													<bdi>
+														<strong class="display-name__html p-name">{{ page.author.name }}</strong>
+													</bdi>
+												</a>
+												<span class=display-name__account>@{{ page.author.handle }}@{{ site.host }}</span>
+											</span>
+										</span>
+									</div>
+								</div>
+								<div class="status__content">
+									<div class=e-content>
+										{% if post.truncate %}
+											{% assign truncate = page.truncate %}
+											{{ post.content | truncatewords: truncate }}
+											{% assign truncate = nil %}
+										{% else %}
+											{{ post.content }}
+										{% endif %}
+										{% for tag in post.tags %}
+											<a href="{{ '/tags/' | append: "#" | append: tag | relative_url }}" style="color: #9baec8">#{{ tag }}</a>
+										{% endfor %}
+										{% if post.media %}
+										<div data-component="MediaGallery">
+											<div class="media-gallery" style="height: 30rem;">
+												<div class="media-gallery__item standalone" style="inset: auto; width: 100%; height: 100%;">
+													<canvas class="media-gallery__preview media-gallery__preview--hidden" width="32" height="32"></canvas>
+													<a class="media-gallery__item-thumbnail" href="{{ post.media }}" target="_blank" rel="noopener noreferrer">
+														<img src="{{ post.media }}" style="object-position: 50% 50%;">
+													</a>
+												</div>
+											</div>
+										</div>
+										{% endif %}
+									</div>
+								</div>
+								<div class=status__action-bar>
+									<a class="status__action-bar-button icon-button modal-button" href="{{ post.url | append: '#comments' | relative_url }}" title="Reply" aria-label="Reply"><i class="fa fa-reply fa-fw"></i></a>
+									<a class="status__action-bar-button icon-button modal-button" href="{{ post.url | relative_url }}" title="Permanent Link" aria-label="Bookmark"><i class="fa fa-bookmark fa-fw"></i></a>
+								</div>
+							</div>
+						</div>
+						{% endif %}
+						{% endfor %}
+					</div>
+				</data>
+			</div>
+		</div>
+		<div class=column-1>
+			<div class=public-account-bio>
+				<div class="account__header__fields">
+					{% for table in page.fields %}<dl>
+						<dt>{{ table.name | markdownify }}</dt>
+						<dd title="{{- table.content | markdownify | strip_html -}}">
+							{{ table.content | markdownify }}
+						</dd>
+					</dl>{% endfor %}
+				</div>
+				{% if page.role or page.admin or page.moderator %}<div class="roles">
+					{% if page.admin %}<div class="account-role admin">Admin</div>{% endif %}
+					{% if page.moderator %}<div class="account-role moderator">Moderator</div>{% endif %}
+					{% if page.role %}<div class="account-role">{{ page.role }}</div>{% endif %}
+				</div>{% endif %}
+				<div class="account__header__content">
+					{{ page.bio | markdownify | smartify }}
+				</div>
+				<div class=public-account-bio__extra>
+					Last generated {{ "now" | date: "%B %e, %Y" }}
+				</div>
+			</div>
+			<div class=hero-widget>
+				<div class=hero-widget__img>
+					<img src="{{ '/assets/hero.png' | relative_url }}" alt="Mastodon in Rio">
+				</div>
+				<div class=hero-widget__text>
+					<p>This website uses <a href=https://github.com/EthanMcBloxxer/jekyll-theme-mastodon/>jekyll-theme-mastodon</a>, a Jekyll theme created by EthanMcBloxxer using the <a href=https://github.com/tootsuite/mastodon>Mastodon source code</a> and the <a href=https://mastodon.online/>official public instance's HTML.</a>
+						<ul>
+							<li>Jekyll v{{ jekyll.version }}</li>
+						</ul>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	{% if site.amplitude %}
+		{% assign key = site.amplitude %}
+		{% include analytics.html key=key %}
+		<script type="text/javascript">
+			amplitude.getInstance().logEvent("Profile View", {handle: "{{ page.author.handle }}"});
+		</script>
+		{% assign key = nil %}
+	{% endif %}
+</div>

data/_layouts/redirect.html

@@ -0,0 +1,18 @@
+---
+---
+
+{% if page.redirect %}
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<script>document.location.href = "{{ page.redirect }}";</script>
+		<meta http-equiv="Refresh" content="0; url='{{ page.redirect }}'">
+		<title>Redirecting...</title>
+	</head>
+	<body>
+		<h1>this page has been moved to <a href="{{ page.redirect }}">{{ page.redirect }}</h1>
+		<script>document.location.href = "{{ page.redirect }}";</script>
+	</body>
+</html>
+{% endif %}

data/_layouts/rss.html

@@ -0,0 +1,29 @@
+---
+---
+
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+	<channel>
+		<title>{{ page.title | xml_escape }}</title>
+		<description>{{ page.description | xml_escape }}</description>
+		<link>{{ site.url }}{{ site.baseurl }}/</link>
+		<atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+		<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+		<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+		<generator>Jekyll v{{ jekyll.version }}</generator>
+		{% if page.limit %}{% assign limit = page.limit %}{% else %}{% assign limit = "20" %}{% endif %}
+		{% for post in site.posts limit:limit %}
+			<item>
+				<title>{{ post.title | xml_escape }}</title>
+				<description>{{ post.content | xml_escape }}</description>
+				<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+				<link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+				<guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+				{% for tag in post.tags %}
+				<category>{{ tag | xml_escape }}</category>
+				<author>{{ post.author.handle }}@{{ site.host }}</author>
+				{% endfor %}
+			</item>
+		{% endfor %}
+	</channel>
+</rss>

data/_layouts/sitemap.html

@@ -0,0 +1,29 @@
+---
+---
+
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+	{% for page in site.pages %}
+	{% if page.url contains '.xml' or page.url contains 'assets' %}{% else %}
+	<url>
+		<loc>{{ site.url }}{{ page.url }}</loc>
+		<changefreq>monthly</changefreq>
+		<priority>1.0</priority>
+	</url>
+	{% endif %}
+	{% endfor %}
+	{% for page in site.posts %}
+		<url>
+			<loc>{{ site.url }}{{ page.url | replace: 'index.html', '' }}</loc>
+			<changefreq>monthly</changefreq>
+			<priority>1.0</priority>
+		</url>
+	{% endfor %}
+	{% for page in site.without-plugin %}
+		<url>
+			<loc>{{ site.url }}{{ page.url | replace: 'index.html', '' }}</loc>
+			<changefreq>monthly</changefreq>
+			<priority>1.0</priority>
+		</url>
+	{% endfor %}
+</urlset>

data/_layouts/tags.html

@@ -0,0 +1,32 @@
+---
+layout: page
+---
+
+<h1>Hashtag Index</h1>
+
+{% assign date_format = "%b %-d, %Y" %}
+
+{%- capture site_tags -%}
+	{%- for tag in site.tags -%}
+		{{- tag | first -}}{%- unless forloop.last -%},{%- endunless -%}
+	{%- endfor -%}
+{%- endcapture -%}
+{%- assign tags_list = site_tags | split:',' | sort -%}
+
+<div id="full-tags-list">
+{%- for tag in tags_list -%}
+	<h2 id="{{- tag -}}" class="linked-section" style="margin: 0">
+		<i class="fas fa-tag" aria-hidden="true" style="font-size: 0.65em;"></i>
+		&nbsp;{{- tag -}}&nbsp;({{site.tags[tag].size}})
+	</h2>
+	<div class="post-list">
+		{%- for post in site.tags[tag] -%}
+			<div class="tag-entry">
+			<a href="{{ post.url | relative_url }}">{{- post.title -}}</a>
+				<div class="entry-date">
+					<time datetime="{{- post.date | date_to_xmlschema -}}">{{- post.date | date: date_format -}}</time>
+				</div>
+			</div>
+		{%- endfor -%}
+	</div>
+{%- endfor -%}

data/_sass/_about.scss

@@ -0,0 +1,905 @@
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+$column-breakpoint: 700px;
+$small-breakpoint: 960px;
+
+.container {
+  box-sizing: border-box;
+  max-width: $maximum-width;
+  margin: 0 auto;
+  position: relative;
+
+  @media screen and (max-width: $fluid-breakpoint) {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+.rich-formatting {
+  font-family: $font-sans-serif, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.7;
+  word-wrap: break-word;
+  color: $darker-text-color;
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  p,
+  li {
+    color: $darker-text-color;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: .85em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  strong {
+    font-weight: 700;
+    color: $secondary-text-color;
+  }
+
+  em {
+    font-style: italic;
+    color: $secondary-text-color;
+  }
+
+  code {
+    font-size: 0.85em;
+    border-radius: 4px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $font-display, sans-serif;
+    margin-top: 1.275em;
+    margin-bottom: .85em;
+    font-weight: 500;
+    color: $secondary-text-color;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.75em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.25em;
+  }
+
+  h5,
+  h6 {
+    font-size: 1em;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    padding-left: 2em;
+    margin-bottom: 0.85em;
+
+    &[type='a'] {
+      list-style-type: lower-alpha;
+    }
+
+    &[type='i'] {
+      list-style-type: lower-roman;
+    }
+  }
+
+  hr {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    margin: 1.7em 0;
+
+    &.spacer {
+      height: 1px;
+      border: 0;
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    break-inside: auto;
+    margin-top: 24px;
+    margin-bottom: 32px;
+
+    thead tr,
+    tbody tr {
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      font-size: 1em;
+      line-height: 1.625;
+      font-weight: 400;
+      text-align: left;
+      color: $darker-text-color;
+    }
+
+    thead tr {
+      border-bottom-width: 2px;
+      line-height: 1.5;
+      font-weight: 500;
+      color: $dark-text-color;
+    }
+
+    th,
+    td {
+      padding: 8px;
+      align-self: start;
+      align-items: start;
+      word-break: break-all;
+
+      &.nowrap {
+        width: 25%;
+        position: relative;
+
+        &::before {
+          content: ' ';
+          visibility: hidden;
+        }
+
+        span {
+          position: absolute;
+          left: 8px;
+          right: 8px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+}
+
+.information-board {
+  background: darken($ui-base-color, 4%);
+  padding: 20px 0;
+
+  .container-alt {
+    position: relative;
+    padding-right: 280px + 15px;
+  }
+
+  &__sections {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  &__section {
+    flex: 1 0 0;
+    font-family: $font-sans-serif, sans-serif;
+    font-size: 16px;
+    line-height: 28px;
+    color: $primary-text-color;
+    text-align: right;
+    padding: 10px 15px;
+
+    span,
+    strong {
+      display: block;
+    }
+
+    span {
+      &:last-child {
+        color: $secondary-text-color;
+      }
+    }
+
+    strong {
+      font-family: $font-display, sans-serif;
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      text-align: center;
+    }
+  }
+
+  .panel {
+    position: absolute;
+    width: 280px;
+    box-sizing: border-box;
+    background: darken($ui-base-color, 8%);
+    padding: 20px;
+    padding-top: 10px;
+    border-radius: 4px 4px 0 0;
+    right: 0;
+    bottom: -40px;
+
+    .panel-header {
+      font-family: $font-display, sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 500;
+      color: $darker-text-color;
+      padding-bottom: 5px;
+      margin-bottom: 15px;
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      a,
+      span {
+        font-weight: 400;
+        color: darken($darker-text-color, 10%);
+      }
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .owner {
+    text-align: center;
+
+    .avatar {
+      width: 80px;
+      height: 80px;
+      margin: 0 auto;
+      margin-bottom: 15px;
+
+      img {
+        display: block;
+        width: 80px;
+        height: 80px;
+        border-radius: 48px;
+      }
+    }
+
+    .name {
+      font-size: 14px;
+
+      a {
+        display: block;
+        color: $primary-text-color;
+        text-decoration: none;
+
+        &:hover {
+          .display_name {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .username {
+        display: block;
+        color: $darker-text-color;
+      }
+    }
+  }
+}
+
+.landing-page {
+  p,
+  li {
+    font-family: $font-sans-serif, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 30px;
+    margin-bottom: 12px;
+    color: $darker-text-color;
+
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
+    }
+  }
+
+  em {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    font-weight: 700;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: lighten($darker-text-color, 10%);
+  }
+
+  h1 {
+    font-family: $font-display, sans-serif;
+    font-size: 26px;
+    line-height: 30px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+
+    small {
+      font-family: $font-sans-serif, sans-serif;
+      display: block;
+      font-size: 18px;
+      font-weight: 400;
+      color: lighten($darker-text-color, 10%);
+    }
+  }
+
+  h2 {
+    font-family: $font-display, sans-serif;
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h3 {
+    font-family: $font-display, sans-serif;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h4 {
+    font-family: $font-display, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h5 {
+    font-family: $font-display, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h6 {
+    font-family: $font-display, sans-serif;
+    font-size: 12px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  ul,
+  ol {
+    margin-left: 20px;
+
+    &[type='a'] {
+      list-style-type: lower-alpha;
+    }
+
+    &[type='i'] {
+      list-style-type: lower-roman;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  li > ol,
+  li > ul {
+    margin-top: 6px;
+  }
+
+  hr {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+    margin: 20px 0;
+
+    &.spacer {
+      height: 1px;
+      border: 0;
+    }
+  }
+
+  &__information,
+  &__forms {
+    padding: 20px;
+  }
+
+  &__call-to-action {
+    background: $ui-base-color;
+    border-radius: 4px;
+    padding: 25px 40px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .row {
+      width: 100%;
+      display: flex;
+      flex-direction: row-reverse;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .row__information-board {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .information-board__section {
+        flex: 1 0 auto;
+        padding: 0 10px;
+      }
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+
+    .row__mascot {
+      flex: 1;
+      margin: 10px -50px 0 0;
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        display: none;
+      }
+    }
+  }
+
+  &__logo {
+    margin-right: 20px;
+
+    img {
+      height: 50px;
+      width: auto;
+      mix-blend-mode: lighten;
+    }
+  }
+
+  &__information {
+    padding: 45px 40px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    strong {
+      font-weight: 500;
+      color: lighten($darker-text-color, 10%);
+    }
+
+    .account {
+      border-bottom: 0;
+      padding: 0;
+
+      &__display-name {
+        align-items: center;
+        display: flex;
+        margin-right: 5px;
+      }
+
+      div.account__display-name {
+        &:hover {
+          .display-name strong {
+            text-decoration: none;
+          }
+        }
+
+        .account__avatar {
+          cursor: default;
+        }
+      }
+
+      &__avatar-wrapper {
+        margin-left: 0;
+        flex: 0 0 auto;
+      }
+
+      .display-name {
+        font-size: 15px;
+
+        &__account {
+          font-size: 14px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-breakpoint) {
+      .contact {
+        margin-top: 30px;
+      }
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      padding: 25px 20px;
+    }
+  }
+
+  &__information,
+  &__forms,
+  #mastodon-timeline {
+    box-sizing: border-box;
+    background: $ui-base-color;
+    border-radius: 4px;
+    box-shadow: 0 0 6px rgba($black, 0.1);
+  }
+
+  &__mascot {
+    height: 104px;
+    position: relative;
+    left: -40px;
+    bottom: 25px;
+
+    img {
+      height: 190px;
+      width: auto;
+    }
+  }
+
+  &__short-description {
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 40px;
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      .row {
+        margin-bottom: 20px;
+      }
+    }
+
+    p a {
+      color: $secondary-text-color;
+    }
+
+    h1 {
+      font-weight: 500;
+      color: $primary-text-color;
+      margin-bottom: 0;
+
+      small {
+        color: $darker-text-color;
+
+        span {
+          color: $secondary-text-color;
+        }
+      }
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__hero {
+    margin-bottom: 10px;
+
+    img {
+      display: block;
+      margin: 0;
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    .information-board {
+      .container-alt {
+        padding-right: 20px;
+      }
+
+      .panel {
+        position: static;
+        margin-top: 20px;
+        width: 100%;
+        border-radius: 4px;
+
+        .panel-header {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 675px) {
+    .header-wrapper {
+      padding-top: 0;
+
+      &.compact {
+        padding-bottom: 0;
+      }
+
+      &.compact .hero .heading {
+        text-align: initial;
+      }
+    }
+
+    .header .container-alt,
+    .features .container-alt {
+      display: block;
+    }
+  }
+
+  .cta {
+    margin: 20px;
+  }
+}
+
+.landing {
+  margin-bottom: 100px;
+
+  @media screen and (max-width: 738px) {
+    margin-bottom: 0;
+  }
+
+  &__brand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+
+    svg {
+      fill: $primary-text-color;
+      height: 52px;
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      padding: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  .directory {
+    margin-top: 30px;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .hero-widget {
+    margin-top: 30px;
+    margin-bottom: 0;
+
+    h4 {
+      padding: 10px;
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size: 13px;
+      color: $darker-text-color;
+    }
+
+    &__text {
+      border-radius: 0;
+      padding-bottom: 0;
+    }
+
+    &__footer {
+      background: $ui-base-color;
+      padding: 10px;
+      border-radius: 0 0 4px 4px;
+      display: flex;
+
+      &__column {
+        flex: 1 1 50%;
+        overflow-x: hidden;
+      }
+    }
+
+    .account {
+      padding: 10px 0;
+      border-bottom: 0;
+
+      .account__display-name {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &__counters__wrapper {
+      display: flex;
+    }
+
+    &__counter {
+      padding: 10px;
+      width: 50%;
+
+      strong {
+        font-family: $font-display, sans-serif;
+        font-size: 15px;
+        font-weight: 700;
+        display: block;
+      }
+
+      span {
+        font-size: 14px;
+        color: $darker-text-color;
+      }
+    }
+  }
+
+  .simple_form .user_agreement .label_input > label {
+    font-weight: 400;
+    color: $darker-text-color;
+  }
+
+  .simple_form p.lead {
+    color: $darker-text-color;
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 400;
+    margin-bottom: 25px;
+  }
+
+  &__grid {
+    max-width: 960px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+    grid-gap: 30px;
+
+    @media screen and (max-width: 738px) {
+      grid-template-columns: minmax(0, 100%);
+      grid-gap: 10px;
+
+      &__column-login {
+        grid-row: 1;
+        display: flex;
+        flex-direction: column;
+
+        .box-widget {
+          order: 2;
+          flex: 0 0 auto;
+        }
+
+        .hero-widget {
+          margin-top: 0;
+          margin-bottom: 10px;
+          order: 1;
+          flex: 0 0 auto;
+        }
+      }
+
+      &__column-registration {
+        grid-row: 2;
+      }
+
+      .directory {
+        margin-top: 10px;
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      grid-gap: 0;
+
+      .hero-widget {
+        display: block;
+        margin-bottom: 0;
+        box-shadow: none;
+
+        &__img,
+        &__img img,
+        &__footer {
+          border-radius: 0;
+        }
+      }
+
+      .hero-widget,
+      .box-widget,
+      .directory__tag {
+        border-bottom: 1px solid lighten($ui-base-color, 8%);
+      }
+
+      .directory {
+        margin-top: 0;
+
+        &__tag {
+          margin-bottom: 0;
+
+          & > a,
+          & > div {
+            border-radius: 0;
+            box-shadow: none;
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.brand {
+  position: relative;
+  text-decoration: none;
+}
+
+.brand__tagline {
+  display: block;
+  position: absolute;
+  bottom: -10px;
+  left: 50px;
+  width: 300px;
+  color: $ui-primary-color;
+  text-decoration: none;
+  font-size: 14px;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    position: static;
+    width: auto;
+    margin-top: 20px;
+    color: $dark-text-color;
+  }
+}
+
+.rules-list {
+  background: darken($ui-base-color, 2%);
+  border: 1px solid darken($ui-base-color, 8%);
+  border-radius: 4px;
+  padding: 0.5em 2.5em !important;
+  margin-top: 1.85em !important;
+
+  li {
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    color: $dark-text-color;
+    padding: 1em;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__text {
+    color: $primary-text-color;
+  }
+}