First Commit

hackatonApp/scss/auth/auth.styles.scss

@@ -0,0 +1,73 @@
+.auth-outer
+{
+	background-color: transparent !important;
+
+	ion-view
+	{
+		background-color: transparent;
+		box-shadow: none !important; // Need to set this with important to prevent awefull vertical line when transitioning
+	}
+
+	ion-header-bar
+	{
+		background-color: transparent;
+
+		*
+		{
+			color: $auth-color;
+		}
+	}
+}
+
+.auth-view
+{
+	.row
+	{
+		height: 100%;
+	}
+
+	.bottom-content
+	{
+		padding-top: 0px;
+		border: none;
+
+		.button
+		{
+			margin: 0px;
+			font-weight: bold;
+		}
+	}
+
+	.alternative-actions
+	{
+		margin: 0px 10px;
+
+		.button
+		{
+			padding: 0px;
+			font-size: 14px;
+		}
+
+		.sign-up
+		{
+			float: right;
+		}
+	}
+}
+
+.toggle-view-anchor
+{
+	height: $line-height-computed + $font-size-base;
+	line-height: $line-height-computed + $font-size-base;
+	position: absolute;
+	right: 0px;
+	text-transform: uppercase;
+	font-size: 24px;
+	font-weight: 500;
+	color: $show-hide-password-color;
+
+	*
+	{
+		color: $show-hide-password-color;
+	}
+}

hackatonApp/scss/auth/auth.variables.scss

