css font-size seems to work better but not really great

content/nixos/krops.md

@@ -229,6 +229,8 @@ All other files/folders must be referenced in the resulting `nixos-config` file.
 
 ### Different Sources
 
+<br>
+
 #### Files and Folders
 
 You can use the `file` attribute to transfer

content/nixos/new-design.md

@@ -62,11 +62,28 @@ card body
 card body
 {{% /card %}}
 
+### Warnings and Notes
+
+{{% note %}}
+Awesome Note
+{{% /note %}}
+
+{{% warning %}}
+Important Warning
+{{% /warning %}}
+
+
+## block quotes
+
+A bit of text before
+
+> Not really satisfied with the blockquotes yet.
+
+a bit of text behind.
+ 
 ## Flex box
 
-> Todo das soll eigentlich anders sein!
-> Ich möchte hier bei der flexbox schon definieren wie die unterteilung ist
-> und dann entscheidet das bildschirm scaling, wie das ganze aussehen wird.
+<br>
 
 ### flexbox half
 

src/lessc/page/main-hack-card.less

@@ -1,6 +1,27 @@
+.content, .content-big {
+  &> .card {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+}
+
+blockquote{
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1em;
+  padding-right: 1em;
+  border: 2px solid @color-card-border;
+}
+
 // cards
 .card {
 
+  padding:0;
+  margin:0;
+  text-align: center;
+
   &.color-green {
     .card-header {
       border-top: 2px solid @color-card-border-green;
@@ -11,6 +32,7 @@
       border: 2px solid @color-card-border-green;
     }
   }
+
   &.color-red{
     .card-header {
       border-top: 2px solid @color-card-border-red;
@@ -22,14 +44,10 @@
     }
   }
 
-  padding:0;
-  margin:0;
-
-  text-align: center;
 
   .card-header {
     text-align: center;
-    //margin-top: @standard-margin;
+
     padding-bottom: @standard-margin;
     padding-top: @standard-margin;
     padding-left: 0.25em;
@@ -42,10 +60,9 @@
 
   .card-body{
     text-align: center;
+
     padding-left: 0.25em;
     padding-right: 0.25em;
-    //padding-top: @standard-margin;
-    //padding-bottom: @standard-margin;
 
     border: 2px solid @color-card-border;
   }

src/lessc/page/main-hack-code.less

@@ -20,6 +20,7 @@
    code {
      font-weight: normal;
      font-family: @font-code;
+     line-height: 1.1em;
    }
  }
 

src/lessc/page/main-hack.less

@@ -5,21 +5,20 @@
 @import "main-hack-flex.less";
 @import "main-hack-card.less";
 
+// todo use this more
 @standard-margin: 1em;
 
-// block size
-blockquote, h1, h2, h3, h4, h5, h6, p, pre {
-  margin-top: @standard-margin;
-  margin-bottom: @standard-margin;
+p, pre {
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
+
 // Header
 h1, h2, h3, h4, h5, h6 {
   font-size: 1.3rem;
-
-  //display: block;
-  //margin-bottom: 2rem;
-  //margin-top: 2rem;
+  margin-top: 1.5em;
+  margin-bottom: 1em;
 
   // underscore (not working)
   display: inline-block;

src/lessc/page/main.less

@@ -10,9 +10,13 @@
 
 @import "custom-iphone.less";
 
+:root {
+  --screen-size-small: 30em;
+}
 
 html {
   font-family: @font-normal;
+  line-height: 1.5em;
   @media @desktop{
     font-size: 16px;
   }
@@ -87,5 +91,8 @@ table.comparison {
 }
 
 figure {
-  margin: 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
 }