├── exampleSite ├── content │ └── .gitkeep ├── archetypes │ └── .gitkeep ├── static │ ├── images │ │ ├── full │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ └── 5.png │ │ └── thumbs │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ └── 5.png │ ├── css │ │ ├── default.css │ │ └── component.css │ └── js │ │ └── modernizr.custom.js ├── config.toml └── data │ └── items.toml ├── layouts ├── _default │ ├── list.html │ └── single.html ├── partials │ ├── footer.html │ ├── header.html │ ├── head.html │ └── scripts.html └── index.html ├── archetypes └── default.md ├── images ├── tn.png └── screenshot.png ├── static ├── images │ ├── full │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png │ └── thumbs │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png ├── css │ ├── default.css │ └── component.css └── js │ └── modernizr.custom.js ├── theme.toml ├── LICENSE.md └── README.md /exampleSite/content/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | +++ 2 | +++ -------------------------------------------------------------------------------- /exampleSite/archetypes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/images/tn.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /static/images/full/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/full/1.png -------------------------------------------------------------------------------- /static/images/full/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/full/2.png -------------------------------------------------------------------------------- /static/images/full/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/full/3.png -------------------------------------------------------------------------------- /static/images/full/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/full/4.png -------------------------------------------------------------------------------- /static/images/full/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/full/5.png -------------------------------------------------------------------------------- /static/images/thumbs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/thumbs/1.png -------------------------------------------------------------------------------- /static/images/thumbs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/thumbs/2.png -------------------------------------------------------------------------------- /static/images/thumbs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/thumbs/3.png -------------------------------------------------------------------------------- /static/images/thumbs/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/thumbs/4.png -------------------------------------------------------------------------------- /static/images/thumbs/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/static/images/thumbs/5.png -------------------------------------------------------------------------------- /exampleSite/static/images/full/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/full/1.png -------------------------------------------------------------------------------- /exampleSite/static/images/full/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/full/2.png -------------------------------------------------------------------------------- /exampleSite/static/images/full/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/full/3.png -------------------------------------------------------------------------------- /exampleSite/static/images/full/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/full/4.png -------------------------------------------------------------------------------- /exampleSite/static/images/full/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/full/5.png -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /exampleSite/static/images/thumbs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/thumbs/1.png -------------------------------------------------------------------------------- /exampleSite/static/images/thumbs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/thumbs/2.png -------------------------------------------------------------------------------- /exampleSite/static/images/thumbs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/thumbs/3.png -------------------------------------------------------------------------------- /exampleSite/static/images/thumbs/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/thumbs/4.png -------------------------------------------------------------------------------- /exampleSite/static/images/thumbs/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aerohub/hugrid/HEAD/exampleSite/static/images/thumbs/5.png -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 |

{{ with .Site.Params.title }}{{ . | markdownify }}{{ end }}{{ with .Site.Params.subtitle }}{{ . | markdownify }}{{ end }}

