├── .csscomb.json ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── doc_assets ├── _footer.html ├── _header.html ├── _markdown_renderer.rb ├── images │ └── example-brand-image@2x.png └── pepagram.css ├── hologram_config.yml.sample ├── package.json └── styles ├── _foundation.scss ├── _layout.scss ├── _object.scss ├── _syntax.scss └── pepagram.scss /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": " ", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "leading-zero": false, 9 | "quotes": "single", 10 | "space-before-colon": "", 11 | "space-after-colon": " ", 12 | "space-before-combinator": " ", 13 | "space-after-combinator": " ", 14 | "space-between-declarations": "\n", 15 | "space-before-opening-brace": " ", 16 | "space-after-opening-brace": "\n", 17 | "space-before-selector-delimiter": "", 18 | "space-before-closing-brace": "\n", 19 | "strip-spaces": true, 20 | "tab-size": true, 21 | "unitless-zero": true 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016- GMO Pepabo, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pepagram 2 | 3 | [![NPM version](https://img.shields.io/npm/v/pepagram.svg)](https://www.npmjs.org/package/pepagram) 4 | 5 | GMOペパボ株式会社で利用している、スタイルガイドジェネレータ [Hologram](http://trulia.github.io/hologram/) のテーマです。 6 | 7 | ## Preview 8 | 9 | [![screenshot](http://pepabo.github.io/pepagram-example/screenshot.png)](http://pepabo.github.io/pepagram-example/public/styleguide/) 10 | 11 | [:point_right: **このテーマを利用して制作したスタイルガイドのサンプル**](http://pepabo.github.io/pepagram-example/public/styleguide/) 12 | 13 | [:memo: **スタイルガイドのサンプルのコード**](https://github.com/pepabo/pepagram-example/) 14 | 15 | ## Usage 16 | 17 | アプリケーションの Gemfile に 1 行追記して、 18 | 19 | ``` 20 | gem 'hologram' 21 | ``` 22 | 23 | bundle install します。 24 | 25 | ``` 26 | $ bundle install 27 | ``` 28 | 29 | パッケージマネージャーに Bower を利用していたら: 30 | 31 | ``` 32 | $ bower install --save-dev pepagram 33 | ``` 34 | 35 | パッケージマネージャーに npm を利用していたら: 36 | 37 | ``` 38 | $ npm install --save-dev pepagram 39 | ``` 40 | 41 | `hologram_config.yml.sample` をコピーして、 `hologram_config.yml` を用意します。 42 | 43 | このファイルを以下のように編集して、スタイルガイドの設定をします。 44 | 45 | > それぞれの項目の詳細は [Hologram の README](https://github.com/trulia/hologram) を参照ください。 46 | 47 | ```yml 48 | # Hologram の設定ファイルです。 49 | # ファイル・ディレクトリのパスは、相対パスで指定します。 50 | 51 | # Hologram 向けにスタイルガイドのコメントが書いてある、 52 | # スタイルシートファイルのディレクトリを指定します。 53 | source: stylesheets 54 | 55 | # スタイルガイドの HTML ファイルを書き出すディレクトリを指定します。 56 | destination: styleguide 57 | 58 | # アプリケーションの CSS ファイルを指定します。 59 | # スタイルガイドの HTML ファイルのあるディレクトリから相対パスで指定します。 60 | application_css: 61 | - 'main.css' 62 | - 'component.css' 63 | 64 | # スタイルガイドのテーマに関するファイルのディレクトリを指定します。 65 | documentation_assets: doc_assets 66 | 67 | # Markdown をレンダリングするときに、 68 | # マークアップをカスタマイズするためのファイルを指定します。 69 | custom_markdown: doc_assets/_markdown_renderer.rb 70 | 71 | # スタイルガイドの設定をします。 72 | # theme_color にプロジェクトのキーカラーを指定すると、好きな配色に変えられます。 73 | # brand_image に画像ファイルを指定すると、好きな画像を設置できます。 74 | pepagram: 75 | title: 'Example Style Guide' 76 | author: 'GMO Pepabo, Inc.' 77 | theme_color: '#3e6f99' 78 | brand_image: 'my-brand-image.jpg' 79 | ``` 80 | 81 | > #### たとえば Rails アプリケーションなら 82 | > 83 | > ``` 84 | > source: app/assets/stylesheets 85 | > destination: public/styleguide 86 | > application_css: 87 | > - '/assets/application.css' 88 | > documentation_assets: vendor/assets/bower_components/pepagram/doc_assets 89 | > custom_markdown: vendor/assets/bower_components/pepagram/doc_assets/_markdown_renderer.rb 90 | > ``` 91 | 92 | 設定ファイルのパスを指定して、 Hologram を実行します。 93 | 94 | ``` 95 | $ hologram -c hologram_config.yml 96 | ``` 97 | 98 | `destination` に指定したディレクトリに HTML ファイルが生成されるので、ブラウザで表示します。 99 | 100 | ## Development 101 | 102 | ``` 103 | $ npm install 104 | $ npm run build 105 | ``` 106 | 107 | ## License 108 | 109 | The MIT License (MIT) 110 | 111 | Copyright (c) 2016- GMO Pepabo, Inc. 112 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pepagram", 3 | "version": "0.0.2", 4 | "description": "A minimal Hologram theme for GMO Pepabo, Inc.", 5 | "license": [ 6 | "MIT" 7 | ], 8 | "homepage": "https://github.com/pepabo/pepagram", 9 | "authors": [ 10 | "shikakun " 11 | ], 12 | "keywords": [ 13 | "hologram", 14 | "pepabo", 15 | "styleguide", 16 | "theme" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /doc_assets/_footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | © <%= Time.now.year %> <%= @config['pepagram']['author'] %> 7 |
8 |
9 | 最終更新日: <%= Time.now.strftime("%Y年%-m月%-d日") %> 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /doc_assets/_header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <% if title && title != 'index' %><%= title.capitalize %> - <% end %><%= @config['pepagram']['title'] %> 11 | 12 | 13 | <% if @config['application_css'].to_s.strip.length != 0 %> 14 | <% @config['application_css'].each do |css| %> 15 | 16 | <% end %> 17 | <% end %> 18 | 19 | 20 | 21 | <% if @config['pepagram']['theme_color'] %> 22 | 36 | <% end %> 37 | 38 | 39 |
40 |
41 |
42 | 43 | <% if @config['pepagram']['brand_image'] %> 44 | <%= @config['pepagram']['title'] %> 45 | <% else %> 46 | <%= @config['pepagram']['title'] %> 47 | <% end %> 48 | 49 |
50 |
51 | <% @categories.sort.each do |category| %> 52 | <% unless category[0] == 'index' %> 53 | 56 | <%= category[0] %> 57 | 58 | <% end %> 59 | <% end %> 60 |
61 |
62 |
63 | <% if title %> 64 | <% unless title == 'index' %> 65 |
66 |
67 |
68 | <%= title %> 69 |
70 |
71 | <% @blocks.each do |block| %> 72 |
73 | <%= block[:title] %> 74 |
75 | <% end %> 76 |
77 |
78 |
79 | <% else %> 80 |
81 |
82 |
83 | <%= @config['pepagram']['title'] %> 84 |
85 |
86 |
87 | <% end %> 88 | <% end %> 89 |
90 |
91 | -------------------------------------------------------------------------------- /doc_assets/_markdown_renderer.rb: -------------------------------------------------------------------------------- 1 | class MarkdownRenderer < Redcarpet::Render::HTML 2 | def block_code(code, language) 3 | formatter = Rouge::Formatters::HTML.new(wrap: false) 4 | if language and language.include?('example') 5 | lexer = Rouge::Lexer.find('html') 6 | <<-EOS 7 |
8 |
9 |
10 |
11 |
12 | #{code} 13 |
14 |
15 | 
#{formatter.format(lexer.lex(code))}
16 |
17 |
18 |
19 |
20 |
21 | EOS 22 | else 23 | lexer = Rouge::Lexer.find_fancy('guess', code) 24 | <<-EOS 25 |
26 |
27 |
28 |
29 |
30 | 
#{formatter.format(lexer.lex(code))}
31 |
32 |
33 |
34 |
35 |
36 | EOS 37 | end 38 | end 39 | 40 | def normal_text(text) 41 | text.gsub(/\[color:([\$0-9a-zA-Z-]*)\:(#([\da-fA-F]{6}|[\da-fA-F]{3}))\]/) do 42 | <<-EOS 43 |
44 |
45 | #{$1} 46 |
47 |
48 | #{$2} 49 |
50 |
51 | EOS 52 | end 53 | end 54 | end 55 | -------------------------------------------------------------------------------- /doc_assets/images/example-brand-image@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pepabo/pepagram/783f45afa8bc59ee63c9b202fa292edc6921f28c/doc_assets/images/example-brand-image@2x.png -------------------------------------------------------------------------------- /doc_assets/pepagram.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | body { 3 | background-color: #fff; 4 | } 5 | 6 | pre, 7 | code { 8 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 9 | } 10 | 11 | .pepagram-nav { 12 | /* background-color は設定ファイルで指定しています */ 13 | font-family: -apple-system, 'Segoe UI', sans-serif; 14 | padding: 10px 0; 15 | } 16 | 17 | .pepagram-nav__container { 18 | max-width: 1000px; 19 | margin: 0 auto; 20 | } 21 | 22 | .pepagram-nav__container::after { 23 | clear: both; 24 | content: ''; 25 | display: table; 26 | } 27 | 28 | .pepagram-nav__brand { 29 | float: left; 30 | padding: 10px 0; 31 | } 32 | 33 | .pepagram-nav__brand a { 34 | padding: 0 20px; 35 | height: 30px; 36 | line-height: 30px; 37 | display: inline-block; 38 | color: #fff; 39 | font-size: 18px; 40 | font-weight: bold; 41 | text-decoration: none; 42 | } 43 | 44 | .pepagram-nav__brand img { 45 | height: 100%; 46 | width: auto; 47 | margin: 0 20px 0 0; 48 | display: inline-block; 49 | } 50 | 51 | .pepagram-nav__menu { 52 | float: right; 53 | padding: 10px; 54 | } 55 | 56 | .pepagram-nav__item { 57 | float: left; 58 | height: 30px; 59 | line-height: 30px; 60 | padding: 0 10px; 61 | display: block; 62 | color: #fff; 63 | font-size: 14px; 64 | text-decoration: none; 65 | text-transform: capitalize; 66 | opacity: 1; 67 | -webkit-transition-property: opacity; 68 | transition-property: opacity; 69 | -webkit-transition-duration: .3s; 70 | transition-duration: .3s; 71 | -webkit-transition-timing-function: ease; 72 | transition-timing-function: ease; 73 | } 74 | 75 | .pepagram-nav__item:hover, .pepagram-nav__item.pepagram-nav__item--current { 76 | opacity: .5; 77 | } 78 | 79 | .pepagram-header { 80 | font-family: -apple-system, 'Segoe UI', sans-serif; 81 | } 82 | 83 | .pepagram-header.pepagram-header--index { 84 | /* background-color は設定ファイルで指定しています */ 85 | padding: 0 0 40px; 86 | } 87 | 88 | .pepagram-header.pepagram-header--index .pepagram-header__heading { 89 | color: #fff; 90 | } 91 | 92 | .pepagram-header__heading { 93 | /* color は設定ファイルで指定しています */ 94 | padding: 80px 0 40px; 95 | font-size: 36px; 96 | font-weight: bold; 97 | line-height: 1.5; 98 | text-transform: capitalize; 99 | } 100 | 101 | .pepagram-header__list { 102 | /* color は設定ファイルで指定しています */ 103 | padding: 0 0 0 2em; 104 | } 105 | 106 | .pepagram-header__item { 107 | /* color は設定ファイルで指定しています */ 108 | padding: .25em 0; 109 | display: list-item; 110 | font-size: 16px; 111 | line-height: 1.66; 112 | list-style-type: disc; 113 | } 114 | 115 | .pepagram-header__item a { 116 | /* color は設定ファイルで指定しています */ 117 | text-decoration: none; 118 | } 119 | 120 | .pepagram-content { 121 | font-family: -apple-system, 'Segoe UI', sans-serif; 122 | padding: 20px 0; 123 | text-align: justify; 124 | color: #212121; 125 | font-size: 16px; 126 | line-height: 1.88; 127 | } 128 | 129 | @media screen and (max-width: 767px) { 130 | .pepagram-content { 131 | font-size: 14px; 132 | } 133 | } 134 | 135 | .pepagram-content h1 { 136 | margin: 4em 0 2em; 137 | font-size: 28px; 138 | font-weight: bold; 139 | } 140 | 141 | .pepagram-content h2 { 142 | margin: 4em 0 2em; 143 | font-size: 24px; 144 | font-weight: bold; 145 | border-bottom: 1px solid #bdbdbd; 146 | } 147 | 148 | .pepagram-content h3 { 149 | margin: 2em 0 1em; 150 | font-size: 20px; 151 | font-weight: bold; 152 | } 153 | 154 | .pepagram-content h4 { 155 | margin: 2em 0 1em; 156 | font-size: 18px; 157 | font-weight: bold; 158 | } 159 | 160 | .pepagram-content h5 { 161 | margin: 1em 0; 162 | font-size: 16px; 163 | font-weight: bold; 164 | color: #9e9e9e; 165 | } 166 | 167 | .pepagram-content h6 { 168 | margin: 1em 0; 169 | font-size: 16px; 170 | color: #9e9e9e; 171 | } 172 | 173 | .pepagram-content p { 174 | max-width: 720px; 175 | margin-right: auto; 176 | } 177 | 178 | .pepagram-content a { 179 | /* background-color は設定ファイルで指定しています */ 180 | text-decoration: underline; 181 | } 182 | 183 | .pepagram-content img { 184 | max-width: 100%; 185 | display: block; 186 | } 187 | 188 | .pepagram-content table { 189 | border-collapse: collapse; 190 | border: 1px solid #bdbdbd; 191 | } 192 | 193 | .pepagram-content table th, 194 | .pepagram-content table td { 195 | padding: .5em 1em; 196 | font-size: 14px; 197 | line-height: 1.66; 198 | border: 1px solid #bdbdbd; 199 | } 200 | 201 | .pepagram-content table th { 202 | text-align: center; 203 | font-weight: bold; 204 | } 205 | 206 | .pepagram-content figure { 207 | margin: 1em 0; 208 | } 209 | 210 | .pepagram-content figure table { 211 | border: 0; 212 | } 213 | 214 | .pepagram-content figure table th, 215 | .pepagram-content figure table td { 216 | border: 0; 217 | } 218 | 219 | .pepagram-content code { 220 | word-break: break-all; 221 | background-color: #eee; 222 | padding: 0 .3em; 223 | border-radius: 3px; 224 | } 225 | 226 | .pepagram-content pre code { 227 | background-color: none; 228 | padding: 0; 229 | } 230 | 231 | .pepagram-content blockquote { 232 | padding: 0 0 0 1em; 233 | margin: 2em 0; 234 | color: #9e9e9e; 235 | border-left: 1px solid #bdbdbd; 236 | } 237 | 238 | .pepagram-content hr { 239 | height: 0; 240 | margin: 2em 0; 241 | border: 0; 242 | border-top: 1px solid #bdbdbd; 243 | } 244 | 245 | .pepagram-content ul, 246 | .pepagram-content ol { 247 | padding: 0 0 0 2em; 248 | } 249 | 250 | .pepagram-content ul li, 251 | .pepagram-content ol li { 252 | padding: .25em 0; 253 | line-height: 1.66; 254 | } 255 | 256 | .pepagram-content ul li { 257 | list-style-type: disc; 258 | } 259 | 260 | .pepagram-content ul li ul li { 261 | list-style-type: circle; 262 | } 263 | 264 | .pepagram-content ul li ol li { 265 | list-style-type: decimal; 266 | } 267 | 268 | .pepagram-content ol li { 269 | list-style-type: decimal; 270 | } 271 | 272 | .pepagram-content ol li ul li { 273 | list-style-type: circle; 274 | } 275 | 276 | .pepagram-example { 277 | padding: 0; 278 | } 279 | 280 | .pepagram-example__preview, 281 | .pepagram-example__code { 282 | position: relative; 283 | border-style: solid; 284 | border-color: #bdbdbd; 285 | } 286 | 287 | .pepagram-example__preview::after, 288 | .pepagram-example__code::after { 289 | position: absolute; 290 | top: 0; 291 | left: 0; 292 | height: 20px; 293 | line-height: 20px; 294 | padding: 0 10px; 295 | color: #fff; 296 | font-size: 12px; 297 | background-color: #bdbdbd; 298 | } 299 | 300 | .pepagram-example__preview { 301 | box-sizing: border-box; 302 | padding: 40px 20px 20px; 303 | border-width: 1px 1px 0; 304 | } 305 | 306 | .pepagram-example__preview::after { 307 | font-family: -apple-system, 'Segoe UI', sans-serif; 308 | content: 'Preview'; 309 | } 310 | 311 | .pepagram-example__code { 312 | background-color: #eee; 313 | border-width: 1px; 314 | overflow-x: auto; 315 | } 316 | 317 | .pepagram-example__code pre { 318 | padding: 40px 20px 20px; 319 | margin: 0; 320 | font-size: 14px; 321 | line-height: 1.25; 322 | } 323 | 324 | .pepagram-example__code::after { 325 | font-family: -apple-system, 'Segoe UI', sans-serif; 326 | content: 'Code'; 327 | } 328 | 329 | .pepagram-colortip { 330 | padding: 0 1em; 331 | height: 3em; 332 | line-height: 3em; 333 | color: #000; 334 | } 335 | 336 | .pepagram-colortip .pepagram-colortip__variable { 337 | float: left; 338 | height: 3em; 339 | display: block; 340 | } 341 | 342 | .pepagram-colortip .pepagram-colortip__colorcode { 343 | float: right; 344 | height: 3em; 345 | display: block; 346 | } 347 | 348 | .pepagram-animation-example { 349 | /* background-color は設定ファイルで指定しています */ 350 | width: 120px; 351 | height: 120px; 352 | margin: 0 auto; 353 | } 354 | 355 | .pepagram-footer { 356 | font-family: -apple-system, 'Segoe UI', sans-serif; 357 | padding: 80px 0 40px; 358 | color: #9e9e9e; 359 | font-size: 14px; 360 | } 361 | 362 | .pepagram-footer__copyright { 363 | float: left; 364 | } 365 | 366 | @media screen and (max-width: 767px) { 367 | .pepagram-footer__copyright { 368 | float: none; 369 | margin: 10px 0; 370 | text-align: center; 371 | } 372 | } 373 | 374 | .pepagram-footer__pubdate { 375 | float: right; 376 | } 377 | 378 | @media screen and (max-width: 767px) { 379 | .pepagram-footer__pubdate { 380 | float: none; 381 | margin: 10px 0; 382 | text-align: center; 383 | } 384 | } 385 | 386 | .pepagram-utility-link { 387 | color: #212121; 388 | opacity: 1; 389 | text-decoration: none; 390 | -webkit-transition-property: opacity; 391 | transition-property: opacity; 392 | -webkit-transition-duration: .3s; 393 | transition-duration: .3s; 394 | -webkit-transition-timing-function: ease; 395 | transition-timing-function: ease; 396 | } 397 | 398 | .pepagram-utility-link:hover { 399 | opacity: .5; 400 | } 401 | 402 | .pepagram-utility-layout { 403 | max-width: 960px; 404 | padding: 0 20px; 405 | margin: 0 auto; 406 | } 407 | 408 | .pepagram-utility-layout::after { 409 | clear: both; 410 | content: ''; 411 | display: table; 412 | } 413 | 414 | /** 415 | * Copyright (c) 2013 Trulia, Inc. 416 | * 417 | * MIT License 418 | * 419 | * Permission is hereby granted, free of charge, to any person obtaining 420 | * a copy of this software and associated documentation files (the 421 | * "Software"), to deal in the Software without restriction, including 422 | * without limitation the rights to use, copy, modify, merge, publish, 423 | * distribute, sublicense, and/or sell copies of the Software, and to 424 | * permit persons to whom the Software is furnished to do so, subject to 425 | * the following conditions: 426 | * 427 | * The above copyright notice and this permission notice shall be 428 | * included in all copies or substantial portions of the Software. 429 | * 430 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 431 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 432 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 433 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 434 | * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 435 | * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 436 | * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 437 | */ 438 | hll { 439 | background-color: #ffc; 440 | } 441 | 442 | /* Comment */ 443 | .c { 444 | color: #998; 445 | font-style: italic; 446 | } 447 | 448 | /* Error */ 449 | .err { 450 | color: #a61717; 451 | background-color: #e3d2d2; 452 | } 453 | 454 | /* Keyword */ 455 | .k { 456 | color: #000; 457 | font-weight: bold; 458 | } 459 | 460 | /* Operator */ 461 | .o { 462 | color: #000; 463 | font-weight: bold; 464 | } 465 | 466 | /* Comment.Multiline */ 467 | .cm { 468 | color: #998; 469 | font-style: italic; 470 | } 471 | 472 | /* Comment.Preproc */ 473 | .cp { 474 | color: #999; 475 | font-weight: bold; 476 | font-style: italic; 477 | } 478 | 479 | /* Comment.Single */ 480 | .c1 { 481 | color: #998; 482 | font-style: italic; 483 | } 484 | 485 | /* Comment.Special */ 486 | .cs { 487 | color: #999; 488 | font-weight: bold; 489 | font-style: italic; 490 | } 491 | 492 | /* Generic.Deleted */ 493 | .gd { 494 | color: #000; 495 | background-color: #fdd; 496 | } 497 | 498 | /* Generic.Emph */ 499 | .ge { 500 | color: #000; 501 | font-style: italic; 502 | } 503 | 504 | /* Generic.Error */ 505 | .gr { 506 | color: #a00; 507 | } 508 | 509 | /* Generic.Heading */ 510 | .gh { 511 | color: #999; 512 | } 513 | 514 | /* Generic.Inserted */ 515 | .gi { 516 | color: #000; 517 | background-color: #dfd; 518 | } 519 | 520 | /* Generic.Output */ 521 | .go { 522 | color: #888; 523 | } 524 | 525 | /* Generic.Prompt */ 526 | .gp { 527 | color: #555; 528 | } 529 | 530 | /* Generic.Strong */ 531 | .gs { 532 | font-weight: bold; 533 | } 534 | 535 | /* Generic.Subheading */ 536 | .gu { 537 | color: #aaa; 538 | } 539 | 540 | /* Generic.Traceback */ 541 | .gt { 542 | color: #a00; 543 | } 544 | 545 | /* Keyword.Constant */ 546 | .kc { 547 | color: #000; 548 | font-weight: bold; 549 | } 550 | 551 | /* Keyword.Declaration */ 552 | .kd { 553 | color: #000; 554 | font-weight: bold; 555 | } 556 | 557 | /* Keyword.Namespace */ 558 | .kn { 559 | color: #000; 560 | font-weight: bold; 561 | } 562 | 563 | /* Keyword.Pseudo */ 564 | .kp { 565 | color: #000; 566 | font-weight: bold; 567 | } 568 | 569 | /* Keyword.Reserved */ 570 | .kr { 571 | color: #000; 572 | font-weight: bold; 573 | } 574 | 575 | /* Keyword.Type */ 576 | .kt { 577 | color: #458; 578 | font-weight: bold; 579 | } 580 | 581 | /* Literal.Number */ 582 | .m { 583 | color: #099; 584 | } 585 | 586 | /* Literal.String */ 587 | .s { 588 | color: #d01040; 589 | } 590 | 591 | /* Name.Attribute */ 592 | .na { 593 | color: #008080; 594 | } 595 | 596 | /* Name.Builtin */ 597 | .nb { 598 | color: #0086b3; 599 | } 600 | 601 | /* Name.Class */ 602 | .nc { 603 | color: #458; 604 | font-weight: bold; 605 | } 606 | 607 | /* Name.Constant */ 608 | .no { 609 | color: #008080; 610 | } 611 | 612 | /* Name.Decorator */ 613 | .nd { 614 | color: #3c5d5d; 615 | font-weight: bold; 616 | } 617 | 618 | /* Name.Entity */ 619 | .ni { 620 | color: #800080; 621 | } 622 | 623 | /* Name.Exception */ 624 | .ne { 625 | color: #900; 626 | font-weight: bold; 627 | } 628 | 629 | /* Name.Function */ 630 | .nf { 631 | color: #900; 632 | font-weight: bold; 633 | } 634 | 635 | /* Name.Label */ 636 | .nl { 637 | color: #900; 638 | font-weight: bold; 639 | } 640 | 641 | /* Name.Namespace */ 642 | .nn { 643 | color: #555; 644 | } 645 | 646 | /* Name.Tag */ 647 | .nt { 648 | color: #000080; 649 | } 650 | 651 | /* Name.Variable */ 652 | .nv { 653 | color: #008080; 654 | } 655 | 656 | /* Operator.Word */ 657 | .ow { 658 | color: #000; 659 | font-weight: bold; 660 | } 661 | 662 | /* Text.Whitespace */ 663 | .w { 664 | color: #bbb; 665 | } 666 | 667 | /* Literal.Number.Float */ 668 | .mf { 669 | color: #099; 670 | } 671 | 672 | /* Literal.Number.Hex */ 673 | .mh { 674 | color: #099; 675 | } 676 | 677 | /* Literal.Number.Integer */ 678 | .mi { 679 | color: #099; 680 | } 681 | 682 | /* Literal.Number.Oct */ 683 | .mo { 684 | color: #099; 685 | } 686 | 687 | /* Literal.String.Backtick */ 688 | .sb { 689 | color: #d01040; 690 | } 691 | 692 | /* Literal.String.Char */ 693 | .sc { 694 | color: #d01040; 695 | } 696 | 697 | /* Literal.String.Doc */ 698 | .sd { 699 | color: #d01040; 700 | } 701 | 702 | /* Literal.String.Double */ 703 | .s2 { 704 | color: #d01040; 705 | } 706 | 707 | /* Literal.String.Escape */ 708 | .se { 709 | color: #d01040; 710 | } 711 | 712 | /* Literal.String.Heredoc */ 713 | .sh { 714 | color: #d01040; 715 | } 716 | 717 | /* Literal.String.Interpol */ 718 | .si { 719 | color: #d01040; 720 | } 721 | 722 | /* Literal.String.Other */ 723 | .sx { 724 | color: #d01040; 725 | } 726 | 727 | /* Literal.String.Regex */ 728 | .sr { 729 | color: #009926; 730 | } 731 | 732 | /* Literal.String.Single */ 733 | .s1 { 734 | color: #d01040; 735 | } 736 | 737 | /* Literal.String.Symbol */ 738 | .ss { 739 | color: #990073; 740 | } 741 | 742 | /* Name.Builtin.Pseudo */ 743 | .bp { 744 | color: #999; 745 | } 746 | 747 | /* Name.Variable.Class */ 748 | .vc { 749 | color: #008080; 750 | } 751 | 752 | /* Name.Variable.Global */ 753 | .vg { 754 | color: #008080; 755 | } 756 | 757 | /* Name.Variable.Instance */ 758 | .vi { 759 | color: #008080; 760 | } 761 | 762 | /* Literal.Number.Integer.Long */ 763 | .il { 764 | color: #099; 765 | } 766 | -------------------------------------------------------------------------------- /hologram_config.yml.sample: -------------------------------------------------------------------------------- 1 | # Hologram の設定ファイルです。 2 | # ファイル・ディレクトリのパスは、相対パスで指定します。 3 | 4 | # Hologram 向けにスタイルガイドのコメントが書いてある、 5 | # スタイルシートファイルのディレクトリを指定します。 6 | source: stylesheets 7 | 8 | # スタイルガイドの HTML ファイルを書き出すディレクトリを指定します。 9 | destination: styleguide 10 | 11 | # アプリケーションの CSS ファイルを指定します。 12 | # スタイルガイドの HTML ファイルのあるディレクトリから相対パスで指定します。 13 | application_css: 14 | - 'main.css' 15 | - 'component.css' 16 | 17 | # スタイルガイドのテーマに関するファイルのディレクトリを指定します。 18 | documentation_assets: doc_assets 19 | 20 | # Markdown をレンダリングするときに、 21 | # マークアップをカスタマイズするためのファイルを指定します。 22 | custom_markdown: doc_assets/_markdown_renderer.rb 23 | 24 | # スタイルガイドの設定をします。 25 | # theme_color にプロジェクトのキーカラーを指定すると、好きな配色に変えられます。 26 | # brand_image に画像ファイルを指定すると、好きな画像を設置できます。 27 | pepagram: 28 | title: 'Example Style Guide' 29 | author: 'GMO Pepabo, Inc.' 30 | theme_color: '#3e6f99' 31 | brand_image: 'images/example-brand-image@2x.png' 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pepagram", 3 | "version": "0.0.2", 4 | "description": "A minimal Hologram theme for GMO Pepabo, Inc.", 5 | "main": "README.md", 6 | "scripts": { 7 | "build": "node-sass styles --output doc_assets --output-style expanded" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/pepabo/pepagram.git" 12 | }, 13 | "keywords": [ 14 | "hologram", 15 | "pepabo", 16 | "styleguide", 17 | "theme" 18 | ], 19 | "author": "shikakun ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/pepabo/pepagram/issues" 23 | }, 24 | "homepage": "https://github.com/pepabo/pepagram", 25 | "devDependencies": { 26 | "node-sass": "^3.4.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /styles/_foundation.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix { 2 | &::after { 3 | clear: both; 4 | content: ''; 5 | display: table; 6 | } 7 | } 8 | 9 | @mixin typography { 10 | font-family: -apple-system, 'Segoe UI', sans-serif; 11 | } 12 | 13 | @mixin if-phone { 14 | @media screen and (max-width: 767px) { 15 | @content; 16 | } 17 | } 18 | 19 | body { 20 | background-color: #fff; 21 | } 22 | pre, 23 | code { 24 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 25 | } 26 | -------------------------------------------------------------------------------- /styles/_layout.scss: -------------------------------------------------------------------------------- 1 | .pepagram-nav { 2 | /* background-color は設定ファイルで指定しています */ 3 | @include typography; 4 | padding: 10px 0; 5 | } 6 | 7 | .pepagram-nav__container { 8 | @include clearfix; 9 | max-width: 1000px; 10 | margin: 0 auto; 11 | } 12 | 13 | .pepagram-nav__brand { 14 | float: left; 15 | padding: 10px 0; 16 | a { 17 | padding: 0 20px; 18 | height: 30px; 19 | line-height: 30px; 20 | display: inline-block; 21 | color: #fff; 22 | font-size: 18px; 23 | font-weight: bold; 24 | text-decoration: none; 25 | } 26 | img { 27 | height: 100%; 28 | width: auto; 29 | margin: 0 20px 0 0; 30 | display: inline-block; 31 | } 32 | } 33 | 34 | .pepagram-nav__menu { 35 | float: right; 36 | padding: 10px; 37 | } 38 | 39 | .pepagram-nav__item { 40 | float: left; 41 | height: 30px; 42 | line-height: 30px; 43 | padding: 0 10px; 44 | display: block; 45 | color: #fff; 46 | font-size: 14px; 47 | text-decoration: none; 48 | text-transform: capitalize; 49 | opacity: 1; 50 | -webkit-transition-property: opacity; 51 | transition-property: opacity; 52 | -webkit-transition-duration: .3s; 53 | transition-duration: .3s; 54 | -webkit-transition-timing-function: ease; 55 | transition-timing-function: ease; 56 | &:hover, 57 | &.pepagram-nav__item--current { 58 | opacity: .5; 59 | } 60 | } 61 | 62 | .pepagram-header { 63 | @include typography; 64 | &.pepagram-header--index { 65 | /* background-color は設定ファイルで指定しています */ 66 | padding: 0 0 40px; 67 | .pepagram-header__heading { 68 | color: #fff; 69 | } 70 | } 71 | } 72 | 73 | .pepagram-header__heading { 74 | /* color は設定ファイルで指定しています */ 75 | padding: 80px 0 40px; 76 | font-size: 36px; 77 | font-weight: bold; 78 | line-height: 1.5; 79 | text-transform: capitalize; 80 | } 81 | 82 | .pepagram-header__list { 83 | /* color は設定ファイルで指定しています */ 84 | padding: 0 0 0 2em; 85 | } 86 | 87 | .pepagram-header__item { 88 | /* color は設定ファイルで指定しています */ 89 | padding: .25em 0; 90 | display: list-item; 91 | font-size: 16px; 92 | line-height: 1.66; 93 | list-style-type: disc; 94 | a { 95 | /* color は設定ファイルで指定しています */ 96 | text-decoration: none; 97 | } 98 | } 99 | 100 | .pepagram-content { 101 | @include typography; 102 | padding: 20px 0; 103 | text-align: justify; 104 | color: #212121; 105 | font-size: 16px; 106 | line-height: 1.88; 107 | @include if-phone { 108 | font-size: 14px; 109 | } 110 | h1 { 111 | margin: 4em 0 2em; 112 | font-size: 28px; 113 | font-weight: bold; 114 | } 115 | h2 { 116 | margin: 4em 0 2em; 117 | font-size: 24px; 118 | font-weight: bold; 119 | border-bottom: 1px solid #bdbdbd; 120 | } 121 | h3 { 122 | margin: 2em 0 1em; 123 | font-size: 20px; 124 | font-weight: bold; 125 | } 126 | h4 { 127 | margin: 2em 0 1em; 128 | font-size: 18px; 129 | font-weight: bold; 130 | } 131 | h5 { 132 | margin: 1em 0; 133 | font-size: 16px; 134 | font-weight: bold; 135 | color: #9e9e9e; 136 | } 137 | h6 { 138 | margin: 1em 0; 139 | font-size: 16px; 140 | color: #9e9e9e; 141 | } 142 | p { 143 | max-width: 720px; 144 | margin-right: auto; 145 | } 146 | a { 147 | /* background-color は設定ファイルで指定しています */ 148 | text-decoration: underline; 149 | } 150 | img { 151 | max-width: 100%; 152 | display: block; 153 | } 154 | table { 155 | border-collapse: collapse; 156 | border: 1px solid #bdbdbd; 157 | th, 158 | td { 159 | padding: .5em 1em; 160 | font-size: 14px; 161 | line-height: 1.66; 162 | border: 1px solid #bdbdbd; 163 | } 164 | th { 165 | text-align: center; 166 | font-weight: bold; 167 | } 168 | } 169 | figure { 170 | margin: 1em 0; 171 | table { 172 | border: 0; 173 | th, 174 | td { 175 | border: 0; 176 | } 177 | } 178 | } 179 | code { 180 | word-break: break-all; 181 | background-color: #eee; 182 | padding: 0 .3em; 183 | border-radius: 3px; 184 | } 185 | pre { 186 | code { 187 | background-color: none; 188 | padding: 0; 189 | } 190 | } 191 | blockquote { 192 | padding: 0 0 0 1em; 193 | margin: 2em 0; 194 | color: #9e9e9e; 195 | border-left: 1px solid #bdbdbd; 196 | } 197 | hr { 198 | height: 0; 199 | margin: 2em 0; 200 | border: 0; 201 | border-top: 1px solid #bdbdbd; 202 | } 203 | ul, 204 | ol { 205 | padding: 0 0 0 2em; 206 | li { 207 | padding: .25em 0; 208 | line-height: 1.66; 209 | } 210 | } 211 | ul li { 212 | list-style-type: disc; 213 | ul li { 214 | list-style-type: circle; 215 | } 216 | ol li { 217 | list-style-type: decimal; 218 | } 219 | } 220 | ol li { 221 | list-style-type: decimal; 222 | ul li { 223 | list-style-type: circle; 224 | } 225 | } 226 | } 227 | 228 | .pepagram-example { 229 | padding: 0; 230 | } 231 | 232 | .pepagram-example__preview, 233 | .pepagram-example__code { 234 | position: relative; 235 | border-style: solid; 236 | border-color: #bdbdbd; 237 | &::after { 238 | position: absolute; 239 | top: 0; 240 | left: 0; 241 | height: 20px; 242 | line-height: 20px; 243 | padding: 0 10px; 244 | color: #fff; 245 | font-size: 12px; 246 | background-color: #bdbdbd; 247 | } 248 | } 249 | 250 | .pepagram-example__preview { 251 | box-sizing: border-box; 252 | padding: 40px 20px 20px; 253 | border-width: 1px 1px 0; 254 | &::after { 255 | @include typography; 256 | content: 'Preview'; 257 | } 258 | } 259 | 260 | .pepagram-example__code { 261 | background-color: #eee; 262 | border-width: 1px; 263 | overflow-x: auto; 264 | pre { 265 | padding: 40px 20px 20px; 266 | margin: 0; 267 | font-size: 14px; 268 | line-height: 1.25; 269 | } 270 | &::after { 271 | @include typography; 272 | content: 'Code'; 273 | } 274 | } 275 | 276 | .pepagram-colortip { 277 | padding: 0 1em; 278 | height: 3em; 279 | line-height: 3em; 280 | color: #000; 281 | .pepagram-colortip__variable { 282 | float: left; 283 | height: 3em; 284 | display: block; 285 | } 286 | .pepagram-colortip__colorcode { 287 | float: right; 288 | height: 3em; 289 | display: block; 290 | } 291 | } 292 | 293 | .pepagram-animation-example { 294 | /* background-color は設定ファイルで指定しています */ 295 | width: 120px; 296 | height: 120px; 297 | margin: 0 auto; 298 | } 299 | 300 | .pepagram-footer { 301 | @include typography; 302 | padding: 80px 0 40px; 303 | color: #9e9e9e; 304 | font-size: 14px; 305 | } 306 | 307 | .pepagram-footer__copyright { 308 | float: left; 309 | @include if-phone { 310 | float: none; 311 | margin: 10px 0; 312 | text-align: center; 313 | } 314 | } 315 | 316 | .pepagram-footer__pubdate { 317 | float: right; 318 | @include if-phone { 319 | float: none; 320 | margin: 10px 0; 321 | text-align: center; 322 | } 323 | } 324 | -------------------------------------------------------------------------------- /styles/_object.scss: -------------------------------------------------------------------------------- 1 | .pepagram-utility-link { 2 | color: #212121; 3 | opacity: 1; 4 | text-decoration: none; 5 | -webkit-transition-property: opacity; 6 | transition-property: opacity; 7 | -webkit-transition-duration: .3s; 8 | transition-duration: .3s; 9 | -webkit-transition-timing-function: ease; 10 | transition-timing-function: ease; 11 | &:hover { 12 | opacity: .5; 13 | } 14 | } 15 | 16 | .pepagram-utility-layout { 17 | @include clearfix; 18 | max-width: 960px; 19 | padding: 0 20px; 20 | margin: 0 auto; 21 | } 22 | -------------------------------------------------------------------------------- /styles/_syntax.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2013 Trulia, Inc. 3 | * 4 | * MIT License 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining 7 | * a copy of this software and associated documentation files (the 8 | * "Software"), to deal in the Software without restriction, including 9 | * without limitation the rights to use, copy, modify, merge, publish, 10 | * distribute, sublicense, and/or sell copies of the Software, and to 11 | * permit persons to whom the Software is furnished to do so, subject to 12 | * the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be 15 | * included in all copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 21 | * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 22 | * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 23 | * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | */ 25 | 26 | hll { 27 | background-color: #ffc; 28 | } 29 | /* Comment */ 30 | .c { 31 | color: #998; 32 | font-style: italic; 33 | } 34 | /* Error */ 35 | .err { 36 | color: #a61717; 37 | background-color: #e3d2d2; 38 | } 39 | /* Keyword */ 40 | .k { 41 | color: #000; 42 | font-weight: bold; 43 | } 44 | /* Operator */ 45 | .o { 46 | color: #000; 47 | font-weight: bold; 48 | } 49 | /* Comment.Multiline */ 50 | .cm { 51 | color: #998; 52 | font-style: italic; 53 | } 54 | /* Comment.Preproc */ 55 | .cp { 56 | color: #999; 57 | font-weight: bold; 58 | font-style: italic; 59 | } 60 | /* Comment.Single */ 61 | .c1 { 62 | color: #998; 63 | font-style: italic; 64 | } 65 | /* Comment.Special */ 66 | .cs { 67 | color: #999; 68 | font-weight: bold; 69 | font-style: italic; 70 | } 71 | /* Generic.Deleted */ 72 | .gd { 73 | color: #000; 74 | background-color: #fdd; 75 | } 76 | /* Generic.Emph */ 77 | .ge { 78 | color: #000; 79 | font-style: italic; 80 | } 81 | /* Generic.Error */ 82 | .gr { 83 | color: #a00; 84 | } 85 | /* Generic.Heading */ 86 | .gh { 87 | color: #999; 88 | } 89 | /* Generic.Inserted */ 90 | .gi { 91 | color: #000; 92 | background-color: #dfd; 93 | } 94 | /* Generic.Output */ 95 | .go { 96 | color: #888; 97 | } 98 | /* Generic.Prompt */ 99 | .gp { 100 | color: #555; 101 | } 102 | /* Generic.Strong */ 103 | .gs { 104 | font-weight: bold; 105 | } 106 | /* Generic.Subheading */ 107 | .gu { 108 | color: #aaa; 109 | } 110 | /* Generic.Traceback */ 111 | .gt { 112 | color: #a00; 113 | } 114 | /* Keyword.Constant */ 115 | .kc { 116 | color: #000; 117 | font-weight: bold; 118 | } 119 | /* Keyword.Declaration */ 120 | .kd { 121 | color: #000; 122 | font-weight: bold; 123 | } 124 | /* Keyword.Namespace */ 125 | .kn { 126 | color: #000; 127 | font-weight: bold; 128 | } 129 | /* Keyword.Pseudo */ 130 | .kp { 131 | color: #000; 132 | font-weight: bold; 133 | } 134 | /* Keyword.Reserved */ 135 | .kr { 136 | color: #000; 137 | font-weight: bold; 138 | } 139 | /* Keyword.Type */ 140 | .kt { 141 | color: #458; 142 | font-weight: bold; 143 | } 144 | /* Literal.Number */ 145 | .m { 146 | color: #099; 147 | } 148 | /* Literal.String */ 149 | .s { 150 | color: #d01040; 151 | } 152 | /* Name.Attribute */ 153 | .na { 154 | color: #008080; 155 | } 156 | /* Name.Builtin */ 157 | .nb { 158 | color: #0086b3; 159 | } 160 | /* Name.Class */ 161 | .nc { 162 | color: #458; 163 | font-weight: bold; 164 | } 165 | /* Name.Constant */ 166 | .no { 167 | color: #008080; 168 | } 169 | /* Name.Decorator */ 170 | .nd { 171 | color: #3c5d5d; 172 | font-weight: bold; 173 | } 174 | /* Name.Entity */ 175 | .ni { 176 | color: #800080; 177 | } 178 | /* Name.Exception */ 179 | .ne { 180 | color: #900; 181 | font-weight: bold; 182 | } 183 | /* Name.Function */ 184 | .nf { 185 | color: #900; 186 | font-weight: bold; 187 | } 188 | /* Name.Label */ 189 | .nl { 190 | color: #900; 191 | font-weight: bold; 192 | } 193 | /* Name.Namespace */ 194 | .nn { 195 | color: #555; 196 | } 197 | /* Name.Tag */ 198 | .nt { 199 | color: #000080; 200 | } 201 | /* Name.Variable */ 202 | .nv { 203 | color: #008080; 204 | } 205 | /* Operator.Word */ 206 | .ow { 207 | color: #000; 208 | font-weight: bold; 209 | } 210 | /* Text.Whitespace */ 211 | .w { 212 | color: #bbb; 213 | } 214 | /* Literal.Number.Float */ 215 | .mf { 216 | color: #099; 217 | } 218 | /* Literal.Number.Hex */ 219 | .mh { 220 | color: #099; 221 | } 222 | /* Literal.Number.Integer */ 223 | .mi { 224 | color: #099; 225 | } 226 | /* Literal.Number.Oct */ 227 | .mo { 228 | color: #099; 229 | } 230 | /* Literal.String.Backtick */ 231 | .sb { 232 | color: #d01040; 233 | } 234 | /* Literal.String.Char */ 235 | .sc { 236 | color: #d01040; 237 | } 238 | /* Literal.String.Doc */ 239 | .sd { 240 | color: #d01040; 241 | } 242 | /* Literal.String.Double */ 243 | .s2 { 244 | color: #d01040; 245 | } 246 | /* Literal.String.Escape */ 247 | .se { 248 | color: #d01040; 249 | } 250 | /* Literal.String.Heredoc */ 251 | .sh { 252 | color: #d01040; 253 | } 254 | /* Literal.String.Interpol */ 255 | .si { 256 | color: #d01040; 257 | } 258 | /* Literal.String.Other */ 259 | .sx { 260 | color: #d01040; 261 | } 262 | /* Literal.String.Regex */ 263 | .sr { 264 | color: #009926; 265 | } 266 | /* Literal.String.Single */ 267 | .s1 { 268 | color: #d01040; 269 | } 270 | /* Literal.String.Symbol */ 271 | .ss { 272 | color: #990073; 273 | } 274 | /* Name.Builtin.Pseudo */ 275 | .bp { 276 | color: #999; 277 | } 278 | /* Name.Variable.Class */ 279 | .vc { 280 | color: #008080; 281 | } 282 | /* Name.Variable.Global */ 283 | .vg { 284 | color: #008080; 285 | } 286 | /* Name.Variable.Instance */ 287 | .vi { 288 | color: #008080; 289 | } 290 | /* Literal.Number.Integer.Long */ 291 | .il { 292 | color: #099; 293 | } 294 | -------------------------------------------------------------------------------- /styles/pepagram.scss: -------------------------------------------------------------------------------- 1 | @import 'foundation'; 2 | @import 'layout'; 3 | @import 'object'; 4 | @import 'syntax'; 5 | --------------------------------------------------------------------------------