Navigation Menu

Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

Commit

Permalink
Announcing Rome Tools, Inc.
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastian McKenzie committed May 4, 2021
1 parent 37f7557 commit 3684eae
Show file tree
Hide file tree
Showing 27 changed files with 1,754 additions and 258 deletions.
Binary file modified assets/PNG/logo_transparent_outlined.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/PNG/logomark_transparent_outlined.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions website/.eleventy.js
View file
Expand Up @@ -196,7 +196,10 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addFilter(
"blogSummary",
(val) => {
return val.split("<!-- DESCRIPTION_END -->")[0];
const lines = val.split("<!-- DESCRIPTION_END -->")[0].split("\n");
return lines.filter((line) => {
return line.startsWith("<p>");
}).join("\n");
},
);

Expand All @@ -209,7 +212,7 @@ module.exports = function(eleventyConfig) {
year: "numeric",
month: "long",
day: "numeric",
timeZone: "America/Los_Angeles",
timeZone: "UTC",
},
);
},
Expand Down
7 changes: 7 additions & 0 deletions website/src/_includes/color-scheme-switcher.liquid
View file
@@ -0,0 +1,7 @@
<div class="color-scheme-switch-container">
<button aria-label="Toggle theme" title="Toggle theme" role="switch" aria-checked="true" class="color-scheme-switch">
<div class="selector"></div>
{% include svg/moon.svg %}
{% include svg/sun.svg %}
</button>
</div>
141 changes: 72 additions & 69 deletions website/src/_includes/layouts/base.liquid
View file
Expand Up @@ -9,10 +9,10 @@
<link rel="alternate icon" type="image/png" href="/img/favicon.png">
<link rel="icon" type="image/svg+xml" href="{{ "static/img/favicon.svg" | includeraw | toBase64: "svg" | safe }}">

<meta name="description" content="Unifying the frontend development toolchain">
<meta name="description" content="End-to-end developer tools">
<meta name="theme-color" content="#FFC905">
<meta property="og:title" content="{{ title | titlify }}">
<meta property="og:description" content="Unifying the frontend development toolchain">
<meta property="og:description" content="End-to-end developer tools">
<meta property="og:image" content="{{ env.WEBSITE_URL }}/img/{{ social-image }}">
<meta property="twitter:image" content="{{ env.WEBSITE_URL }}/img/{{ social-image }}">
<meta property="twitter:site" content="@rometools">
Expand Down Expand Up @@ -44,8 +44,8 @@
</script>
</head>

<body>
<div class="container">
<body class="{{ body-class }}">
<div class="container {% if no-sidebar %}no-sidebar{% endif %}">
<div class="skip-to-content" id="top">
<a href="#main-content">Skip to main content</a>
</div>
Expand All @@ -59,89 +59,92 @@
</a>
<div class="stretch"></div>

<a href="#" class="mobile-handle">
{% include svg/mobile-nav-handle.svg %}
{% include svg/close-icon.svg %}
</a>
{% if no-sidebar %}
{% else %}
<a href="#" class="mobile-handle">
{% include svg/mobile-nav-handle.svg %}
{% include svg/close-icon.svg %}
</a>
{% endif %}
</div>

<div class="sidebar-container">
<div class="sidebar-stripe"></div>
{% if no-sidebar %}
<div class="header-desktop-sidebarless">
<a class="logo" href="/">

<aside class="sidebar">
<div class="header-desktop">
<a class="logo" href="/">
{% include svg/rome-logo.svg %}
<h1 class="logo-text sr-only">Rome</h1>
</a>
</div>
{% include svg/rome-logo.svg %}

<div class="docsearch-container">
{% include svg/search-icon.svg %}
<label class="docsearch-label" for="docsearch">Search</label>
<input type="text" id="docsearch" class="docsearch" placeholder="Search" />
</div>
<span class="logo-text sr-only">Rome</span>
</a>
</div>
{% else %}
<div class="sidebar-container">
<div class="sidebar-stripe"></div>

