Skip to content

Commit

Permalink
Merge pull request #16 from isaacsc/new_design
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgecasar
jorgecasar authored Sep 13, 2016
2 parents b3e951a + 96288b5 commit aa72388
Show file tree
Hide file tree
Showing 10 changed files with 282 additions and 211 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"platinum-sw": "polymerelements/platinum-sw#^1.3.0",
"neon-animation": "PolymerElements/neon-animation#^1.2.4",
"google-map": "GoogleWebComponents/google-map#^1.1.11",
"timer-days": "^1.0.4"
"timer-days": "^1.0.4",
"paper-fab": "PolymerElements/paper-fab#^1.2.0"
},
"devDependencies": {
"web-component-tester": "^4.0.0"
Expand Down
17 changes: 9 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,7 @@
<meta name="msapplication-TileColor" content="#2c5ea5">
<meta name="msapplication-tap-highlight" content="no">


<link href="https://fonts.googleapis.com/css?family=Lato:400,100" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet" type="text/css">
<script>

// setup Polymer options
Expand Down Expand Up @@ -86,14 +83,18 @@
<link rel="import" href="/src/polymerday-app.html">

<style>

html {
font-size: 16px;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}

body {
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;
margin: 0;
font-family: 'Lato', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #fff;
color: #2c5ea5;
}

</style>
Expand Down
Binary file added src/images/bg-footer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/bg-time-days.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/images/icon-tickets.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/logo-eventbrite.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions src/images/logo-eventbrite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 70 additions & 56 deletions src/polymerday-app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="polymerday-theme.html">
<link rel="import" href="polymerday-icons.html">
<link rel="import" href="polymerday-signin.html">

Expand All @@ -31,27 +32,13 @@
:host {
position: relative;
display: block;
height: 100%;
--app-primary-color: #2c5ea5;
--app-secondary-color: #e04b63;
--app-background-color: #FFF;
--paper-tab-ink: #fff;
--paper-tab-content: {
color: #fff;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-weight: 400;
}
@apply(--text-normal);
}

app-header {
color: var(--app-background-color);
color: var(--color-white-primary);
height: 150px;
background-color: var(--app-primary-color);
--app-header-background-front-layer: {
background-image: url(images/bg-header.svg);
background-position: left center;
};
background-color: var(--color-blue-primary);
}

.logo {
Expand Down Expand Up @@ -87,26 +74,25 @@

#drawer {
--app-drawer-content-container: {
background: var(--app-background-color);
color: var(--app-primary-color);
background: var(--color-blue-primary);
color: var(--color-white-primary);
font-weight: 100;
}
--app-drawer-scrim-background: rgba(255,255,255,.7);
}

#drawer img {
max-width: 100%;
}

.drawer-list a {
@apply(--text-normal-white);
display: block;
padding: 0 16px;
font-weight: bold;
line-height: 3.5;
text-decoration: none;
outline: 0;
color: var(--app-primary-color);
-webkit-transition: background-color .4s cubic-bezier(0.25,0.8,0.25,1);
transition: background-color .4s cubic-bezier(0.25,0.8,0.25,1);
padding: 0 16px;
text-decoration: none;
}

.drawer-list a iron-icon {
Expand Down Expand Up @@ -138,46 +124,69 @@

.menu-desktop {
display: none;
--paper-tabs-selection-bar-color: var(--app-secondary-color);
--paper-tabs-selection-bar: {
height: 4px;
padding-bottom: 0px;
margin-bottom:0px;
}
}

paper-tabs {
--paper-tabs: {
font-family: 'Quicksand', sans-serif;
font-weight: 400;
font-size: 16px;
padding-bottom: 8px;
}
--paper-tabs-selection-bar-color: var(--color-white-primary);
}

.menu-desktop paper-tab {
margin-left: 12px;
paper-tab {
margin: 0 16px;
}

.menu-desktop paper-tab a {
paper-tab > a {
@apply(--layout-horizontal);
@apply(--layout-center-center);
@apply(--text-normal-white);
text-decoration: none;
font-weight: normal;
color: var(--app-background-color);
);
outline: 0;
}

.menu-desktop paper-tab.iron-selected > a {
font-weight: normal;
.footer{
background-image: url('images/bg-footer.png');
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
height: 30vh;
position: relative;
}

#views {
background: var(--app-background-color);
.footer .links {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 16px;
}

.footer a:first-child {
margin: 0 16px;
}

.view.not(.view-sponsors) {
min-height: calc( 100vh - 56px );
box-sizing: border-box;
.footer a {
text-decoration: none;
color: var(--color-grey-primary);
}

.footer [icon="twitter"] {
border-radius: 50%;
overflow: hidden;
width: 32px;
height: 32px;
}

@media (min-width:600px) {
.footer [title="Eventbrite"] {
width: auto;
height: auto;
padding-bottom: 6px;

}


@media (min-width:720px) {
app-header paper-icon-button{
display:none;
}
Expand All @@ -188,14 +197,9 @@
.menu-desktop {
display: block;
}
.view.not(.view-sponsors) {
min-height: calc( 100vh - 64px );
}
}
@media (min-width: 730px) {
.menu-desktop paper-tab {
margin-left: 24px;
font-size: 20px;
.view {
min-height: calc( 70vh - 150px );
box-sizing: border-box;
}
}
</style>
Expand All @@ -216,7 +220,7 @@
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>
<img src="./images/logo_polymerday.png" alt="Polymer Day">
<img src="./images/logo_polymerday_white.png" alt="Polymer Day">
</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="menu-name" class="drawer-list" role="navigation">
<template is="dom-repeat" items="[[_toArray(menu)]]">
Expand Down Expand Up @@ -261,6 +265,16 @@
<polymerday-venue name="venue" class="view"></polymerday-venue>
<polymerday-sponsors name="sponsors" class="view view-sponsors"></polymerday-sponsors>
</iron-pages>
<div class="footer">
<div class="links">
<a href="http://polymerday.eventbrite.es/" tabindex="-1" target="_blank">
<span class="card-actions__label eventbrite">registration at</span> <iron-icon src="images/logo-eventbrite.svg" class="icon-eventbrite" aria-label="Eventbrite" title="Eventbrite"></iron-icon>
</a>
<a href="https://twitter.com/polymerday" tabindex="-1" target="_blank">
<span class="card-actions__label">@polymerday</span> <iron-icon icon="twitter"></iron-icon>
</a>
</div>
</div>

</app-header-layout>

Expand Down
Loading

0 comments on commit aa72388

Please sign in to comment.