Unverified Commit 30878dd5 authored by Aral Balkan's avatar Aral Balkan
Browse files

Update styles on mastodon demos and main page

parent 48c1279e
......@@ -14,7 +14,7 @@ superagent = require 'superagent'
exports.route = (request, response) ->
superagent.get('https://mastodon.social/api/v1/timelines/public')
superagent.get('https://mastodon.ar.al/api/v1/timelines/public')
.end (error, globalTimelineResponse) ->
......
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<title>Set client‐side tests</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel='stylesheet' href='https://ind.ie/assets/css/set-styles.css'/>
<link rel="stylesheet" type="text/css" href="css/client-side-tests.css">
<link rel="stylesheet" type="text/css" href="css/set-highlights.css">
<link rel='stylesheet' type='text/css' href='css/indie.css'>
<!-- ***** -->
<!-- Labs common -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ind.ie Labs: Set: Simple Set demo</title>
<link rel="alternate" type="application/rss+xml" title="Ind.ie Labs Blog" href="https://ind.ie/labs/blog/rss/index.xml">
<!--[if lte IE 8]>
<script src='https://ind.ie/assets/js/html5shiv.js'></script>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="https://ind.ie/assets/images/ios-180.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://ind.ie/assets/images/ios-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://ind.ie/assets/images/ios-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-152.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-180.png">
<link rel="stylesheet" href="https://ind.ie/assets/css/lab-styles.css">
<!-- Set -->
<link rel='stylesheet' type='text/css' href='css/base.css'>
<link data-set-dummy rel='stylesheet' type='text/css' href='css/set-highlights.css'>
<link rel='stylesheet' href='https://ind.ie/assets/css/set-styles.css'/>
<link rel='stylesheet' type='text/css' href='css/indie.css'>
<!-- Syntax highlighting for the code -->
<link rel='stylesheet' type='text/css' href='css/prism.css'>
<link rel="stylesheet" type="text/css" href="css/client-side-tests.css">
<!-- Labs common, inline styles -->
<style>
.main {
padding: 14px;
padding-top: 0;
}
@media only screen and (min-width: 600px) {
.main {
margin: 0 auto;
max-width: 700px;
padding: 21px;
padding-top: 0;
}
}
h1 {
margin-bottom: 14px;
}
h2 {
margin-top: 14px;
}
.projects {
border-bottom: 1px solid #d8d8d8;
margin: 0;
}
.projects li {
border-top: 1px solid #d8d8d8;
clear: both;
list-style-type: none;
overflow: hidden;
margin-bottom: 24px;
text-align: center;
}
@media only screen and (min-width: 745px) {
.projects li {
text-align: left;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.projects li p {
-webkit-flex: 1 auto;
flex: 1 auto;
float: left;
margin-bottom: 0;
margin-left: 28px;
max-width: 337px;
}
}
.archived .old, .archived img, .archived h3 {
opacity: .6;
}
.archived .update {
opacity: 1;
}
.projects li h3 a {
display: block;
margin: 0 auto;
max-width: 335px;
}
@media only screen and (min-width: 745px) {
.projects li h3 a {
-webkit-flex: 1 auto;
flex: 1 auto;
margin: 0;
}
}
.projects .hero-image {
margin-top: 0;
}
@media only screen and (min-width: 745px) {
.projects .hero-image {
float: left;
}
}
@media only screen and (min-width: 745px) {
.oskar-the-scientist {
margin: 20px auto 0 auto;
max-width: 450px;
}
}
.sub-navigation--list {
margin: 0;
margin-top: 11px;
overflow: hidden;
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list {
margin: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0;
margin-top: 11px;
margin-top: 0.6875rem;
overflow: hidden;
padding: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list li {
float: left;
list-style-type: none;
margin-bottom: 0;
padding: 0 13px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0 0.8125rem 0.4375rem 0.8125rem;
}
.sub-navigation--list li a {
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
color: #191919;
display: block;
float: left;
font-size: 16px;
font-size: 1rem;
line-height: 21px;
line-height: 1.3125rem;
padding: 18px 1px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sub-navigation--list li a:hover,
.sub-navigation--list li a:active,
.sub-navigation--list li a:focus {
border-color: #000;
color: #000;
}
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: #ccc;
border-bottom: none;
-webkit-border-radius: 7px;
border-radius: 7px;
display: inline-block;
margin-top: 11px;
margin-top: 0.6875rem;
padding: 7px 14px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.4375rem 0.875rem;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
-webkit-transition: all none ease;
-moz-transition: all none ease;
-ms-transition: all none ease;
-o-transition: all none ease;
transition: all none ease;
}
@media only screen and (min-width: 770px) {
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: url("https://ind.ie/assets/images/sprite.svg") no-repeat top center;
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
-webkit-border-radius: 0;
border-radius: 0;
display: block;
margin-top: 0;
padding: 18px 1px 1px 1px;
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
}
.no-svg .labs-projects .sub-navigation .projects-link a,
.no-svg .labs-blog .sub-navigation .blog-link a {
background-image: url("https://ind.ie/assets/images/sprite.png");
}
}
/* Funding footer */
.fund-us {
border-top: 1px solid #ccc;
border-top: 0.0625rem solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom: 0.0625rem solid #ccc;
margin-top: 56px;
margin-top: 3.5rem;
overflow: hidden;
}
@media only screen and (min-width: 580px) {
.fund-us {
margin-top: 140px;
margin-top: 8.75rem;
}
}
.flexbox .fund-us {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.fund-us h2 {
font-size: 26px;
font-size: 1.625rem;
line-height: 35px;
line-height: 2.1875rem;
margin-top: 28px;
margin-top: 1.75rem;
margin-bottom: 14px;
margin-bottom: 0.875rem;
}
@media only screen and (min-width: 620px) {
.fund-us p {
float: left;
margin-bottom: 28px;
margin-bottom: 1.75rem;
max-width: 70%;
}
}
.fund-us .button {
background: #4d4d4d;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 18px;
font-size: 1.125rem;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
height: 35px;
height: 2.1875rem;
line-height: 24px;
margin-top: 14px;
margin-top: 0.875rem;
margin-left: auto;
margin-bottom: 28px;
margin-bottom: 1.75rem;
margin-right: auto;
padding-right: 28px;
padding-right: 1.75rem;
padding-left: 28px;
padding-left: 1.75rem;
max-width: 130px;
max-width: 8.125rem;
text-decoration: none;
}
@media only screen and (min-width: 620px) {
.fund-us .button {
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 28px;
margin-bottom: 1.75rem;
}
}
</style>
<!-- Set engine -->
<script src="set.js"></script>
......@@ -47,44 +393,48 @@
<script type="text/javascript" src="js/set-highlights.js"></script>
<head>
<body class='labs labs-projects'>
<nav class='site-navigation'>
<ul class='site-navigation--list'>
<li class='home-link'>
<a href='https://ind.ie/'>Home</a>
<!-- Labs common -->
<body class="labs labs-projects">
<nav class="site-navigation">
<ul class="site-navigation--list">
<li class="home-link">
<a href="https://ind.ie/">Home</a>
</li>
<li class="about-link">
<a href="https://ind.ie/about">About</a>
</li>
<li class='about-link'>
<a href='https://ind.ie/about'>About</a>
<li class="labs-link">
<a href="https://ind.ie/labs">Labs</a>
</li>
<li class='blog-link'>
<a href='https://ind.ie/blog'>Blog</a>
<li class="forum-link">
<a href="https://forum.ind.ie">Forum</a>
</li>
<li class='summit-link'>
<a href='https://ind.ie/summit'>Summit</a>
<li class="videos-link">
<a href="https://ind.ie/videos">Videos</a>
</li>
<li class='labs-link'>
<a href='https://ind.ie/labs'>Labs</a>
<li class="news-link">
<a href="https://ind.ie/blog">News</a>
</li>
<li class='fund-link'>
<a href='https://ind.ie/fund'>Fund</a>
<li class="fund-link">
<a href="https://ind.ie/fund">Fund</a>
</li>
</ul>
</nav>
<nav class='sub-navigation labs-navigation'>
<ul class='sub-navigation--list'>
<li class='projects-link'><a href='../'>Projects</a></li>
<li class='blog-link'><a href='../blog/'>Blog</a></li>
<nav class="sub-navigation labs-navigation">
<ul class="sub-navigation--list">
<li class="projects-link"><a href="">Projects</a></li>
<li class="blog-link"><a href="blog/">Blog</a></li>
</ul>
</nav>
<!-- Page specific -->
<div class='main' role='main'>
<header class='set-header'>
<h1><a href='./'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h2>Set clientside tests</h2>
<h2>Set client-side tests</h2>
<p>Adapted from the <a href='http://distal.googlecode.com/svn/trunk/testcase.htm'>Distal test cases</a>.</p>
</header>
......@@ -181,7 +531,7 @@
<textarea rows=2 cols=15 data-set-attribute="value text" title="ok"></textarea><br>
<u><label for="tt" data-set-text="text">Label</label>:</u> <input id="tt" type="checkbox" data-set-attribute="checked truthy" title="ok"><br>
<input type="button" value="disable me" data-set-attribute="disabled truthy; title text">
<button type="reset" data-set-attribute="value text" data-set-text="text">b<b>utto</b>n</button><br>
<button type="reset" data-set-attribute="value text" data-set-text="text">button</button><br>
<a href="javascript:void(0);" data-set-attribute="href homepage; title text" title="see tooltip" data-set-text="text">see tooltip</a>
</section>
</div>
......
......@@ -15,6 +15,11 @@ body
column-count: 3;
}
button
{
font-size: 14px;
}
section
{
margin: 48px 0;
......
html
{
padding: 0 48px;
}
body
{
line-height: 2; /* 24px/16px */
font-family: 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
}
#set-logo
{
width:100%;
max-width: 320px;
/*position: fixed;*/
margin: 0 auto;
margin-bottom: 48px;
display:block;
}
h1
{
font-size: 3.75em; /* 60px/16px */
font-weight: 500;
line-height: 1.2em; /* 48px/48px */
margin: .4em 0; /* 24px/60px */
}
.main a
{
......
......@@ -28,10 +28,7 @@ html
#template
{
float:left;
border: 1px dotted #E0D7D1;
width:32%;
margin-right: 12px;
}
#template > div
......@@ -46,20 +43,11 @@ html
text-align: left;
}
#source
{
min-width:300px;
float: left;
width: 32%;
margin: 0;
margin-left:0;
margin-right: 12px;
}
#source h2, #server h2
{
display:block;
margin-top: 0;
margin-top: 24px;
margin-bottom: -6px;
padding-left: 24px;
color: #4C3D33;
......@@ -69,18 +57,32 @@ html
font-weight: 500;
}
#server
#template, #source, #server
{
min-width:300px;
float: left;
width: 32%;
float: none;
width: inherit;
margin-bottom: 24px;
margin-top: 24px;
}
#data
section#server
{
margin-bottom: 24px;
margin-bottom: 4em;
}
#template { margin-bottom: 0; margin-top: 0;}
#source, #server
{
border: none;
}
#source h2, #server h2
{
display:block;
}
img
{
width: 300px;
......@@ -109,29 +111,6 @@ code[class*='coffeescript'] span[class~='token'][class~='string']
color: #07a;
}
@media all and (max-width:1200px)
{
#template, #source, #server
{
float: none;
width: inherit;
margin: inherit;
margin-bottom: 24px;
margin-top: 24px;
}
#template { margin-bottom: 0; margin-top: 0;}
#source, #server
{
border: none;
}
#source h2, #server h2
{
display:block;
}
}
@media all and (max-width: 400px)
{
......@@ -148,8 +127,6 @@ code[class*='coffeescript'] span[class~='token'][class~='string']
}
#data { margin-bottom: 12px;}
html {padding: 12px;}
body { margin: 0; padding: 0; margin-bottom: 48px;}
#source h2, #server h2 { padding-left: 12px;}
......
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<title data-set-text='title'></title>
<!-- Labs common -->