Implement FrostFS design version

Signed-off-by: Mikhail Petrov <m.petrov@yadro.com>

assets/css/style.css

@@ -1,3 +1,27 @@
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/WorkSans-Regular.eot);
+  src: url(../fonts/WorkSans-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Regular.woff) format("woff"), url(../fonts/WorkSans-Regular.ttf) format("truetype"), url(../fonts/WorkSans-Regular.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: bold;
+  src: url(../fonts/WorkSans-Bold.eot);
+  src: url(../fonts/WorkSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Bold.woff) format("woff"), url(../fonts/WorkSans-Bold.ttf) format("truetype"), url(../fonts/WorkSans-Bold.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/WorkSans-SemiBold.eot);
+  src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
+}
+
 body {
   line-height: 1.5;
   font-family: var(--font-family), sans-serif;
@@ -193,6 +217,7 @@ select:focus {
 .section-sm {
   padding-top: 60px;
   padding-bottom: 60px;
+  background: #fff;
 }
 
 @media (max-width: 768px) {
@@ -244,11 +269,12 @@ pre {
 }
 
 .bg-primary {
-  background: var(--primary-color) !important;
+  background: var(--bg-color) !important;
 }
 
 .bg-white {
   background-color: var(--white-color) !important;
+  font-weight: 400;
 }
 
 .bg-light {
@@ -276,7 +302,11 @@ pre {
 }
 
 .navbar {
-  padding: 0;
+  background: #fff;
+}
+
+.navbar img {
+  height: 34px;
 }
 
 .navbar-dark .navbar-toggler-icon {
@@ -289,15 +319,17 @@ pre {
   }
 }
 
+.navbar-brand {
+  padding: 0;
+}
+
 .navbar-brand img {
-  max-width: 100px;
   margin-bottom: 0;
 }
 
 .navbar .nav-item .nav-link {
-  text-transform: uppercase;
+  padding: 0.5rem 1rem !important;
-  padding: 10px 15px !important;
+  font-size: 16px;
-  font-size: 15px;
 }
 
 .navbar .dropdown:hover .dropdown-menu {
@@ -395,19 +427,28 @@ pre {
 
 .banner p {
   font-size: 20px;
-  opacity: .8;
+}
+
+.ti-github,
+.ti-twitter-alt {
+  font-size: 20px;
 }
 
 .banner .nav-link.text-dark {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }
 
 .banner .nav-link.text-dark:hover {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }
 
 .banner .navbar-brand {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
+}
+
+.copyright-container {
+  color: #939b9f;
+  font-weight: 600;
 }
 
 /* search */
@@ -498,10 +539,12 @@ pre {
   border-radius: 25px;
   border: 0;
   padding: 0 20px;
+  border: 1px solid #ced4da;
+  border-radius: 0;
 }
 
 .form-control:focus {
-  border: 0;
+  border-color: #ced4da;
   box-shadow: none !important;
 }
 
@@ -558,35 +601,25 @@ textarea.form-control {
   height: 8px;
   width: 8px;
   border-radius: 50%;
-  background: var(--primary-color);
+  background: #003;
-  opacity: .3;
   left: 0;
   top: 8px;
 }
 
 .list-styled li {
-  padding-left: 20px;
   position: relative;
 }
 
-.list-styled li::before {
-  position: absolute;
-  content: '';
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  opacity: .3;
-  left: 0;
-  top: 17px;
-}
-
 .post-meta {
   color: var(--text-color);
   font-style: italic;
   font-size: 14px;
 }
 
+.border-bottom {
+  border-bottom: 2px solid #003 !important;
+}
+
 blockquote {
   font-size: 20px !important;
   color: var(--text-color-dark);
@@ -607,6 +640,7 @@ blockquote p {
 
 .pagination a {
   color: var(--primary-color);
+  font-weight: 700;
 }
 
 .pagination i {
@@ -738,18 +772,38 @@ li.sidelist>a {
   margin-bottom: 10px;
   display: block;
   font-size: 20px;
+  font-weight: 700;
 }
 
 li.sidelist li a {
   margin: 0;
+  font-weight: 700;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+
+li.sidelist li a:hover {
+  color: var(--primary-color);
 }
 
 .sidelist li.sidelist {
   display: block;
 }
 
-.sidelist li.sidelist.active a {
+.sidelist i {
-  color: var(--primary-color);
+  display: none;
+}
+
+.sidelist li.sidelist.active>a {
+  border-left: 5px solid var(--primary-color);
+  background: #e9eeed;
+}
+
+.sidelist li.sidelist.active>a>i {
+  display: block;
 }
 
 .sidelist li.sidelist.active::before {
@@ -804,12 +858,11 @@ code {
   color: inherit;
   text-align: right;
   z-index: 1;
-  left: -5px;
+  left: -22px;
   top: -5px;
 }
 
 .ui-autocomplete-input {
-  border-bottom: 1px solid rgb(212, 212, 212) !important;
   padding-right: 50px;
 }
 
@@ -848,7 +901,7 @@ pre code::-webkit-scrollbar-thumb {
 
 /* content tabs */
 .code-tabs {
-  border: 1px solid #dee2e6;
+  border: 2px solid #003;
   overflow: hidden;
   margin: 20px 0px;
 }
@@ -866,9 +919,13 @@ pre code::-webkit-scrollbar-thumb {
   margin-bottom: 0;
 }
 
+.nav-tabs {
+  border-bottom: 2px solid #003;
+}
+
 .code-tabs .nav-tabs .nav-item {
   padding-left: 0;
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #003;
 }
 
 .code-tabs .nav-tabs .nav-item .nav-link {
@@ -876,6 +933,16 @@ pre code::-webkit-scrollbar-thumb {
   font-weight: 500;
   border: 0;
   margin-bottom: 0;
+  font-weight: 700;
+}
+
+table td,
+table th {
+  font-weight: 500;
+}
+
+.nav-tabs .nav-item {
+  margin-bottom: -2px;
 }
 
 .code-tabs .nav-tabs .nav-item::before {

exampleSite/config.toml

@@ -36,7 +36,7 @@ white_color = "#ffffff"
 light_color = "#f8f9fa"
 
 # font family
-font_family = "lato" # Choose font family from : https://fonts.google.com/
+font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
 
 # contact form action
 contact_form_action = "#" # contact form works with : https://formspree.io

exampleSite/content/installation/customization/_index.en.md

@@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
   # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
 ```

exampleSite/content/installation/customization/_index.fr.md

@@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
   # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
 ```

layouts/partials/default.html

@@ -2,7 +2,7 @@
 <section class="single section-sm pb-0">
   <div class="container">
     <div class="row">
-      <div class="col-lg-3">
+      <div class="col-lg-4">
         <div class="sidebar">
           <a
             class="back-btn"
@@ -10,25 +10,49 @@
             aria-label="back"
           ></a>
           <ul class="list-styled">
-            {{ $currentNode := . }} {{range .Site.Home.Sections.ByWeight}} {{ if
+            {{ $currentNode := . }}
-            eq .FirstSection $currentNode.FirstSection }} {{ template
+            {{range .Site.Home.Sections.ByWeight}}
-            "section-tree-nav" dict "sect" . "currentnode" $currentNode}} {{ end
+              {{ if eq .FirstSection $currentNode.FirstSection }}
-            }} {{ end }} {{ if .Content }} {{ if eq .Params.downloadBtn "true"
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
-            }}
+              {{ end }}
+            {{ end }}
+            {{ if .Content }}
+              {{ if eq .Params.downloadBtn "true" }}
               <div>
                 <button class="btn btn-primary btn-block" id="generatePDF">
                   Get Pdf
                 </button>
               </div>
-            {{ end }} {{ end }}
+              {{ end }}
+            {{ end }}
           </ul>
         </div>
       </div>
-      <div class="col-lg-9">
+      <div class="col-lg-8">
         <div class="p-lg-5 p-4 bg-white" id="content">
           <h2 class="mb-5" id="title">{{ .Title }}</h2>
           {{ if .Content }}
-          <div class="content">{{.Content}}</div>
+            <div class="content">
+              {{ if isset .Params "status" }}
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Category</th>
+                      <th>Authors</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th>{{ .Params.status }}</th>
+                      <th>{{ .Params.category }}</th>
+                      <th>{{ .Params.author }}</th>
+                    </tr>
+                  </tbody>
+                </table>
+              {{ end }}
+              {{.Content}}
+            </div>
           {{ else }}
           <div class="bg-light p-4">
             <ul class="page-list">
@@ -85,11 +109,19 @@
 <!-- /details page -->
 
 <!-- templates -->
-{{ define "section-tree-nav" }} {{ $showvisitedlinks := .showvisitedlinks }} {{
+{{ define "section-tree-nav" }}
-$currentNode := .currentnode }} {{with .sect}} {{safeHTML .Params.head}} {{
+  {{ $showvisitedlinks := .showvisitedlinks }}
-$fileUniqueID := "" }} {{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
+  {{ $currentNode := .currentnode }}
-{{ $currentNodeFileUniqueID := "" }} {{ with $currentNode.File }}{{
+  {{with .sect}}
-$currentNodeFileUniqueID = .UniqueID }}{{ end }}
+    {{safeHTML .Params.head}}
+    {{ $fileUniqueID := "" }}
+    {{ with .File }}
+      {{ $fileUniqueID = .UniqueID }}
+    {{ end }}
+    {{ $currentNodeFileUniqueID := "" }}
+    {{ with $currentNode.File }}
+      {{ $currentNodeFileUniqueID = .UniqueID }}
+    {{ end }}
     <li
       data-nav-id="{{.Permalink}}"
       title="{{.Title}}"
@@ -97,16 +129,30 @@ $currentNodeFileUniqueID = .UniqueID }}{{ end }}
       {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}"
     >
       <a href="{{.Permalink}}">
-    {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML
+        {{ safeHTML .Params.Pre }}
-    .Params.Post}}
+          {{ or .Params.menuTitle .LinkTitle .Title }}
+        {{ safeHTML .Params.Post }}
+        <i class="ti-angle-right"></i>
       </a>
-  {{ $numberOfPages := (add (len .Pages) (len .Sections)) }} {{ if ne
+      {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
-  $numberOfPages 0 }}
+      {{ if ne $numberOfPages 0 }}
         <ul>
-    {{ range .Pages.ByWeight }} {{ if and .Params.hidden (not $.showhidden) }}
+          {{ $currentNodePath := split $currentNode.File "/" }}
-    {{else}} {{ template "section-tree-nav" dict "sect" . "currentnode"
+          {{ $folderName := (index $currentNodePath 1) }}
-    $currentNode }} {{end}} {{end}}
+          {{ if gt (len (findRE ".md" $folderName)) 0 }}
+              {{ $folderName = "Others" }}
+          {{ end }}
+
+          {{ range .Pages.ByWeight }}
+            {{ if eq (isset .Page.Params "status") false }}
+              {{ if and .Params.hidden (not $.showhidden) }}
+              {{else}}
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
+              {{end}}
+            {{end}}
+          {{end}}
         </ul>
       {{ end }}
     </li>
-{{ end }} {{ end }}
+  {{ end }}
+{{ end }}

layouts/partials/footer.html

@@ -3,7 +3,7 @@
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-8 text-md-left text-center">
-        <p class="mb-md-0 mb-4">{{ .Site.Params.copyright | markdownify }}</p>
+        <p class="mb-md-0 mb-4 copyright-container">{{ .Site.Params.copyright | markdownify }}</p>
       </div>
       <div class="col-md-4 text-md-right text-center">
         <ul class="list-inline">

layouts/partials/head.html

@@ -28,12 +28,6 @@
     type="image/x-icon"
   />
 
-  <!-- fonts -->
-  <link
-    href="https://fonts.googleapis.com/css?family={{replace .Site.Params.font_family ' ' '+' | title}}:300,400,700&display=swap"
-    rel="stylesheet"
-  />
-
   <!-- PDF.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
@@ -42,6 +36,7 @@
     :root{
       --primary-color:{{ .Site.Params.primary_color }};
       --body-color:{{ .Site.Params.body_color }};
+      --bg-color:{{ .Site.Params.bg_color }};
       --text-color:{{ .Site.Params.text_color }};
       --text-color-dark:{{ .Site.Params.text_color_dark }};
       --white-color:{{ .Site.Params.white_color }};

layouts/partials/navigation.html

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-md {{ if .IsHome }}navbar-dark{{ else }}navbar-light{{ end }}">
   <div class="container px-2 px-md-0">
-    <a class="navbar-brand px-2" href="{{ site.BaseURL | relLangURL }}">
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
       {{ $logo:= site.Params.logo }}
       {{ $logoWhite:= site.Params.logo_white }}
       {{ if (or $logo $logoWhite) }}