Skip to content

GitLab

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

Update styles on mastodon demos and main page

parent 48c1279e
Hide whitespace changes
Inline Side-by-side
routes/posts.coffee
View file @ 30878dd5
......@@ -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) ->
......
views/client-side-tests.html
View file @ 30878dd5
<!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 client‐side 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>
......
views/css/client-side-tests.css
View file @ 30878dd5
......@@ -15,6 +15,11 @@ body
column-count: 3;
}
button
{
font-size: 14px;
}
section
{
margin: 48px 0;
......
views/css/posts.css
View file @ 30878dd5
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
{
......
views/css/simple.css
View file @ 30878dd5
......@@ -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;}
......
views/handlebars.html
View file @ 30878dd5
<!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 -->