Commit bea5f1c0 authored by Nick Stenning's avatar Nick Stenning

Remove site assets and scripts

parent aec46d7c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="60px" height="45px" viewBox="0 0 60 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
<title>Slice 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Path-1-+-Triangle-1" sketch:type="MSLayerGroup" transform="translate(2.000000, -2.000000)">
<path d="M0.273888323,46.8543613 C0.792991324,12.7899443 27.9928896,9.26957714 53.1377225,6.24948249" id="Path-1" stroke="#979797" stroke-width="2" sketch:type="MSShapeGroup"></path>
<polygon id="Triangle-1" fill="#979797" sketch:type="MSShapeGroup" transform="translate(51.500000, 6.500000) rotate(82.000000) translate(-51.500000, -6.500000) " points="51.5 1 57 12 46 12 "></polygon>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="99px" height="92px" viewBox="0 0 99 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="sad-annotation" sketch:type="MSLayerGroup" fill="#BBBBBB">
<g id="Page-1" sketch:type="MSShapeGroup">
<g id="Group">
<path d="M21.0244225,0.305107567 C9.98135502,0.305107567 0.872083773,9.25959265 0.678248468,20.308205 L0.098944476,53.3285326 C-0.0948696585,64.3759382 8.70465419,73.4690154 19.7517133,73.6315189 C19.7517133,73.6315189 30.5058053,73.8128632 30.9230781,73.7586857 C40.8912967,75.3957845 45.7862251,91.741397 49.2864726,91.6950246 C53.1354048,91.6484543 57.3386431,73.6047617 68.0769228,73.33163 C74.7294766,73.4808984 77.9774076,73.3977824 77.9774076,73.3977824 C89.0194649,73.3612475 98.1279171,64.3771449 98.3217525,53.3285326 L98.9010564,20.308205 C99.0948706,9.26079934 90.2968029,0.305107567 79.2567454,0.305107567 L21.0244225,0.305107567 L21.0244225,0.305107567 Z M26.0106513,10.1273884 C17.7255158,10.1273884 10.8879947,16.8334308 10.7382361,25.127031 L10.331435,47.6555952 C10.1818484,55.9396691 16.7756859,62.7583236 25.0571713,62.8806623 C25.0571713,62.8806623 34.35,63.0352771 34.6795201,62.9924921 C42.5514181,64.2853411 47.5044818,74.576174 49.318091,74.6127971 C51.1317002,74.6494202 55.5398805,62.8709353 64.0198953,62.6552378 C69.2734142,62.773118 77.6243098,62.6999126 77.6243098,62.6999126 C83.1486949,62.6752394 87.7079626,58.1767429 87.8077324,52.651511 L88.3047454,25.127031 C88.4543319,16.8429571 81.8615115,10.1273884 73.574031,10.1273884 L26.0106513,10.1273884 L26.0106513,10.1273884 Z" id="Active-Browser-Action-2"></path>
<ellipse id="Oval-1" cx="32.2042451" cy="28.4907829" rx="5.12466824" ry="6.83289099"></ellipse>
<path d="M66.3687001,35.3236739 C69.1989762,35.3236739 71.4933683,32.2644844 71.4933683,28.4907829 C71.4933683,24.7170814 69.1989762,21.6578919 66.3687001,21.6578919 C63.538424,21.6578919 61.2440318,24.7170814 61.2440318,28.4907829 C61.2440318,32.2644844 63.538424,35.3236739 66.3687001,35.3236739 L66.3687001,35.3236739 Z" id="Oval-2"></path>
<path d="M49.2864724,49.7403396 C52.0318666,49.8681341 53.5761511,50.4824633 54.686705,50.8198538 C55.7880507,51.3905335 56.7456419,52.2736067 57.4129402,53.4294012 C58.1538299,54.7126599 59.7893503,55.1554407 61.0659771,54.4183798 C62.3426039,53.681319 62.7769046,52.0435264 62.0360149,50.7602678 C59.3856696,46.169735 54.2624995,44.2918433 49.2864724,44.2918433 C44.1388577,44.2918433 39.1872757,46.169735 36.5369303,50.7602678 C35.7960406,52.0435264 36.2303413,53.681319 37.5069681,54.4183798 C38.783595,55.1554407 40.4191153,54.7126599 41.160005,53.4294012 C41.8273033,52.2736067 42.7848945,51.3905335 43.8862402,50.8198538 C43.8862402,50.8198538 46.7126649,49.8681341 49.2864724,49.7403396 L49.2864724,49.7403396 Z" id="Oval-1"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
'use strict';
// configure error reporting
var settings = require('./settings')(document);
if (settings.raven) {
require('./raven').init(settings.raven);
}
window.$ = window.jQuery = require('jquery');
require('bootstrap');
var page = require('./page');
var AdminUsersController = require('./admin-users');
page('/admin/users', function() {
new AdminUsersController(document.body, window);
});
'use strict';
function AdminUsersController(element, window_) {
this._form = element.querySelector('#js-users-delete-form');
function confirmFormSubmit() {
return window_.confirm('This will permanently delete all the user\'s data. Are you sure?');
}
if (this._form) {
this._form.addEventListener('submit', function (event) {
if (!confirmFormSubmit()) {
event.preventDefault();
}
});
}
}
module.exports = AdminUsersController;
function CreateGroupFormController(element) {
// Create Group form handling
var self = this;
this._submitBtn = element.querySelector('.js-create-group-create-btn');
this._groupNameInput = element.querySelector('.js-group-name-input');
this._infoLink = element.querySelector('.js-group-info-link');
this._infoText = element.querySelector('.js-group-info-text');
function groupNameChanged(event) {
self._submitBtn.disabled = self._groupNameInput.value.trim().length === 0;
}
self._groupNameInput.addEventListener('input', groupNameChanged);
groupNameChanged();
this._infoLink.addEventListener('click', function (event) {
event.preventDefault();
self._infoLink.classList.add('is-hidden');
self._infoText.classList.remove('is-hidden');
});
}
module.exports = CreateGroupFormController;
/**
* A simple drop-down menu controller.
*
* All elements within 'rootElement' with the class 'js-menu-toggle'
* become dropdown menu toggles that toggle their closest sibling
* element with a 'js-menu' class, or the first element within
* 'rootElement' that matches the selector set by 'data-menu-target'
* on the toggle element.
*/
function DropdownMenuController(rootElement) {
var menuToggles = rootElement.querySelectorAll('.js-menu-toggle');
function setupMenu(menuToggle) {
menuToggle.addEventListener('click', function (openEvent) {
openEvent.preventDefault();
var dropdown = menuToggle;
if (menuToggle.dataset.menuTarget) {
dropdown = rootElement.querySelector(menuToggle.dataset.menuTarget);
} else {
dropdown = dropdown.parentElement.querySelector('.js-menu');
}
if (!dropdown) {
throw new Error('Associated menu not found');
}
var isOpen = dropdown.classList.toggle('is-open');
if (isOpen) {
document.addEventListener('click', function listener(event) {
if (menuToggle.contains(event.target) || dropdown.contains(event.target)) {
return;
}
dropdown.classList.remove('is-open');
document.removeEventListener('click', listener);
});
}
});
}
for (var i=0; i < menuToggles.length; i++) {
setupMenu(menuToggles[i]);
}
}
module.exports = DropdownMenuController;
'use strict';
function FormSelectOnFocusController(root) {
this._elements = root.querySelectorAll('.js-select-onfocus');
for (var i = 0; i < this._elements.length; i++) {
var element = this._elements[i];
// In case the `focus` event has already been fired, select the element
if (element === document.activeElement) {
element.select();
}
element.addEventListener('focus', function(event) {
event.target.select();
});
}
}
module.exports = FormSelectOnFocusController;
// Utility functions used on the page that presents the Hypothesis
// extension and bookmarklet installers
var uaDetect = require('./ua-detect');
function showSupportedInstallers(rootElement) {
function showIf(selector, cond) {
var elements = rootElement.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) {
if (cond) {
elements[i].classList.remove('is-hidden');
} else {
elements[i].classList.add('is-hidden');
}
}
}
// check for Chrome extension support. We also check here for !mobile
// so that the page is correct when testing in Chrome dev tools with
// mobile device simulation enabled
var offerChromeInstall = uaDetect.chromeExtensionsSupported &&
!uaDetect.isMobile;
var offerBookmarkletInstall = !offerChromeInstall &&
!uaDetect.isMobile &&
!uaDetect.isMicrosoftEdge;
showIf('.js-install-chrome', offerChromeInstall);
showIf('.js-install-bookmarklet', offerBookmarkletInstall);
showIf('.js-install-any', offerChromeInstall || offerBookmarkletInstall);
}
function InstallerController(element) {
showSupportedInstallers(element);
// setup Via link form
var proxyForm = document.querySelector('.js-proxy-form');
proxyForm.addEventListener('submit', function (event) {
event.preventDefault();
var url = proxyForm.elements['url'].value;
window.location.href = 'https://via.hypothes.is/' + url;
});
}
module.exports = InstallerController;
'use strict';
window.$ = window.jQuery = require('jquery');
require('bootstrap');
if (window.chrome !== undefined) {
var elements = document.getElementsByClassName('unhide-in-chrome');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('hidden');
}
elements = document.getElementsByClassName('hide-in-chrome');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add('hidden');
}
}
var bookmarkletInstaller = document.getElementById('js-bookmarklet-install');
if (bookmarkletInstaller) {
bookmarkletInstaller.addEventListener('click', function (event) {
window.alert('Drag me to the bookmarks bar');
event.preventDefault();
});
}
var chromeextInstaller = document.getElementById('js-chrome-extension-install');
if (chromeextInstaller) {
chromeextInstaller.addEventListener('click', function (event) {
chrome.webstore.install();
event.preventDefault();
});
}
'use strict';
function page(path, callback) {
if (window.location.pathname === path) {
document.addEventListener('DOMContentLoaded', callback, false);
}
}
module.exports = page;
'use strict';
// configure error reporting
var settings = require('./settings')(document);
if (settings.raven) {
require('./raven').init(settings.raven);
}
var page = require('./page');
var CreateGroupFormController = require('./create-group-form');
var DropdownMenuController = require('./dropdown-menu');
var InstallerController = require('./installer-controller');
var FormSelectOnFocusController = require('./form-select-onfocus-controller');
// setup components
new DropdownMenuController(document);
page('/', function () {
// load our customized version of Bootstrap which
// provides a few basic UI components (eg. modal dialogs)
require('../styles/vendor/bootstrap/bootstrap');
new InstallerController(document.body);
});
page('/groups/new', function () {
new CreateGroupFormController(document.body);
});
page('/login', function() {
new FormSelectOnFocusController(document.body);
});
page('/register', function() {
new FormSelectOnFocusController(document.body);
});
page('/forgot_password', function() {
new FormSelectOnFocusController(document.body);
});
'use strict';
var AdminUsersController = require('../admin-users');
// helper to dispatch a native event to an element
function sendEvent(element, eventType) {
// createEvent() used instead of Event constructor
// for PhantomJS compatibility
var event = document.createEvent('Event');
event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
element.dispatchEvent(event);
return event;
}
describe('AdminUsersController', function () {
var root;
var form;
beforeEach(function () {
root = document.createElement('div');
root.innerHTML = '<form id="js-users-delete-form">' +
'<input type="submit" id="submit-btn">';
form = root.querySelector('form');
document.body.appendChild(root);
});
afterEach(function () {
root.parentNode.removeChild(root);
});
it('it submits the form when confirm returns true', function () {
var fakeWindow = {confirm: sinon.stub().returns(true)};
new AdminUsersController(root, fakeWindow);
var event = sendEvent(form, 'submit');
assert.isFalse(event.defaultPrevented);
});
it('it cancels the form submission when confirm returns false', function () {
var fakeWindow = {confirm: sinon.stub().returns(false)};
new AdminUsersController(root, fakeWindow);
var event = sendEvent(form, 'submit');
assert.isTrue(event.defaultPrevented);
});
});
"use strict";
var CreateGroupFormController = require('../create-group-form');
function isHidden(elt) {
return elt.classList.contains('is-hidden');
}
// helper to dispatch a native event to an element
function sendEvent(element, eventType) {
// createEvent() used instead of Event constructor
// for PhantomJS compatibility
var event = document.createEvent('Event');
event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
element.dispatchEvent(event);
}
describe('CreateGroupFormController', function () {
var element;
var template;
before(function () {
template = '<input type="text" class="js-group-name-input">' +
'<input type="submit" class="js-create-group-create-btn">' +
'<a href="" class="js-group-info-link">Tell me more!</a>' +
'<div class="js-group-info-text is-hidden">More!</div>';
});
beforeEach(function () {
element = document.createElement('div');
element.innerHTML = template;
});
it('should enable submission if form is valid', function () {
var controller = new CreateGroupFormController(element);
controller._groupNameInput.value = '';
sendEvent(controller._groupNameInput, 'input');
assert.equal(controller._submitBtn.disabled, true);
controller._groupNameInput.value = 'a group name';
sendEvent(controller._groupNameInput, 'input');
assert.equal(controller._submitBtn.disabled, false);
});
it('should toggle info text when explain link is clicked', function () {
var controller = new CreateGroupFormController(element);
assert.equal(isHidden(controller._infoText), true);
sendEvent(controller._infoLink, 'click');
assert.equal(isHidden(controller._infoText), false);
assert.equal(isHidden(controller._infoLink), true);
});
});
'use strict';
var FormSelectOnFocusController = require('../form-select-onfocus-controller');
// helper to dispatch a native event to an element
function sendEvent(element, eventType) {
// createEvent() used instead of Event constructor
// for PhantomJS compatibility
var event = document.createEvent('Event');
event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
element.dispatchEvent(event);
}
describe('FormSelectOnFocusController', function() {
var root;
beforeEach(function() {
root = document.createElement('div');
root.innerHTML = '<form id="js-users-delete-form">' +
'<input type="text" class="js-select-onfocus" value="some-test-value">';
document.body.appendChild(root);
});
afterEach(function() {
root.parentNode.removeChild(root);
});
it('it selects the element on focus event', function() {
new FormSelectOnFocusController(root);
var input = root.querySelector('input');
sendEvent(input, 'focus');
assert.strictEqual(input.selectionStart, 0);
assert.strictEqual(input.selectionEnd, input.value.length);
});
it('it selects the element without focus event when it is the active element', function() {
// Focus element before instantiating the controller
var input = root.querySelector('input');
input.focus();
new FormSelectOnFocusController(document.body);
assert.strictEqual(input.selectionStart, 0);
assert.strictEqual(input.selectionEnd, input.value.length);
});
});
var proxyquire = require('proxyquire');
describe('installer page', function () {
var rootElement;
var extensionBtn;
var bookmarkletBtn;
var linkField;
beforeEach(function () {
rootElement = document.createElement('div');
rootElement.innerHTML =
'<button class="extension js-install-chrome is-hidden"></button>' +
'<button class="bookmarklet js-install-bookmarklet is-hidden"></button>' +
'<input class="link">' +
'<form class="js-proxy-form"><input name="url"></form>'
extensionBtn = rootElement.querySelector('.extension');
bookmarkletBtn = rootElement.querySelector('.bookmarklet');
linkField = rootElement.querySelector('.link');
document.body.appendChild(rootElement);
});
afterEach(function () {
rootElement.parentNode.removeChild(rootElement);
});
function createController(userAgentInfo) {
var Controller = proxyquire('../installer-controller', {
'./ua-detect': userAgentInfo
});
return new Controller(rootElement);
}
function isHidden(el) {
return el.classList.contains('is-hidden');
}
it('shows the chrome extension to desktop Chrome users', function () {
var controller = createController({chromeExtensionsSupported: true});
assert.isFalse(isHidden(extensionBtn));
assert.isTrue(isHidden(bookmarkletBtn));
});
it('shows the bookmarklet on desktop browsers', function () {
var controller = createController({chromeExtensionsSupported: false,
isMobile: false});
assert.isTrue(isHidden(extensionBtn));
assert.isFalse(isHidden(bookmarkletBtn));
});
it('shows only the Via link to mobile browsers', function () {
var controller = createController({chromeExtensionsSupported: false,
isMobile: true});
assert.isTrue(isHidden(extensionBtn));
assert.isTrue(isHidden(bookmarkletBtn));
});
it('shows only the Via link to Microsoft Edge users', function () {
var controller = createController({isMicrosoftEdge: true});
assert.isTrue(isHidden(extensionBtn));
assert.isTrue(isHidden(bookmarkletBtn));
});
});
'use strict';
var page = require('../page');
// helper to dispatch a native event to an element
function sendEvent(element, eventType) {
// createEvent() used instead of Event constructor
// for PhantomJS compatibility
var event = document.createEvent('Event');
event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
element.dispatchEvent(event);
return event;
}
describe('page', function () {
it('it adds the callback when the url path matches', function () {
var spy = sinon.spy();
page(document.location.pathname, spy);
sendEvent(document, 'DOMContentLoaded');
assert.calledOnce(spy);
});
it('it skips adding the callback when the url path does not match', function () {
var spy = sinon.spy();
page(document.location.pathname + '-foo', spy);
sendEvent(document, 'DOMContentLoaded');
assert.notCalled(spy);
});
});
module.exports = {
isMobile: navigator.userAgent.match(/\b(Mobile)\b/),
isMicrosoftEdge: navigator.userAgent.match(/\bEdge\b/),
// we test for the existence of window.chrome.webstore
// here because Microsoft Edge (and possibly others) include
// "Chrome" in their UA strings for website compatibility reasons
// and Edge also provides an empty "window.chrome" object.
chromeExtensionsSupported: typeof window.chrome !== 'undefined' &&
typeof window.chrome.webstore !== 'undefined',
};
body {
padding-top: 50px;
}
.flashbar {
margin-top: 20px;
}
.table-auto {
table-layout: auto;
width: auto;
}
.users-activate-form {
display: inline;
}
@at-root {
.flashbar {
max-width: 1130px;
margin-left: auto;
margin-right: auto;
}
}
@at-root {
.footer {
@include header-or-footer;
margin-top: 15px;
margin-bottom: 45px;
}
.social-media-link {
display: inline-block;
padding-left: 6px;
padding-right: 6px;
font-size: 16px;
text-decoration: none;
}
.social-media-link:not(:hover) {
color: $color-gray;
}
// TODO - Use Modernizr-style CSS classes to adjust hit targets
// for touch devices rather than relying on screen size.
// See http://stackoverflow.com/questions/11387805/
@media only screen and (max-width: $break-tablet) {
.footer {
// margins at the bottom of the document collapse on mobile,
// so use padding to give enough space between the bottom of the screen
// and the footer links
padding-bottom: 20px;
}
.social-media-link {
padding-left: 12px;
padding-right: 0px;
font-size: 30px;
}
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
// The group-form block implements the styles used by the forms for
// creating, joining and sharing groups
@at-root {
@mixin flex-center-column {
display: flex;
flex-direction: column;
align-items: center;
}
$border-color: $gray-lighter;
$border: 1px solid $border-color;
.is-hidden {
display: none;
}
.group-form {
@include flex-center-column();
font-size: $body2-font-size;
background-color: $white;
border: $border;
color: $color-dove-gray;
padding-bottom: 45px;
padding-left: 5px;
padding-right: 5px;
margin-top: 75px;
&__form {
@include flex-center-column();
}
&__heading-icon {
margin-top: 40px;
font-size: 24px;
}
&__invite-icon {
margin-top: 40px;
margin-bottom: 35px;
width: 85px;
height: 65px;
}
&__heading {
font-size: $title-font-size;
font-weight: $title-font-weight;
margin-bottom: 40px;
}
&__heading--short {
font-size: $title-font-size;
font-weight: $title-font-weight;
margin-bottom: 5px;
}
&__nocontent-text {
padding-top: 10px;
}
.form-field {
@include flex-center-column();
}
&__name-label {
font-size: 18px;
margin-bottom: 10px;
}
&__name-input {
font-size: 28px;
font-weight: bold;
border: none;
text-align: center;
margin-bottom: 40px;
width: 350px;
outline: none;
// TODO - Cyan cursor color
&:placeholder {
color: $color-alto;
}
}
}
.group-document-list, .group-members-list {
display: flex;
justify-content: left;
font-size: $body2-font-size;
line-height: $body2-line-height;
background-color: $white;
color: $color-dove-gray;
border-left: $border;
border-right: $border;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
&__heading {
font-weight: bold;
margin-bottom: 1em;
}
&__list li {
margin-bottom: 1.2em;
em {
font-style: italic;
color: $color-silver-chalice;
}
}
&__memberlist li {
margin-bottom: 0.2em;
}
}
.group-members-list {
border-bottom: $border;
padding-bottom: 20px;
}
.group-form-footer {
@include flex-center-column();
justify-content: center;
border: $border;
border-top: none;
color: $color-dove-gray;
font-size: $body2-font-size;
line-height: $body2-line-height;
min-height: 43px;
background-color: $color-wild-sand;
padding-left: 18px;
padding-right: 18px;
&__explain-link {
color: $color-silver-chalice;
}
&__explain-text {
padding-bottom: 22px;
}
&__heading {
font-weight: bold;
margin-top: 22px;
margin-bottom: 4px;
}
&__list {
padding-left: 18px;
}
}
.group-form-footer-link {
@include flex-center-column();
color: $gray-light;
justify-content: center;
height: 35px;
a {
color: inherit;
}
}
}
@mixin header-or-footer {
margin-left: auto;
margin-right: auto;
padding-left: $layout-h-margin;
padding-right: $layout-h-margin;
max-width: 1130px;
a {
color: $color-mine-shaft;
}
a:hover {
color: $color-cardinal;
}
}
@at-root {
// desktop
.header {
@include header-or-footer;
display: flex;
flex-direction: row;
font-family: $font-family-site-sans;
margin-top: 25px;
margin-bottom: 25px;
align-items: center;
}
.header-controls {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.header-logo {
display: flex;
flex-direction: row;
font-size: $font-size-heading2;
font-weight: bold;
color: $color-mine-shaft;
align-items: center;
letter-spacing: -0.2;
}
.header-logo__dot {
color: $color-cardinal;
}
.hiring-banner {
font-size: $font-size-body2;
border: 1px solid $color-alto;
border-radius: 2px;
margin-left: 10px;
padding-left: 8px;
padding-right: 8px;
padding-top: 7px;
padding-bottom: 7px;
position: relative;
}
.hiring-banner__arrow-svg {
position: absolute;
left: -5px;
width: 5px;
height: 20px;
}
.hiring-banner__arrow {
fill: white;
stroke: $color-alto;
}
.nav-bar-toggle {
display: none;
}
.nav-bar {
display: flex;
flex-direction: row;
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
}
.nav-bar__item {
font-size: $font-size-body2;
margin-left: 12px;
margin-right: 12px;
color: $color-mine-shaft;
}
.nav-bar-menu__indicator {
stroke: $color-gray;
margin-left: 3px;
width: 8px;
height: 8px;
}
.nav-bar-menu {
background-color: white;
border: 1px solid $color-alto;
border-radius: 2px;
display: none;
margin-top: 8px;
position: absolute;
list-style-type: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
z-index: $zindex-dropdown-menu;
}
.nav-bar-menu.is-open {
display: block;
font-size: $font-size-body2;
}
.nav-bar-menu__item > a {
// expand the link to take up the full width of the menu
// item in order to make the hit target larger
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
}
.nav-bar-menu__separator {
border-bottom: 1px solid $color-gallery;
margin-bottom: 10px;
margin-top: 10px;
}
.nav-bar__item--login {
color: $color-silver-chalice;
& > a {
color: $color-cardinal;
}
}
// desktop
@media only screen and (min-width: $break-tablet) {
// on desktop, add a margin between the left edge of dropdown
// menus in the nav and menu item text.
//
// On mobile, only the top-level nav has a left margin
.nav-bar-menu__item > a {
padding-left: 12px;
padding-right: 12px;
}
}
// phones and small tablets
@media only screen and (max-width: $break-tablet) {
.header {
flex-direction: column;
align-items: stretch;
}
$anim-duration-normal: .3s;
.nav-bar-container {
overflow: hidden;
margin-top: 10px;
max-height: 0px;
transition: max-height $anim-duration-normal ease-in;
// make the nav bar occupy the full width of the page when
// opened
margin-left: - $layout-h-margin;
margin-right: - $layout-h-margin;
}
.nav-bar-container.is-open {
// set to a value which is taller than the menu will ever
// actually grow to when open, but not too much taller so that
// the container grows in height at roughly the same speed as the
// menu content slides down
max-height: 400px;
border-top: 1px solid $color-alto;
border-bottom: 1px solid $color-alto;
}
.nav-bar {
display: flex;
flex-direction: column;
background-color: $color-gallery;
padding-left: 3px;
padding-right: 3px;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
transform: translateY(-100%);
transition: transform $anim-duration-normal ease-in;
}
.is-open > .nav-bar {
transform: translateY(0%);
}
.nav-bar-toggle {
display: initial;
color: $color-mine-shaft;
font-size: $font-size-heading2;
}
.nav-bar__item {
margin-top: 3px;
margin-bottom: 3px;
font-size: $font-size-heading2;
}
.nav-bar-menu {
background-color: transparent;
position: relative;
border: none;
padding-left: 40px;
padding-bottom: 10px;
}
.nav-bar-menu__item {
font-size: $font-size-heading2;
}
}
}
$base-font-size: 16px;
$base-line-height: 22px;
@import './reset';
@import './common';
@import './elements';
@import './mixins/icons';
body {
background: #fff;
}
.help-page {
padding-top: 2.5em;
padding-bottom: 2.5em;
background: $body-background;
font-family: 'Lato', sans-serif !important;
font-weight: 300;
@include breakpoint(920px) {
padding-right: 460px;
}
.masthead {
padding: 2.5em;
padding-top: 0;
}
}
.help-page-content {
margin: auto;
padding: 0 20px;
min-width: 480px;
@include breakpoint(1160px) {
padding: 0 5% 0 10%;
}
@include breakpoint(1400px) {
padding: 0 10% 0 20%;
}
}
.help-page-heading {
color: $gray-darker;
margin-bottom: 1em;
font-weight: 400;
font-size: 1.1em;
}
.help-page-lede {
font-style: italic;
margin-bottom: 2.5em;
}
.help-page-section {
padding: 2.5em;
border-top: 1px solid #EAEAEA;
&:first-child {
border-top: none;
padding-top: 0;
}
}
.help-page-sidebar {
position: fixed;
top: 20px;
right: 2.5em;
bottom: 20px;
width: 380px;
display: block;
@include breakpoint(920px) {
border: $gray-lighter dotted 2px;
border-radius: 3px;
}
}
@mixin help-icon {
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0.4em;
border-radius: 0.4em;
background: #FFF;
text-shadow: 0 0 2px #F9F9F9, 0 0 0 #777;
color: rgba(200, 200, 200, 0.3);
font-size: 10px;
}
#help-1 {
position: fixed;
top: 60px;
right: 60px;
width: 210px;
color: $gray-light;
text-align: right;
@include icons {
@include help-icon;
font-size: 14px;
}
}
#help-2 {
background: image-url("images/help-arrow.svg") 0 0 no-repeat;
width: 60px;
height: 45px;
position: absolute;
top: -10px;
right: -10px;
}
.numbered-list {
counter-reset: numbered-list;
}
.numbered-list-item {
position: relative;
counter-increment: numbered-list;
padding-left: 3em;
padding-right: 1.25em;
margin-bottom: 2.5em;
list-style-type: none;
&:before {
content: counter(numbered-list);
display: block;
position: absolute;
top: .125em;
left: 0;
width: 2.125em;
height: 1.8125em;
border: .125em solid $brand-color;
border-radius: 50%;
text-align: center;
padding-top: .3125em; // 24px == Line height of text.
}
}
.feature {
margin-bottom: 1.5em;
}
.feature-heading {
color: $gray-darker;
font-size: 1em;
font-weight: 400;
margin-bottom: .555em;
}
.feature-icon {
font-size: .875em;
margin-right: .3em;
}
.help-icon {
@include help-icon;
}
.bookmarklet {
white-space: nowrap;
color: $gray-darker;
padding: 2px 4px;
border: 1px solid;
border-radius: 2px;
font-size: 13px;
cursor: move;
@include icons {
font-size: 12px;
}
}
/*
Mobile layout
*/
@media screen and (max-width: 30em) {
.help-page-sidebar {
display: none;
}
}
@at-root {
.home__content {
line-height: $line-height-tall;
color: $gray-darker;
margin-top: 95px;
}
.home__section {
max-width: 590px + $layout-h-margin * 2;
margin-left: auto;
margin-right: auto;
padding-left: $layout-h-margin;
padding-right: $layout-h-margin;
}
.home__heading {
text-align: center;
font-size: $font-size-heading1;
line-height: $line-height-tall;
font-weight: bold;
}
// tagline explaining what H is
.home__tagline {
font-size: $font-size-heading1;
font-weight: $font-weight-light;
line-height: $line-height-tall;
text-align: center;
}
$computer-width: 800px;
$computer-height: 424px;
$computer-screen-width: 620px;
$computer-screen-height: 365px;
$computer-screen-left-offset: 90px;
$computer-screen-top-offset: 29px;
.computer {
position: relative;
width: $computer-width;
height: $computer-height;
margin-left: auto;
margin-right: auto;
}
.computer__device-img {
width: 100%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -115px;
margin-bottom: 40px;
}
.computer__screen-img {
position: absolute;
border-radius: 2px;
// screenshot size and positioning chosen to
// fit in the screen area of the laptop image
max-width: $computer-screen-width;
height: $computer-screen-height;
top: $computer-screen-top-offset;
left: $computer-screen-left-offset;
}
.home__intro {
font-size: $font-size-heading2;
line-height: $line-height-tall;
margin-top: 14px;
margin-bottom: 14px;
}
.home__intro-text {
margin-top: 45px;
}
.installer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
height: 33px;
}
.install-btn__icon {
width: 20px;
height: 20px;
margin-right: 5px;
}
.install-btn {
background-color: $color-cardinal;
border-radius: 3px;
color: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-weight: bold;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
font-size: $font-size-body2;
}
.install-btn.is-hidden {
display: none;
}
.install-btn:hover, .install-btn:focus {
color: white;
}
.install-btn--dragme {
cursor: grabbing;
max-width: 200px;
min-height: 40px;
margin-left: auto;
margin-right: auto;
}
.installer__alt {
display: flex;
align-items: center;
text-align: center;
margin-left: 10px;
margin-right: 10px;
}
.installer__alt.is-hidden {
display: none;
}
$proxy-border: 1px solid $color-alto;
$proxy-border-radius: 4px;
.proxy-link-form {
display: flex;
font-size: $font-size-body2;
}
.proxy-link-form__field {
border-top-left-radius: $proxy-border-radius;
border-bottom-left-radius: $proxy-border-radius;
border-left: $proxy-border;
border-top: $proxy-border;
border-bottom: $proxy-border;
border-right: none;
padding-left: 10px;
min-width: 200px;
}
.proxy-link-form__submit-btn {
font-weight: bold;
background-color: $color-gallery;
border: $proxy-border;
border-top-right-radius: $proxy-border-radius;
border-bottom-right-radius: $proxy-border-radius;
}
.installer__embed-script {
width: 100%;
background-color: $color-gallery;
border: 1px solid $color-alto;
padding: 10px;
}
.home__intro-container {
width: 100%;
background-color: $color-gallery;
border-top: 1px solid $color-alto;
border-bottom: 1px solid $color-alto;
padding-bottom: 65px;
margin-top: 260px;
}
.home__section--news {
margin-top: 70px;
margin-bottom: 130px;
}
.home__heading--news {
margin-bottom: 70px;
}
.news-headline {
}
.news-item {
margin-bottom: 50px;
}
.news-item__date {
color: $color-gray;
font-size: $font-size-body1;
margin-bottom: 5px;
}
.news-item__title {
display: block;
font-size: $font-size-heading2;
font-weight: bold;
margin-bottom: 15px;
}
.news-item__title:not(:hover) {
color: inherit;
}
.news-item__snippet {
font-size: $font-size-heading2;
line-height: $line-height-tall;
}
.news-more-link {
font-size: $font-size-heading2;
font-weight: bold;
}
.news-more-link:not(:hover) {
color: inherit;
}
@media only screen and (max-width: $break-tablet) {
.home__content {
margin-top: 40px;
}
.home__intro-container {
margin-top: 180px;
}
.computer {
width: $computer-width / 3;
height: $computer-height / 3;
}
.computer__screen-img {
width: $computer-screen-width / 3;
height: $computer-screen-height / 3;
left: $computer-screen-left-offset / 3;
top: $computer-screen-top-offset / 3;
}
}
}
@at-root {
.modal {
font-family: $font-family-site-sans;
}
.modal-title {
font-size: $font-size-heading1;
}
.modal-body {
font-size: $font-size-heading2;
}
.modal-body p {
margin-top: 15px;
margin-bottom: 15px;
}
}
@at-root {
.press-release-banner {
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 4px;
}
.press-release-banner > p {
font-size: 21px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
/* FIXME: Remove the '!important' hack below and move
This to the correct stylesheet in the new homepage.
*/
.social-media-link {
font-size: 16px !important;
text-decoration: none !important;
}
}
// minimal bootstrap CSS
@import './vendor/bootstrap/bootstrap';
// shared styling used by both the app and the website
@import './base';
@import './reset';
@import './elements';
@import './mixins/responsive';
// shared components
@import './primary-action-btn';
@import './share-link';
// website-specific components
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700);
@import './group-form';
@import './header';
@import './flashbar';
@import './footer';
@import './modal';
// pages
@import './home';
// body with grey background and Lato font used
// in the sidebar and groups pages
.body--default {
@include grey-background;
font-family: $sans-font-family;
}
// body with white background and Source Sans Pro
// font used in the new homepage design
.body--white {
background-color: white;
font-family: $font-family-site-sans;
}
.content {
margin-left: auto;
margin-right: auto;
}
.content--narrow {
width: 450px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment