grid customizing added

README.md

@@ -272,7 +272,7 @@ Modern CSS grid is the easiest and cleanest way to layout your pages.
 
 The CSS grid layout are in `assets/sass/layout/_grid.scss`. A lot can be done by just reordering "grid-template-rows". 
 
-#### grid structure
+### grid structure
 
 |  left 	|  right 	|
 |---	|---	|
@@ -481,6 +481,28 @@ themeOptions = ["custom", "dark", ...]
 
 4. Once you change the font.toml file, restart hugo.
 
+```toml
+data/font.toml example
+
+search_placeholder = "'Montserrat', sans-serif"
+summary_title = "'Montserrat', sans-serif"
+summary_subtitle = "'Merriweather', serif"
+summary_text = "'Merriweather', serif"
+taxo_titie = "'Montserrat', sans-serif"
+footer_content = "'Montserrat', sans-serif"
+header_title = "'Montserrat', sans-serif"
+navbar_item = "'Montserrat', sans-serif"
+sidebar_title = "'Montserrat', sans-serif"
+sidebar_list = "inherit"
+page_not_found = "'Montserrat', sans-serif"
+gallery_contents = "'Merriweather', serif"
+list_title = "'Montserrat', sans-serif"
+list_desc = "'Merriweather', serif"
+single_title = "'Montserrat', sans-serif"
+single_contents = "'Merriweather', serif"
+
+```
+
 ### custom header
 
 You may want to change home page header. To do this, just make a file at layouts/partials/header/site-header.html
