Improved the styling:

1. Remove the black border around the navicon by custom the $focus-color. 2. Move the heading link icon from the end point to begining, in case a blank line is created behind the heading.
wongyah · Apr 15, 2024 · a6056d0 · a6056d0
1 parent 30b8d60
commit a6056d0
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 16 deletions.
diff --git a/_sass/custom/_navigation.scss b/_sass/custom/_navigation.scss
@@ -11,7 +11,7 @@
 
    .hidden-links {
       border: 1px solid #fff;
-      background: mix(#000000, $masthead-bg-color, 10%);
+      background: $focus-color;
 
       .masthead__menu-item {
          a{
@@ -46,7 +46,7 @@
             padding-left: $masthead-link-padding-horizontal-current;
             padding-right: $masthead-link-padding-horizontal-current;
             color: $masthead-link-color-current;
-            background-color: mix(#000000, $masthead-bg-color, 10%);
+            background-color: $focus-color;
             border-radius: 0.25em;
          }
 

diff --git a/_sass/custom/_page.scss b/_sass/custom/_page.scss
@@ -21,7 +21,7 @@
 
 .page__content {
   background-color: $page-background-color;
-  padding: 1.25em $padding-page;
+  padding: 1.5em $padding-page;
   border-radius: $border-radius-page;
   box-shadow: $box-shadow-page;
 
@@ -33,10 +33,18 @@
     }
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    text-indent: -0.25em;
+		.header-link {
+			left: 0;
+			font-size: 0.5em;
+		}
+  }
+
   hr {
     &:first-of-type {
       margin-top: 48px;
     }
   }
 
-}
+}
diff --git a/_sass/custom/_sidebar.scss b/_sass/custom/_sidebar.scss
@@ -15,7 +15,7 @@
     position: relative;
     width: 100%;
     background-color: $page-background-color;
-    padding: 1.25em $padding-page;
+    padding: 1.5em $padding-page;
     border-radius: $border-radius-page;
     box-shadow: $box-shadow-page;
   }

diff --git a/_sass/custom/_variables.scss b/_sass/custom/_variables.scss
@@ -33,6 +33,7 @@ $masthead-site-title-color: #ffffff;
 $masthead-link-color-current: $masthead-link-color-hover;
 $masthead-link-padding-vertical: 0.25em;
 $masthead-link-padding-horizontal-current: 0.5em;
