Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ableton v1 #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Ableton v1 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
930d404
Ableton v1
peruvianidol Apr 27, 2021
db7fe3f
Fix Sass errors with Cool CSS
peruvianidol Apr 27, 2021
b0675a5
Fix lighthouse errors
peruvianidol Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addWatchTarget("./_src/sass/");
eleventyConfig.addPassthroughCopy("./_src/css");
eleventyConfig.addPassthroughCopy("./_src/images");
eleventyConfig.addPassthroughCopy("./_src/makeovers/ableton/assets");

eleventyConfig.addPlugin(syntaxHighlight);

Expand Down
154 changes: 154 additions & 0 deletions _src/_includes/makeovers/ableton/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An attempt to replicate ableton.com using Cool CSS.">
<link rel="stylesheet" href="{{ '/css/ableton.css' | url }}">
<title>Ableton</title>
</head>
<body class="able-styles" style="overflow-y: scroll">
{% include "partials/makeovers/ableton/svg-sprite.html" %}
<div class="able-layout-header-main-footer">
<header data-grid-area="header">
<div class="able-flex-row-30 able-inset-square-20 able-border-bottom">
<a href="" aria-label="Ableton">
<svg width="60" height="28" role="img">
<use xlink:href="#icon-logo"></use>
</svg>
</a>
<nav class="able-flex-item">
<ul class="able-nav-list" role="list">
<li><a href="">Live</a></li>
<li><a href="">Push</a></li>
<li><a href="">Link</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Packs</a></li>
<li><a href="">Help</a></li>
<li><a href="" class="able-flex-row-8"><span>More</span><svg width="12" height="12" aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></a></li>
</ul>
</nav>
<div class="able-flex-row-30">
<a href="" class="able-text-large"><strong>Try Live for free</strong></a>
<a href="" class="able-text-small able-text-inherit"><strong>Log in or register</strong></a>
</div>
</div>
<div class="able-inset-square-20">
<ul class="able-nav-list-small" role="list">
<li><a href="" class="able-is-active">About</a></li>
<li><a href="">Jobs</a></li>
</ul>
</div>
</header>

<main data-grid-area="main">
{{ content | safe }}
</main>