@@ -496,6 +518,29 @@ and edit this file. Don't forget adding grid class. That's it.
 {{ end }}
 ```
 
+### custom grid
+
+1. Make a grid.toml file in data folder. (data/grid.toml)
+
+2. Copy the contents of themes/zzo/data/grid.toml file and paste it into the grid.toml file you created above.
+
+3. Change the grid you want.
+
+4. Once you change the grid.toml file, restart hugo.
+
+```toml
+data/grid.toml example
+
+grid_max_width = "960px"
+grid_main_main_width = "5"
+grid_main_main_unit = "fr"
+grid_main_side_width = "2"
+grid_main_side_unit = "fr"
+grid_navbar_height = "50px"
+grid_column_gap = "1.5rem"
+grid_row_gap = "0"
+```
+
 ## Shortcodes
 
 ### warning

assets/sass/abstracts/_variables.scss

@@ -21,7 +21,4 @@ $breakpoints: (
   'xl': 1960px,
 );
 
-$max-width: 960px !default;
-$nav-height: 50px !default;
 $search-height: 35px !default;
-$main-main-width: 640px !default;

assets/sass/base/_helpers.scss

@@ -18,7 +18,7 @@
  * 3. Leave some space on the edges, especially valuable on small screens
  */
 .container {
-  max-width: $max-width; /* 1 */
+  max-width: 100%; /* 1 */
   margin-left: auto; /* 2 */
   margin-right: auto; /* 2 */
   width: 100%; /* 1 */

assets/sass/layout/_grid.scss

@@ -1,9 +1,14 @@
+$grid_main_main: $grid_main_main_width + $grid_main_main_unit;
+$grid_main_side: $grid_main_side_width + $grid_main_side_unit;
+
 .wrapper {
     display: grid;
-    grid-template-columns: minmax(350px, 5fr) minmax(0PX, 2fr);
+    max-width: $grid_max_width;
-    grid-template-rows: 50px auto 1fr auto;
+    justify-content: center;
-    grid-column-gap: 1.5rem;
+    grid-template-columns: minmax(350px, $grid_main_main) minmax(0PX, $grid_main_side);
-    grid-row-gap: 0px;
+    grid-template-rows: $grid_navbar_height auto 1fr auto;
+    grid-column-gap: $grid_column_gap;
+    grid-row-gap: $grid_row_gap;
 }
 
 .header-main {

assets/sass/layout/_header.scss

@@ -4,7 +4,6 @@
   @include flexbox();
   @include align-items(center);
   @include justify-content(center);
-  @include flex-direction(column);
 
   .title {
     font-family: $header_title_font;
@@ -13,7 +12,7 @@
 
   &__whoami {    
     @include flexbox();
-    @include flex-direction(column);
+    @include justify-content(center);
     @include align-items(center);
     width: 100%;
 

assets/sass/layout/_navigation.scss

@@ -2,7 +2,7 @@
   margin: auto;
   width: inherit;
   max-width: inherit;
-  height: $nav-height;
+  height: $grid_navbar_height;
   z-index: z('navbar');
   position: fixed;
   left: 0;
@@ -18,7 +18,7 @@
   }
 
   &--hide {
-    top: -$nav-height;
+    top: -$grid_navbar_height;
   }
 
   &--show {
@@ -29,7 +29,7 @@
     @include flexbox();
     @include align-items(center);
     @include flex-shrink(0);
-    height: $nav-height;
+    height: $grid_navbar_height;
   }
 
   &__burger {        
@@ -40,8 +40,8 @@
       cursor: pointer;
       margin-left: auto;
       position: relative;
-      height: $nav-height;    
+      height: $grid_navbar_height;    
-      width: $nav-height;
+      width: $grid_navbar_height;
 
       @include flexbox();
       @include align-items(center);
@@ -114,7 +114,7 @@
   }
 
   &__title {
-    height: $nav-height;
+    height: $grid_navbar_height;
     @include flexbox();
     @include align-items(center);    
     
@@ -134,7 +134,7 @@
     @include flexbox();
     @include align-items(center);
     @include justify-content(flex-end);
-    height: $nav-height;
+    height: $grid_navbar_height;
     position: relative;
     
     @include respond-to(sm) {
@@ -142,7 +142,7 @@
     }
 
     &-item {            
-      height: $nav-height;      
+      height: $grid_navbar_height;      
       padding: 0.5rem;
       font-size: 1rem;
       font-family: $navbar_item_font;
@@ -192,7 +192,7 @@
 
   &__dropdown {
     display: inline-block;
-    height: $nav-height;
+    height: $grid_navbar_height;
     @include respond-to(sm) {
       width: 100%;
       height: auto;

assets/sass/main.scss

@@ -1,7 +1,17 @@
 {{- partial "functions/parse_theme" . -}}
 {{- partial "functions/parse_fonts" . -}}
+{{- partial "functions/parse_grid" . -}}
 {{- $scr := .Scratch -}}
 
+$grid_max_width: {{ $scr.Get "grid_max_width" }};
+$grid_main_main_width: {{ $scr.Get "grid_main_main_width" }};
+$grid_main_main_unit: {{ $scr.Get "grid_main_main_unit" }};
+$grid_main_side_width: {{ $scr.Get "grid_main_side_width" }};
+$grid_main_side_unit: {{ $scr.Get "grid_main_side_unit" }};
+$grid_navbar_height: {{ $scr.Get "grid_navbar_height" }};
+$grid_column_gap: {{ $scr.Get "grid_column_gap" }};
+$grid_row_gap: {{ $scr.Get "grid_row_gap" }};
+
 $search_placeholder_font: {{ $scr.Get "search_placeholder" }};
 $summary_title_font: {{ $scr.Get "summary_title" }};
 $summary_subtitle_font: {{ $scr.Get "summary_subtitle" }};
@@ -127,7 +137,6 @@ $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
 @import 'layout/header';
 @import 'layout/footer';
 @import 'layout/sidebar';
-@import 'layout/forms';
 
 @import 'components/summary';
 @import 'components/toc';

data/grid.toml

@@ -0,0 +1,8 @@
+grid_max_width = "960px"
+grid_main_main_width = "5"
+grid_main_main_unit = "fr"
+grid_main_side_width = "2"
+grid_main_side_unit = "fr"
+grid_navbar_height = "50px"
+grid_column_gap = "1.5rem"
+grid_row_gap = "0"

layouts/partials/functions/parse_grid.html

@@ -0,0 +1,11 @@
+{{- $scr := .Scratch -}}
+{{ $grid := .Site.Data.grid }}
+
+{{- $scr.Set "grid_max_width" $grid.grid_max_width -}}
+{{- $scr.Set "grid_main_main_width" $grid.grid_main_main_width -}}
+{{- $scr.Set "grid_main_main_unit" $grid.grid_main_main_unit -}}
+{{- $scr.Set "grid_main_side_width" $grid.grid_main_side_width -}}
+{{- $scr.Set "grid_main_side_unit" $grid.grid_main_side_unit -}}
+{{- $scr.Set "grid_navbar_height" $grid.grid_navbar_height -}}
+{{- $scr.Set "grid_column_gap" $grid.grid_column_gap -}}
+{{- $scr.Set "grid_row_gap" $grid.grid_row_gap -}}