thumbnails, better css

ndview/Properties/static/css/base.css

@@ -1,52 +1,52 @@
 footer {
-  font-style: italic;
+    font-style: italic;
 }
 
 h3 {
-		font-weight: bold;
+    font-weight: bold;
-		display: inline;
+    display: inline;
-		color: #0f0c5d;
+    color: #0f0c5d;
 }
 
 b.name {
-	color: #117743;
+    color: #117743;
-	font-weight: bold;
+    font-weight: bold;
 }
 
 b.name > code {
-	font-family: inherit;
+    font-family: inherit;
     font-weight: 400;
 }
 
 section {
-	background-color: #eef2ff;
+    background-color: #eef2ff;
-	padding: 5px;
+    padding: 5px;
-	margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 article {
-	background-color: #d6daf0;
+    background-color: #d6daf0;
-	padding-top: 5px;
+    padding-top: 5px;
-	margin: 2px;
+    margin: 2px;
-	margin-bottom: 5px;
+    margin-bottom: 5px;
-	padding-bottom: 2px;
+    padding-bottom: 2px;
 }
 
 article > header {
-	padding-left: 5px;
+    padding-left: 5px;
 }
 
 blockquote {
-	padding-left: 10px;
+    padding-left: 10px;
 }
 
 figcaption {
-	margin-left: 5px;
+    margin-left: 5px;
-	margin-bottom: 2px;
+    margin-bottom: 2px;
 }
 
 figcaption > i > a {
-	margin-left: 4px;
+    margin-left: 4px;
 }
 
 .thread.hidden > div
@@ -57,8 +57,51 @@ figcaption > i > a {
 
 .thread.hidden > small:after
 {
-	content: "(replies hidden)";
+    content: "(replies hidden)";
-	display: block;
+    display: block;
-	margin-left: 5px;
+    margin-left: 5px;
-	margin-top: 5px;
+    margin-top: 5px;
+}
+
+section.hidden > a.expand::before {
+    content: "+"!important;
+}
+
+section > a.expand::before {
+    content: "-";
+}
+
+a.expand {
+    display: inline;
+    float: left;
+    text-decoration: none;
+}
+
+/* make it look not shit */
+
+html {
+    background-color: #eff3ee;
+    height: 100%;
+}
+
+h1 {
+    font: bolder 28px Tahoma;
+    text-align: center;
+}
+
+a.expand {
+    padding-top: 1px;
+}
+
+* {
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h3 {
+    font-size: 1em;
+}
+
+a {
+    text-decoration: none;
 }

ndview/Properties/static/js/base.js

@@ -1,4 +1,10 @@
 window.addEventListener('load', () => {
-	document.querySelectorAll(".thread").forEach(x=> x.classList.toggle("hidden"));
+    document.querySelectorAll(".thread").forEach(x=> x.classList.toggle("hidden"));
-	document.querySelectorAll(".script").forEach(x=> x.style=""); //unhide script-specific elements
+    document.querySelectorAll(".script").forEach(x=> x.style=""); //unhide script-specific elements
+
+    document.querySelectorAll(".expand").forEach(x=> {
+	x.addEventListener("click", ()=> { 
+	    document.querySelector("[id='"+ x.getAttribute("href").slice(1) +"']").classList.toggle("hidden");
+	});
+    });
 });

ndview/ThumbnailGenerator.cs

@@ -0,0 +1,34 @@
+using System;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Tools;
+using System.IO;
+
+using ImageMagick;
+
+namespace ndview
+{
+    public class ThumbnailGenerator
+    {
+	public readonly int Width,Height;
+	public ThumbnailGenerator(int width) : this(width,0){}
+	public ThumbnailGenerator(int width, int height)
+	{
+	    (Width, Height) = (width, height);
+	}
+
+	public Task Thumbnail(Stream from, Stream to, CancellationToken token=default)
+	    => Task.Run(()=> {
+		using var image= new MagickImage();
+		image.Read(from);
+		token.ThrowIfCancellationRequested();
+		image.Resize(200, 0);
+
+		token.ThrowIfCancellationRequested();
+		image.Write(to);
+		token.ThrowIfCancellationRequested();
+	    
+	    });
+    }
+}

ndview/ndview.csproj

@@ -6,6 +6,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Magick.NET-Q8-x64" Version="7.16.0" />
     <PackageReference Include="SharpZipLib" Version="1.2.0" />
     <PackageReference Include="System.Text.Encodings.Web" Version="5.0.0-preview.2.20160.6" />
   </ItemGroup>