@@ -0,0 +1,7 @@
+$auth-color: #FFFFFF;
+$show-hide-password-color: lighten(#444444, 25%);
+$auth-tabs-highlight: $theme-color-1;
+$auth-tabs-bg: $theme-color-3;
+$auth-tabs-color: darken($auth-color, 10%);
+$auth-login-btn-bg: rgba($theme-color-1, .8);
+$auth-signup-btn-bg: rgba($theme-color-2, .8);

hackatonApp/scss/auth/forgot-password.styles.scss

@@ -0,0 +1,7 @@
+.forgot-password-view
+{
+	.forgot-password-container
+	{
+		margin-bottom: 0px;
+	}
+}

hackatonApp/scss/auth/login.styles.scss

@@ -0,0 +1,66 @@
+.login-view
+{
+	// Fix tabs animation on iOS
+	// Fix initial blink before angular loaded: http://stackoverflow.com/a/14076004/1116959
+	[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
+	{
+	  display: none !important;
+	}
+	.tab-content.ng-hide
+	{
+		display: none !important;
+	}
+
+	.tab-content.ng-hide-add.ng-hide-add-active,
+	.tab-content.ng-hide-remove.ng-hide-remove-active
+	{
+		@include transition(all 0s ease);
+	}
+
+	.tabs
+	{
+		.tab-item
+		{
+			font-weight: bold;
+			text-transform: uppercase;
+			background: $auth-tabs-bg;
+			color: $auth-tabs-color;
+			@include transition(all 0.1s ease);
+		}
+
+		.tab-item.active,
+		.tab-item.activated
+		{
+			margin-top: 0;
+			margin-bottom: -2px;
+			border-width: 0px 0px 4px 0px !important;
+			border-color: $auth-tabs-highlight !important;
+			border-style: solid;
+		}
+	}
+
+	.login-container
+	{
+		margin-bottom: 0px;
+
+		.card-heding
+		{
+			padding: 0px;
+			height: $tabs-height;
+
+			.tabs
+			{
+				top: 0px;
+				padding-top: 0;
+				background-position: bottom;
+				border-top-width: 0;
+				border-bottom-width: 1px;
+			}
+
+			.tab-item
+			{
+				max-width: none;
+			}
+		}
+	}
+}

hackatonApp/scss/auth/signup.styles.scss

@@ -0,0 +1,7 @@
+.signup-view
+{
+	.sign-up-container
+	{
+		margin-bottom: 0px;
+	}
+}

hackatonApp/scss/auth/walkthrough.styles.scss

@@ -0,0 +1,38 @@
+.walkthrough-view
+{
+	.top-content
+	{
+		height: 75%;
+		text-align: center;
+
+		h1
+		{
+			color: $auth-color;
+		}
+	}
+
+	.bottom-content
+	{
+		height: 25%;
+		padding-top: 5px;
+		margin-top: 0px;
+
+		.button
+		{
+			border: none;
+			color: $auth-color;
+			font-weight: bolder;
+			font-size: 20px;
+		}
+
+		.login.button
+		{
+			background-color: $auth-login-btn-bg;
+		}
+
+		.sign-up.button
+		{
+			background-color: $auth-signup-btn-bg;
+		}
+	}
+}

hackatonApp/scss/bookmarks/bookmarks.styles.scss

@@ -0,0 +1,75 @@
+.bookmarks-view
+{
+  background-color: $content-bg;
+
+  .scroll-content .scroll,
+  .bookmarks-container
+  {
+    height: 100%;
+  }
+
+  .empty-results
+  {
+    text-align: center;
+
+    .icon
+    {
+      font-size: 170px;
+      color: lighten($content-bg, 10);
+    }
+
+    .no-bookmarks
+    {
+      color: darken($content-bg, 10);
+      font-size: 22px;
+    }
+  }
+
+
+  .bookmarks-list
+  {
+    overflow-y: scroll;
+    height: 100%;
+  }
+
+  // Fix scrollbar style introduced on ionic v1rc1
+  .bookmarks-list::-webkit-scrollbar
+  {
+    display: none !important;
+    width: 0 !important;
+  }
+
+  .bookmark-item
+  {
+    padding: 10px 0px;
+    border-bottom: 1px solid rgba(darken($content-color, 15), .2);
+    margin: 0px 16px;
+
+    *
+    {
+      text-decoration: none;
+      color: $content-color;
+    }
+
+    .post-title
+    {
+      margin: 0px;
+      font-size: 20px;
+      font-weight: 300;
+      letter-spacing: -1px;
+    }
+
+    .post-date
+    {
+      margin: 0px;
+      font-size: 12px;
+      font-weight: 200;
+      color: rgba(lighten($content-color, 10), .7);
+    }
+
+    .post-time
+    {
+      color: rgba(darken($content-color, 10), .9);
+    }
+  }
+}

hackatonApp/scss/common/common.styles.scss

@@ -0,0 +1,150 @@
+// General reset styles
+*
+{
+	color: $content-color;
+}
+
+.bar.app-top-bar
+{
+	background-color: $top-bar-bg;
+
+	.title
+	{
+		color: $top-bar-color !important;
+		*
+		{
+			color: $top-bar-color !important;
+		}
+	}
+
+	.button
+	{
+		color: $top-bar-color !important;
+		*
+		{
+			color: $top-bar-color !important;
+		}
+	}
+}
+
+// Preload images aux styles (ratios)
+// Auto generate ratios for the whole app (see: http://stackoverflow.com/a/18120181/1116959)
+@each $ratio in $pre-img-ratios {
+  .pre-img._#{nth($ratio, 1)}_#{nth($ratio, 2)}
+  {
+    // Conserve aspect ratio (see: http://stackoverflow.com/a/10441480/1116959)
+    width: 100%;
+    padding-bottom: #{(nth($ratio, 2) / nth($ratio, 1)) * 100}%;
+  }
+}
+
+.pre-img
+{
+  position: relative;
+  background-color: $pre-img-bg;
+
+	// If the image is rounded
+	&.rounded-image
+	{
+		border-radius: 50%;
+	}
+
+  &.finish-loading
+  {
+    background-color: transparent;
+    border: none;
+
+		img
+	  {
+			visibility: visible;
+			opacity: 1;
+	  }
+  }
+
+  img
+  {
+    position: absolute;
+		left: 0px;
+		top: 0px;
+		visibility: hidden;
+		opacity: 0;
+		@include transition(visibility 0s linear, opacity 0.5s linear);
+  }
+}
+
+// spinner-on-load
+@include keyframes(spin) {
+  from {
+    @include transform(rotate(0deg));
+  }
+  to {
+    @include transform(rotate(359deg));
+  }
+}
+.spinner-on-load
+{
+	position: absolute;
+	font-size: $spinner-size;
+	width: $spinner-size;
+	height: $spinner-size;
+	line-height: $spinner-size;
+  color: $spinner-color;
+	@include animation(spin 2s infinite linear);
+	@include calc(top, "50% - #{($spinner-size/2)}");
+	@include calc(left, "50% - #{($spinner-size/2)}");
+}
+ion-spinner.spinner-on-load
+{
+	@include animation(none);
+  stroke: $spinner-color;
+	width: $spinner-svg-size;
+  height: $spinner-svg-size;
+	line-height: inherit;
+	@include calc(top, "50% - #{($spinner-svg-size/2)}");
+	@include calc(left, "50% - #{($spinner-svg-size/2)}");
+}
+
+// Multimedia background
+.multi-bg-outer
+{
+  position: relative;
+  background-color: rgba(darken($multi-bg, 10%), 0.7);
+  height: 100%;
+  @include transition(all ease-in-out .3s);
+
+  background-size: cover;
+  background-repeat: no-repeat;
+  z-index: -2;
+
+  &.finish-loading
+  {
+    background-color: transparent;
+  }
+
+  .bg-overlay
+  {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: $overlay-bg;
+    z-index: -1;
+    opacity: 0.6;
+  }
+
+  .multi-bg
+  {
+    display: none;
+  }
+}
+
+.loading-container .loading
+{
+	background-color: $loading-background-color;
+  *
+  {
+    color: darken($loading-color, 5);
+		font-weight: 500;
+  }
+}

hackatonApp/scss/common/common.variables.scss

@@ -0,0 +1,21 @@
+// Images - Preload images
+$pre-img-bg: rgba(lighten(#666666, 15%), .25);
+// Images - Preload images - Spinner on load
+$spinner-size: 50px;
+$spinner-svg-size: 28px;
+$spinner-color: #FFFFFF;
+// Images - Multimedia background
+$multi-bg: darken(#666666, 30%);
+$overlay-bg: darken(#fcfcfc, 80%);
+
+$pre-img-ratios: ();
+
+// App colors
+$top-bar-bg: $theme-color-2;
+$top-bar-color: #FFFFFF;
+
+$loading-color: #FFFFFF;
+$loading-background-color: rgba(#444444, .9);
+
+$content-bg: #EAEAEA;
+$content-color: #444444;

hackatonApp/scss/common/theme.variables.scss

@@ -0,0 +1,14 @@
+// THEME 1
+$theme-color-1: #387ef5;
+$theme-color-2: #FF4C4C;
+$theme-color-3: #3E454C;
+
+// THEME 2
+// $theme-color-1: #633CA6;
+// $theme-color-2: #F4C447;
+// $theme-color-3: #414DA8;
+
+// THEME 3
+// $theme-color-1: #33AC6B;
+// $theme-color-2: #33779B;
+// $theme-color-3: #3E454C;

hackatonApp/scss/feed/category-feeds.styles.scss

@@ -0,0 +1,34 @@
+.category-feeds-view
+{
+	background-color: $content-bg !important;
+
+	.category-feeds
+	{
+		.item
+		{
+			padding-left: 60px;
+		}
+
+		.item .thumbnail-outer
+		{
+			position: absolute;
+			left: 10px;
+			width: 40px;
+
+			.thumbnail
+			{
+				width: 100%;
+			}
+		}
+
+		.item .title
+		{
+			font-weight: 500;
+		}
+
+		.item .description
+		{
+			color: lighten($content-color, 35%);
+		}
+	}
+}

hackatonApp/scss/feed/feed-entries.styles.scss

@@ -0,0 +1,81 @@
+.feed-entries-view
+{
+	background-color: $content-bg !important;
+
+	.entry-heading
+	{
+		padding-top: 8px;
+		padding-bottom: 8px;
+		background-color: darken($entry-heading-color, 10%);
+		border-color: #000;
+
+		.entry-title
+		{
+			color: $entry-title-color;
+		}
+
+		.entry-author
+		{
+			font-weight: 500;
+		}
+	}
+
+	.entry-content
+	{
+		padding-top: 8px;
+		padding-bottom: 0px;
+
+		.entry-excerpt
+		{
+			overflow: hidden;
+			text-overflow: ellipsis;
+			@include display(flex);
+			@include flex-direction(column);
+			-webkit-line-clamp: $entry-excerpt-lines; /* number of lines to show */
+			line-height: $entry-font-size + 4;        /* fallback */
+			font-size: $entry-font-size;        /* fallback */
+			max-height: ($entry-font-size + 4) * $entry-excerpt-lines;       /* fallback */
+
+			*
+			{
+				font-size: inherit !important;
+			}
+		}
+
+		.entry-actions
+		{
+			padding: 10px 0px;
+
+			.col
+			{
+				padding:0px;
+			}
+
+			.actions
+			{
+				.button-icon
+				{
+					min-height: initial;
+					line-height: 28px;
+					padding: 0px;
+					vertical-align: middle;
+					margin-right: 10px;
+				}
+
+				.button-icon:before
+				{
+					font-size: 28px;
+					line-height: 28px;
+				}
+			}
+
+			.read-more
+			{
+				.button
+				{
+					margin:0px;
+				}
+			}
+		}
+	}
+}

hackatonApp/scss/feed/feed.variables.scss

@@ -0,0 +1,14 @@
+$feed-category-bg: $theme-color-3;
+$feed-category-color: #FFFFFF;
+
+//Feed entries
+$entry-heading-color: $theme-color-3;
+$entry-title-color: #FFFFFF;
+
+$entry-excerpt-lines: 5;
+$entry-font-size: 14px;
+
+$feed-categories-img-ratio: 1 1;
+
+// Merge maps
+$pre-img-ratios: append($pre-img-ratios, $feed-categories-img-ratio);

hackatonApp/scss/feed/feeds-categories.styles.scss

@@ -0,0 +1,46 @@
+.feeds-categories-view
+{
+	background-color: $content-bg !important;
+
+	.categories-list
+	{
+		@include flex-wrap(wrap);
+	}
+
+	.feed-category
+	{
+		// THIS IS FUCKING AWESOME: http://caniuse.com/#feat=viewport-units
+		@include calc(height, "50vw - 15px");
+		box-shadow: 0 1px 3px rgba(darken($feed-category-bg, 30%), 0.3);
+		border-radius: 2px;
+		position: relative;
+		display: block;
+
+		.category-image
+		{
+			width: 100%;
+			height: 100%;
+			border-radius: 2px;
+		}
+
+		.category-bg
+		{
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(rgba(darken($feed-category-bg, 80%), .85), rgba(darken($feed-category-bg, 10%), .3) 40%, rgba($feed-category-bg, .3) 60%, rgba(lighten($feed-category-bg, 10%), .3));
+		}
+
+		.category-title
+		{
+			color: $feed-category-color;
+			position: absolute;
+			top: 2px;
+			left: 8px;
+			font-weight: 500;
+			text-transform: capitalize;
+		}
+	}
+}

hackatonApp/scss/forms/forms.styles.scss

@@ -0,0 +1,8 @@
+.forms-view
+{
+  ion-content
+  {
+    -webkit-overflow-scrolling: touch !important;
+    overflow: scroll !important;
+  }
+}

hackatonApp/scss/ionic.app.scss

@@ -0,0 +1,58 @@
+// Include Sass mixins
+@import "scss/utils/mixins";
+
+// Include Theme variables
+@import "scss/common/theme.variables";
+// Include Ionic override variables
+@import "scss/utils/override_variables";
+
+// Include Bourbon
+@import "www/lib/bourbon/app/assets/stylesheets/_bourbon";
+// Include all of Ionic
+@import "www/lib/ionic/scss/ionic";
+
+// Include Ionic override styles
+@import "scss/utils/override_styles";
+
+// Include project Sass variables
+@import "scss/common/common.variables";
+@import "scss/auth/auth.variables";
+@import "scss/sidemenu/side-menu.variables";
+@import "scss/profile/profile.variables";
+@import "scss/bookmarks/bookmarks.variables";
+@import "scss/feed/feed.variables";
+@import "scss/wordpress/wordpress.variables";
+@import "scss/layouts/layouts.variables";
+@import "scss/miscellaneous/miscellaneous.variables";
+@import "scss/forms/forms.variables";
+@import "scss/settings/settings.variables";
+
+// Include custom styles
+@import "scss/common/common.styles";
+@import "scss/auth/auth.styles";
+@import "scss/auth/walkthrough.styles";
+@import "scss/auth/login.styles";
+@import "scss/auth/signup.styles";
+@import "scss/auth/forgot-password.styles";
+
+@import "scss/sidemenu/side-menu.styles";
+@import "scss/profile/profile.styles";
+@import "scss/bookmarks/bookmarks.styles";
+
+@import "scss/feed/category-feeds.styles";
+@import "scss/feed/feed-entries.styles";
+@import "scss/feed/feeds-categories.styles";
+
+@import "scss/wordpress/wordpress.styles";
+@import "scss/wordpress/post.styles";
+
+@import "scss/layouts/layouts.styles";
+@import "scss/layouts/slider.styles";
+@import "scss/layouts/tinder-cards.styles";
+
+@import "scss/miscellaneous/miscellaneous.styles";
+@import "scss/miscellaneous/maps.styles";
+@import "scss/miscellaneous/image-picker.styles";
+
+@import "scss/forms/forms.styles";
+@import "scss/settings/settings.styles";

hackatonApp/scss/layouts/layouts.styles.scss

@@ -0,0 +1,20 @@
+.layouts-view
+{
+  .layouts-functionalities
+  {
+    .item .icon:first-child
+    {
+      color: $layouts-icon-color;
+    }
+
+    .item .title
+    {
+      font-weight:500;
+    }
+
+    .item .description
+    {
+      color: lighten($content-color, 30%);
+    }
+  }
+}

hackatonApp/scss/layouts/layouts.variables.scss

@@ -0,0 +1 @@
+$layouts-icon-color: $theme-color-2;

hackatonApp/scss/layouts/slider.styles.scss

@@ -0,0 +1,4 @@
+.slider-view
+{
+  background: $content-bg;
+}

hackatonApp/scss/layouts/tinder-cards.styles.scss

@@ -0,0 +1,98 @@
+.tinder-cards-view
+{
+
+  background: $content-bg;
+
+  td-cards
+  {
+    display: block;
+  }
+
+  td-card
+  {
+    position: absolute;
+    left: 50%;
+    margin-top: 80px;
+    margin-bottom: 40px;
+    margin-left: -150px;
+    width: 300px;
+    border: 1px solid #999;
+    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
+    border-radius: 6px;
+    background: white;
+  }
+
+  td-card .image
+  {
+    position: relative;
+  }
+
+  td-card img
+  {
+    max-width: 100%;
+  }
+
+  td-card .title
+  {
+    background: #FFF;
+    font-size: 16px;
+    padding: 15px;
+    text-transform: capitalize;
+    text-align:center;
+  }
+
+  /* Overlay styling*/
+
+  .overlayBox
+  {
+    position: absolute;
+    left: 50%;
+    height: 98%;
+    width: 100%;
+    top: -80px;
+    opacity: 0;
+    margin: 80px 0 0 -149px;
+  }
+
+  .boxed
+  {
+    height: 50px;
+    width: 100px;
+    padding: 10px;
+    border-radius: 6px;
+    font-size: 30px;
+  }
+
+  .yes-text
+  {
+    text-align: center;
+  }
+
+  .yesBox
+  {
+    margin: 10% 60% 0% 10%;
+    border: 2px solid $balanced;
+    color: $balanced;
+    -webkit-transform: rotate(-25deg);
+  }
+
+  .no-text
+  {
+    text-align: center;
+  }
+
+  .noBox
+  {
+    margin: 10% 10% 0% 60%;
+    border: 2px solid $assertive;
+    color: $assertive;
+    -webkit-transform: rotate(25deg);
+  }
+
+  .fade
+  {
+    -webkit-transition: 0.2s opacity linear;
+    transition: 0.2s opacity linear;
+    opacity: 0;
+  }
+}

hackatonApp/scss/miscellaneous/image-picker.styles.scss

@@ -0,0 +1,9 @@
+.image-picker-view{
+
+  background: $content-bg;
+
+  .image-option
+  {
+    font-size: 14px !important;
+  }
+}

hackatonApp/scss/miscellaneous/maps.styles.scss

@@ -0,0 +1,32 @@
+.maps-view
+{
+	background-color: $content-bg !important;
+
+	.center-map-action
+	{
+		position: absolute;
+		top: 35px;
+		z-index: 9;
+
+		.item.item-input-inset
+		{
+			padding: 0px 5px;
+		}
+
+		.item-input-wrapper
+		{
+			background: none;
+		}
+	}
+
+	map
+	{
+		width: 100%;
+		height: 100% !important;
+	}
+
+	.scroll, .mapWrap
+	{
+		height: 100%;
+	}
+}

hackatonApp/scss/miscellaneous/miscellaneous.styles.scss

@@ -0,0 +1,20 @@
+.miscellaneous-view
+{
+	.miscellaneous-functionalities
+	{
+		.item .icon:first-child
+		{
+			color: $miscellaneous-icon-color;
+		}
+
+		.item .title
+		{
+			font-weight:500;
+		}
+
+		.item .description
+		{
+			color: lighten($content-color, 30%);
+		}
+	}
+}

hackatonApp/scss/miscellaneous/miscellaneous.variables.scss

@@ -0,0 +1 @@
+$miscellaneous-icon-color: $theme-color-2;

hackatonApp/scss/profile/profile.styles.scss

@@ -0,0 +1,67 @@
+.profile-view
+{
+  background-color: $profile-bg !important;
+
+  .profile-container
+  {
+    margin: 0px auto;
+    margin-top: 6vh;
+    text-align: center;
+  }
+
+  .user-image-container
+  {
+    width: $image-width;
+
+    .user-image
+    {
+      border-top: 1px solid $content-color;
+      padding: 8px;
+      background-color: $profile-bg;
+      width: 100%;
+      border-radius: 50%;
+    }
+  }
+
+  .user-name
+  {
+    font-size: 20px;
+  }
+
+  .user-twitter
+  {
+    margin-top: 5px;
+  }
+
+  .top-content
+  {
+    border-bottom: 1px solid $content-color;
+    position: relative;
+    height: 20vh;
+    margin-bottom: 25vh;
+  }
+
+  .user-background-image-outer
+  {
+    height: 20vh;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .bottom-content
+  {
+    padding: 0px;
+    background-color: $profile-bg;
+    min-height: 55vh;
+    position: relative;
+
+    .user-bio
+    {
+      text-align: center;
+      margin: 6px 30px;
+      padding: 6px 0px;
+    }
+  }
+}

hackatonApp/scss/profile/profile.variables.scss

@@ -0,0 +1,8 @@
+// App - Profile
+$image-width: 46vw;
+$image-max-width: 200px;
+
+$profile-bg: #FFFFFF;
+
+$profile-user-img-ratio: 1 1;
+$pre-img-ratios: append($pre-img-ratios, $profile-user-img-ratio);

hackatonApp/scss/settings/settings.styles.scss

@@ -0,0 +1,4 @@
+.settings-view
+{
+	background-color: $content-bg !important;
+}

hackatonApp/scss/sidemenu/side-menu.styles.scss

@@ -0,0 +1,91 @@
+ion-side-menu
+{
+	ion-content
+	{
+		background-color: darken($main-menu-bg, 12);
+	}
+
+	ion-item.item
+	{
+		border-right:none;
+		border-left:none;
+		border-color: darken($main-menu-bg, 5);
+
+		.item-content
+		{
+			background-color: darken($main-menu-bg, 12);
+
+			.icon:before
+			{
+				background-color: $main-menu-bg;
+				color: $main-menu-color;
+				border-radius: 50%;
+				font-size: 22px;
+				width: 32px;
+				height: 32px;
+				line-height: 32px;
+			}
+		}
+
+		.item-content.activated
+		{
+			background-color: lighten($main-menu-bg, 10);
+		}
+
+		.menu-text
+		{
+			color: darken($main-menu-color, 20);
+			font-weight:500;
+		}
+	}
+
+	ion-item.item:first-child
+	{
+		border-top:none;
+	}
+
+	ion-item.item:last-child
+	{
+		border-bottom:none;
+	}
+
+	.heading-item
+	{
+
+		.item-content
+		{
+			height: 120px;
+			padding-top: 45px;
+			padding-left: 115px;
+			background-color: darken($main-menu-bg, 10);
+			padding-bottom: 0px;
+		}
+
+		.user-image-container
+		{
+			width:90px;
+			position: absolute;
+		  top: 16px;
+		  left: 12px;
+
+			.user-image
+			{
+				border-radius: 50%;
+				padding: 8px;
+				border: 1px solid darken($main-menu-color, 40);
+				width: 100%;
+			}
+		}
+
+		.greeting
+		{
+			color: $main-menu-color;
+			font-weight:500;
+		}
+
+		.message
+		{
+			color: darken($main-menu-color, 40);
+		}
+	}
+}

hackatonApp/scss/sidemenu/side-menu.variables.scss

@@ -0,0 +1,9 @@
+$main-menu-bg: $theme-color-3;
+$main-menu-color: #FFFFFF;
+
+// Menu - User image
+$menu-user-img-width: 10vw;
+$menu-user-img-ratio: 1 1;
+
+// Merge maps
+$pre-img-ratios: append($pre-img-ratios, $menu-user-img-ratio);

hackatonApp/scss/utils/mixins.scss

@@ -0,0 +1,45 @@
+@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
+  $gradient-type: if($orientation == vertical, 0, 1);
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+}
+
+@mixin headings($from: 1, $to: 6){
+  @for $i from $from through $to{
+    h#{$i}{
+      @content
+    }
+  }
+}
+
+@mixin transition($transitions...)
+{
+  -webkit-transition: $transitions;
+  -moz-transition: $transitions;
+  -ms-transition: $transitions;
+  -o-transition: $transitions;
+  transition: $transitions;
+}
+
+// // Placeholder shadow DOM
+@mixin _placeholder {
+  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
+
+@mixin box-shadow($val)
+{
+  -webkit-box-shadow: $val;
+  -moz-box-shadow: $val;
+  box-shadow: $val;
+}
+
+@mixin opacity($opacity)
+{
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  filter: alpha(opacity=$opacity-ie); //IE8
+}

hackatonApp/scss/utils/override_styles.scss

@@ -0,0 +1 @@
+// Override Ionic styles

hackatonApp/scss/utils/override_variables.scss

@@ -0,0 +1,19 @@
+/*
+To customize the look and feel of Ionic, you can override the variables
+in ionic's _variables.scss file.
+
+For example, you might change some of the default colors:
+*/
+// $light:                           #fff !default;
+// $stable:                          #f8f8f8 !default;
+$positive:                        $theme-color-1 !default;
+// $calm:                            #11c1f3 !default;
+// $balanced:                        #33cd5f !default;
+// $energized:                       #ffc900 !default;
+$assertive:                       $theme-color-2 !default;
+// $royal:                           #886aea !default;
+// $dark:                            #444 !default;
+
+
+// The path for our ionicons font files, relative to the built CSS in www/css
+$ionicons-font-path: "../lib/ionic/fonts" !default;

hackatonApp/scss/wordpress/post.styles.scss

@@ -0,0 +1,154 @@
+@each $font-size in $font-size-list {
+  $i: index($font-size-list, $font-size);
+  .post-size-#{$font-size}
+  {
+    .post-view .post-text
+    {
+      font-size: $font-size;
+    }
+  }
+}
+
+.post-view
+{
+  .post-heading
+  {
+    padding-bottom:0px;
+    border-color: transparent;
+  }
+
+  .post-content
+  {
+    border-color: transparent;
+
+    // Audio fix
+    .wp-audio-shortcode
+    {
+      visibility: visible !important;
+    }
+
+    .post-text
+    {
+      *
+      {
+        font-size: inherit !important;
+      }
+    }
+
+    // Fix audio tag not displaying to 100% on ios
+    audio::-webkit-media-controls-panel
+    {
+      width: 100% !important;
+    }
+
+    img
+    {
+      margin: 10px 0px;
+      height: auto;
+      @include calc(width, "100% + #{($sides-padding*2)}");
+      margin-left: - $sides-padding;
+    }
+
+    ul, ol
+    {
+      list-style-type: square;
+      padding: 0 0 0 40px;
+      margin: 14px 0px;
+    }
+
+    iframe
+    {
+      margin: 10px 0px;
+      @include calc(width, "100% + #{($sides-padding*2)}");
+      margin-left: - $sides-padding;
+    }
+
+    blockquote
+    {
+      font-style: italic;
+      font-weight: 300;
+      margin: 20px 20px;
+      border: none;
+      padding: 0px;
+
+      p
+      {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .post-tags
+  {
+    border-color: transparent;
+    padding-top: 0px;
+    padding-bottom: 5px;
+
+    .post-tag
+    {
+      padding: 0 3px;
+      min-height: 24px;
+      font-size: 12px;
+      line-height: 24px;
+      margin-right: 5px;
+      margin-bottom: 5px;
+    }
+
+    .post-tag:last-child
+    {
+      margin-right:0px;
+    }
+  }
+
+  .post-footer
+  {
+    padding:0px;
+    background-color: darken($post-footer-bg, 10%);
+
+    .row,
+    .col
+    {
+      padding: 0px;
+    }
+
+    .col.col-20
+    {
+      text-align: center;
+    }
+
+    .ion-plus
+    {
+      font-size: 24px;
+    }
+
+    .ion-plus:before
+    {
+      font-size: 20px !important;
+      line-height: 15px !important;
+    }
+
+    .ion-minus
+    {
+      font-size: 18px;
+    }
+
+    .ion-minus:before
+    {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      margin-left: 3px;
+    }
+  }
+
+  .post-title
+  {
+    font-size: 24px;
+    margin-bottom: 4px;
+    color: $post-footer-bg;
+  }
+
+  .post-author
+  {
+    font-weight: 500;
+  }
+}

hackatonApp/scss/wordpress/wordpress.styles.scss

@@ -0,0 +1,127 @@
+.wordpress-view
+{
+  background-color: $content-bg !important;
+  vertical-align:middle;
+
+  .post-heading
+  {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: darken($wordpress-heading-color, 10%);
+    border-color: #000;
+
+    .post-title
+    {
+      color: $wordpress-title-color;
+    }
+
+    .post-author
+    {
+      font-weight: 500;
+    }
+  }
+
+  .post-content
+  {
+    padding-top: 8px;
+    padding-bottom: 0px;
+
+    .post-excerpt
+    {
+      overflow: hidden;
+			text-overflow: ellipsis;
+			@include display(flex);
+			@include flex-direction(column);
+      line-height: $post-font-size + 4;        /* fallback */
+      font-size: $post-font-size;        /* fallback */
+
+      *
+      {
+        font-size: inherit !important;
+      }
+    }
+
+    // Audio fix
+    .wp-audio-shortcode
+    {
+      visibility: visible !important;
+    }
+
+    // Fix audio tag not displaying to 100% on ios
+    audio::-webkit-media-controls-panel
+    {
+      width: 100% !important;
+    }
+
+    img
+    {
+      margin: 10px 0px;
+      height: auto;
+      @include calc(width, "100% + #{($sides-padding*2)}");
+      margin-left: - $sides-padding;
+    }
+
+    ul, ol
+    {
+      list-style-type: square;
+      padding: 0 0 0 40px;
+      margin: 14px 0px;
+    }
+
+    iframe
+    {
+      margin: 10px 0px;
+      height: auto;
+      @include calc(width, "100% + #{($sides-padding*2)}");
+      margin-left: - $sides-padding;
+    }
+
+    blockquote
+    {
+      font-style: italic;
+      font-weight: 300;
+      margin: 20px 20px;
+      border: none;
+      padding: 0px;
+
+      p
+      {
+        font-size: 16px;
+      }
+    }
+
+    .post-actions
+    {
+      padding: 10px 0px;
+
+      .col
+      {
+        padding:0px;
+      }
+
+      .bookmark
+      {
+        .ion-bookmark
+        {
+          min-height: initial;
+          line-height: 28px;
+          padding: 0px;
+        }
+
+        .ion-bookmark:before
+        {
+          font-size: 28px;
+          line-height: 28px;
+        }
+      }
+
+      .read-more
+      {
+        .button
+        {
+          margin:0px;
+        }
+      }
+    }
+  }
+}

hackatonApp/scss/wordpress/wordpress.variables.scss

@@ -0,0 +1,7 @@
+$post-font-size: 14px;
+$sides-padding: 16px;
+$font-size-list: 12px 14px 16px 18px 20px 22px 24px;
+$read-more-color: $theme-color-2;
+$wordpress-heading-color:  $theme-color-3;
+$wordpress-title-color:  #FFFFFF;
+$post-footer-bg: $theme-color-3;