Merge pull request #30 from moiSentineL/css-edits

better css loading

Author: moiSentineL

src/_layouts/base.njk

@@ -39,15 +39,8 @@
     {# <link
         rel="stylesheet"
         href="https://unpkg.com/littlefoot/dist/littlefoot.css"
-        /> #}
+        /> #}        
     <link rel="stylesheet" href="/css/css.css">
-    {# <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin> #}
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    {# <link href="https://fonts.googleapis.com/css2?family=Recursive:wght,[email protected],0.5&display=swap" rel="stylesheet"> #}
-    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
 
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">  

src/_layouts/homebase.njk

@@ -10,15 +10,9 @@
     {% if site.description %}
     <meta name="description" content="{{ site.description }}">
     {% endif %}
+    
     <title>{{ title or site.title }}</title>
 
-    {% if page.url == '/' %}
-        <script>
-            if(location.hash) window.location = `/admin/#${location.href.split("#").pop()}`
-        </script>
-    {% endif %}
-
-
     <link rel="alternate" type="application/atom+xml" href="https://nibirsan.org/feed.xml" title="Nibir's Brain Dump"/>
     <link rel="apple-touch-icon" sizes="180x180" href="/media/meta/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/media/meta/favicon-32x32.png">
@@ -29,13 +23,10 @@
     <meta name="msapplication-TileColor" content="#2b5797">
     <meta name="msapplication-config" content="/media/meta/browserconfig.xml">
     <meta name="theme-color" content="#000000">
-
+    
     <link rel="stylesheet" href="/css/home.css">
-    {# <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin> #}
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
+    <link rel="stylesheet" href="/css/css.css">
+    
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 </head>

src/styles/css.scss

@@ -1,15 +1,7 @@
-@font-face {
-  font-family: IBM Plex Mono;
-  src: url("IBMPlexMono-Regular.ttf");
-  font-display: swap;
-}
+// css go brr
 
-// @import url('https://fonts.googleapis.com/css2?family=Recursive:CRSV,MONO@1,0.75&display=swap'); 
-      
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@90,200..900;100,200..900&display=swap');
 
-
-
 $transwhite: #e0e0e0;
 $pale-azure: #70d6ffff;
 $cyclamen: #ff70a6ff;
@@ -41,7 +33,7 @@ html {
   margin: auto;
   line-height: 1.5;
   font-size: 1.2em;
-  font-family: Inconsolata, monospace;
+  font-family: "Inconsolata", monospace;
 }
 
 .excerpt {
@@ -180,7 +172,6 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Inconsolata;
   font-variation-settings: "wdth" 90;
   margin: 1em 0 0.5em;
 }
@@ -433,6 +424,7 @@ footer {
 }
 
 div {
+  
 }
 
 .tag {
@@ -449,6 +441,7 @@ div {
 }
 
 span {
+
 }
 
 .reading {

src/styles/home.scss

@@ -1,14 +1,5 @@
-@font-face {
-    font-family: IBM Plex Mono;
-    src: url("IBMPlexMono-Regular.ttf");
-    font-display: swap;
-}
-
-
-@font-face {
-    font-family: Recursive;
-    src: url('https://fonts.googleapis.com/css2?family=Recursive:wght,[email protected],0.5&display=swap')
-}
+// for homepage
+// reduced workload to css.scss
 
 html {
     display: flex;
@@ -31,7 +22,7 @@ html {
     padding-bottom: 0rem;
     line-height: 0.5;
     font-size: 300%;
-    margin-top: 2em;
+    margin-top: 1rem;
     margin-bottom:0.6em;
 }
 .whothis{
@@ -72,88 +63,6 @@ html {
     }
 
 }
-    
-
-@media screen and (prefers-color-scheme: light) {
-    html{
-        color: black;
-    }
-    ::selection {
-        background: #C8FFFD;
-      }
-    pre, code {
-        background: #e0e0e0;
-    }
-    blockquote{
-        border: thin solid black;
-    }
-    table, th, td{
-        border: thin solid black;
-    }
-    a {
-        color: black
-    }
-    h4.excerpt {
-        color: #909090;
-    }
-}
-
-@media screen and (prefers-color-scheme: dark) {
-    html{
-        color: #e0e0e0;
-        background-color: #121212;
-    }
-    ::selection {
-        background: #C8FFFD;
-        color: black;
-      }
-    pre, code {
-        background: rgb(48, 48, 48);
-    }
-    blockquote{
-        border: thin solid #e0e0e0;
-    }
-    table, th, td{
-        border: thin solid #e0e0e0;
-    }
-    tag {
-        color: #000000 !important;
-    }
-    a {
-        color:#e0e0e0;
-    }
-    
-    h4.excerpt {
-        color: #b5b5b5;
-    }
-}
-
-h1,h2,h3,h4,h5,h6 {
-    margin: 1em 0 0.5em;
-}
-.title {
-    margin: 1em 0 0.2em;
-}
-
-  
-p,ul,ol {
-    margin-bottom: 1em;
-}
-
-.postlist{
-    padding: unset;
-    list-style-type: none;
-}
-
-.post{
-    margin: 0 0 1em;
-    display: list-item;
-    list-style-type: none;
-}
-
-.post-meta {
-    text-align: right;
-}
 
 img {
     max-width: 100%;
@@ -177,62 +86,4 @@ img {
         border-radius: 50%;
         height: auto; 
     }
-}
-
-blockquote {
-    font-style: italic;
-    margin: 0 0.3rem 0 0.3rem
-}
-
-blockquote p {
-    margin: 0 0.3rem 0 0.3rem;
-}
-
-pre {
-    font-size: 14px;
-    max-height: 300px;
-    overflow: scroll;
-    padding: 1rem;
-    border-radius: 15px;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
-
-table { width: 100%; }
-
-table, th, td {
-  border-collapse: collapse;
-  padding: 0.4rem;
-
-}
-
-.table-wrapper {
-    overflow-x: auto;
-}
-
-a {
-    text-decoration: underline;
-    text-decoration-thickness: .3ex;
-    text-decoration-color: #5B84B1FF;
-}
-
-a:hover {
-    font-weight: bold;
-    text-decoration-color: #FC766AFF;
-}
-
-
-nav {
-    text-align: center;
-    margin-top: 25px;
-    margin-bottom: 25px;
-}
-
-footer{
-    font-size: small;
-    text-align: center;
-    padding: 25px;
-    padding-top: 0.5em;
-}
-
-
+}