From bed930bd8da5f44b705a351cf50730d07a03dba6 Mon Sep 17 00:00:00 2001 From: zzossig Date: Mon, 11 Nov 2019 23:44:13 +0900 Subject: [PATCH] grid customizing added --- README.md | 47 +++++++++++++++++++++- assets/sass/abstracts/_variables.scss | 5 +-- assets/sass/base/_helpers.scss | 2 +- assets/sass/layout/_forms.scss | 0 assets/sass/layout/_grid.scss | 13 ++++-- assets/sass/layout/_header.scss | 3 +- assets/sass/layout/_navigation.scss | 18 ++++----- assets/sass/main.scss | 11 ++++- data/grid.toml | 8 ++++ layouts/partials/functions/parse_grid.html | 11 +++++ 10 files changed, 96 insertions(+), 22 deletions(-) delete mode 100644 assets/sass/layout/_forms.scss create mode 100644 data/grid.toml create mode 100644 layouts/partials/functions/parse_grid.html diff --git a/README.md b/README.md index 397404a..43a50cd 100644 --- a/README.md +++ b/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 diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss index 8026826..a42d18e 100644 --- a/assets/sass/abstracts/_variables.scss +++ b/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; \ No newline at end of file +$search-height: 35px !default; \ No newline at end of file diff --git a/assets/sass/base/_helpers.scss b/assets/sass/base/_helpers.scss index 03c0ad6..8679b8b 100644 --- a/assets/sass/base/_helpers.scss +++ b/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 */ diff --git a/assets/sass/layout/_forms.scss b/assets/sass/layout/_forms.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/sass/layout/_grid.scss b/assets/sass/layout/_grid.scss index 883bf70..9f8a6f9 100644 --- a/assets/sass/layout/_grid.scss +++ b/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); - grid-template-rows: 50px auto 1fr auto; - grid-column-gap: 1.5rem; - grid-row-gap: 0px; + max-width: $grid_max_width; + justify-content: center; + grid-template-columns: minmax(350px, $grid_main_main) minmax(0PX, $grid_main_side); + grid-template-rows: $grid_navbar_height auto 1fr auto; + grid-column-gap: $grid_column_gap; + grid-row-gap: $grid_row_gap; } .header-main { diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index 188d7dc..cf5e339 100644 --- a/assets/sass/layout/_header.scss +++ b/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%; diff --git a/assets/sass/layout/_navigation.scss b/assets/sass/layout/_navigation.scss index 2861056..b66ea06 100644 --- a/assets/sass/layout/_navigation.scss +++ b/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; - width: $nav-height; + height: $grid_navbar_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; diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 7597bce..66a9687 100644 --- a/assets/sass/main.scss +++ b/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'; diff --git a/data/grid.toml b/data/grid.toml new file mode 100644 index 0000000..d1b701e --- /dev/null +++ b/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" \ No newline at end of file diff --git a/layouts/partials/functions/parse_grid.html b/layouts/partials/functions/parse_grid.html new file mode 100644 index 0000000..6325d4b --- /dev/null +++ b/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 -}} \ No newline at end of file