+$focus-color: mix(#000000, $masthead-bg-color, 10%) !default;
 
 /* headline scale */
 $h-size-1: 2em !default; // ~32px
@@ -50,7 +51,7 @@ $weixin-color: #2aae67; // #07c160 (optional)
 $border-radius-em: 0.25em !default;
 $font-weight-normal: 400 !default;
 $font-weight-strong: 600 !default;
-$padding-page: 5% !default;
+$padding-page: 6% !default;
 $padding-vertical: 1em !default;
 // $padding-page: 40px !default;
 // $padding-card: 20px !default;

diff --git a/_site/README.md b/_site/README.md
@@ -115,7 +115,7 @@ Can't wait to try it out? Just adopt a **✒️ Markdown editor**, then you are
     - [Markdown PDF](https://github.com/yzane/vscode-markdown-pdf#readme) - An extenstion to convert Markdown files to PDF, PNG, JPEG, or HTML.
     - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced#readme) - An extention to enrich Markdown features in Atom and VS Code, featuring the integration of Pandoc.
 
-If you go deep into Markdown, you will find [the controversy over it](https://ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/).
+If you go deeper, you will find [the controversy over Markdown](https://ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/).
 
 As Markdown got popular, more and more Markdown parsers appeared. However, Markdown has no well-accepted standard untill now. The Markdown syntax in each parser is to some extent different from others.
 

diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
@@ -151,7 +151,7 @@ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-h
 .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; }
 
 /* ========================================================================== MIXINS ========================================================================== */
-a:focus, button:focus { /* Default*/ outline: thin dotted #31202e; /* Webkit*/ outline: 5px auto #31202e; outline-offset: -2px; }
+a:focus, button:focus { /* Default*/ outline: thin dotted #5c8ab8; /* Webkit*/ outline: 5px auto #5c8ab8; outline-offset: -2px; }
 
 /* em function ========================================================================== */
 /* Bourbon clearfix ========================================================================== */
@@ -1402,16 +1402,18 @@ a { text-decoration: none; }
 
 @media (min-width: 64em) { .page { float: left; } }
 
-.page__content { background-color: #fff; padding: 1.25em 7.5%; border-radius: 2px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); }
+.page__content { background-color: #fff; padding: 1.5em 6%; border-radius: 2px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); }
 .page__content h2 { border-bottom: none; }
 .page__content h2#contents { margin-top: 0.5em; }
+.page__content h1, .page__content h2, .page__content h3, .page__content h4, .page__content h5, .page__content h6 { text-indent: -0.25em; }
+.page__content h1 .header-link, .page__content h2 .header-link, .page__content h3 .header-link, .page__content h4 .header-link, .page__content h5 .header-link, .page__content h6 .header-link { left: 0; font-size: 0.5em; }
 .page__content hr:first-of-type { margin-top: 48px; }
 
 /* ========================================================================== SIDEBAR ========================================================================== */
 .sidebar { clear: both; }
 .sidebar::after { clear: both; content: ""; display: table; }
 @media (min-width: 64em) { .sidebar { float: right; clear: right; } }
-.sidebar div[itemscope], .sidebar .sidebar__wrapper { position: relative; width: 100%; background-color: #fff; padding: 1.25em 7.5%; border-radius: 2px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); }
+.sidebar div[itemscope], .sidebar .sidebar__wrapper { position: relative; width: 100%; background-color: #fff; padding: 1.5em 6%; border-radius: 2px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); }
 
 /* Author profile: Place the `Follow` button to the top right. */
 .author__urls-wrapper { position: absolute; right: 20px; top: 20px; }

diff --git a/_site/assets/js/main.min.js b/_site/assets/js/main.min.js
diff --git a/_site/index.html b/_site/index.html
@@ -115,16 +115,16 @@
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
 
-          <a class="site-logo" href="/"><img src="/assets/images/logo/[email protected]" alt="docSimpo"></a>
+          <a class="site-logo" href="www.docsimpo.work"><img src="/assets/images/logo/[email protected]" alt="docSimpo"></a>
 
-        <a class="site-title" href="/">
+        <a class="site-title" href="www.docsimpo.work">
           docSimpo
 
         </a>
         <ul class="visible-links"><li class="masthead__menu-item">
               <a href="/"class="current disabled">Resources</a>
             </li><li class="masthead__menu-item">
-              <a href="https://github.com/wongyah/awesome-technical-writing-learning">Github</a>
+              <a href="https://github.com/wongyah/awesome-technical-writing-learning">GitHub</a>
             </li></ul>
 
         <button class="greedy-nav__toggle hidden" type="button">
@@ -307,7 +307,7 @@ <h3 id="markdown">Markdown</h3>
   </li>
 </ul>
 
-<p>If you go deep into Markdown, you will find <a href="https://ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/">the controversy over it</a>.</p>
+<p>If you go deeper, you will find <a href="https://ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/">the controversy over Markdown</a>.</p>
 
 <p>As Markdown got popular, more and more Markdown parsers appeared. However, Markdown has no well-accepted standard untill now. The Markdown syntax in each parser is to some extent different from others.</p>
 
@@ -531,7 +531,7 @@ <h3 class="author__name" itemprop="name">Yedda Wang</h3>
 
 
       <div class="author__bio" itemprop="description">
-        <p>If you like this list, feel free to leave a star on my Github repository. :-))</p>
+        <p>If you like this list, feel free to leave a star on my GitHub repository. :-))</p>
 
       </div>
 

diff --git a/assets/js/main.min.js b/assets/js/main.min.js