Yet a better style

Intergates a nice image from Kali,
get padding smaller on small screens,
print blog post titles!

	* Web.csproj: new images

	* App.master: a nicer javascript and better structure

	* style.css: less padding on small screens

	* p8-av4.xxs.png: from Kali, Da code

	* p8-av4.xxs.jpg: from Kali, Da code, da light one

	* Index.aspx: print titles, removes actionlink class to these last one

	* UserPosts.aspx: print titles, removes actionlink class to these last one

	* star-939235_1280.xxs.jpg: a lighter weight

	* helix-nebula-1400x1400.xxs.jpg: a lighter weight

web/App_Themes/style.css

@@ -15,17 +15,16 @@ input, textarea, checkbox {
    }
 
 header {
-	border-radius:10px;
+	display: block;
+	border-radius:1em;
 	margin: 1em;
 	padding: 3em;
-	padding-top: 5em;
-	display: block;
-	background: url("/images/star-939235_1280.jpg") 0 0 no-repeat fixed;
 	min-height: 10em;
+	background: url("/images/star-939235_1280.jpg") 0 0 no-repeat fixed;
 	}
 
 nav {
-	border-radius:10px;
+	border-radius:1em;
 	margin: 1em;
 	padding: 1em;
 	display: block;
@@ -34,7 +33,7 @@ nav {
 }
 
 main {
-	border-radius:10px;
+	border-radius:1em;
 	margin: 1em;
 	padding: 1em;
 	display: block;
@@ -43,7 +42,7 @@ main {
 	}
 
 footer {
-	border-radius:10px;
+	border-radius:1em;
 	margin: 1em;
 	padding: 1em;
 	display: block;
@@ -57,10 +56,12 @@ footer a {
 	background-color: rgba(0,0,40,.8); 
 	border-radius:5px;
 	margin:.5em;
-	padding:.5em;
+	padding:1em;
   }
 
-footer img { max-height: 2em; }
+footer img { max-height: 2em; vertical-align: middle; }
+a.actionlink img, h1 img, .menuitem img  { vertical-align: middle; }
+
 #gspacer { 
 	background-color: rgba(0,0,40,.8); 
 	border-radius:5px;
@@ -115,7 +116,6 @@ textarea.fullwidth { min-height:10em; }
 	bottom:0;
 }
 
-
 .panel,.bshpanel, aside {
 	background-color: rgba(32,16,16,0.8);
 		border-radius:5px; 
@@ -123,7 +123,6 @@ textarea.fullwidth { min-height:10em; }
 		padding: .5em;
 }
 
-
 .hint {
 	display: inline;
 	font-style: italic;
@@ -137,16 +136,19 @@ content: ")";
 }
 
 
-h1 img { vertical-align: text-top; 
-	}
-
 a {
 	text-decoration: none;
 	color: #B0B080;
    background-color:rgba(20,0,20,0.5);
-   text-decoration: underline;
+   text-decoration: none;
+}
+.usertitleref {
+	color: #B0B080;
+	border-radius: 5px;
+   background-color:rgba(0,0,32,0.8);
+   font-family: 'Arial', cursive;
+	padding: 1em;
 }
-
 a:hover  {
 	text-decoration: underline;
 }
@@ -190,9 +192,6 @@ ul.preview li:nth-child(n) {
 	color: #f88;
 }
 
-usertitleref {
-}
-
 .actionlink {
 	color: #B0B080;
 	border-radius: 5px;
@@ -210,7 +209,6 @@ input, select {
    font-family: 'Arial', cursive;
 }
 
-a.actionlink img { top:4px; }
 
 .actionlink:hover {
 	background-color:rgba(30,0,124,0.9);
@@ -267,27 +265,50 @@ a.actionlink img { top:4px; }
 		{ display:none;} 
 	}
 
-@media all and (min-width: 641px) {
+@media all and (min-width: 640px) {
 	.bshpanel { display:block; }
   .bsh { display: none; }
   .c3 { display:initial; }
   .c3-alt { display:none; }
-
-
 	}
 
 @media all and (max-width: 640px) {
-
-
-.menuitem {
-	display: block; 
-}
-
-.bshpanel { cursor:zoom-in; }
-  footer {
-		clear:both;
-  }
- 
+	header {
+		margin: .5em;
+		padding: .5em;
+		min-height: 3em;
+		 background: url("/images/star-939235_1280.xxs.jpg")       0 0 repeat fixed;
+	}
+	nav {
+		margin: .5em;
+		padding: .5em;
+		min-height: 3em;
+		background:    url("/images/helix-nebula-1400x1400.xxs.jpg") 50% 10em no-repeat fixed ; 
+	}
+	main { 
+		margin: .5em;
+		padding: .5em;
+		min-height: 7em;
+		background:   url("/images/p8-av4.xxs.jpg")                 50% 20em repeat fixed ; 
+	} 
+	footer { 
+		margin: .5em;
+		padding: .5em;
+		min-height: 3em;
+		background: url("/images/helix-nebula-1400x1400.xxs.jpg") 50% 90% repeat fixed ; 
+	} 
+	.menuitem {
+		display: block; 
+	}
+	.post { 
+	margin:.3em;
+	padding:.3em;
+	}
+	.usertitleref{ 
+	padding:.3em;
+	}
+  .bshpanel { cursor:zoom-in; }
+  footer { clear:both; }
 
 	.c2 { display:initial; }
 	.c2-alt { display:none; }

web/ChangeLog

@@ -1,3 +1,23 @@
+2015-10-02  Paul Schneider  <paul@pschneider.fr>
+
+	* Web.csproj: new images
+
+	* App.master: a nicer javascript and better structure
+
+	* style.css: less padding on small screens
+
+	* p8-av4.xxs.png: from Kali, Da code
+
+	* p8-av4.xxs.jpg: from Kali, Da code, da light one
+
+	* Index.aspx: print titles, removes actionlink class to these last one
+
+	* UserPosts.aspx: print titles, removes actionlink class to these last one
+
+	* star-939235_1280.xxs.jpg: a lighter weight
+
+	* helix-nebula-1400x1400.xxs.jpg: a lighter weight
+
 2015-10-02  Paul Schneider  <paul@pschneider.fr>
 
 	* Web.csproj:

web/Models/App.master

@@ -19,7 +19,6 @@
 var apiBaseUrl = '<%=Url.Content(Yavsc.WebApiConfig.UrlPrefixRelative)%>';
 $(document).ready(function(){
 	var $window = $(window); 
-
 	$('[data-type="background"]').each(function(){
 		var $bgobj = $(this); // assigning the object
 		// get the initial background position, assumes a "X% Yem" ?
@@ -59,8 +58,9 @@ $(document).ready(function(){
 		$bgobj.attr('orgbgpy',parseInt(bgposy));
 
 		$(window).scroll(function() {
-			var xPos = $bgobj.attr('orgbgpx') - ($window.scrollLeft() / $bgobj.data('speed'));
-			var yPos = $bgobj.attr('orgbgpy') - ($window.scrollTop() / $bgobj.data('speed'));
+		    var speed = $bgobj.data('speed');
+			var xPos = $bgobj.attr('orgbgpx') - Math.round($window.scrollLeft() / speed);
+			var yPos = $bgobj.attr('orgbgpy') - Math.round($window.scrollTop() / speed);
 			// Put together our final background position
 			var coords = '' + xPos + $bgobj.attr('orgbgpxu') + yPos + $bgobj.attr('orgbgpyu');
 			// Move the background
@@ -75,7 +75,7 @@ $(document).ready(function(){
 <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'/>
 </head>
 <body>
-<header data-type="background" data-speed="10" >
+<header data-type="background" data-speed="8" >
 
 <asp:ContentPlaceHolder ID="overHeaderOne" runat="server">
 
@@ -93,7 +93,7 @@ $(document).ready(function(){
 
 </header>
 
-<nav data-type="background" data-speed="10" data-emheight="10" data-posx="0" data-posy="11" >
+<nav data-type="background" data-speed="6" data-emheight="10" data-posx="0" data-posy="11" >
 <% if (Membership.GetUser()==null) { %>
 <a href="<%= Url.Content("~/Account/Login/?returnUrl=") + Url.Encode( Request.Url.PathAndQuery )%>"  >
 <div class="menuitem">
@@ -120,7 +120,7 @@ $(document).ready(function(){
 <i class="fa fa-sign-out"></i>Deconnexion</a> 
 <% } %>
 </nav>
-<main data-type="background" data-speed="10" data-emheight="10" data-posx="0" data-posy="22" >
+<main data-type="background" data-speed="10">
   <div>
 <asp:ContentPlaceHolder ID="MainContent" runat="server">
 </asp:ContentPlaceHolder>
@@ -129,7 +129,7 @@ $(document).ready(function(){
 <asp:ContentPlaceHolder ID="MASContent" runat="server">
 </asp:ContentPlaceHolder>
 
-<footer data-type="background" data-speed="10">
+<footer data-type="background" data-speed="2">
 <div >
    <%= Html.ActionLink("Formulaire de contact","Contact","Home",null, new { @class="thanks" }) %>
    <% foreach ( Link link in Html.Thanks()) { %>
@@ -142,7 +142,7 @@ $(document).ready(function(){
 <script src="https://apis.google.com/js/platform.js" defer>
   {lang: 'fr'}
 </script>
-<div id="gspacer"><div class="g-plusone" data-annotation="inline" data-width="230"></div></div>
+<div id="gspacer"><div class="g-plusone" data-annotation="inline" data-width="170"></div></div>
    </footer>
 </body>
 </html>

web/Views/Blogs/Index.aspx

@@ -9,7 +9,7 @@
 <% foreach (var p in g) { %> 
 <div class="postpreview">
 <%= Html.ActionLink(p.Title, "UserPost",
- new { user = g.Key, title = p.Title }, new { @class = "usertitleref actionlink" } ) %>
+ new { user = g.Key, title = p.Title }, new { @class = "usertitleref" } ) %>
 
   <aside>
 (Posté le  <%=p.Posted.ToString("D") %>)

web/Views/Blogs/UserPosts.aspx

@@ -19,11 +19,11 @@
 <asp:Content ContentPlaceHolderID="MainContent" ID="MainContentContent" runat="server">
 <%  foreach (BlogEntry e in this.Model) { %>
 <div class="postpreview<% if (!e.Visible) { %> hiddenpost<% } %>" >
-<h2><%= Html.ActionLink(e.Title,"UserPost", new { user=e.Author, title=e.Title, id = e.Id }, new { @class = "usertitleref actionlink" }) %></h2>
+<h2><%= Html.ActionLink(e.Title,"UserPost", new { user=e.Author, title=e.Title, id = e.Id }, new { @class = "usertitleref" }) %></h2>
 <% bool truncated = false; %>
 <%= Html.MarkdownToHtmlIntro(out truncated, e.Content,"/bfiles/"+e.Id+"/") %>
 <% if (truncated) { %>
-  <i><%= Html.ActionLink( "lire la suite" ,"UserPost", new { user=e.Author, title=e.Title, id = e.Id }, new { @class = "usertitleref actionlink" }) %></i>
+  <i><%= Html.ActionLink( "lire la suite" ,"UserPost", new { user=e.Author, title=e.Title, id = e.Id }, new { @class = "usertitleref" }) %></i>
   <% } %>
 <aside>(<%= e.Posted.ToString("yyyy/MM/dd") %>
 	 - <%= e.Modified.ToString("yyyy/MM/dd") %> <%= e.Visible? "":", Invisible!" %>)
@@ -44,8 +44,9 @@
  user.Value = (string) ViewData["BlogUser"];
 
 %>
-
+<aside>
 	 <yavsc:ResultPages id="rp1" Action = "?pageIndex={0}" runat="server"></yavsc:ResultPages> 
+	 </aside>
  		<asp:HiddenField id="user" runat="server"></asp:HiddenField>
 	 </form>
 	

web/Web.csproj

@@ -410,6 +410,10 @@
     <Content Include="App_Themes\tabs.css" />
     <Content Include="App_Themes\theme.css" />
     <Content Include="App_Themes\tooltip.css" />
+    <Content Include="images\helix-nebula-1400x1400.xxs.jpg" />
+    <Content Include="images\star-939235_1280.xxs.jpg" />
+    <Content Include="images\p8-av4.xxs.png" />
+    <Content Include="images\p8-av4.xxs.jpg" />
   </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />