improve css

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

content/2023/spaify.md

@@ -5,7 +5,7 @@ date = 2023-05-14
 aliases = ["spaify"]
 
 [taxonomies]
-tags = ["npm", "typescript", "open source", "javascript", "spa", "static site", "web development"]
+tags = ["typescript", "open source", "webdev"]
 +++
 
 By default, when you click a link on a website, the browser will load the new page from the server and replace the current page with the new one. This is the default behaviour for static sites, and it works well. Spaify lets you skip this step and load the new page in the background, so that when you click a link, the new page is already loaded and ready to be displayed. This makes the page transition seamless, and it's a great way to improve the user experience of your site, and progressively enhance it. And the best part is that it's super easy to use, and it's less than 1kb of JavaScript (minified and gzipped).

sass/footer.scss

@@ -4,7 +4,7 @@
   position: absolute;
   display: flex;
   bottom: 0;
-  padding: 2rem 2rem;
+  padding: 2rem 2.4rem;
   flex-grow: 0;
   width: 100%;
 
@@ -28,7 +28,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-size: 1rem;
+    font-size: 1.1em;
     color: var(--light-color-secondary);
 
     &--user {

sass/main.scss

@@ -15,7 +15,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: var(--font-family-text);
-  font-size: 1rem;
+  font-size: 1.2rem;
   line-height: 1.54;
   background-color: var(--background);
   color: var(--color);
@@ -41,10 +41,10 @@ h6 {
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 1.4em;
   font-weight: 600;
-  margin-top: 3rem;
-  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: .4rem;
   color: var(--color);
   // background: linear-gradient(93deg, #00ffe8 20%, #effbff 70%);
   // -webkit-background-clip: text;
@@ -55,19 +55,19 @@ h1 {
 }
 
 h2 {
-  margin-top: 1rem;
+  font-size: 1.2em;
   font-size: 1.3rem;
   font-weight: 400;
 }
 
 h3 {
-  font-size: 1.2rem;
+  font-size: 1.1em;
 }
 
 h4,
 h5,
 h6 {
-  font-size: 1.15rem;
+  font-size: 1em;
 }
 
 a {
@@ -171,7 +171,8 @@ code {
   font-feature-settings: normal;
   background: var(--accent-alpha-20);
   padding: 1px 6px;
-  font-size: 0.95rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
   border-radius: 3px;
 }
 
@@ -180,6 +181,11 @@ code.filename {
   font-size: 0.85rem;
   margin: 0.4rem;
   position: absolute;
+  line-height: 1.2;
+
+  @media (max-width: $phone-max-width) {
+    margin-left: -1rem;
+  }
 }
 
 pre {
@@ -191,17 +197,26 @@ pre {
   margin-top: 0;
   border-radius: 6px;
   white-space: pre-wrap;
-  line-height: 1.3;
+  line-height: 1;
   // @media (max-width: $phone-max-width) {
   //   white-space: pre-wrap;
   //   word-wrap: break-word;
   // }
 
+  @media (max-width: $phone-max-width) {
+    margin-left: -2rem;
+    margin-right: -2rem;
+    padding-left: 1rem;
+    padding-right: 2rem;
+    border-radius: 0;
+  }
+
   code {
     padding: 0;
     margin: 0;
     background: none;
     white-space: pre;
+    line-height: 1;
   }
 }
 
@@ -323,13 +338,15 @@ ol ol {
   justify-content: center;
   flex-direction: column;
   padding: .5rem 5rem;
+  padding-top: 0rem;
   padding-bottom: 5rem;
   max-width: 60rem;
   min-height: calc(100vh - 6rem);
   margin: 0 auto;
 
   @media (max-width: $phone-max-width) {
-    padding: 2rem;
+    padding: 1.5rem;
+    padding-top: 0rem;
   }
 }
 

sass/post.scss

@@ -7,12 +7,12 @@
   h2 {
     line-height: 1;
     margin-left: -0.3rem;
-    font-size: 4rem;
+    padding-bottom: 0.5rem;
+    font-size: 2rem;
     margin: 0;
-    color: var(--background);
-    opacity: 0.3;
+    opacity: 0.5;
     line-height: 0.8;
-    -webkit-text-stroke: 1px var(--color);
+    font-family: "Linux Libertine Display";
   }
 }
 
@@ -37,7 +37,7 @@ ul.toc {
   width: 100%;
   text-align: left;
   padding: 20px 0;
-
+  margin-bottom: 2rem;
 
   // @media (max-width: $tablet-max-width) {
   //   max-width: 660px;
@@ -48,9 +48,10 @@ ul.toc {
   }
 
   %meta {
-    font-size: 1rem;
+    font-size: 1.2em;
     margin-bottom: 10px;
     color: var(--color);
+    opacity: 0.8;
   }
 
   &-meta {
@@ -69,8 +70,9 @@ ul.toc {
 
   &-title {
     position: relative;
-    font-size: 2rem;
+    font-size: 1.7rem;
     margin: 0;
+    margin-bottom: 0.5rem;
     font-weight: 600;
 
     a {
@@ -91,9 +93,14 @@ ul.toc {
 
   &-tags-inline {
     @extend %tags;
-
-    margin-left: 0.5rem;
-    display: inline;
+    display: block;
+  
+    > a {
+      opacity: 0.7;
+      &:hover {
+        opacity: 1;
+      }
+    }
 
     @media (max-width: $phone-max-width) {
       display: block;

templates/index.html

@@ -49,8 +49,6 @@
                 coding!
                 <br />
                 <br /> #}
-                <br>
-
 
                 {% set section = get_section(path="_index.md") %}