more new ui

static/css/main.css

@@ -73,6 +73,9 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 	position: relative;
 	background: rgba(255,255,255,0.8) url('../img/overlay.png');
 	border: 10px solid white;
+	padding-top: 0;
+	padding-left: 0;
+	vertical-align: middle;
 }
 
 .item {
@@ -91,6 +94,34 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 
 .subheader {
 	background: rgba(214, 71, 96, 0.7) url('../img/overlay.png');
+	/*margin-bottom: -19px;*/
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.subheader > h1 {
+	flex: 1;
+	/*position: absolute;*/
+	top: 50%;
+	/*transform: translateY(-50%);*/
+	margin: 0;
+	display: block;
+	width: 100%;
+}
+
+.subheader a {
+	flex: 1;
+	display: inline;
+	padding: 0;
+	line-height: 50px;
+}
+
+.subheader a:hover {
+	color: white;
+}
+
+.subheader p {
+	font-size: 14pt;
 }
 
 .column {
@@ -117,6 +148,10 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 	transition: color 0.25s ease-in-out;
 }
 
+.item img {
+	height: 230px;
+}
+
 figure img {
 	display: block;
 	margin: 0 auto;

templates/album.hamlet

@@ -1,21 +1,18 @@
 $newline always
-<div id="header" class="item" data-width="400">
-  <div class="inner">
-    <h1>#{albumTitle album}
-    <p>by <a href=@{UserR ownerName}>#{ownerSlug}</a>
+<div #reel>
+  <div .subheader .item>
+    <h1>#{albumTitle album} <small>by <a href=@{UserR ownerName}>#{ownerSlug}</a></small>
     $if presence == True
-      <p>
       <a href=@{DirectUploadR albumId}>Upload image to this album
-      <p>
+      <br>
       <a href=@{AlbumSettingsR albumId}>Change settings of this album
   
   $if null media
-  <div id="header" class="item" data-width="400">
-    <div class="inner">
+    <div .item>
       <p class="center">This album is empty
   $else
     $forall (Entity mediumId medium) <- media
-    <article class="item" data-width=#{mediumThumbWidth medium}>
+      <div .item>
         <a href=@{MediumR mediumId}>
           <figure>
             <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>

templates/dUpload.hamlet

@@ -1,4 +1,5 @@
-<div id="header" class="item" data-width="400">
-  <form class="inner" method=post enctype=#{enctype}>
+<div #reel .middle>
+  <div .medium>
+    <form method=post enctype=#{enctype}>
       Image upload to album #{albumTitle album}
       ^{dUploadWidget}

templates/home.hamlet

@@ -11,7 +11,7 @@ $doctype 5
           <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
           <figcaption>#{mediumTitle medium}
   $if nextMedia
-  <div class="pagination">
+    <div .item .pagination>
       <p>
         <a href=@{PageR 1}>
           older

templates/profile.hamlet

@@ -10,7 +10,7 @@ $newline always
       <p class="center">This user has no albums yet
     $else
       <h1>Albums
-      <p>Albums of this user:
+      <p>Albums of this user
   $if not (null userAlbs)
     $forall (Entity albumId album) <- userAlbs
       <article class="item">
@@ -25,7 +25,7 @@ $newline always
   $if not (null sharedAlbs)
     <article .subheader .item>
       <h1>Shared Albums
-      <p>Albums shared with this user:
+      <p>Albums others have shared with this user
     $forall Just (Entity albumId album) <- sharedAlbs
       <article .item>
         <a href=@{AlbumR albumId}>
@@ -39,7 +39,7 @@ $newline always
   $if not (null recentMedia)
     <article .subheader .item>
       <h1>Newest images
-      <p>recent uploads of #{ownerSlug}
+      <p>Recent uploads by #{ownerSlug}
     $forall (Entity mediumId medium) <- take 10 recentMedia
       <article .item>
         <a href=@{MediumR mediumId}>