modified responsive and color variables

assets/css/style.css

@@ -4,7 +4,7 @@ body {
   -webkit-font-smoothing: antialiased;
   font-size: 17px;
   color: var(--text-color);
-  background-color: var(--secondary-color);
+  background-color: var(--body-color);
 }
 
 P {
@@ -98,24 +98,6 @@ h6,
   border-color: var(--primary-color);
 }
 
-.btn-default {
-  color: #333 !important;
-  background-color: #fff !important;
-  border: 1px solid #ccc !important;
-  display: inline-block !important;
-  padding: 6px 12px !important;
-  margin-bottom: 0 !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  line-height: 1.42857143 !important;
-  text-align: center !important;
-  white-space: nowrap !important;
-  vertical-align: middle !important;
-  -ms-touch-action: manipulation !important;
-  touch-action: manipulation !important;
-  border-radius: 4px !important;
-}
-
 .inline-button {
   line-height: .8rem !important;
   padding: 5px 8px !important;
@@ -123,9 +105,8 @@ h6,
   margin-top: -5px;
 }
 
-body {
+.overflow-hidden{
-  background-color: var(--white-color);
+  overflow: hidden !important;
-  overflow-x: hidden;
 }
 
 ::-moz-selection {
@@ -234,7 +215,6 @@ select:focus {
 
 pre {
   padding: 20px;
-  background: var(--secondary-color);
   border-radius: 2px;
 }
 
@@ -266,8 +246,12 @@ pre {
   background: var(--primary-color) !important;
 }
 
-.bg-gray {
+.bg-white {
-  background-color: var(--secondary-color);
+  background-color: var(--white-color) !important;
+}
+
+.bg-light {
+  background-color: var(--light-color) !important;
 }
 
 .text-primary {
@@ -275,7 +259,7 @@ pre {
 }
 
 .text-color {
-  color: var(--text-color);
+  color: var(--text-color) !important;
 }
 
 .text-dark {
@@ -651,7 +635,7 @@ blockquote {
   border-left: 2px solid var(--primary-color);
   margin: 40px 0;
   font-weight: bold;
-  background: #f9f9f9;
+  background: var(--light-color);
 }
 
 blockquote p {

exampleSite/config.toml

@@ -8,44 +8,6 @@ title = "Dot"
 # desable language
 disableLanguages = []
 
-############################# Default Parameters ##########################
-[params]
-# logo is for all page
-logo = ""
-# logo white is for homepage logo, you can use colorful logo too...
-logo_white = ""
-# when logo is empty, it will shown your site title
-
-# customize color
-primary_color = "#02007e"
-secondary_color = "#f9f9f9"
-text_color = "#636363"
-text_color_dark = "#242738"
-white_color = "#ffffff"
-
-# font family
-font_family = "lato" # Choose font family from : https://fonts.google.com/
-
-# contact form action
-contact_form_action = "#" # contact form works with : https://formspree.io
-
-############################## social links ##############################
-[[params.social]]
-icon = "ti-facebook" # themify icon pack : https://themify.me/themify-icons
-link = "#"
-
-[[params.social]]
-icon = "ti-twitter-alt" # themify icon pack : https://themify.me/themify-icons
-link = "#"
-  
-[[params.social]]
-icon = "ti-vimeo-alt" # themify icon pack : https://themify.me/themify-icons
-link = "#"
-  
-[[params.social]]
-icon = "ti-linkedin" # themify icon pack : https://themify.me/themify-icons
-link = "#"
-
 
 ################################# navigation ################################
 [[menu.main]]
@@ -82,6 +44,47 @@ hasChildren = true
   url = "features"
   weight = 3
 
+
+############################# Default Parameters ##########################
+[params]
+# logo is for all page
+logo = ""
+# logo white is for homepage logo, you can use colorful logo too...
+logo_white = ""
+# when logo is empty, it will shown your site title
+
+# customize color
+primary_color = "#02007e"
+body_color = "#f9f9f9"
+text_color = "#636363"
+text_color_dark = "#242738"
+white_color = "#ffffff"
+light_color = "#f8f9fa"
+
+# font family
+font_family = "lato" # Choose font family from : https://fonts.google.com/
+
+# contact form action
+contact_form_action = "#" # contact form works with : https://formspree.io
+
+
+############################## social links ##############################
+[[params.social]]
+icon = "ti-facebook" # themify icon pack : https://themify.me/themify-icons
+link = "#"
+
+[[params.social]]
+icon = "ti-twitter-alt" # themify icon pack : https://themify.me/themify-icons
+link = "#"
+  
+[[params.social]]
+icon = "ti-vimeo-alt" # themify icon pack : https://themify.me/themify-icons
+link = "#"
+  
+[[params.social]]
+icon = "ti-linkedin" # themify icon pack : https://themify.me/themify-icons
+link = "#"
+
 ################################ English Language ######################
 [Languages.en]
 languageName = "En"
@@ -93,7 +96,7 @@ copyright = "The Hugo Documents are copyright © [gethugothemes](https://gethugo
 # banner
 [Languages.en.params.banner]
 title = "Support Center & Knowledge base"
-description = "Find advice and answers from our support team fast or get in touch"
+subtitle = "Find advice and answers from our support team fast or get in touch"
 bg_image = "images/banner.jpg"
 placeholder = "Have a question? Just ask here or enter terms"
 
@@ -101,7 +104,8 @@ placeholder = "Have a question? Just ask here or enter terms"
 [Languages.en.params.cta]
 enable = true
 title = "Didn't find an answer to your question?"
-description = "Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam."
+content = "Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam."
+# call to action button
 [Languages.en.params.cta.button]
 enable = true
 label = "contact us"
@@ -119,7 +123,7 @@ copyright = "Les documents Hugo sont sous copyright © [gethugothemes](https://g
 # banner
 [Languages.fr.params.banner]
 title = "Comment pouvons nous aider?"
-description = "Trouvez rapidement des conseils et des réponses auprès de notre équipe d'assistance ou contactez-nous."
+subtitle = "Trouvez rapidement des conseils et des réponses auprès de notre équipe d'assistance ou contactez-nous."
 bg_image = "images/banner.jpg"
 placeholder = "Avoir une question? Il suffit de demander ici ou de saisir les termes"
 
@@ -127,7 +131,8 @@ placeholder = "Avoir une question? Il suffit de demander ici ou de saisir les te
 [Languages.fr.params.cta]
 enable = true
 title = "Vous n'avez pas trouvé de réponse à votre question?"
-description = "Contactez-nous pour plus de détails sur les services supplémentaires et la tarification du travail personnalisé"
+content = "Contactez-nous pour plus de détails sur les services supplémentaires et la tarification du travail personnalisé"
+# call to action button
 [Languages.fr.params.cta.button]
 enable = true
 label = "Contactez nous"

layouts/_default/baseof.html

@@ -17,9 +17,7 @@
     </header>
     {{ "<!-- /header -->" | safeHTML }}
     {{ end }}
-    <div id="content">
+    {{ block "main" . }}{{ end }}
-      {{ block "main" . }}{{ end }}
-    </div>
     {{ partial "footer.html" . }}
   </body>
 

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
   {{ "<!-- topics -->" | safeHTML }}
-  <section class="section bg-gray">
+  <section class="section">
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-12 text-center">
@@ -23,16 +23,19 @@
   {{ "<!-- /topics -->" | safeHTML }}
 
   {{ if .Site.Params.cta.enable }}
+  {{ with .Site.Params.cta }}
   {{ "<!-- call to action -->" | safeHTML }}
-  <section class="bg-gray">
+  <section>
     <div class="container">
       <div class="row">
         <div class="col-12">
-          <div class="section bg-white shadow text-center">
+          <div class="section px-3 bg-white shadow text-center">
-          {{ with .Site.Params.cta.title }}<h2 class="mb-4">{{ . }}</h2>{{ end }}
+          <h2 class="mb-4">{{ .title | markdownify }}</h2>
-          {{ with .Site.Params.cta.description }}<p class="mb-4">{{ . }}</p>{{ end }}
+          <p class="mb-4">{{ .content | markdownify }}</p>
-          {{ if .Site.Params.cta.button.enable }}
+          {{ if .button.enable }}
-          <a href="{{ .Site.Params.cta.button.link | relLangURL }}" class="btn btn-primary">{{ .Site.Params.cta.button.label}}</a>
+          {{ with .button }}
+          <a href="{{ .link | relLangURL }}" class="btn btn-primary">{{ .label }}</a>
+          {{ end }}
           {{ end }}
           </div>
         </div>
@@ -41,5 +44,6 @@
   </section>
   {{ "<!-- /call to action -->" | safeHTML }}
   {{ end }}
+  {{ end }}
 
 {{ end }}

layouts/partials/banner.html

@@ -3,7 +3,7 @@
 	<div class="row">
 		<div class="col-lg-8 text-center mx-auto">
 			<h1 class="text-white mb-3">{{ .Site.Params.banner.title | markdownify }}</h1>
-			<p class="text-white mb-4">{{ .Site.Params.banner.description | markdownify }}</p>
+			<p class="text-white mb-4">{{ .Site.Params.banner.subtitle | markdownify }}</p>
 			<div class="position-relative">
 				<input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
 

layouts/partials/default.html

@@ -1,9 +1,9 @@
 {{ "<!-- details page -->" | safeHTML }}
-<section class="single section bg-gray pb-0">
+<section class="single section pb-0">
   <div class="container">
     <div class="row">
       <div class="col-lg-3">
-        <div class="mb-5 bg-white p-4 sticky-top top-100">
+        <div class="bg-white pl-lg-4 py-4 pr-4 mb-5 sticky-top top-100 overflow-hidden">
           <ul class="list-styled">
             {{ $currentNode := . }}
             <a class="d-block h4 back-btn" href="{{ .Site.BaseURL | relLangURL }}">{{ i18n "Back-home"}}</a>
@@ -14,12 +14,12 @@
         </div>
       </div>
       <div class="col-lg-9">
-        <div class="p-5 bg-white">
+        <div class="p-lg-5 p-4 bg-white">
           <h2 class="mb-5">{{ .Title }}</h2>
           {{ if .Content }}
           <div class="content">{{.Content}}</div>
           {{ else }}
-          <div class="bg-gray p-4">
+          <div class="bg-light p-4">
             <ul class="page-list">
               {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
             </ul>

layouts/partials/head.html

@@ -26,10 +26,11 @@
   <style>
   :root{
     --primary-color:{{ .Site.Params.primary_color }};
-    --secondary-color:{{ .Site.Params.secondary_color }};
+    --body-color:{{ .Site.Params.body_color }};
     --text-color:{{ .Site.Params.text_color }};
     --text-color-dark:{{ .Site.Params.text_color_dark }};
     --white-color:{{ .Site.Params.white_color }};
+    --light-color:{{ .Site.Params.light_color }};
     --font-family:{{ replace .Site.Params.font_family ' ' '+' | title }};
   }
   </style>