<aside class="sidebar">
<div class="header-desktop">
<a class="logo" href="/">
{% include svg/rome-logo.svg %}
<h1 class="logo-text sr-only">Rome</h1>
</a>
</div>

<div class="sidebar-scroller">
<div class="site-navigation-container">
<nav aria-labelledby="site-navigation" class="menu site-navigation">
<h2 id="site-navigation" class="sr-only">Site Navigation</h2>
{% if page.url != "/funding/" %}
<div class="content">
<a href="/funding/" class="primary button">Fundraising</a>
</div>
{% endif %}
<ul>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/credits">Credits</a>
</li>
<li>
<a href="/changelog">Changelog</a>
</li>
</ul>
</nav>
<div class="docsearch-container">
{% include svg/search-icon.svg %}
<label class="docsearch-label" for="docsearch">Search</label>
<input type="text" id="docsearch" class="docsearch" placeholder="Search" />
</div>

{% if simple-sidebar %}
{% else %}
<nav aria-labelledby="quick-links" class="menu site-navigation">
<h2 id="quick-links">Quick Links</h2>
<div class="sidebar-scroller">
<div class="site-navigation-container">
<nav aria-labelledby="site-navigation" class="menu site-navigation">
<h2 id="site-navigation" class="sr-only">Site Navigation</h2>
<ul>
<li>
<a href="/#linting">Linting</a>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/docs/lint/rules">Lint Rules</a>
<a href="/credits">Credits</a>
</li>
<li>
<a href="/#cli">CLI</a>
</li>
<li>
<a href="/#project-configuration">Project Configuration</a>
<a href="/changelog">Changelog</a>
</li>
</ul>
</nav>
{% endif %}
</div>

<nav aria-labelledby="site-navigation-documentation" class="toc-menu menu">
<h2 id="site-navigation-documentation">Table of Contents</h2>
{% if simple-sidebar %}
{% else %}
<nav aria-labelledby="quick-links" class="menu site-navigation">
<h2 id="quick-links">Quick Links</h2>
<ul>
<li>
<a href="/#linting">Linting</a>
</li>
<li>
<a href="/docs/lint/rules">Lint Rules</a>
</li>
<li>
<a href="/#cli">CLI</a>
</li>
<li>
<a href="/#project-configuration">Project Configuration</a>
</li>
</ul>
</nav>
{% endif %}
</div>

{{ content | toc | safe }}
</nav>
</div>
<nav aria-labelledby="site-navigation-documentation" class="toc-menu menu">
<h2 id="site-navigation-documentation">Table of Contents</h2>

<div class="color-scheme-switch-container">
<button aria-label="Toggle theme" title="Toggle theme" role="switch" aria-checked="true" class="color-scheme-switch">
<div class="selector"></div>
{% include svg/moon.svg %}
{% include svg/sun.svg %}
</button>
</div>
</aside>
</div>
{{ content | toc | safe }}
</nav>
</div>

{% include color-scheme-switcher %}
</aside>
</div>
{% endif %}

<div class="main">
{{ content | safe }}
Expand Down
122 changes: 1 addition & 121 deletions website/src/_includes/layouts/funding.liquid
View file
Expand Up @@ -21,125 +21,5 @@ layout: layouts/base.liquid
{{ content | safe }}
</main>

<div class="modal-container funding-modal" hidden>
<div class="modal-inner">
<div class="modal content">
<div class="modal-close"></div>

<ul class="form-steps">
<li class="complete">Select your tier</li>
<li class="details">Details</li>
<li class="review">Review</li>
<li>Checkout via Stripe</li>
</ul>

<form class="details">
<h2>Contact details</h2>

<p>Used to receive order updates and surveys. <a href="#what-is-my-email-used-for">What is my email used for?</a></p>

<div class="form-row">
<label for="email">Email (required)</label>
<div class="form-row-input">
<input name="email" type="email" placeholder="eg. sebastian@rome.tools" required>
</div>
</div>

