changed some css for small screen and config for site deployment to s…

…olve the following problems: 1. The Dropdown list of the nav button is invisiable because of the same color of background color and font color. 2. The content colomn on the small screen is too small. 3. the heading text on the small screen is too big.
wongyah · Apr 15, 2024 · 94296a9 · 94296a9
1 parent d50fbe4
commit 94296a9
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 7 deletions.
diff --git a/_config.yml b/_config.yml
@@ -6,17 +6,17 @@ minimal_mistakes_skin    : "contrast"
 
 # Site settings
 locale                   : "en-US"
-title                    : "docSimpo"
+title                    : "docSimpo | Awesome Technical Writing Learning"
 title_separator          : "|"
 # subtitle                 : site tagline that appears below site title in masthead
 name                     : "Yedda Wang"
 description              : "A curated list of awesome and free resources about technical writing."
-url                      : "https://wongyah.github.io"
+url                      : "https://resources.docsimpo.work"
 baseurl                  : "/awesome-technical-writing-learning"
 repository               : "wongyah/awesome-technical-writing-learning"
 # teaser                   : path of fallback teaser image, e.g. "/assets/images/500x300.png"
 logo: "/assets/images/logo/[email protected]"
-# masthead_title           : overrides the website title displayed in the masthead, use " " for no title
+masthead_title           :  "docSimpo" # overrides the website title displayed in the masthead, use " " for no title
 # breadcrumbs            : false # true, false (default)
 # words_per_minute         : 200
 atom_feed:

diff --git a/_sass/custom.scss b/_sass/custom.scss
@@ -19,6 +19,9 @@
 @import "custom/footer";
 @import "custom/github-alerts";
 
+/* Utility classes */
+@import "custom/utilities";
+
 /* Layout specific */
 @import "custom/page";
 @import "custom/sidebar";
diff --git a/_sass/custom/_base.scss b/_sass/custom/_base.scss
@@ -11,8 +11,31 @@ h6 {
 
 h1 {
   margin-top: 0;
+  font-size: $h-size-2;
+
+  @include breakpoint($large) {
+    font-size: $h-size-1;
+  }
 }
 
+h2 {
+  font-size: $h-size-3;
+
+  @include breakpoint($large) {
+    font-size: $h-size-2;
+  }
+}
+
+h3 {
+  font-size: $h-size-4;
+
+  @include breakpoint($large) {
+    font-size: $h-size-3;
+  }
+}
+
+
+
 p {
   margin-bottom: 1.5em;
 }

diff --git a/_sass/custom/_navigation.scss b/_sass/custom/_navigation.scss
@@ -9,6 +9,10 @@
 .greedy-nav {
    background: $masthead-bg-color;
 
+   .hidden-links {
+      background: $masthead-bg-color;
+   }
+
    a {
       &.site-title {
          color: $masthead-site-title-color;

diff --git a/_sass/custom/_page.scss b/_sass/custom/_page.scss
@@ -2,6 +2,17 @@
    SINGLE PAGE/POST
    ========================================================================== */
 
+#main {
+  padding-left: 0;
+  padding-right: 0;
+
+  @include breakpoint($large) {
+    padding-left: 1em;
+    padding-right: 1em;
+
+  }
+}
+
 .page {
   @include breakpoint($large) {
     float: left;

diff --git a/_sass/custom/_utilities.scss b/_sass/custom/_utilities.scss
@@ -1,4 +1,20 @@
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
 
+/*
+   Visibility
+   ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.greedy-nav__toggle {
+  &:before {
+    @supports (pointer-events: none) {
+      background-color: #6699cc;
+    }
+  }
+}
 
 .fa-zhihu {
   color: $zhihu-color;

diff --git a/_site/CNAME b/_site/CNAME
@@ -0,0 +1 @@
+resources.docsimpo.work
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
@@ -1297,7 +1297,14 @@ html { /* apply a natural box layout model to all elements */ box-sizing: border
 
 h1, h2, h3, h4, h5, h6 { margin: 2em 0 0.5em; line-height: 1.5; font-weight: 500; }
 
-h1 { margin-top: 0; }
+h1 { margin-top: 0; font-size: 1.5em; }
+@media (min-width: 64em) { h1 { font-size: 2em; } }
+
+h2 { font-size: 1.25em; }
+@media (min-width: 64em) { h2 { font-size: 1.5em; } }
+
+h3 { font-size: 1.125em; }
+@media (min-width: 64em) { h3 { font-size: 1.25em; } }
 
 p { margin-bottom: 1.5em; }
 
@@ -1310,6 +1317,7 @@ a { text-decoration: none; }
 /* ========================================================================== NAVIGATION ========================================================================== */
 /* Priority plus navigation ========================================================================== */
 .greedy-nav { background: #6699cc; }
+.greedy-nav .hidden-links { background: #6699cc; }
 .greedy-nav a.site-title { color: #ffffff; }
 .greedy-nav .visible-links a { padding-top: 0.25em; padding-bottom: 0.25em; }
 .greedy-nav .visible-links a:before { height: 2px; background: #ffffff; }
@@ -1370,8 +1378,21 @@ a { text-decoration: none; }
 
 .octicon-warning { filter: invert(78%) sepia(17%) saturate(5107%) hue-rotate(350deg) brightness(85%) contrast(78%); }
 
+/* Utility classes */
+/* ========================================================================== UTILITY CLASSES ========================================================================== */
+/* Visibility ========================================================================== */
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+@supports (pointer-events: none) { .greedy-nav__toggle:before { background-color: #6699cc; } }
+
+.fa-zhihu { color: #1772f6; }
+
+.fa-weixin { color: #2aae67; }
+
 /* Layout specific */
 /* ========================================================================== SINGLE PAGE/POST ========================================================================== */
+#main { padding-left: 0; padding-right: 0; }
+@media (min-width: 64em) { #main { padding-left: 1em; padding-right: 1em; } }
+
 @media (min-width: 64em) { .page { float: left; } }
 
 .page__content { background-color: #fff; padding: 40px; border-radius: 2px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); }

diff --git a/_site/index.html b/_site/index.html
@@ -9,7 +9,7 @@
   <head>
     <meta charset="utf-8">
 
-<!-- begin _includes/seo.html --><title>docSimpo</title>
+<!-- begin _includes/seo.html --><title>docSimpo | Awesome Technical Writing Learning</title>
 <meta name="description" content="A curated list of awesome and free resources about technical writing.">
 
 
@@ -19,8 +19,8 @@
 
 <meta property="og:type" content="website">
 <meta property="og:locale" content="en_US">
-<meta property="og:site_name" content="docSimpo">
-<meta property="og:title" content="docSimpo">
+<meta property="og:site_name" content="docSimpo | Awesome Technical Writing Learning">
+<meta property="og:title" content="            docSimpo      Awesome Technical Writing Learning      ">
 <meta property="og:url" content="http://localhost:4000/awesome-technical-writing-learning/">