Working blog markup

resources/base.css

@@ -33,6 +33,7 @@ body{
     width: 100%;
     height: 100%;
     margin: 0px;
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

resources/sys/blog-viewer/blog-viewer.css

@@ -3,23 +3,37 @@
     width: 100%;
     height: 100%;
 
-    overflow: scroll;
-
     /* Auto layout */
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    gap: 50px;
+    /* gap: 50px; */
-    row-gap: 20px;
+    /* row-gap: 20px; */
+    padding: 0px 20px 0px 20px;
 }
 
-.blog-viewer .header{
+.blog-viewer .header-h1{
-    font-size: x-large;
+    font-size:x-large;
-    padding: 15px;
+    padding: 10px;
+}
+
+.blog-viewer .header-h2{
+    font-size:large;
+    padding: 6px;
+}
+
+.blog-viewer .header-h3{
+    font-size:larger;
+    padding: 2px;
 }
 
 .blog-viewer .plain-text{
-    padding: 0px 20px 0px 20px;
+    /* Auto layout */
-
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 5px;
+    /* row-gap: 20px; */
 }

resources/sys/personal-properties/personal-properies.css

@@ -1,23 +1,27 @@
-.ScrollContent {
+/* TODO Move this to body? */
+/*.ScrollContent {
     width: 100%;
     height: 100%;
     overflow: scroll;
     overflow-x: hidden;
-    scrollbar-width: none; /* Firefox */
+    /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    /* scrollbar-width: none;  */
+    /* Internet Explorer 10+ */
+    /* -ms-overflow-style: none;   */
 
     /* Auto layout */
-    display: flex;
+    /*display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     padding: 0px;
-}
+}*/
 
-.ScrollContent::-webkit-scrollbar { /* WebKit */
+/* WebKit */
+/* .ScrollContent::-webkit-scrollbar { 
     width: 0;
     height: 0;
-}
+} */
 
 .PropertiesList{
     /* width: 100%;

resources/wdeUI.css

@@ -327,4 +327,25 @@
 
 .FileTileTitle{
     white-space: nowrap;
-}
+}
+
+.ScrollContent {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    overflow-x: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+}
+
+.ScrollContent::-webkit-scrollbar { /* WebKit */
+    width: 0;
+    height: 0;
+}

templates/blog-viewer/app.tmpl

@@ -8,11 +8,11 @@
         <div id="Drag" class="WindowDragArea"></div>
     </div>
     <div class="ContentBorder">
-        <div class="blog-viewer">
+        <div class="blog-viewer ScrollContent">
             {{ range $block := .blocks }}
-                <div class="{{$block.Type}}">
+                <div class="{{$block.Type}}" >
                     {{ range $data := $block.Data }}
-                        <div>
+                        <div style="font-size: inherit;">
                             {{$data}}
                         </div>
                     {{ end }}