<h2>Reward details</h2>

<p>Accounts for tier reward allocation. <a href="#why-do-you-need-my-usernames">Why do you need my usernames?</a></p>

<div class="form-row">
<label for="twitter">Twitter username</label>
<div class="form-row-input">
<input name="twitter" type="text" placeholder="eg. @rometools">
</div>
</div>

<div class="form-row">
<label for="github">GitHub username</label>
<div class="form-row-input">
<input name="github" type="text" placeholder="eg. @sebmck">
</div>
</div>

<div class="form-row">
<label for="discord">Discord username</label>
<div class="form-row-input">
<input name="discord" type="text" placeholder="eg. sebmck#6578">
</div>
</div>

<h2>Contribution details</h2>

<div class="form-row">
<label for="public">Make public?</label>
<div class="form-row-input">
<div>
<input name="public" type="checkbox" checked>
</div>
<div class="hint">Would you like to include your contribution in "recent contributions"?</div>
</div>
</div>

<div class="form-row public-hide">
<label for="public-name">Display name (optional)</label>
<div class="form-row-input">
<input name="public-name" type="text" maxlength="100" placeholder="Display name to attribute your contribution to">
</div>
</div>

<div class="form-row public-hide">
<label for="public">Comment (optional)</label>
<div class="form-row-input">
<textarea name="public-comment" maxlength="500" placeholder="Add a comment that will appear alongside your contribution"></textarea>
</div>
</div>

<hr>

<div class="form-row">
<div class="form-row-input">
<input type="submit" value="Continue">
</div>
</div>
</form>

<form class="review">
<p>Prices are in USD and include sales tax and international shipping. <a href="#what-do-tier-prices-include">What do tier prices include?</a></p>

<h2>Selected tier</h2>

<h2 class="summary-heading">Summary</h2>

<div class="form-row">
<label for="public">Additional donation</label>
<div class="form-row-input">
<ul class="button-group add-donation-buttons"></ul>
<div class="currency-input add-donation-container" hidden>
<input name="add-donation" type="number" min="0" placeholder="0" step="any">
</div>
</div>
</div>

<div class="form-row">
<label>Total</label>
<div class="form-row-input">
<span class="checkout-total"></span>
</div>
</div>

<hr>

<div class="form-row">
<div class="form-row-input">
<input class="stripe-checkout primary" type="submit" value="Checkout via Stripe">
</div>
</div>
</form>
</div>
</div>
</div>

{% capture script %}{% include scripts/funding.js %}{% endcapture %}
<script>{{ script | jsmin | safe }}</script>
<script>{{ script | jsmin | safe }}</script>
55 changes: 55 additions & 0 deletions website/src/_includes/layouts/inc.liquid
View file
@@ -0,0 +1,55 @@
---
simple-sidebar: true
social-image: social-logo-universe.png
layout: layouts/base.liquid
no-sidebar: true
body-class: inc force-light
---

<div id="inc-color-scheme">
{% include color-scheme-switcher %}
</div>

<div class="inc-bg"></div>

<div class="inc-bg-padding" aria-hidden="true">
<a href="/">Rome</a>
</div>

<div class="hero hero-inc">
<h1>Announcing Rome Tools, Inc.</h1>
</div>

<main id="main-content" class="content single inc">
{{ content | safe }}
</main>

<script>
(function() {
const bg = document.querySelector(".inc-bg");
let lastTop = undefined;
let disabled;
document.addEventListener("scroll", (e) => {
if (disabled === undefined) {
disabled = matchMedia("(max-width: 768px)").matches || matchMedia("(prefers-reduced-motion)").matches;
}
if (disabled) {
return;
}
if (document.scrollingElement.scrollTop > 450) {
return;
}
const top = document.scrollingElement.scrollTop / 2;
if (lastTop === top) {
return;
}
lastTop = top;
bg.style.transform = `translateY(${top}px)`;
});
})();
</script>

0 comments on commit 3684eae

Please sign in to comment.