<footer class="able-border-top able-inset-vertical-120" data-grid-area="footer">
<svg width="188" height="45" role="img" class="able-stack-60">
<use xlink:href="#icon-wordmark"></use>
</svg>
<div class="able-layout-30-30-40 able-stack-60">
<div>
<ul role="list" class="able-stack-10">
<li><a href="" class="able-chevron-link able-text-inherit">Register Live or Push</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">About Ableton</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Jobs</a></li>
</ul>
<ul role="list" class="able-flex-row-10">
<li><a href="">
<svg width="40" height="40" role="img" class="able-icon-social-facebook">
<title>Facebook</title>
<use xlink:href="#icon-facebook"></use>
</svg>
</a></li>
<li><a href="">
<svg width="40" height="40" role="img" class="able-icon-social-twitter">
<title>Twitter</title>
<use xlink:href="#icon-twitter"></use>
</svg>
</a></li>
<li><a href="">
<svg width="40" height="40" role="img" class="able-icon-social-youtube">
<title>YouTube</title>
<use xlink:href="#icon-youtube"></use>
</svg>
</a></li>
<li><a href="">
<svg width="40" height="40" role="img" class="able-icon-social-instagram">
<title>Instagram</title>
<use xlink:href="#icon-instagram"></use>
</svg>
</a></li>
</ul>
</div>
<div>
<h3 class="able-text-strong">Education</h3>
<ul role="list">
<li><a href="" class="able-chevron-link able-text-inherit">Offers for students and teachers</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Offers for institutions</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Push 1 trade-in initiative</a></li>
</ul>
</div>
<div>
<h3 class="able-text-strong">Sign up to our newsletter</h3>
<p class="able-stack-20">Enter your email address to stay up to date with the latest offers, tutorials, downloads, surveys and more.</p>
<form class="able-flex-row-0">
<input type="text" placeholder="Email Address" name="email" class="able-input able-flex-item">
<button class="able-button">Sign up</button>
</form>
</div>
</div>
<div class="able-layout-30-30-40 able-stack-60">
<div>
<h3 class="able-text-strong">Community</h3>
<ul role="list">
<li><a href="" class="able-chevron-link able-text-inherit">Find Ableton User Groups</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Find Certified Training</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Become a Certified Trainer</a></li>
</ul>
</div>
<div>
<h3 class="able-text-strong">Distributors</h3>
<ul role="list">
<li><a href="" class="able-chevron-link able-text-inherit">Find Distributors</a></li>
<li><a href="" class="able-chevron-link able-text-inherit">Try Push in-store</a></li>
</ul>
</div>
<form>
<h3 class="able-text-strong able-stack-10">Language and Location</h3>
<div class="able-flex-row-4">
<select name="lang" class="able-input" style="--form-field-width: auto; padding-right: 30px;">
<option>English</option>
</select>
<select name="location" class="able-input">
<option>United States</option>
</select>
</div>
</form>
</div>
<div class="able-space-between">
<ul class="able-nav-list-small able-nav-list-tight" role="list">
<li><a href="">Archive</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Press Resources</a></li>
<li><a href="">Legal Info</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Cookie Settings</a></li>
<li><a href="">Imprint</a></li>
</ul>
<div class="able-flex-row-16">
<strong class="able-text-small">Made in Berlin</strong>
<svg width="45" height="21" role="img">
<use xlink:href="#icon-logo"></use>
</svg>
</div>
</div>
</footer>
</div>
</body>
</html>
36 changes: 36 additions & 0 deletions _src/_includes/partials/makeovers/ableton/svg-sprite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div hidden><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 45 21" id="icon-logo">
<title id="logo-title">Ableton</title>
<path d="M0 0h3v21H0zM6 0h3v21H6zM12 0h3v21h-3zM18 0h3v21h-3zM24 18h21v3H24zM24 12h21v3H24zM24 6h21v3H24zM24 0h21v3H24z"/>
</symbol>
<symbol viewBox="0 0 430 104" id="icon-wordmark">
<title id="wordmark-title">Ableton</title>
<path d="M32.62 65.175l14.936-33.396 14.948 33.396H32.62zm61.242 34.957c-7.275-15.869-14.884-32.405-22.49-48.944a37586.933 37586.933 0 01-22.49-48.945c-.25-.449-.727-.724-1.274-.724-.554 0-1.075.282-1.395.757L1.245 100.157c-.157.477-.109.964.144 1.31.247.34.665.527 1.181.527h12.637c.485 0 .936-.305 1.34-.92l10.363-22.75h41.305l.066.145a1035.68 1035.68 0 004.444 9.718c1.976 4.292 4.023 8.728 5.867 12.922.386.586.826.885 1.323.885h12.63c.519 0 .94-.186 1.185-.526.253-.352.301-.839.132-1.336zm38.128-8.457c-10.99 0-16.743-9.896-16.743-19.67 0-9.352 5.87-19.29 16.743-19.29 10.24 0 17.392 7.932 17.392 19.29 0 9.792-5.38 19.67-17.392 19.67zm2.707-51.333c-7.1 0-13.242 2.742-18.251 8.155l-.425.459V2.526c0-.515-.672-1.167-1.426-1.167h-11.22c-.759 0-1.434.652-1.434 1.167v98.172c0 .73.632 1.296 1.434 1.296h11.086c.804 0 1.43-.566 1.43-1.296v-5.234l.424.432c4.97 5.105 11.488 8.028 17.871 8.028 19.848 0 28.885-16.676 28.885-32.176 0-15.226-9.943-31.406-28.374-31.406zM184.66 1.36h-11.086c-.759 0-1.432.652-1.432 1.167v98.172c0 .73.629 1.296 1.432 1.296h11.086c.627 0 1.298-.518 1.298-1.296V2.526c0-.49-.653-1.167-1.298-1.167zm25.805 63.816l.09-.312c1.766-6.164 7.281-12.404 14.411-12.404 8.025 0 12.644 6.408 14.29 12.404l.082.312h-28.873zm14.501-24.833c-18.053 0-29.263 12.328-29.263 32.179 0 18.489 12.14 31.403 29.528 31.403 11.763 0 21.743-5.999 27.37-16.463l.093-.182c.06-.416-.201-.837-.807-1.317l-9.377-5.251c-.704-.403-1.244-.317-1.748.32-3.738 6.024-7.259 10.644-15.407 10.644-8.809 0-15.176-5.88-15.84-14.634l-.02-.263h42.546c.69 0 1.43-.366 1.43-1.172V73.81c0-15.44-7.461-33.468-28.505-33.468zm72.869 1.798h-13.782V26.454c0-.721-.498-1.167-1.306-1.167h-11.081c-.711 0-1.43.358-1.43 1.167v6.567c0 2.958 0 9.119-8.239 9.119h-2.32c-.76 0-1.434.655-1.434 1.175v10.422c0 .965 1.097 1.038 1.434 1.038h10.558v25.29c0 16.254 6.066 23.82 19.092 23.82 3.787 0 6.806-.458 8.977-1.366l-.006-.05c.519-.1.964-.762.964-1.044V90.492c0-.638-.653-1.176-1.427-1.176-.28 0-.773.172-.943.241-1.576.626-3.204 1.278-5.54 1.278-.533 0-1.094-.033-1.67-.102-5.684-1.263-5.65-8.723-5.629-13.657V54.775h13.782c.334 0 1.427-.073 1.427-1.038V43.315c0-.52-.673-1.175-1.427-1.175zm39.283 48.77c-10.015 0-18.164-8.428-18.164-18.78 0-10.275 8.149-18.64 18.164-18.64 10.155 0 18.42 8.365 18.42 18.64 0 10.352-8.265 18.78-18.42 18.78zm0-50.568c-18.005 0-32.107 13.96-32.107 31.788s14.102 31.794 32.107 31.794c18.006 0 32.11-13.966 32.11-31.794 0-17.827-14.104-31.788-32.11-31.788zm70.505 0c-5.953 0-11.767 2.328-15.547 6.23l-.396.41-.15-3.665c0-.525-.675-1.177-1.437-1.177h-11.084c-.76 0-1.431.652-1.431 1.167v57.391c0 .73.629 1.296 1.43 1.296h11.085c.805 0 1.437-.566 1.437-1.296V74.451c0-9.682 0-21.733 12.743-21.733 10.477 0 11.33 6.87 11.33 15.173v32.807c0 .73.629 1.296 1.43 1.296h11.088c.768 0 1.302-.53 1.302-1.296V66.471c0-18.071-6.723-26.129-21.8-26.129z"/>
</symbol>
<symbol viewBox="0 0 12 12" id="icon-plus">
<title id="plus-title">plus</title>
<path d="M12 5H7V0H5v5H0v2h5v5h2V7h5z"/>
</symbol>
<symbol viewBox="0 0 50 50" id="icon-facebook">
<title id="facebook-title">Facebook</title>
<path d="M26.9 23.1h-4.2v6.8h4.2V50H35V29.8h5.6l.6-6.8H35v-3.8c0-1.6.3-2.2 1.9-2.2h4.4v-7h-5.6c-6 0-8.7 2.6-8.7 7.7-.1 4.4-.1 5.4-.1 5.4z"/>
</symbol>
<symbol viewBox="0 0 50 50" id="icon-twitter">
<title id="twitter-title">Twitter</title>
<path d="M41 15c-1.2.5-2.4.9-3.8 1 1.4-.8 2.4-2.1 2.9-3.6-1.3.8-2.7 1.3-4.2 1.6-1.2-1.3-2.9-2.1-4.8-2.1-4.2 0-7.4 4-6.4 8.1-5.5-.3-10.3-2.9-13.5-6.9-1.7 3-.9 6.8 2 8.8-1.1 0-2.1-.3-3-.8-.1 3 2.1 5.9 5.3 6.5-.9.3-1.9.3-3 .1.8 2.6 3.3 4.5 6.1 4.6C16 34.4 12.5 35.4 9 35c2.9 1.9 6.4 2.9 10.1 2.9 12.2 0 19.1-10.3 18.7-19.5 1.2-.9 2.3-2.1 3.2-3.4z"></path>
</symbol>
<symbol viewBox="0 0 50 50" id="icon-youtube">
<title id="youtube-title">YouTube</title>
<path d="M40.7 19.2c-.5-4.3-2.2-4.9-5.6-5.1-4.8-.3-15.5-.3-20.3 0-3.4.2-5.1.8-5.6 5.1-.4 3.2-.4 8.6 0 11.8.5 4.3 2.2 4.9 5.6 5.1 4.8.3 15.5.3 20.3 0 3.4-.2 5.1-.8 5.6-5.1.4-3.2.4-8.6 0-11.8zM21.8 29.5v-8.9l8.6 4.5-8.6 4.4z"></path>
</symbol>
<symbol viewBox="0 0 40 40" id="icon-instagram">
<title id="instagram-title">Instagram</title>
<path d="M20 9.346c3.47 0 3.88.013 5.25.075 1.27.06 1.957.27 2.415.45.606.235 1.04.516 1.494.97.454.456.735.89.97 1.495.18.458.39 1.146.45 2.414.06 1.37.074 1.78.074 5.25 0 3.47-.013 3.88-.075 5.25-.06 1.27-.27 1.957-.45 2.415-.235.606-.516 1.04-.97 1.494-.456.454-.89.735-1.495.97-.458.18-1.146.39-2.414.45-1.37.06-1.78.074-5.25.074-3.47 0-3.88-.013-5.25-.075-1.27-.06-1.957-.27-2.415-.45-.606-.235-1.04-.516-1.494-.97-.454-.456-.735-.89-.97-1.495-.18-.458-.39-1.146-.45-2.414-.06-1.37-.074-1.78-.074-5.25 0-3.47.013-3.88.075-5.25.06-1.27.27-1.957.45-2.415.235-.606.516-1.04.97-1.494.456-.454.89-.735 1.495-.97.458-.18 1.146-.39 2.414-.45 1.37-.06 1.78-.074 5.25-.074m0-2.342c-3.53 0-3.972.015-5.358.078-1.383.063-2.328.283-3.155.604-.854.332-1.58.777-2.302 1.5-.722.722-1.167 1.447-1.5 2.3-.32.828-.54 1.773-.603 3.156-.063 1.386-.078 1.83-.078 5.358 0 3.53.015 3.972.078 5.358.063 1.383.283 2.328.604 3.155.332.854.777 1.58 1.5 2.302.722.722 1.447 1.167 2.3 1.5.828.32 1.773.54 3.156.603 1.386.063 1.83.078 5.358.078 3.53 0 3.972-.015 5.358-.078 1.383-.063 2.328-.283 3.155-.604.854-.332 1.58-.777 2.302-1.5.722-.722 1.167-1.447 1.5-2.3.32-.828.54-1.773.603-3.156.063-1.386.078-1.83.078-5.358 0-3.53-.015-3.972-.078-5.358-.063-1.383-.283-2.328-.604-3.155-.332-.854-.777-1.58-1.5-2.302-.722-.722-1.447-1.167-2.3-1.5-.828-.32-1.773-.54-3.156-.603-1.386-.063-1.83-.078-5.358-.078"/><path d="M20 13.326c-3.686 0-6.674 2.988-6.674 6.674 0 3.686 2.988 6.674 6.674 6.674 3.686 0 6.674-2.988 6.674-6.674 0-3.686-2.988-6.674-6.674-6.674zm0 11.006c-2.392 0-4.332-1.94-4.332-4.332s1.94-4.332 4.332-4.332 4.332 1.94 4.332 4.332-1.94 4.332-4.332 4.332zM28.497 13.063c0 .86-.698 1.56-1.56 1.56-.86 0-1.56-.7-1.56-1.56 0-.862.7-1.56 1.56-1.56.862 0 1.56.698 1.56 1.56"/>
</symbol>
<symbol viewBox="0 0 50 50" id="icon-play">
<circle fill="#03F" cx="25" cy="25" r="25"/>
<path fill="#FFF" d="M35 25l-8 4.5-8 4.5V16l8 4.5z"/>
</symbol>
</defs>
</svg></div>
Loading