Permalink
Browse files

New homepage structure, chrome extenssion

  • Loading branch information...
1 parent 5d922be commit 405f95bf16c2be4b9d9f6e209d49f873823ea5ca @idan committed Oct 23, 2013
View
@@ -411,9 +411,11 @@ article .highlight {
/* Literal.Number.Integer.Long */
.homepage {
padding: 0;
- margin: 0; }
+ margin: 0;
+ width: 100%; }
.jumbo {
+ display: none;
position: fixed;
width: 50%;
top: 0;
@@ -425,38 +427,73 @@ article .highlight {
background-repeat: no-repeat;
background-size: 90%;
background-position: center center; }
- @media screen and (max-width: 63.236em) {
+ @media screen and (min-width: 63.236em) {
.jumbo {
- display: none; } }
+ display: block; } }
.homecontent {
background: white;
margin: 0;
- padding: 4em 2em 2em 2em; }
+ padding: 4em 2em 2em 2em;
+ border-left: 2em solid #F6F3E8; }
@media screen and (min-width: 63.236em) {
.homecontent {
width: 50%;
padding-top: 10vw;
- margin-left: 50%; } }
+ margin-left: 50%;
+ border-left: none; } }
+ @media screen and (max-width: 33.236em) {
+ .homecontent {
+ border-left-width: 1em;
+ padding-top: 3em; } }
.homecontent h1 {
font-family: 'Sentinel SSm A', 'Sentinel SSm B', Georgia, serif;
font-weight: 300;
font-size: 6em;
margin: 0; }
.homecontent h1 .light {
color: #bbb; }
- @media screen and (max-width: 63.236em) {
+ @media screen and (max-width: 63.235em) {
.homecontent h1 {
background-image: url("../img/logo.png");
background-image: none, url("../img/logo.svg");
background-repeat: no-repeat;
background-size: 1em;
background-position: left center;
padding-left: 0.9em; } }
+ @media screen and (max-width: 33.236em) {
+ .homecontent h1 {
+ font-size: 4em;
+ background-size: 0.8em;
+ padding-left: 0.8em;
+ background-position: left 80%; } }
.homecontent p {
font-family: 'Sentinel SSm A', 'Sentinel SSm B', Georgia, serif;
font-weight: 300;
- font-size: 1.25em; }
+ font-size: 1.25em;
+ line-height: 1.4em;
+ max-width: 33em; }
.homecontent p.lede {
font-size: 1.5em;
font-style: italic; }
+ @media screen and (max-width: 33.236em) {
+ .homecontent p {
+ font-size: 1em; }
+ .homecontent p.lede {
+ font-size: 1.25em; } }
+ .homecontent .chrome_screenshot {
+ position: relative;
+ max-width: 407px; }
+ .homecontent .chrome_screenshot img {
+ display: block;
+ max-width: 100%; }
+ .homecontent .chrome_screenshot .screenshot_mask {
+ position: absolute;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ -webkit-transition: opacity 0.2s ease;
+ -moz-transition: opacity 0.2s ease;
+ transition: opacity 0.2s ease; }
+ .homecontent .chrome_screenshot:hover .screenshot_mask {
+ opacity: 1; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -198,9 +198,11 @@ article {
.homepage {
padding: 0;
margin: 0;
+ width: 100%;
}
.jumbo {
+ display: none;
position: fixed;
width: 50%;
top: 0;
@@ -212,22 +214,31 @@ article {
background-size: 90%;
background-position: center center;
- @media screen and (max-width: 63.236em) {
- display: none;
+ @media screen and (min-width: 63.236em) {
+ display: block;
}
}
.homecontent {
background: white;
margin: 0;
padding: 4em 2em 2em 2em;
+ border-left: 2em solid #F6F3E8;
@media screen and (min-width: 63.236em) {
width: 50%;
padding-top: 10vw;
margin-left: 50%;
+ border-left: none;
+ }
+
+ @media screen and (max-width: 33.236em) {
+ border-left-width: 1em;
+ padding-top: 3em;
}
+
+
h1 {
@include copy;
font-weight: 300;
@@ -236,22 +247,58 @@ article {
color: #bbb;
}
margin: 0;
- @media screen and (max-width: 63.236em) {
+ @media screen and (max-width: 63.235em) {
@include vector-bg-with-fallback("logo");
background-repeat: no-repeat;
background-size: 1em;
background-position: left center;
padding-left: 0.9em;
}
+ @media screen and (max-width: 33.236em) {
+ font-size: 4em;
+ background-size: 0.8em;
+ padding-left: 0.8em;
+ background-position: left 80%;
+ }
}
p {
@include copy;
font-weight: 300;
font-size: 1.25em;
+ line-height: 1.4em;
&.lede {
font-size: 1.5em;
font-style: italic;
}
+ max-width: 33em;
+
+ @media screen and (max-width: 33.236em) {
+ font-size: 1em;
+ &.lede {
+ font-size: 1.25em;
+ }
+ }
+ }
+
+ .chrome_screenshot {
+ position: relative;
+ max-width: 407px;
+ img {
+ display: block;
+ max-width: 100%;
+ }
+ .screenshot_mask {
+ position: absolute;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ @include transition(opacity 0.2s ease);
+ }
+ &:hover {
+ .screenshot_mask {
+ opacity: 1;
+ }
+ }
}
}
View
@@ -13,6 +13,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="//polyfill.io"></script>
<link href="//polyfill.io/normalize.css" rel="stylesheet">
+ <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/dbhgbgenagpfgjjhjenodmgadclfpcae">
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/678416/735422/css/fonts.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ STATIC_URL }}css/screen.css">
View
@@ -6,6 +6,7 @@
<section class="content">
<header>
<h1 id="gistid"><a href="{{ gist.html_url }}">gist #{{ gist.id }}</a> by <a href="{{ user.html_url }}">{{ user.login }}</a></h1>
+ <p><a href="{{ user.html_url }}"><img src="{{ user.avatar_url }}" alt="{{ user.login }}’s avatar"></a></p>
<h2 id="description" class="instapaper_title entry-title">{{ gist.description }}</h2>
</header>
<div id="gistbody" class="instapaper_body entry-content">
View
@@ -1,13 +1,31 @@
{% extends "base.html" %}
+{% load staticfiles %}
+
+
+{% block extra_head %}
+ <meta name="format-detection" content="telephone=no">
+{% endblock extra_head %}
{% block bodyclass %}homepage{% endblock bodyclass %}
{% block content %}
<div class="jumbo"></div>
<div class="homecontent">
<h1>gist<span class="light">.io</span></h1>
- <p class="lede">Write a GitHub gist, publish it beautifully.</p>
- <p>Gist.io takes any gist and makes it presentable. Publish a quick, anonymous note or a long essay—your content stays on GitHub, and gist.io makes it a pleasure to read.</p>
+ <p class="lede">Write a GitHub gist, present it with style.</p>
+ <p>Publish a quick, anonymous note or a long essay—your content stays on GitHub, and gist.io makes it a pleasure to read.</p>
+
+ <p>Here, check out an <a href="/3135754">example post.</a></p>
+
+ <p>To make life easier, <a class="extension_trigger" href="" onclick="chrome.webstore.install()">install the Chrome extension</a>. It lets you toggle quickly between GitHub and gist.io for viewing gists:</p>
+ <p class="chrome_screenshot">
+ <a class="extension_trigger" href="" onclick="chrome.webstore.install()">
+ <img src="{% static 'img/chrome_extension_screenshot.png' %}" alt="Tightly-cropped screenshot of the gist.io chrome extension in chrome.">
+ <img class="screenshot_mask" src="{% static 'img/chrome_extension_screenshot_mask.png' %}">
+ </a>
+ </p>
+ <p><button onclick="chrome.webstore.install()" id="install-button">Add to Chrome</button></p>
+
</div>
@@ -52,6 +70,9 @@ <h3>Content</h3>
{% endblock %}
-{% block extra_head %}
- <meta name="format-detection" content="telephone=no">
-{% endblock extra_head %}
+
+{% block js %}
+<script>
+
+</script>
+{% endblock js %}

0 comments on commit 405f95b

Please sign in to comment.