feat(content): better card style for long content

no more ugly inner scrollbar!

1 files changed, 11 insertions, 5 deletions

diff --git a/scss/main.scss b/scss/main.scss
index 2e6bd3f..e3f1307 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -18,6 +18,7 @@ body {
   background: #000;
   background-size: cover;
   color: var(--text-color);
+  line-height: 1.25em;
   @media only screen and (min-width: vars.$bp-little) {
     background: var(--background-image) center fixed no-repeat black;
   }
@@ -27,7 +28,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 95vh;
+  min-height: 95vh;
   width: 100%;
   @media only screen and (max-width: vars.$bp-little) {
     min-height: 100vh;
@@ -71,9 +72,9 @@ main {
   border-radius: 32px;
   box-shadow: 0 0 70px 2px rgba(0,0,0,0.75);
   transition: .3s;
-  max-height: 75vh;
-  overflow: auto;
-  scrollbar-width: thin;
+  //max-height: 75vh;
+  margin-top: 10vh;
+  margin-bottom: 10vh;
   max-width: 800px;
   & h1, h2, h3 {
     margin: 0;
@@ -86,6 +87,7 @@ main {
     width: 100%;
     min-height: 100vh;
     max-height: none;
+    margin-top: 0;
     border-radius: 0;
   }
 }
@@ -97,7 +99,6 @@ h1, h2, h3 {
 
 p {
   margin-bottom: 0.5rem;
-  line-height: 1.25em;
 }
 
 h1 {
@@ -121,6 +122,7 @@ h4 {
 }
 
 ul, ol {
+  margin-top: -0.25rem;
   margin-bottom: 1rem;
 }
 
@@ -136,6 +138,10 @@ li {
   margin-bottom: 0.25rem;
 }
 
+em {
+  font-style: italic;
+}
+
 .header {
   display: flex;
   align-items: center;