Merge pull request #23 from lazercaveman/develop

## [1.1.1] - 14.02.2022
### Added
- Checkbox Styling
- Styling vor hr elements
### Fixed
- Removed Headline-Underlining for H1 and H2 Headlines
- Reduced bottom margin from Headline (H2-H5) to 10px

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.1.1] - 14.02.2022
+### Added
+- Checkbox Styling
+- Styling vor hr elements
+### Fixed
+- Removed Headline-Underlining for H1 and H2 Headlines
+- Reduced bottom margin from Headline (H2-H5) to 10px
+
 ## [1.1.0] - 12.02.2022
 ### Added
 #### Preview-Mode

obsidian.css

@@ -81,12 +81,12 @@
   --color-family-secondary: Jetbrains Mono, monospace;
   --color-size-xtra-small: 0.75rem;
   --color-size-small: 1rem;
-  --color-size-regular: 1.15rem;
-  --color-size-large: 1.25rem;
-  --color-size-xtra-large: 1.5rem;
-  --color-size-2xtra-large: 1.75rem;
-  --color-size-3xtra-large: 2rem;
-  --color-size-4xtra-large: 2.25rem;
+  --color-size-regular: 1rem;
+  --color-size-large: 1.15rem;
+  --color-size-xtra-large: 1.25rem;
+  --color-size-2xtra-large: 1.5rem;
+  --color-size-3xtra-large: 1.75rem;
+  --color-size-4xtra-large: 2rem;
   --color-lineheight-min: 1em;
   --color-lineheight-medium: 1.5em;
   --color-lineheight-regular: 1.75em;
@@ -219,52 +219,50 @@
 .markdown-preview-view h5,
 .markdown-preview-view h6 {
   display: block;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   align-items: center;
   font-family: var(--color-family-primary);
   font-weight: 600;
   line-height: var(--color-lineheight-regular);
   white-space: pre-wrap;
 }
 .markdown-preview-view h1 {
+  margin-bottom: 40px;
   font-size: var(--color-size-4xtra-large);
   color: var(--color-title-h1);
 }
 .markdown-preview-view h2 {
-  margin-top: 40px;
   color: var(--color-title-h2);
   font-size: var(--color-size-3xtra-large);
 }
 .markdown-preview-view h3 {
-  margin-top: 40px;
   color: var(--color-title-h3);
   font-size: var(--color-size-2xtra-large);
 }
 .markdown-preview-view h4 {
-  margin-top: 40px;
   color: var(--color-title-h4);
   font-size: var(--color-size-xtra-large);
 }
 .markdown-preview-view h5 {
-  margin-top: 40px;
   color: var(--color-title-h5);
   font-size: var(--color-size-large);
 }
 .markdown-preview-view h6 {
-  margin-top: 40px;
   color: var(--color-title-h6);
   font-size: var(--color-size-large);
 }
-.markdown-preview-view h1,
-.markdown-preview-view h2 {
-  border-bottom: 1px solid var(--color-primary-700);
+.markdown-preview-view hr {
+  margin: 40px 0;
+  height: 1px;
+  border: none;
+  background-color: var(--color-element-border-light);
 }
 .markdown-preview-view .heading-collapse-indicator {
   color: var(--color-primary-600);
 }
 
 .markdown-preview-view p {
-  margin: 20px 0;
+  margin-bottom: 20px;
   color: var(--color-text-paragraph);
   font-weight: 400;
   font-family: var(--color-family-primary);
@@ -345,6 +343,20 @@
   display: inline;
 }
 
+.task-list-item {
+  margin-top: 10px !important;
+  margin-bottom: 20px !important;
+}
+.task-list-item .task-list-item-checkbox {
+  transform: translateX(-20px);
+  margin-right: 0px;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  min-height: 20px;
+  cursor: pointer;
+}
+
 .markdown-preview-view table {
   margin: 80px auto;
   width: 100%;

scss/_text.scss

@@ -9,12 +9,12 @@ $fonts: (
   size: (
     xtra-small: .75rem,
     small: 1rem,
-    regular: 1.15rem,
-    large: 1.25rem,
-    xtra-large: 1.5rem,
-    2xtra-large: 1.75rem,
-    3xtra-large: 2rem,
-    4xtra-large: 2.25rem,
+    regular: 1rem,
+    large: 1.15rem,
+    xtra-large: 1.25rem,
+    2xtra-large: 1.5rem,
+    3xtra-large: 1.75rem,
+    4xtra-large: 2rem,
   ),
   lineheight: (
     min: 1em,

scss/modules/preview/headlines.scss

@@ -1,13 +1,15 @@
 .markdown-preview-view {
 
+  // TODO: reduce headline sizes
+
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     display: block;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     align-items: center;
     font-family: font(family, primary);
     font-weight: 600;
@@ -16,43 +18,41 @@
   }
 
   h1 {
+    margin-bottom: 40px;
     font-size: font(size, 4xtra-large);
     color: color(title, h1);
   }
 
   h2 {
-    margin-top: 40px;
     color: color(title, h2);
     font-size: font(size, 3xtra-large);
   }
 
   h3 {
-    margin-top: 40px;
     color: color(title, h3);
     font-size: font(size, 2xtra-large);
   }
 
   h4 {
-    margin-top: 40px;
     color: color(title, h4);
     font-size: font(size, xtra-large);
   }
 
   h5 {
-    margin-top: 40px;
     color: color(title, h5);
     font-size: font(size, large);
   }
 
   h6 {
-    margin-top: 40px;
     color: color(title, h6);
     font-size: font(size, large);
   }
 
-  h1,
-  h2 {
-    border-bottom: 1px solid color(primary, 700);
+  hr {
+    margin: 40px 0;
+    height: 1px;
+    border: none;
+    background-color: color(element, border-light);
   }
 
   .heading-collapse-indicator {

scss/modules/preview/lists.scss

@@ -49,3 +49,17 @@
   }
 
 }
+
+.task-list-item {
+  margin-top: 10px!important;
+  margin-bottom: 20px!important;
+  .task-list-item-checkbox {
+    transform: translateX(-20px);
+    margin-right: 0px;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+    cursor: pointer;
+  }
+}

scss/modules/preview/text.scss

@@ -1,7 +1,7 @@
 .markdown-preview-view {
 
   p {
-    margin: 20px 0;
+    margin-bottom: 20px;
     color: color(text, paragraph);
     font-weight: 400;
     font-family: font(family, primary);