This commit is contained in:
parent
2ba451df36
commit
a3d93e4a1b
29
static/LICENSE.md
Executable file
29
static/LICENSE.md
Executable file
@ -0,0 +1,29 @@
|
|||||||
|
Software License Agreement (BSD License)
|
||||||
|
========================================
|
||||||
|
|
||||||
|
Copyright 2013 Yahoo! Inc. All rights reserved.
|
||||||
|
|
||||||
|
Redistribution and use in source and binary forms, with or without
|
||||||
|
modification, are permitted provided that the following conditions are met:
|
||||||
|
|
||||||
|
* Redistributions of source code must retain the above copyright
|
||||||
|
notice, this list of conditions and the following disclaimer.
|
||||||
|
|
||||||
|
* Redistributions in binary form must reproduce the above copyright
|
||||||
|
notice, this list of conditions and the following disclaimer in the
|
||||||
|
documentation and/or other materials provided with the distribution.
|
||||||
|
|
||||||
|
* Neither the name of the Yahoo! Inc. nor the
|
||||||
|
names of its contributors may be used to endorse or promote products
|
||||||
|
derived from this software without specific prior written permission.
|
||||||
|
|
||||||
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||||
|
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||||
|
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||||
|
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
|
||||||
|
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||||
|
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||||
|
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||||
|
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||||
|
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
16
static/README.md
Executable file
16
static/README.md
Executable file
@ -0,0 +1,16 @@
|
|||||||
|
Pure CSS Layout Examples
|
||||||
|
========================
|
||||||
|
|
||||||
|
Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project.
|
||||||
|
|
||||||
|
[pure]: http://purecss.io/
|
||||||
|
[pure-site]: https://github.com/yui/pure-site
|
||||||
|
|
||||||
|
|
||||||
|
License
|
||||||
|
-------
|
||||||
|
|
||||||
|
This software is free to use under the Yahoo! Inc. BSD license.
|
||||||
|
See the [LICENSE file][] for license text and copyright information.
|
||||||
|
|
||||||
|
[LICENSE file]: https://github.com/yui/pure-site/blob/master/LICENSE.md
|
||||||
310
static/css/layouts/email-old-ie.css
Executable file
310
static/css/layouts/email-old-ie.css
Executable file
@ -0,0 +1,310 @@
|
|||||||
|
/*
|
||||||
|
* -- BASE STYLES --
|
||||||
|
* Most of these are inherited from Base, but I want to change a few.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1b98f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- HELPER STYLES --
|
||||||
|
* Over-riding some of the .pure-button styles to make my buttons look unique
|
||||||
|
*/
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button {
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
color: #fff;
|
||||||
|
background: #1b98f8;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
color: #666;
|
||||||
|
padding: 0.5em 2em;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- LAYOUT STYLES --
|
||||||
|
* This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`
|
||||||
|
*/
|
||||||
|
|
||||||
|
#layout,
|
||||||
|
#nav,
|
||||||
|
#list,
|
||||||
|
#main {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make the navigation 100% width on phones */
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
background: rgb(37, 42, 58);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the "Menu" button on phones */
|
||||||
|
|
||||||
|
#nav .nav-menu-button {
|
||||||
|
display: block;
|
||||||
|
top: 0.5em;
|
||||||
|
right: 0.5em;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When "Menu" is clicked, the navbar should be 80% height */
|
||||||
|
|
||||||
|
#nav.active {
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Don't show the navigation items... */
|
||||||
|
|
||||||
|
.nav-inner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ...until the "Menu" button is clicked */
|
||||||
|
|
||||||
|
#nav.active .nav-inner {
|
||||||
|
display: block;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- NAV BAR STYLES --
|
||||||
|
* Styling the default .pure-menu to look a little more unique.
|
||||||
|
*/
|
||||||
|
|
||||||
|
#nav .pure-menu.pure-menu-open {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav .pure-menu a:hover,
|
||||||
|
#nav .pure-menu a:focus {
|
||||||
|
background: rgb(55, 60, 90);
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav .pure-menu a {
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav .pure-menu-heading {
|
||||||
|
border-bottom: none;
|
||||||
|
font-size: 110%;
|
||||||
|
color: rgb(75, 113, 151);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- EMAIL STYLES --
|
||||||
|
* Styles relevant to the email messages, labels, counts, and more.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.email-count {
|
||||||
|
color: rgb(75, 113, 151);
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-label-personal,
|
||||||
|
.email-label-work,
|
||||||
|
.email-label-travel {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-label-personal {
|
||||||
|
background: #ffc94c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-label-work {
|
||||||
|
background: #41ccb4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-label-travel {
|
||||||
|
background: #40c365;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Email Item Styles */
|
||||||
|
|
||||||
|
.email-item {
|
||||||
|
padding: 0.9em 1em;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-avatar {
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-name,
|
||||||
|
.email-subject {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-name {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-desc {
|
||||||
|
font-size: 80%;
|
||||||
|
margin: 0.4em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-item-selected {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-item-unread {
|
||||||
|
border-left: 6px solid #1b98f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Email Content Styles */
|
||||||
|
|
||||||
|
.email-content-header,
|
||||||
|
.email-content-body,
|
||||||
|
.email-content-footer {
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-header {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-title {
|
||||||
|
margin: 0.5em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-subtitle {
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-subtitle span {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-controls {
|
||||||
|
margin-top: 2em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-controls .secondary-button {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||||
|
* On tablets and other medium-sized devices, we want to customize some
|
||||||
|
* of the mobile styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Move the layout over so we can fit the nav + list in on the left */
|
||||||
|
|
||||||
|
#layout {
|
||||||
|
padding-left: 500px;
|
||||||
|
/* "left col (nav + list)" width */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* These are position:fixed; elements that will be in the left 500px of the screen */
|
||||||
|
|
||||||
|
#nav,
|
||||||
|
#list {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
margin-left: -500px;
|
||||||
|
/* "left col (nav + list)" width */
|
||||||
|
width: 150px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the menu items on the larger screen */
|
||||||
|
|
||||||
|
.nav-inner {
|
||||||
|
display: block;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the "Menu" button on larger screens */
|
||||||
|
|
||||||
|
#nav .nav-menu-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list {
|
||||||
|
margin-left: -350px;
|
||||||
|
width: 100%;
|
||||||
|
height: 33%;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: fixed;
|
||||||
|
top: 33%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
width: auto;
|
||||||
|
/* so that it's not 100% */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||||
|
* On desktops and other large-sized devices, we want to customize some
|
||||||
|
* of the mobile styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* This will take up the entire height, and be a little thinner */
|
||||||
|
|
||||||
|
#list {
|
||||||
|
margin-left: -350px;
|
||||||
|
width: 350px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This will now take up it's own column, so don't need position: fixed; */
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: static;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
275
static/css/layouts/email.css
Executable file
275
static/css/layouts/email.css
Executable file
@ -0,0 +1,275 @@
|
|||||||
|
/*
|
||||||
|
* -- BASE STYLES --
|
||||||
|
* Most of these are inherited from Base, but I want to change a few.
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1b98f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- HELPER STYLES --
|
||||||
|
* Over-riding some of the .pure-button styles to make my buttons look unique
|
||||||
|
*/
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button {
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.primary-button {
|
||||||
|
color: #fff;
|
||||||
|
background: #1b98f8;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
.secondary-button {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
color: #666;
|
||||||
|
padding: 0.5em 2em;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- LAYOUT STYLES --
|
||||||
|
* This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`
|
||||||
|
*/
|
||||||
|
#layout, #nav, #list, #main {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make the navigation 100% width on phones */
|
||||||
|
#nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
background: rgb(37, 42, 58);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/* Show the "Menu" button on phones */
|
||||||
|
#nav .nav-menu-button {
|
||||||
|
display: block;
|
||||||
|
top: 0.5em;
|
||||||
|
right: 0.5em;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When "Menu" is clicked, the navbar should be 80% height */
|
||||||
|
#nav.active {
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
/* Don't show the navigation items... */
|
||||||
|
.nav-inner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ...until the "Menu" button is clicked */
|
||||||
|
#nav.active .nav-inner {
|
||||||
|
display: block;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- NAV BAR STYLES --
|
||||||
|
* Styling the default .pure-menu to look a little more unique.
|
||||||
|
*/
|
||||||
|
#nav .pure-menu.pure-menu-open {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#nav .pure-menu a:hover,
|
||||||
|
#nav .pure-menu a:focus {
|
||||||
|
background: rgb(55, 60, 90);
|
||||||
|
}
|
||||||
|
#nav .pure-menu a {
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
#nav .pure-menu-heading {
|
||||||
|
border-bottom: none;
|
||||||
|
font-size:110%;
|
||||||
|
color: rgb(75, 113, 151);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- EMAIL STYLES --
|
||||||
|
* Styles relevant to the email messages, labels, counts, and more.
|
||||||
|
*/
|
||||||
|
.email-count {
|
||||||
|
color: rgb(75, 113, 151);
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-label-personal,
|
||||||
|
.email-label-work,
|
||||||
|
.email-label-travel {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.email-label-personal {
|
||||||
|
background: #ffc94c;
|
||||||
|
}
|
||||||
|
.email-label-work {
|
||||||
|
background: #41ccb4;
|
||||||
|
}
|
||||||
|
.email-label-travel {
|
||||||
|
background: #40c365;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Email Item Styles */
|
||||||
|
.email-item {
|
||||||
|
padding: 0.9em 1em;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
}
|
||||||
|
.email-avatar {
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
.email-name,
|
||||||
|
.email-subject {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.email-name {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.email-desc {
|
||||||
|
font-size: 80%;
|
||||||
|
margin: 0.4em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-item-selected {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
.email-item-unread {
|
||||||
|
border-left: 6px solid #1b98f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Email Content Styles */
|
||||||
|
.email-content-header, .email-content-body, .email-content-footer {
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
.email-content-header {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-content-title {
|
||||||
|
margin: 0.5em 0 0;
|
||||||
|
}
|
||||||
|
.email-content-subtitle {
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.email-content-subtitle span {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.email-content-controls {
|
||||||
|
margin-top: 2em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.email-content-controls .secondary-button {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||||
|
* On tablets and other medium-sized devices, we want to customize some
|
||||||
|
* of the mobile styles.
|
||||||
|
*/
|
||||||
|
@media (min-width: 40em) {
|
||||||
|
|
||||||
|
/* Move the layout over so we can fit the nav + list in on the left */
|
||||||
|
#layout {
|
||||||
|
padding-left:500px; /* "left col (nav + list)" width */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* These are position:fixed; elements that will be in the left 500px of the screen */
|
||||||
|
#nav, #list {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
#nav {
|
||||||
|
margin-left:-500px; /* "left col (nav + list)" width */
|
||||||
|
width:150px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the menu items on the larger screen */
|
||||||
|
.nav-inner {
|
||||||
|
display: block;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the "Menu" button on larger screens */
|
||||||
|
#nav .nav-menu-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list {
|
||||||
|
margin-left: -350px;
|
||||||
|
width: 100%;
|
||||||
|
height: 33%;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: fixed;
|
||||||
|
top: 33%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
width: auto; /* so that it's not 100% */
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||||
|
* On desktops and other large-sized devices, we want to customize some
|
||||||
|
* of the mobile styles.
|
||||||
|
*/
|
||||||
|
@media (min-width: 60em) {
|
||||||
|
|
||||||
|
/* This will take up the entire height, and be a little thinner */
|
||||||
|
#list {
|
||||||
|
margin-left: -350px;
|
||||||
|
width:350px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This will now take up it's own column, so don't need position: fixed; */
|
||||||
|
#main {
|
||||||
|
position: static;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BIN
static/img/common/128x128.png
Normal file
BIN
static/img/common/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 B |
1
static/img/common/andrew-avatar.png
Symbolic link
1
static/img/common/andrew-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/ericf-avatar.png
Symbolic link
1
static/img/common/ericf-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/reid-avatar.png
Symbolic link
1
static/img/common/reid-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/tilo-avatar.png
Symbolic link
1
static/img/common/tilo-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/yfinance-avatar.png
Symbolic link
1
static/img/common/yfinance-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/ynews-avatar.png
Symbolic link
1
static/img/common/ynews-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
1
static/img/common/yui-avatar.png
Symbolic link
1
static/img/common/yui-avatar.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
128x128.png
|
||||||
241
static/index.html
Executable file
241
static/index.html
Executable file
@ -0,0 +1,241 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="A layout example that shows off a responsive email layout.">
|
||||||
|
|
||||||
|
<title>Email – Layout Examples – Pure</title>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure.css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--[if lte IE 8]>
|
||||||
|
<link rel="stylesheet" href="css/layouts/email-old-ie.css">
|
||||||
|
<![endif]-->
|
||||||
|
<!--[if gt IE 8]><!-->
|
||||||
|
<link rel="stylesheet" href="css/layouts/email.css">
|
||||||
|
<!--<![endif]-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="layout" class="content pure-g">
|
||||||
|
<div id="nav" class="pure-u">
|
||||||
|
<a href="#" class="nav-menu-button">Menu</a>
|
||||||
|
|
||||||
|
<div class="nav-inner">
|
||||||
|
<button class="primary-button pure-button">Compose</button>
|
||||||
|
|
||||||
|
<div class="pure-menu pure-menu-open">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Inbox <span class="email-count">(2)</span></a></li>
|
||||||
|
<li><a href="#">Important</a></li>
|
||||||
|
<li><a href="#">Sent</a></li>
|
||||||
|
<li><a href="#">Drafts</a></li>
|
||||||
|
<li><a href="#">Trash</a></li>
|
||||||
|
<li class="pure-menu-heading">Labels</li>
|
||||||
|
<li><a href="#"><span class="email-label-personal"></span>Personal</a></li>
|
||||||
|
<li><a href="#"><span class="email-label-work"></span>Work</a></li>
|
||||||
|
<li><a href="#"><span class="email-label-travel"></span>Travel</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="list" class="pure-u-1">
|
||||||
|
<div class="email-item email-item-selected pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Tilo Mitra's avatar" height="64" width="64" src="img/common/tilo-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Tilo Mitra</h5>
|
||||||
|
<h4 class="email-subject">Hello from Toronto</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Hey, I just wanted to check in with you from Toronto. I got here earlier today.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item email-item-unread pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Eric Ferraiuolo's avatar" height="64" width="64" src="img/common/ericf-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Eric Ferraiuolo</h5>
|
||||||
|
<h4 class="email-subject">Re: Pull Requests</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item email-item-unread pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="YUI's avatar" height="64" width="64" src="img/common/yui-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">YUI Library</h5>
|
||||||
|
<h4 class="email-subject">You have 5 bugs assigned to you</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Reid Burke's avatar" height="64" width="64" src="img/common/reid-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Reid Burke</h5>
|
||||||
|
<h4 class="email-subject">Re: Design Language</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Andrew Wooldridge's avatar" height="64" width="64" src="img/common/andrew-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Andrew Wooldridge</h5>
|
||||||
|
<h4 class="email-subject">YUI Blog Updates?</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Yahoo! Finance's Avatar" height="64" width="64" src="img/common/yfinance-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Yahoo! Finance</h5>
|
||||||
|
<h4 class="email-subject">How to protect your finances from winter storms</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-item pure-g">
|
||||||
|
<div class="pure-u">
|
||||||
|
<img class="email-avatar" alt="Yahoo! News' avatar" height="64" width="64" src="img/common/ynews-avatar.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pure-u-3-4">
|
||||||
|
<h5 class="email-name">Yahoo! News</h5>
|
||||||
|
<h4 class="email-subject">Summary for April 3rd, 2012</h4>
|
||||||
|
<p class="email-desc">
|
||||||
|
We found 10 news articles that you may like.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main" class="pure-u-1">
|
||||||
|
<div class="email-content">
|
||||||
|
<div class="email-content-header pure-g">
|
||||||
|
<div class="pure-u-1-2">
|
||||||
|
<h1 class="email-content-title">Hello from Toronto</h1>
|
||||||
|
<p class="email-content-subtitle">
|
||||||
|
From <a>Tilo Mitra</a> at <span>3:56pm, April 3, 2012</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-content-controls pure-u-1-2">
|
||||||
|
<button class="secondary-button pure-button">Reply</button>
|
||||||
|
<button class="secondary-button pure-button">Forward</button>
|
||||||
|
<button class="secondary-button pure-button">Move to</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="email-content-body">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris. Curabitur ornare arcu quis mi blandit laoreet. Vivamus imperdiet fermentum mauris, ac posuere urna tempor at. Duis pellentesque justo ac sapien aliquet egestas. Morbi enim mi, porta eget ullamcorper at, pharetra id lorem.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Donec sagittis dolor ut quam pharetra pretium varius in nibh. Suspendisse potenti. Donec imperdiet, velit vel adipiscing bibendum, leo eros tristique augue, eu rutrum lacus sapien vel quam. Nam orci arcu, luctus quis vestibulum ut, ullamcorper ut enim. Morbi semper erat quis orci aliquet condimentum. Nam interdum mauris sed massa dignissim rhoncus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Regards,<br>
|
||||||
|
Tilo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui.js"></script>
|
||||||
|
<script>
|
||||||
|
YUI().use('node-base', 'node-event-delegate', function (Y) {
|
||||||
|
|
||||||
|
var menuButton = Y.one('.nav-menu-button'),
|
||||||
|
nav = Y.one('#nav');
|
||||||
|
|
||||||
|
// Setting the active class name expands the menu vertically on small screens.
|
||||||
|
menuButton.on('click', function (e) {
|
||||||
|
nav.toggleClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Your application code goes here...
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
YUI().use('node-base', 'node-event-delegate', function (Y) {
|
||||||
|
// This just makes sure that the href="#" attached to the <a> elements
|
||||||
|
// don't scroll you back up the page.
|
||||||
|
Y.one('body').delegate('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}, 'a[href="#"]');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user