Rejig the page layout to use the scrollable widget

This is the start of some refactoring of the main layout CSS intended
to give us more flexibility and control.

core/ui/PageTemplate/alerts.tid

@@ -0,0 +1,8 @@
+title: $:/core/ui/PageTemplate/alerts
+tags: $:/tags/PageTemplate
+
+<div class="tw-alerts">
+
+<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
+
+</div>

core/ui/PageTemplate/sidebar.tid

@@ -1,6 +1,10 @@
 title: $:/core/ui/PageTemplate/sidebar
 tags: $:/tags/PageTemplate
 
+<div class="tw-sidebar-scrollable-backdrop"/>
+
+<$scrollable fallthrough="no" class="tw-sidebar-scrollable">
+
 <header class="sidebar-header">
 
 <div class="titlebar">{{$:/SiteTitle}}</div>
@@ -15,3 +19,5 @@ tags: $:/tags/PageTemplate
 {{$:/core/ui/SideBarLists}}
 
 </header>
+
+</$scrollable>

core/ui/PageTemplate/story.tid

@@ -1,17 +1,12 @@
 title: $:/core/ui/PageTemplate/story
 tags: $:/tags/PageTemplate
 
+<$scrollable class="tw-story-scrollable">
+
 <section class="story-river">
 
-<!-- Alerts -->
-<div class="tw-alerts">
-
-<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
-
-</div>
-
-<!-- The main story -->
 <$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} />
 
-<!-- End of story river -->
 </section>
+
+</$scrollable>

core/wiki/tags/PageTemplate.tid

@@ -1,3 +1,3 @@
 title: $:/tags/PageTemplate
-list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]]
+list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]] [[$:/core/ui/PageTemplate/alerts]]
 

themes/tiddlywiki/centralised/styles.tid

@@ -17,10 +17,10 @@ tags: [[$:/tags/stylesheet]]
 		text-align: left;
 	}
 
-	html .sidebar-header {
+	html .tw-sidebar-scrollable {
 		text-align: left;
 		left: 50%;
 		right: 0;
-		padding-left: 413px;
+		margin-left: 343px;
 	}
 }

themes/tiddlywiki/starlight/styles.tid

@@ -14,7 +14,7 @@ Placeholder for a more thorough refinement of Snow White
   src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");
 }
 
-html body {
+html body, .tw-sidebar-scrollable-backdrop {
 	font-family: "Arvo", "Times";
   background: url(<<datauri "$:/themes/tiddlywiki/starlight/ltbg.jpg">>);
 }

themes/tiddlywiki/vanilla/base.tid

@@ -386,6 +386,7 @@ a.tw-tiddlylink-external:hover {
 }
 
 @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
+
 	.sidebar-header {
 		padding: 14px;
 	}
@@ -397,7 +398,21 @@ a.tw-tiddlylink-external:hover {
 }
 
 @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
-	.sidebar-header {
+
+	.tw-story-scrollable {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.tw-message-box {
+		margin: 21px -21px 21px -21px;
+	}
+
+	.tw-sidebar-scrollable {
+		z-index: 1100;
 		position: fixed;
 		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
 		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
@@ -410,6 +425,18 @@ a.tw-tiddlylink-external:hover {
 		padding: 70px 0 28px 42px;
 	}
 
+	.tw-sidebar-scrollable-backdrop {
+		z-index: 1000;
+		position: fixed;
+		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
+		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
+		bottom: 0;
+		right: 0;
+		margin: 0 0 0 -42px;
+		background-color: <<colour page-background>>;
+		opacity: 0.8;	
+	}
+
 	.story-river {
 		position: relative;
 		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}};
@@ -1067,7 +1094,6 @@ canvas.tw-edit-bitmapeditor  {
 	border: 1px solid <<colour message-border>>;
 	background: <<colour message-background>>;
 	padding: 0px 21px 0px 21px;
-	margin: 21px -21px 21px -21px;
 	font-size: 12px;
 	line-height: 18px;
 	color: <<colour message-foreground>>;
@@ -1122,3 +1148,5 @@ canvas.tw-edit-bitmapeditor  {
 	margin: 4px;
 	border: 1px solid #000;
 }
+
+