3 |
-------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | {{ template "_internal/google_analytics.html" . }} 6 | 7 | 8 |
9 | {{ partial "header.html" . }} 10 |
11 | 20 | {{ partial "footer.html" . }} 21 |
22 |
23 | {{ partial "scripts.html" . }} 24 | 25 | -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | name = "Hugrid" 2 | license = "MIT License" #original Codrops Lisense is here http://tympanus.net/codrops/licensing/ 3 | licenselink = "//github.com/aerohub/hugrid/blob/master/LICENSE.md" 4 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly." 5 | homepage = "//github.com/aerohub/hugrid" 6 | tags = ["responsive", "grid", "portfolio", "cards", "simple", "collections", "google analytics"] 7 | min_version = 0.15 8 | 9 | [author] 10 | name = "Pavel Kanyshev" 11 | homepage = "//github.com/aerohub/hugrid" 12 | 13 | # If porting an existing theme 14 | [original] 15 | name = "Codrops' Thumbnail Grid with Expanding Preview" 16 | homepage = "http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/" 17 | repo = "//github.com/codrops/ThumbnailGridExpandingPreview" -------------------------------------------------------------------------------- /layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ .Site.Title }} 5 | 6 | 7 | 8 | 9 | {{ .Hugo.Generator }} 10 | 16 | 17 | 18 | {{ range .Site.Params.custom_css }} 19 | 20 | {{ end }} 21 | 22 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 [Pavel Kanyshev](https://github.com/aerohub) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | # Site settings 2 | baseurl = "http://example.org/" 3 | languageCode = "en-us" 4 | title = "Hugrid - Grid Theme For Hugo" 5 | theme = "hugrid" 6 | # Enter your tracking code to enable Google Analytics 7 | googleAnalytics = "UA-XXXXXXXX-Y" 8 | 9 | contentdir = "content" 10 | datadir = "data" 11 | layoutdir = "layouts" 12 | publishdir = "public" 13 | 14 | [params] 15 | # Meta 16 | title = "Hugrid - a simple grid theme for Hugo" 17 | subtitle = "A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 18 | author = "Pavel Kanyshev" 19 | description = "Hugrid - grid theme for Hugo with an expanding image preview." 20 | keywords = "Hugo, Hugo theme, grid theme, portfolio, bookmarks, collection, contacts" 21 | 22 | # Body background color 23 | bodybgcolor = "#f9f9f9" 24 | 25 | # Preview container button text 26 | buttontext = "Get the theme" 27 | 28 | # Footer text 29 | footertext = "Made by [Codrops](http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/), [Hugo](http://gohugo.io) and [me](https://github.com/aerohub)" 30 | 31 | # add extra-css 32 | # custom_css = ['css/extra1.css', 'css/extra2.css'] 33 | -------------------------------------------------------------------------------- /static/css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(//fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | html { height: 100%; } 5 | 6 | *, 7 | *:after, 8 | *:before { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | .clearfix:before, 18 | .clearfix:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | .clearfix:after { 24 | clear: both; 25 | } 26 | 27 | .clearfix { 28 | *zoom: 1; 29 | } 30 | 31 | body { 32 | font-family: 'Lato', Calibri, Arial, sans-serif; 33 | font-weight: 300; 34 | font-size: 15px; 35 | color: #333; 36 | overflow: scroll; 37 | overflow-x: hidden; 38 | } 39 | 40 | a { 41 | color: #555; 42 | text-decoration: none; 43 | } 44 | 45 | .container { 46 | width: 100%; 47 | position: relative; 48 | } 49 | 50 | .container > header { 51 | width: 90%; 52 | max-width: 1240px; 53 | margin: 0 auto; 54 | position: relative; 55 | padding: 0 30px 50px 30px; 56 | } 57 | 58 | .container > header { 59 | padding: 60px 30px 50px; 60 | text-align: center; 61 | } 62 | 63 | .container > header h1 { 64 | font-size: 34px; 65 | line-height: 38px; 66 | margin: 0 auto; 67 | font-weight: 700; 68 | color: #333; 69 | } 70 | 71 | .container > header h1 span { 72 | display: block; 73 | font-size: 20px; 74 | font-weight: 300; 75 | } 76 | 77 | .main > p { 78 | text-align: center; 79 | padding: 50px 20px; 80 | } 81 | -------------------------------------------------------------------------------- /exampleSite/static/css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | html { height: 100%; } 5 | 6 | *, 7 | *:after, 8 | *:before { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | .clearfix:before, 18 | .clearfix:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | .clearfix:after { 24 | clear: both; 25 | } 26 | 27 | .clearfix { 28 | *zoom: 1; 29 | } 30 | 31 | body { 32 | font-family: 'Lato', Calibri, Arial, sans-serif; 33 | font-weight: 300; 34 | font-size: 15px; 35 | color: #333; 36 | overflow: scroll; 37 | overflow-x: hidden; 38 | } 39 | 40 | a { 41 | color: #555; 42 | text-decoration: none; 43 | } 44 | 45 | .container { 46 | width: 100%; 47 | position: relative; 48 | } 49 | 50 | .container > header { 51 | width: 90%; 52 | max-width: 1240px; 53 | margin: 0 auto; 54 | position: relative; 55 | padding: 0 30px 50px 30px; 56 | } 57 | 58 | .container > header { 59 | padding: 60px 30px 50px; 60 | text-align: center; 61 | } 62 | 63 | .container > header h1 { 64 | font-size: 34px; 65 | line-height: 38px; 66 | margin: 0 auto; 67 | font-weight: 700; 68 | color: #333; 69 | } 70 | 71 | .container > header h1 span { 72 | display: block; 73 | font-size: 20px; 74 | font-weight: 300; 75 | } 76 | 77 | .main > p { 78 | text-align: center; 79 | padding: 50px 20px; 80 | } 81 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hugrid 2 | 3 | Hugrid (Hugo+grid) is a simple grid theme for Hugo. It's a kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on. 4 | 5 | # Origin 6 | 7 | Hugrid is based on Codrops' [Thumbnail Grid with Expanding Preview](http://tympanus.net/codrops/?p=14530). 8 | 9 | ## Demo 10 | 11 | - [Demo on themes.gohugo.io](http://themes.gohugo.io/theme/hugrid/) 12 | - [Original demo from Codrops](http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/) 13 | 14 | ## Features 15 | 16 | - Responsive design 17 | - Google Analytics 18 | 19 | ## Screenshot 20 | 21 | ![Hugrid screenshot](https://raw.githubusercontent.com/aerohub/hugrid/master/images/screenshot.png) 22 | 23 | 24 | ## Contents 25 | 26 | - [Installation](#installation) 27 | - [Getting started](#getting-started) 28 | - [The config file](#the-config-file) 29 | - [Data file](#data-file) 30 | - [Nearly finished](#nearly-finished) 31 | - [Contributing](#contributing) 32 | - [License](#license) 33 | - [Annotations](#annotations) 34 | 35 | 36 | ## Installation 37 | 38 | Inside the folder of your new Hugo site run: 39 | 40 | $ mkdir themes 41 | $ cd themes 42 | $ git clone https://github.com/aerohub/hugrid 43 | 44 | For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo. 45 | 46 | 47 | ## Getting started 48 | 49 | After installing the theme successfully it requires a just a few more steps to get your site running. 50 | 51 | 52 | ### The config file 53 | 54 | Take a look inside the [`exampleSite`](//github.com/aerohub/hugrid/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/config.toml). To use it, copy the [`config.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change the strings in this theme. 55 | 56 | ### Data file 57 | 58 | Take a look inside the [`exampleSite/data`](//github.com/aerohub/hugrid/tree/master/exampleSite/data) folder of this theme. You'll find a file called [`items.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/data/items.toml). To use it, copy the [`exampleSite/data`](//github.com/aerohub/hugrid/tree/master/exampleSite/data) folder in the root folder of your Hugo site. Change the strings in the `items.toml` with your data. 59 | 60 | ### Nearly finished 61 | 62 | In order to see your site in action, run Hugo's built-in local server. 63 | 64 | $ hugo server -w 65 | 66 | Now enter `localhost:1313` in the address bar of your browser. 67 | 68 | 69 | ## Contributing 70 | 71 | Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](//github.com/aerohub/hugrid/issues) to let me know. Or make directly a [pull request](//github.com/aerohub/hugrid/pulls). 72 | 73 | 74 | ## License 75 | 76 | This work is licensed under the MIT License. For more information read the [License](//github.com/aerohub/hugrid/blob/master/LICENSE.md). 77 | And there are [Original Codrops Licensing and Terms Of Use](http://tympanus.net/codrops/licensing/). 78 | 79 | 80 | ## Annotations 81 | 82 | Thanks 83 | 84 | - to [spf13](//github.com/spf13) for creating Hugo and the awesome community around the project 85 | - to [digitalcraftsman](//github.com/digitalcraftsman) for creating Hugo themes and writing nice READMEs 86 | - to Codrops for original [Thumbnail Grid with Expanding Preview](http://tympanus.net/codrops/?p=14530). -------------------------------------------------------------------------------- /static/css/component.css: -------------------------------------------------------------------------------- 1 | .og-grid { 2 | list-style: none; 3 | padding: 20px 0; 4 | margin: 0 auto; 5 | text-align: center; 6 | width: 100%; 7 | } 8 | 9 | .og-grid li { 10 | display: inline-block; 11 | margin: 10px 5px 0 5px; 12 | vertical-align: top; 13 | height: 250px; 14 | } 15 | 16 | .og-grid li > a, 17 | .og-grid li > a img { 18 | border: none; 19 | outline: none; 20 | display: block; 21 | position: relative; 22 | } 23 | 24 | .og-grid li.og-expanded > a::after { 25 | top: auto; 26 | border: solid transparent; 27 | content: " "; 28 | height: 0; 29 | width: 0; 30 | position: absolute; 31 | pointer-events: none; 32 | border-bottom-color: #ddd; 33 | border-width: 15px; 34 | left: 50%; 35 | margin: -20px 0 0 -15px; 36 | } 37 | 38 | .og-expander { 39 | position: absolute; 40 | background: #ddd; 41 | top: auto; 42 | left: 0; 43 | width: 100%; 44 | margin-top: 10px; 45 | text-align: left; 46 | height: 0; 47 | overflow: hidden; 48 | } 49 | 50 | .og-expander-inner { 51 | padding: 50px 30px; 52 | height: 100%; 53 | } 54 | 55 | .og-close { 56 | position: absolute; 57 | width: 40px; 58 | height: 40px; 59 | top: 20px; 60 | right: 20px; 61 | cursor: pointer; 62 | } 63 | 64 | .og-close::before, 65 | .og-close::after { 66 | content: ''; 67 | position: absolute; 68 | width: 100%; 69 | top: 50%; 70 | height: 1px; 71 | background: #888; 72 | -webkit-transform: rotate(45deg); 73 | -moz-transform: rotate(45deg); 74 | transform: rotate(45deg); 75 | } 76 | 77 | .og-close::after { 78 | -webkit-transform: rotate(-45deg); 79 | -moz-transform: rotate(-45deg); 80 | transform: rotate(-45deg); 81 | } 82 | 83 | .og-close:hover::before, 84 | .og-close:hover::after { 85 | background: #333; 86 | } 87 | 88 | .og-fullimg, 89 | .og-details { 90 | width: 50%; 91 | float: left; 92 | height: 100%; 93 | overflow: hidden; 94 | position: relative; 95 | } 96 | 97 | .og-details { 98 | padding: 0 40px 0 20px; 99 | } 100 | 101 | .og-fullimg { 102 | text-align: center; 103 | } 104 | 105 | .og-fullimg img { 106 | display: inline-block; 107 | max-height: 100%; 108 | max-width: 100%; 109 | } 110 | 111 | .og-details h3 { 112 | font-weight: 300; 113 | font-size: 52px; 114 | padding: 40px 0 10px; 115 | margin-bottom: 10px; 116 | } 117 | 118 | .og-details p { 119 | font-weight: 400; 120 | font-size: 16px; 121 | line-height: 22px; 122 | color: #999; 123 | } 124 | 125 | .og-details a { 126 | font-weight: 700; 127 | font-size: 16px; 128 | color: #333; 129 | text-transform: uppercase; 130 | letter-spacing: 2px; 131 | padding: 10px 20px; 132 | border: 3px solid #333; 133 | display: inline-block; 134 | margin: 30px 0 0; 135 | outline: none; 136 | } 137 | 138 | .og-details a::before { 139 | content: '\2192'; 140 | display: inline-block; 141 | margin-right: 10px; 142 | } 143 | 144 | .og-details a:hover { 145 | border-color: #999; 146 | color: #999; 147 | } 148 | 149 | .og-loading { 150 | width: 20px; 151 | height: 20px; 152 | border-radius: 50%; 153 | background: #ddd; 154 | box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; 155 | position: absolute; 156 | top: 50%; 157 | left: 50%; 158 | margin: -25px 0 0 -25px; 159 | -webkit-animation: loader 0.5s infinite ease-in-out both; 160 | -moz-animation: loader 0.5s infinite ease-in-out both; 161 | animation: loader 0.5s infinite ease-in-out both; 162 | } 163 | 164 | @-webkit-keyframes loader { 165 | 0% { background: #ddd; } 166 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 167 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 168 | } 169 | 170 | @-moz-keyframes loader { 171 | 0% { background: #ddd; } 172 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 173 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 174 | } 175 | 176 | @keyframes loader { 177 | 0% { background: #ddd; } 178 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 179 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 180 | } 181 | 182 | @media screen and (max-width: 830px) { 183 | 184 | .og-expander h3 { font-size: 32px; } 185 | .og-expander p { font-size: 13px; } 186 | .og-expander a { font-size: 12px; } 187 | 188 | } 189 | 190 | @media screen and (max-width: 650px) { 191 | 192 | .og-fullimg { display: none; } 193 | .og-details { float: none; width: 100%; } 194 | 195 | } -------------------------------------------------------------------------------- /exampleSite/static/css/component.css: -------------------------------------------------------------------------------- 1 | .og-grid { 2 | list-style: none; 3 | padding: 20px 0; 4 | margin: 0 auto; 5 | text-align: center; 6 | width: 100%; 7 | } 8 | 9 | .og-grid li { 10 | display: inline-block; 11 | margin: 10px 5px 0 5px; 12 | vertical-align: top; 13 | height: 250px; 14 | } 15 | 16 | .og-grid li > a, 17 | .og-grid li > a img { 18 | border: none; 19 | outline: none; 20 | display: block; 21 | position: relative; 22 | } 23 | 24 | .og-grid li.og-expanded > a::after { 25 | top: auto; 26 | border: solid transparent; 27 | content: " "; 28 | height: 0; 29 | width: 0; 30 | position: absolute; 31 | pointer-events: none; 32 | border-bottom-color: #ddd; 33 | border-width: 15px; 34 | left: 50%; 35 | margin: -20px 0 0 -15px; 36 | } 37 | 38 | .og-expander { 39 | position: absolute; 40 | background: #ddd; 41 | top: auto; 42 | left: 0; 43 | width: 100%; 44 | margin-top: 10px; 45 | text-align: left; 46 | height: 0; 47 | overflow: hidden; 48 | } 49 | 50 | .og-expander-inner { 51 | padding: 50px 30px; 52 | height: 100%; 53 | } 54 | 55 | .og-close { 56 | position: absolute; 57 | width: 40px; 58 | height: 40px; 59 | top: 20px; 60 | right: 20px; 61 | cursor: pointer; 62 | } 63 | 64 | .og-close::before, 65 | .og-close::after { 66 | content: ''; 67 | position: absolute; 68 | width: 100%; 69 | top: 50%; 70 | height: 1px; 71 | background: #888; 72 | -webkit-transform: rotate(45deg); 73 | -moz-transform: rotate(45deg); 74 | transform: rotate(45deg); 75 | } 76 | 77 | .og-close::after { 78 | -webkit-transform: rotate(-45deg); 79 | -moz-transform: rotate(-45deg); 80 | transform: rotate(-45deg); 81 | } 82 | 83 | .og-close:hover::before, 84 | .og-close:hover::after { 85 | background: #333; 86 | } 87 | 88 | .og-fullimg, 89 | .og-details { 90 | width: 50%; 91 | float: left; 92 | height: 100%; 93 | overflow: hidden; 94 | position: relative; 95 | } 96 | 97 | .og-details { 98 | padding: 0 40px 0 20px; 99 | } 100 | 101 | .og-fullimg { 102 | text-align: center; 103 | } 104 | 105 | .og-fullimg img { 106 | display: inline-block; 107 | max-height: 100%; 108 | max-width: 100%; 109 | } 110 | 111 | .og-details h3 { 112 | font-weight: 300; 113 | font-size: 52px; 114 | padding: 40px 0 10px; 115 | margin-bottom: 10px; 116 | } 117 | 118 | .og-details p { 119 | font-weight: 400; 120 | font-size: 16px; 121 | line-height: 22px; 122 | color: #999; 123 | } 124 | 125 | .og-details a { 126 | font-weight: 700; 127 | font-size: 16px; 128 | color: #333; 129 | text-transform: uppercase; 130 | letter-spacing: 2px; 131 | padding: 10px 20px; 132 | border: 3px solid #333; 133 | display: inline-block; 134 | margin: 30px 0 0; 135 | outline: none; 136 | } 137 | 138 | .og-details a::before { 139 | content: '\2192'; 140 | display: inline-block; 141 | margin-right: 10px; 142 | } 143 | 144 | .og-details a:hover { 145 | border-color: #999; 146 | color: #999; 147 | } 148 | 149 | .og-loading { 150 | width: 20px; 151 | height: 20px; 152 | border-radius: 50%; 153 | background: #ddd; 154 | box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; 155 | position: absolute; 156 | top: 50%; 157 | left: 50%; 158 | margin: -25px 0 0 -25px; 159 | -webkit-animation: loader 0.5s infinite ease-in-out both; 160 | -moz-animation: loader 0.5s infinite ease-in-out both; 161 | animation: loader 0.5s infinite ease-in-out both; 162 | } 163 | 164 | @-webkit-keyframes loader { 165 | 0% { background: #ddd; } 166 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 167 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 168 | } 169 | 170 | @-moz-keyframes loader { 171 | 0% { background: #ddd; } 172 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 173 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 174 | } 175 | 176 | @keyframes loader { 177 | 0% { background: #ddd; } 178 | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 179 | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } 180 | } 181 | 182 | @media screen and (max-width: 830px) { 183 | 184 | .og-expander h3 { font-size: 32px; } 185 | .og-expander p { font-size: 13px; } 186 | .og-expander a { font-size: 12px; } 187 | 188 | } 189 | 190 | @media screen and (max-width: 650px) { 191 | 192 | .og-fullimg { display: none; } 193 | .og-details { float: none; width: 100%; } 194 | 195 | } -------------------------------------------------------------------------------- /exampleSite/data/items.toml: -------------------------------------------------------------------------------- 1 | [[items]] 2 | title = "Hugrid Theme" 3 | image = "images/full/1.png" 4 | thumb = "images/thumbs/1.png" 5 | alt = "Hugrid Theme" 6 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 7 | url = "https://github.com/aerohub/hugrid" 8 | [[items]] 9 | title = "Hugrid Theme" 10 | image = "images/full/2.png" 11 | thumb = "images/thumbs/2.png" 12 | alt = "Hugrid Theme" 13 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 14 | url = "https://github.com/aerohub/hugrid" 15 | [[items]] 16 | title = "Hugrid Theme" 17 | image = "images/full/3.png" 18 | thumb = "images/thumbs/3.png" 19 | alt = "Hugrid Theme" 20 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 21 | url = "https://github.com/aerohub/hugrid" 22 | [[items]] 23 | title = "Hugrid Theme" 24 | image = "images/full/4.png" 25 | thumb = "images/thumbs/4.png" 26 | alt = "Hugrid Theme" 27 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 28 | url = "https://github.com/aerohub/hugrid" 29 | [[items]] 30 | title = "Hugrid Theme" 31 | image = "images/full/5.png" 32 | thumb = "images/thumbs/5.png" 33 | alt = "Hugrid Theme" 34 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 35 | url = "https://github.com/aerohub/hugrid" 36 | [[items]] 37 | title = "Hugrid Theme" 38 | image = "images/full/3.png" 39 | thumb = "images/thumbs/3.png" 40 | alt = "Hugrid Theme" 41 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 42 | url = "https://github.com/aerohub/hugrid" 43 | [[items]] 44 | title = "Hugrid Theme" 45 | image = "images/full/4.png" 46 | thumb = "images/thumbs/4.png" 47 | alt = "Hugrid Theme" 48 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 49 | url = "https://github.com/aerohub/hugrid" 50 | [[items]] 51 | title = "Hugrid Theme" 52 | image = "images/full/1.png" 53 | thumb = "images/thumbs/1.png" 54 | alt = "Hugrid Theme" 55 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 56 | url = "https://github.com/aerohub/hugrid" 57 | [[items]] 58 | title = "Hugrid Theme" 59 | image = "images/full/2.png" 60 | thumb = "images/thumbs/2.png" 61 | alt = "Hugrid Theme" 62 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 63 | url = "https://github.com/aerohub/hugrid" 64 | [[items]] 65 | title = "Hugrid Theme" 66 | image = "images/full/3.png" 67 | thumb = "images/thumbs/3.png" 68 | alt = "Hugrid Theme" 69 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 70 | url = "https://github.com/aerohub/hugrid" 71 | [[items]] 72 | title = "Hugrid Theme" 73 | image = "images/full/4.png" 74 | thumb = "images/thumbs/4.png" 75 | alt = "Hugrid Theme" 76 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 77 | url = "https://github.com/aerohub/hugrid" 78 | [[items]] 79 | title = "Hugrid Theme" 80 | image = "images/full/5.png" 81 | thumb = "images/thumbs/5.png" 82 | alt = "Hugrid Theme" 83 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 84 | url = "https://github.com/aerohub/hugrid" 85 | [[items]] 86 | title = "Hugrid Theme" 87 | image = "images/full/2.png" 88 | thumb = "images/thumbs/2.png" 89 | alt = "Hugrid Theme" 90 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 91 | url = "https://github.com/aerohub/hugrid" 92 | [[items]] 93 | title = "Hugrid Theme" 94 | image = "images/full/3.png" 95 | thumb = "images/thumbs/3.png" 96 | alt = "Hugrid Theme" 97 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 98 | url = "https://github.com/aerohub/hugrid" 99 | [[items]] 100 | title = "Hugrid Theme" 101 | image = "images/full/1.png" 102 | thumb = "images/thumbs/1.png" 103 | alt = "Hugrid Theme" 104 | description = "A simple grid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on." 105 | url = "https://github.com/aerohub/hugrid" -------------------------------------------------------------------------------- /static/js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 436 | 441 | --------------------------------------------------------------------------------