kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

grid customizing added

This commit is contained in:
zzossig 2019-11-11 23:44:13 +09:00
parent 0bb58171f9
commit bed930bd8d
10 changed files with 96 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.md
View File

@ -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

3
assets/sass/abstracts/_variables.scss
View File

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

2
assets/sass/base/_helpers.scss
View File

@ -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 */

0
assets/sass/layout/_forms.scss
View File

13
assets/sass/layout/_grid.scss
View File

@ -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 {

3
assets/sass/layout/_header.scss
View File

@ -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%;

18
assets/sass/layout/_navigation.scss
View File

@ -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;

11
assets/sass/main.scss
View File

@ -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';

8
data/grid.toml Normal file
View File

@ -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"

11
layouts/partials/functions/parse_grid.html Normal file
View File

@ -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 -}}