diff --git a/static/LICENSE.md b/static/LICENSE.md new file mode 100755 index 0000000..66a9342 --- /dev/null +++ b/static/LICENSE.md @@ -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. diff --git a/static/README.md b/static/README.md new file mode 100755 index 0000000..5ab9518 --- /dev/null +++ b/static/README.md @@ -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 diff --git a/static/css/layouts/email-old-ie.css b/static/css/layouts/email-old-ie.css new file mode 100755 index 0000000..916fa6f --- /dev/null +++ b/static/css/layouts/email-old-ie.css @@ -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; +} \ No newline at end of file diff --git a/static/css/layouts/email.css b/static/css/layouts/email.css new file mode 100755 index 0000000..9881693 --- /dev/null +++ b/static/css/layouts/email.css @@ -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; + } +} + diff --git a/static/img/common/128x128.png b/static/img/common/128x128.png new file mode 100644 index 0000000..cc2a33a Binary files /dev/null and b/static/img/common/128x128.png differ diff --git a/static/img/common/andrew-avatar.png b/static/img/common/andrew-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/andrew-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/ericf-avatar.png b/static/img/common/ericf-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/ericf-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/reid-avatar.png b/static/img/common/reid-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/reid-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/tilo-avatar.png b/static/img/common/tilo-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/tilo-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/yfinance-avatar.png b/static/img/common/yfinance-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/yfinance-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/ynews-avatar.png b/static/img/common/ynews-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/ynews-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/img/common/yui-avatar.png b/static/img/common/yui-avatar.png new file mode 120000 index 0000000..c89ffd1 --- /dev/null +++ b/static/img/common/yui-avatar.png @@ -0,0 +1 @@ +128x128.png \ No newline at end of file diff --git a/static/index.html b/static/index.html new file mode 100755 index 0000000..8ec04af --- /dev/null +++ b/static/index.html @@ -0,0 +1,241 @@ + + + + + + + + Email – Layout Examples – Pure + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ +
+ +
+
+ + + + + + + + + + + +