├── .gitignore
├── .travis.yml
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── config.rb
├── misc
    └── rg-workbook-interactive.pdf
└── source
    ├── images
        ├── bentobox.svg
        ├── flask.svg
        ├── heart.svg
        └── ruby.svg
    ├── index.html.erb
    └── stylesheets
        ├── _reset.scss
        └── workbook.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | #
 3 | # If you find yourself ignoring temporary files generated by your text editor
 4 | # or operating system, you probably want to add a global ignore instead:
 5 | # git config --global core.excludesfile ~/.gitignore_global
 6 | 
 7 | # Ignore bundler config
 8 | /.bundle
 9 | 
10 | # Ignore the build directory
11 | /build
12 | 
13 | # Ignore cache
14 | /.sass-cache
15 | /.cache
16 | 
17 | # Ignore .DS_store file
18 | .DS_Store
19 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: ruby
 2 | cache: bundler
 3 | deploy:
 4 |   - provider: s3
 5 |     access_key_id: AKIAJT6ZPTRVSYJDVQTQ
 6 |     secret_access_key:
 7 |       secure: gMBpJi7JtUSost3W7kTO5jEYStqZhRuUsl/7uSwPCr9h4DICakoSx3wfdEhDNzrK9JafWxCZR2gk7NiyeG348Tgu5ZZq/ESxsfJgdV82ylXq941ncigBoaeg31vL1It9bMbcfPfQ+HnH2sHHb5fqq4wFz6cSkOVijG2GpnXIvCI=
 8 |     bucket: railsgirls-workbook
 9 |     local-dir: build
10 |     skip_cleanup: true
11 |     region: eu-central-1
12 |     acl: public_read
13 |     on:
14 |       repo: railsgirls/workbook
15 |       all_branches: true
16 |   - provider: releases
17 |     api_key:
18 |       secure: AnnFIdic2VDtvpsGsEUVuEgWutV0hNc9QNdc4gV3bVUeI2dMMK3Q55VvG5GSNXNshhUkk7JAij6BV5oJ9y9O4HUNs2EgdUXH4+V7r2YZImOz0tmq2brcoAVt7yRaaghJZQuaHFZoAWwx+BbvAzGhtiUb+VfS8TIBrGueXlkacVU=
19 |     file: build/workbook.pdf
20 |     skip_cleanup: true
21 |     on:
22 |       repo: railsgirls/workbook
23 |       tags: true
24 | env:
25 |   global:
26 |     secure: W8dMOTLvgQkCc+B7tfuVSNPwiInJZSpy550tJmfDNdF52v6S3QapXVFdc8q8ngF/qL7hSnFesfm9aQxRZX+gKF/WedWO3jXsNKxguHg9XF1eJMSCEVu8rK2R0UjTKLrzbSNN9hEnqYqJKj5xHhjJwswk+3CpTa47EJbYUGiSquY=
27 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
 1 | source 'https://rubygems.org'
 2 | 
 3 | gem 'doc_raptor', '~> 0.3'
 4 | gem 'nokogiri', '~> 1.16'
 5 | gem 'mimemagic', '~> 0.2'
 6 | gem 'rake'
 7 | 
 8 | gem 'middleman', '~>3.3.7'
 9 | gem 'middleman-livereload', '~> 3.1.0'
10 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (4.1.16)
  5 |       i18n (~> 0.6, >= 0.6.9)
  6 |       json (~> 1.7, >= 1.7.7)
  7 |       minitest (~> 5.1)
  8 |       thread_safe (~> 0.1)
  9 |       tzinfo (~> 1.1)
 10 |     celluloid (0.16.0)
 11 |       timers (~> 4.0.0)
 12 |     chunky_png (1.3.3)
 13 |     coffee-script (2.3.0)
 14 |       coffee-script-source
 15 |       execjs
 16 |     coffee-script-source (1.8.0)
 17 |     compass (1.0.3)
 18 |       chunky_png (~> 1.2)
 19 |       compass-core (~> 1.0.2)
 20 |       compass-import-once (~> 1.0.5)
 21 |       rb-fsevent (>= 0.9.3)
 22 |       rb-inotify (>= 0.9)
 23 |       sass (>= 3.3.13, < 3.5)
 24 |     compass-core (1.0.3)
 25 |       multi_json (~> 1.0)
 26 |       sass (>= 3.3.0, < 3.5)
 27 |     compass-import-once (1.0.5)
 28 |       sass (>= 3.2, < 3.5)
 29 |     doc_raptor (0.3.2)
 30 |       httparty (>= 0.7.0)
 31 |     em-websocket (0.5.1)
 32 |       eventmachine (>= 0.12.9)
 33 |       http_parser.rb (~> 0.6.0)
 34 |     erubis (2.7.0)
 35 |     eventmachine (1.0.4)
 36 |     execjs (2.8.1)
 37 |     ffi (1.15.5)
 38 |     haml (5.2.2)
 39 |       temple (>= 0.8.0)
 40 |       tilt
 41 |     hike (1.2.3)
 42 |     hitimes (1.2.2)
 43 |     hooks (0.4.0)
 44 |       uber (~> 0.0.4)
 45 |     http_parser.rb (0.6.0)
 46 |     httparty (0.21.0)
 47 |       mini_mime (>= 1.0.0)
 48 |       multi_xml (>= 0.5.2)
 49 |     i18n (0.6.11)
 50 |     json (1.8.6)
 51 |     kramdown (1.5.0)
 52 |     listen (2.8.5)
 53 |       celluloid (>= 0.15.2)
 54 |       rb-fsevent (>= 0.9.3)
 55 |       rb-inotify (>= 0.9)
 56 |     middleman (3.3.7)
 57 |       coffee-script (~> 2.2)
 58 |       compass (>= 1.0.0, < 2.0.0)
 59 |       compass-import-once (= 1.0.5)
 60 |       execjs (~> 2.0)
 61 |       haml (>= 4.0.5)
 62 |       kramdown (~> 1.2)
 63 |       middleman-core (= 3.3.7)
 64 |       middleman-sprockets (>= 3.1.2)
 65 |       sass (>= 3.4.0, < 4.0)
 66 |       uglifier (~> 2.5)
 67 |     middleman-core (3.3.7)
 68 |       activesupport (~> 4.1.0)
 69 |       bundler (~> 1.1)
 70 |       erubis
 71 |       hooks (~> 0.3)
 72 |       i18n (~> 0.6.9)
 73 |       listen (>= 2.7.9, < 3.0)
 74 |       padrino-helpers (~> 0.12.3)
 75 |       rack (>= 1.4.5, < 2.0)
 76 |       rack-test (~> 0.6.2)
 77 |       thor (>= 0.15.2, < 2.0)
 78 |       tilt (~> 1.4.1, < 2.0)
 79 |     middleman-livereload (3.1.1)
 80 |       em-websocket (>= 0.2.0)
 81 |       middleman-core (>= 3.0.2)
 82 |       multi_json (~> 1.0)
 83 |       rack-livereload
 84 |     middleman-sprockets (3.4.1)
 85 |       middleman-core (>= 3.3)
 86 |       sprockets (~> 2.12.1)
 87 |       sprockets-helpers (~> 1.1.0)
 88 |       sprockets-sass (~> 1.3.0)
 89 |     mimemagic (0.4.3)
 90 |       nokogiri (~> 1)
 91 |       rake
 92 |     mini_mime (1.1.2)
 93 |     mini_portile2 (2.8.6)
 94 |     minitest (5.15.0)
 95 |     multi_json (1.15.0)
 96 |     multi_xml (0.6.0)
 97 |     nokogiri (1.16.5)
 98 |       mini_portile2 (~> 2.8.2)
 99 |       racc (~> 1.4)
100 |     padrino-helpers (0.12.4)
101 |       i18n (~> 0.6, >= 0.6.7)
102 |       padrino-support (= 0.12.4)
103 |       tilt (~> 1.4.1)
104 |     padrino-support (0.12.4)
105 |       activesupport (>= 3.1)
106 |     racc (1.7.3)
107 |     rack (1.6.13)
108 |     rack-livereload (0.3.15)
109 |       rack
110 |     rack-test (0.6.3)
111 |       rack (>= 1.0)
112 |     rake (12.3.3)
113 |     rb-fsevent (0.9.4)
114 |     rb-inotify (0.9.5)
115 |       ffi (>= 0.5.0)
116 |     sass (3.4.10)
117 |     sprockets (2.12.5)
118 |       hike (~> 1.2)
119 |       multi_json (~> 1.0)
120 |       rack (~> 1.0)
121 |       tilt (~> 1.1, != 1.3.0)
122 |     sprockets-helpers (1.1.0)
123 |       sprockets (~> 2.0)
124 |     sprockets-sass (1.3.1)
125 |       sprockets (~> 2.0)
126 |       tilt (~> 1.1)
127 |     temple (0.8.2)
128 |     thor (0.19.1)
129 |     thread_safe (0.3.6)
130 |     tilt (1.4.1)
131 |     timers (4.0.1)
132 |       hitimes
133 |     tzinfo (1.2.10)
134 |       thread_safe (~> 0.1)
135 |     uber (0.0.12)
136 |     uglifier (2.7.2)
137 |       execjs (>= 0.3.0)
138 |       json (>= 1.8.0)
139 | 
140 | PLATFORMS
141 |   ruby
142 | 
143 | DEPENDENCIES
144 |   doc_raptor (~> 0.3)
145 |   middleman (~> 3.3.7)
146 |   middleman-livereload (~> 3.1.0)
147 |   mimemagic (~> 0.2)
148 |   nokogiri (~> 1.16)
149 |   rake
150 | 
151 | BUNDLED WITH
152 |    1.10.1
153 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # RailsGirls Workbook ![Travis CI](https://travis-ci.org/railsgirls/workbook.svg?branch=master)
 2 | 
 3 | These are the sources for the RailsGirls Workbook. It is build using HTML and CSS with the intention to make it easier to collaboratively edit its contents. 
 4 | 
 5 | ## Downloads
 6 | 
 7 | * [Download finished PDF releases of the Workbook](https://github.com/railsgirls/workbook/releases)
 8 | * [Download the development PDF version of the Workbook](https://s3.eu-central-1.amazonaws.com/railsgirls-workbook/workbook.pdf)
 9 | 
10 | ## How to contribute
11 | 
12 | ### Small contributions
13 | 
14 | The simplest way to contribute small changes to the content of the workbook is to use [GitHub's file editing feature](https://help.github.com/articles/editing-files-in-another-user-s-repository/). Just open the [`index.html.erb`](https://github.com/railsgirls/workbook/blob/master/source/index.html.erb) file and start editing by clicking the pen icon. After you're done editing, commit your changes and create a new pull request. 
15 | 
16 | 
17 | ### Advanced contributions
18 | 
19 | For larger changes, such as changes to the styling, it's recommended to fork and check out the repository. You must have [Ruby](http://ruby-lang.org) and [Git](http://git-scm.com) installed. Start by [forking the workbook repository](https://help.github.com/articles/fork-a-repo/) and [cloning your fork](https://help.github.com/articles/cloning-a-repository/) using this command in your Terminal:
20 | 
21 | ```shell
22 | git clone https://github.com/<your-github-username>/workbook
23 | ```
24 | 
25 | Afterwards, you can switch into the new directory and run the setup command, to install the necessary dependencies.
26 | 
27 | ```shell
28 | cd workbook
29 | rake setup
30 | ```
31 | 
32 | Open the directory in your favorite editor and start changing the contents of the `source` directory. To preview your changes run `rake preview` and point your browser to [http://localhost:4567/](http://localhost:4567/). After you've made some changes, simply reload the page to see the updated preview. For your convenience you may also install the [LiveReload browser extension](http://livereload.com/extensions/), which will automatically reload the page after you save a file.
33 | 
34 | *Please bear in mind that this is only a simulation of what the finished PDF will look like. There might be slight differences between the preview and the generated PDF*.
35 | 
36 | When you're done editing, commit your changes, push them to GitHub and [create a new pull request](https://help.github.com/articles/creating-a-pull-request/).
37 | 
38 | 
39 | ## How this works under the hood
40 | 
41 | The project is using [Middleman](http://middlemanapp.com) to generate the workbook's HTML source. The generated HTML is sent to [DocRaptor](http://docraptor.com) and transformed into a PDF. The process is automated using [Travis CI](http://travis-ci.org/railsgirls/workbook) which will push the generated PDF to [Amazon S3](http://aws.amazon.com/s3/). 
42 | 
43 | ## Todos
44 | 
45 | * Create basic CSS framework to style pages
46 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
 1 | require 'rubygems'
 2 | 
 3 | namespace :build do
 4 |   task :compile do
 5 |     sh 'bundle exec middleman build'
 6 |   end
 7 | 
 8 |   task html: [:compile] do
 9 |     require 'nokogiri'
10 |     require 'mimemagic'
11 | 
12 |     file = File.read('build/index.html')
13 | 
14 |     document = Nokogiri::HTML(file)
15 | 
16 |     # Check for the correct number of pages
17 |     number_of_pages = document.css('.page').count
18 |     if (number_of_pages % 4) > 0
19 |       puts "Number of pages must be a multiple of 4 for printing, but is #{number_of_pages}!"
20 |       exit 1
21 |     end
22 | 
23 |     # Embed stylesheets
24 |     document.css('link[rel=stylesheet]').each do |link|
25 |       style = Nokogiri::XML::Node.new('style', document)
26 |       style.content = File.read("build/#{link['href']}")
27 |       link.replace(style)
28 |     end
29 | 
30 |     # Embed images
31 |     document.css('img').each do |image|
32 |       path = "build/#{image['src']}"
33 | 
34 |       content = File.read(path)
35 |       content_type = MimeMagic.by_path(path)
36 | 
37 |       data = [content].flatten.pack('m').gsub("\n","")
38 | 
39 |       image['src'] = "data:#{content_type};base64,#{data}"
40 |     end
41 | 
42 |     File.open('build/index.html', 'w') do |file|
43 |       file.write(document.to_html)
44 |     end
45 | 
46 |     puts "Successfully generated the HTML!"
47 |   end
48 | 
49 |   task pdf: [:html] do
50 |     require 'doc_raptor'
51 | 
52 |     DocRaptor.api_key(ENV['DOCRAPTOR_API_KEY'])
53 | 
54 |     options = {
55 |       document_content: File.read('build/index.html'),
56 |       name: 'workbook.pdf',
57 |       document_type: 'pdf',
58 |       test: ENV['TRAVIS_TAG'] == '',
59 |       prince_options: {
60 |       }
61 |     }
62 | 
63 |     DocRaptor.create(options) do |pdf, response|
64 |       if response.success?
65 |         filename = (ENV['TRAVIS_BRANCH'] && ENV['TRAVIS_BRANCH'] != 'master') ? "workbook-#{ENV['TRAVIS_COMMIT']}.pdf" : 'workbook.pdf'
66 |         File.open("build/#{filename}", 'w+b') { |file| file.write(pdf.read) }
67 | 
68 |         puts "Successfully generated the PDF (#{filename})!"
69 | 
70 |         if ENV['TRAVIS']
71 |           puts "After this build finished, the PDF will be available at"
72 |           puts "https://s3.eu-central-1.amazonaws.com/railsgirls-workbook/#{filename}"
73 |         end
74 | 
75 |         exit 0
76 |       else
77 |         puts "Failed to generate PDF: "
78 |         response['errors']['error'].each do |error|
79 |           puts " * #{error}"
80 |         end
81 |         exit 1
82 |       end
83 |     end
84 |   end
85 | end
86 | 
87 | task :preview do
88 |   sh 'bundle exec middleman server'
89 | end
90 | 
91 | task :setup do
92 |   sh 'gem install bundler'
93 |   sh 'bundle'
94 | end
95 | 
96 | task default: 'build:pdf'


--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | set :css_dir, 'stylesheets'
2 | set :js_dir, 'javascripts'
3 | set :images_dir, 'images'
4 | 
5 | configure :development do
6 |   activate :livereload
7 | end
8 | 


--------------------------------------------------------------------------------
/misc/rg-workbook-interactive.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/railsgirls/workbook/a5ad4703c490c805b7a7f52d897fe01f89b94a1b/misc/rg-workbook-interactive.pdf


--------------------------------------------------------------------------------
/source/images/bentobox.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="2208px" height="1076px" viewBox="0 0 2208 1076" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 3 |     <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>bentobox</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 8 |         <g id="bentobox" sketch:type="MSLayerGroup" transform="translate(1104.000000, 538.000000) rotate(-270.000000) translate(-1104.000000, -538.000000) translate(573.000000, -560.000000)" stroke-width="12" stroke="#404041">
 9 |             <g id="Page-1" sketch:type="MSShapeGroup">
10 |                 <g id="Group">
11 |                     <path d="M0.8125,1.71875 L0.8125,2192.39308 L1006.37475,2192.39308 L1006.37475,1.71875 L0.8125,1.71875 L0.8125,1.71875 Z" id="Path-1"></path>
12 |                     <path d="M7.984375,3.84375 L76.046875,76.078125 L77.109375,2121.60938 L0.546875,2195.0625" id="Path-2"></path>
13 |                     <path d="M78,2125 L1010.29696,2129" id="Path-4"></path>
14 |                     <path d="M78,78 L1010.29696,78" id="Path-5"></path>
15 |                     <path d="M1006.18203,0.447580106 L1061.96875,61.9064092 L1057.96875,2140.54386 L1006.18203,2192.26496" id="Path-6"></path>
16 |                     <path d="M619.469922,1412.92189 L621.282401,1803.70438 L597.568635,1997.74856 L617.639258,2165.4871 L617.639258,2192.26496 L652.003608,2192.26496 L652.003608,1412.1225" id="Path-7" fill="#E7E7E8"></path>
17 |                     <path d="M389.467006,1.71875 L359.048889,1367.94535 L390.370215,1370.22962 L406.40974,668.066563 L435.033565,338.149414 L417.575578,48.5191183 L419.321376,1.71875 L389.467006,1.71875 L389.467006,1.71875 Z" id="Path-8" fill="#E7E7E8"></path>
18 |                     <path d="M77.9571137,1379.74059 L110.800148,1379.74059 L308.472525,1359.80333 L535.874506,1380.34677 L1005.94157,1381.29241 L1005.94157,1410.80732 L77.9571137,1410.80732 L77.9571137,1379.74059 L77.9571137,1379.74059 Z" id="Path-7" fill="#E7E7E8"></path>
19 |                     <path d="M689.858247,984.267696 L834.642671,982.432057 L842.863431,1317.6938 L692.862621,1318.35411 L689.858247,984.267696 L689.858247,984.267696 Z" id="Path-9"></path>
20 |                     <path d="M706.530873,604.316709 L852.556664,620.163958 L819.68683,949.793328 L673.1394,937.465489 L706.530873,604.316709 L706.530873,604.316709 Z" id="Path-10"></path>
21 |                     <path d="M676.625795,247.093318 L824.929628,239.460226 L839.608142,572.470343 L691.958008,580.545837 L676.625795,247.093318 L676.625795,247.093318 Z" id="Path-11"></path>
22 |                     <path d="M889.659035,241.335484 L943.526473,241.989183 L945.35551,1320.9689 L891.045669,1320.38123 L889.659035,241.335484 L889.659035,241.335484 Z" id="Path-12"></path>
23 |                 </g>
24 |             </g>
25 |         </g>
26 |     </g>
27 | </svg>


--------------------------------------------------------------------------------
/source/images/flask.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="462px" height="660px" viewBox="0 0 462 660" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 3 |     <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>flask</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 8 |         <g id="flask" sketch:type="MSArtboardGroup">
 9 |             <g id="Group" sketch:type="MSLayerGroup">
10 |                 <path d="M0,462 L66,462 L66,594 L0,594 L0,462 Z M396,462 L462,462 L462,594 L396,594 L396,462 Z M132,198 L198,198 L198,396 L132,396 L132,198 Z M66,396 L132,396 L132,462 L66,462 L66,396 Z M66,132 L132,132 L132,198 L66,198 L66,132 Z M264,198 L330,198 L330,396 L264,396 L264,198 Z M330,396 L396,396 L396,462 L330,462 L330,396 Z M330,132 L396,132 L396,198 L330,198 L330,132 Z M66,594 L396,594 L396,660 L66,660 L66,594 Z" id="Rectangle-11" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
11 |                 <path d="M66,462 L396,462 L396,594 L66,594 L66,462 Z M198,66 L264,66 L264,132 L198,132 L198,66 Z M330,0 L396,0 L396,66 L330,66 L330,0 Z" id="Rectangle-20" fill="#F38430" sketch:type="MSShapeGroup"></path>
12 |             </g>
13 |         </g>
14 |     </g>
15 | </svg>


--------------------------------------------------------------------------------
/source/images/heart.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="560px" height="480px" viewBox="0 0 560 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 3 |     <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>heart</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 8 |         <g id="heart" sketch:type="MSArtboardGroup" fill="#FFFFFF">
 9 |             <path d="M240,80 L320,80 L320,160 L240,160 L240,80 Z M80,240 L160,240 L160,320 L80,320 L80,240 Z M160,320 L240,320 L240,400 L160,400 L160,320 Z M240,400 L320,400 L320,480 L240,480 L240,400 Z M320,320 L400,320 L400,400 L320,400 L320,320 Z M400,240 L480,240 L480,320 L400,320 L400,240 Z M320,0 L480,0 L480,80 L320,80 L320,0 Z M80,0 L240,0 L240,80 L80,80 L80,0 Z M0,80 L80,80 L80,240 L0,240 L0,80 Z M480,80 L560,80 L560,240 L480,240 L480,80 Z" id="Rectangle-1" sketch:type="MSShapeGroup"></path>
10 |         </g>
11 |     </g>
12 | </svg>


--------------------------------------------------------------------------------
/source/images/ruby.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="520px" height="400px" viewBox="0 0 520 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 3 |     <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>ruby</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 8 |         <g id="ruby" sketch:type="MSArtboardGroup" fill="#FFFFFF">
 9 |             <path d="M0,120 L40,120 L40,160 L0,160 L0,120 Z M480,120 L520,120 L520,160 L480,160 L480,120 Z M440,80 L480,80 L480,120 L440,120 L440,80 Z M400,40 L440,40 L440,80 L400,80 L400,40 Z M120,240 L160,240 L160,280 L120,280 L120,240 Z M80,200 L120,200 L120,240 L80,240 L80,200 Z M40,160 L80,160 L80,200 L40,200 L40,160 Z M240,360 L280,360 L280,400 L240,400 L240,360 Z M200,320 L240,320 L240,360 L200,360 L200,320 Z M160,280 L200,280 L200,320 L160,320 L160,280 Z M320,80 L360,80 L360,120 L320,120 L320,80 Z M280,40 L320,40 L320,80 L280,80 L280,40 Z M40,80 L80,80 L80,120 L40,120 L40,80 Z M80,40 L120,40 L120,80 L80,80 L80,40 Z M280,320 L320,320 L320,360 L280,360 L280,320 Z M320,280 L360,280 L360,320 L320,320 L320,280 Z M240,240 L280,240 L280,280 L240,280 L240,240 Z M200,200 L240,200 L240,240 L200,240 L200,200 Z M160,160 L200,160 L200,200 L160,200 L160,160 Z M280,200 L320,200 L320,240 L280,240 L280,200 Z M320,160 L360,160 L360,200 L320,200 L320,160 Z M360,240 L400,240 L400,280 L360,280 L360,240 Z M400,200 L440,200 L440,240 L400,240 L400,200 Z M440,160 L480,160 L480,200 L440,200 L440,160 Z M160,80 L200,80 L200,120 L160,120 L160,80 Z M200,40 L240,40 L240,80 L200,80 L200,40 Z M120,0 L400,0 L400,40 L120,40 L120,0 Z M80,120 L440,120 L440,160 L80,160 L80,120 Z" id="Rectangle-23" sketch:type="MSShapeGroup"></path>
10 |         </g>
11 |     </g>
12 | </svg>


--------------------------------------------------------------------------------
/source/index.html.erb:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |   <meta charset="utf-8">
  4 |   <title>Rails Girls Workbook</title>
  5 |   <link rel="stylesheet" href="stylesheets/workbook.css" />
  6 | </head>
  7 | <body>
  8 |   <div class="page front">
  9 |     <div class="formula">
 10 |       <img src="images/heart.svg" class="heart" /> + <img src="images/flask.svg" class="flask" /> = <img src="images/ruby.svg" class="ruby" />
 11 |     </div>
 12 | 
 13 |     <header>
 14 |       <h1>Rails Girls</h1>
 15 |       Your cookbook to the world<br />
 16 |       of web development.
 17 |     </header>
 18 | 
 19 |     <p><a href="http://railsgirls.com">railsgirls.com</a></p>
 20 |   </div>
 21 | 
 22 |   <div class="page empty"></div>
 23 | 
 24 |   <div class="page">
 25 |     <h2>This book belongs to</h2>
 26 |     <input type="text" />
 27 |   </div>
 28 | 
 29 |   <div class="page motivational">
 30 |     <h1>Get excited and make things</h1>
 31 |     <p>Software changes cultures. We believe that in a world where everything will involve the Internet, we need to get the girls involved too.</p>
 32 | 
 33 |     <p>Web applications are modern craftsmanship. Build tomorrow's products. Learn to solve problems. Wonder how things work.</p>
 34 | 
 35 |     <p>We can give the ingredients, but you make the recipes.</p>
 36 |   </div>
 37 | 
 38 |   <div class="page">
 39 |     <h1>Knowing How</h1>
 40 |     <blockquote>
 41 |       <p>“I’ve long argued that UI design, programming, and product strategy should be learned apprentice-style with your hands and through experience, not through school and pedagogy. When I go to conferences about design I see a lot of declarative knowledge. Knowledge of. The latest CSS rules. The new JavaScript syntax. Ten ways to make users happy (supposedly) or whatever else.</p>
 42 | 
 43 |       <p>What I don’t see are procedures—somebody standing up there with a pen or a text editor and making things happen and showing how it’s done. That’s what I want to see and that’s what I think our industry needs more of.”</p>
 44 | 
 45 |       <span class="author">- Ryan Singer, 37 Signals</span>
 46 |     </blockquote>
 47 | 
 48 |     <h2>Further Reading</h2>
 49 |     <ul>
 50 |       <li>
 51 |         The first step is to start
 52 |         <a href="http://goo.gl/02u5">http://goo.gl/02u5</a>
 53 |       </li>
 54 | 
 55 |       <li>
 56 |         Code as Craft by Etsy
 57 |         <a href="http://goo.gl/5iX7L">http://goo.gl/5iX7L</a>
 58 |       </li>
 59 | 
 60 |       <li>
 61 |         Why Software is Eating the World
 62 |         <a href="http://goo.gl/ry3Sc">http://goo.gl/ry3Sc</a>
 63 |       </li>
 64 | 
 65 |       <li>
 66 |         Learning to Code: The Roadmap I Wish I Had Been Given
 67 |         <a href="http://goo.gl/sfeCL">http://goo.gl/sfeCL</a>
 68 |       </li>
 69 | 
 70 |       <li>
 71 |         A Tour of the Design Process at 37signals
 72 |         <a href="http://goo.gl/Fc49">http://goo.gl/Fc49</a>
 73 |       </li>
 74 | 
 75 |       <li>
 76 |         5by5 Podcasts
 77 |         <a href="http://goo.gl/QJqU">http://goo.gl/QJqU</a>
 78 |       </li>
 79 | 
 80 |       <li>
 81 |         What most schools don’t teach
 82 |         <a href="http://code.org/">http://code.org/</a>
 83 |       </li>
 84 |     </ul>
 85 |   </div>
 86 | 
 87 |   <div class="page motivational">
 88 |     <h1>Don't daydream. Just design.</h1>
 89 |     <p>Draw. Sketch. Wireframe. Mockup.</p>
 90 |     <p>Plans and ideas are nothing compared to something you can see, touch, hear or smell.</p>
 91 |     <p>Most applications are just screens with boxes, anyone can draw them. If you can’t, you need to think about the idea more.</p>
 92 |     <p>Drawing captures your idea into something concrete and real.</p>
 93 |   </div>
 94 | 
 95 |   <div class="page">
 96 |     <h1>Checklist for your web project</h1>
 97 | 
 98 |     <ul>
 99 |       <li>
100 |         <label>What is the core idea for the project:</label>
101 |         <input type="text" />
102 |       </li>
103 | 
104 |       <li>
105 |         <label>Decide until when you will finish the first version:</label>
106 |         <input type="text" />
107 |       </li>
108 | 
109 |       <li>
110 |         <label>What’s the unique content you’re showing?</label>
111 |         <input type="text" />
112 |       </li>
113 | 
114 |       <li>
115 |         <label>What problem will you try to solve?</label>
116 |         <textarea></textarea>
117 |       </li>
118 | 
119 |       <li>
120 |         <label>Who will be the visitor/customer of your web project?</label>
121 |         <textarea></textarea>
122 |       </li>
123 | 
124 |       <li>
125 |         <label>What is your most important goal with your project?</label>
126 |         <textarea></textarea>
127 |       </li>
128 |     </ul>
129 |   </div>
130 | 
131 |   <div class="page motivational">
132 |     <h1>Lunch box your web app.</h1>
133 |     <p>The Bentobox is our conceptual model for understanding web applications and their components.</p>
134 | 
135 |     <p>The Japanese lunchbox model aims to have a balanced mix of things. Much like web apps, the “Ekiben“ looks for content which is arranged in the most efficient, graceful manner. The bento is presented in a simple, beautiful, balanced way. Nothing lacking. Nothing superfluous. Not decorated, but wonderfully designed.</p>
136 |   </div>
137 | 
138 |   <div class="page horizontal" id="bentobox">
139 |     <img src="images/bentobox.svg" />
140 | 
141 |     <div class="meta">
142 |       <h1>Bentobox</h1>
143 | 
144 |       <label>Application:</label>
145 |       <input type="text" />
146 | 
147 |       <label>Designed by:</label>
148 |       <input type="text" />
149 |     </div>
150 | 
151 |     <div class="compartment top-left">
152 |       <h2>Storage</h2>
153 |       <p>
154 |         Backend.<br />
155 |         How the application stores data.
156 |       </p>
157 |     </div>
158 | 
159 |     <div class="compartment top-right">
160 |       <h2>Logic</h2>
161 |       <p>
162 |         Backend.<br />
163 |         How the application works.
164 |       </p>
165 |     </div>
166 | 
167 |     <div class="compartment bottom-left">
168 |       <h2>Infrastructure</h2>
169 |       <p>
170 |         Backend.<br />
171 |         How the application runs.
172 |       </p>
173 |     </div>
174 | 
175 |     <div class="compartment bottom-right">
176 |       <h2>Style and structure</h2>
177 |       <p>
178 |         Frontend.<br />
179 |         How the application looks.
180 |       </p>
181 |     </div>
182 |   </div>
183 | 
184 |   <div class="page">
185 |     <h1>Cheatsheet for your app</h1>
186 |     <ul>
187 |       <li>
188 |         Your Ruby on Rails app can be found at:<br />
189 |         <code>projects/railsgirls</code>
190 |       <li>
191 |       <li>
192 |         You can start your app by opening Terminal and:<br />
193 |         <code>cd projects/railsgirls</code><br/>
194 |         <code>rails s</code>
195 |       </li>
196 |       <li>
197 |         Access the app:<br />
198 |         Open <code>http://localhost:3000</code> on your web browser
199 |       </li>
200 |       <li>
201 |         Most of the time you edit the files at <code>app/</code> directory<br />
202 |         <code>app/views/</code> (the user interfaces of your app)<br />
203 |         <code>app/models/</code> (models define app information structure)<br />
204 |         <code>app/controllers/</code> (are the glue between models and views)
205 |       </li>
206 |       <li>
207 |         Tools we use
208 | 
209 |         <ul>
210 |           <li>Bootstrap (to style the app)</li>
211 |           <li>Sublime/Komodo/Vim (to edit the code files) <a href="http://goo.gl/IKh1">http://goo.gl/IKh1</a></li>
212 |           <li>Heroku (to host the application) <a href="http://heroku.com">http://heroku.com</a></li>
213 |         </ul>
214 |       </li>
215 |     </ul>
216 |   </div>
217 | 
218 |   <div class="page">
219 |     <h1>Getting further</h1>
220 |     <ul>
221 |       <li>
222 |         <h3>Rails Girls Guides</h3>
223 |         <a href="http://guides.railsgirls.com">http://guides.railsgirls.com</a>
224 |         <p>Everything you need to build your first app.</p>
225 |       </li>
226 |       <li>
227 |         <h3>Try Ruby</h3>
228 |         <a href="http://www.tryruby.org">http://www.tryruby.org</a>
229 |         <p>Programming Ruby in your browser.</p>
230 |       </li>
231 |       <li>
232 |         <h3>CodeSchool</h3>
233 |         <a href="http://www.codeschool.com">http://www.codeschool.com</a>
234 |         <p>Try out the Rails for Zombies module: a free, browser-based Rails workshop. Other classes interesting too!</p>
235 |       </li>
236 |       <li>
237 |         <h3>Codecademy</h3>
238 |         <a href="http://www.codeacademy.com">http://www.codecademy.com</a>
239 |         <p>A Y-Combinator startup aiming to teach the world to code.</p>
240 |       </li>
241 |       <li>
242 |         <h3>Don’t fear the Internet</h3>
243 |         <a href="http://www.dontfeartheinternet.com">http://www.dontfeartheinternet.com/</a>
244 |         <p>Frontend stuff (CSS & HTML) explained through short videos.</p>
245 |       </li>
246 |       <li>
247 |         <h3>A Quick (and Hopefully Painless) Ride Through Ruby (with Cartoon Foxes)</h3>
248 |         <a href="http://mislav.uniqpath.com/poignant-guide/book/chapter-3.html">http://mislav.uniqpath.com/poignant-guide/book/chapter-3.html</a>
249 |         <p>The legendary Why’s Poignant Guide to Ruby: part comic book, part coding exercise.</p>
250 |       </li>
251 |       <li>
252 |         <h3>RailsGuides</h3>
253 |         <a href="http://guides.rubyonrails.org/">http://guides.rubyonrails.org/</a>
254 |         <p>Tutorials and guides created by the Rails community</p>
255 |       </li>
256 |     </ul>
257 |   </div>
258 | 
259 |   <div class="page motivational">
260 |     <h1>Get going with something small.</h1>
261 |     <p>Once you’ve gotten the first bite of coding web apps, try out the following.</p>
262 |     <p>The idea is not to start building the next Facebook. Try creating something simple, yet interesting, in just a couple of days.</p>
263 |     <p>Focus on the one thing you want to achieve - this is what applications anyways should be about.</p>
264 |   </div>
265 | 
266 |   <div class="page">
267 |     <h2>Start with simple mockups of your idea</h2>
268 |     <ul>
269 |       <li>Balsamiq <a href="http://balsamiq.com">http://balsamiq.com</a></li>
270 |       <li>Mockingbird <a href="http://gomockingbird.com">http://gomockingbird.com</a></li>
271 |       <li>Prototypesapp <a href="http://prototypesapp.com">http://prototypesapp.com</a></li>
272 |     </ul>
273 | 
274 |     <h2>Design</h2>
275 |     <ul>
276 |       <li>Dribbble <a href="http://dribbble.com">http://dribbble.com</a></li>
277 |       <li>CSSgrid <a href="http://cssgrid.net">http://cssgrid.net</a></li>
278 |       <li>Colour Lovers <a href="http://www.colourlovers.com">http://www.colourlovers.com</a></li>
279 |     </ul>
280 | 
281 | 
282 |     <h2>Marketing Magic</h2>
283 |     <ul>
284 |       <li>Shopify <a href="http://www.shopify.com">http://www.shopify.com</a></li>
285 |       <li>Moo <a href="http://www.moo.com">http://www.moo.com</a></li>
286 |       <li>Stickermule <a href="http://www.stickermule.com">http://www.stickermule.com</a></li>
287 |     </ul>
288 | 
289 |     <h2>Customer service &amp; feedback</h2>
290 |     <ul>
291 |       <li>UserVoice <a href="http://www.uservoice.com">http://www.uservoice.com</a></li>
292 |       <li>Wufoo <a href="http://wufoo.com">http://wufoo.com</a></li>
293 |       <li>Google Docs (Forms) <a href="http://docs.google.com">http://docs.google.com</a></li>
294 |     </ul>
295 | 
296 |     <h2>Developer communities</h2>
297 |     <ul>
298 |       <li>Github <a href="http://www.github.com">http://www.github.com</a></li>
299 |       <li>StackOverflow <a href="http://stackoverflow.com">http://stackoverflow.com</a></li>
300 |       <li>Forrst <a href="http://www.forrst.com">http://www.forrst.com</a></li>
301 |     </ul>
302 | 
303 |     <h2>Social</h2>
304 |     <ul>
305 |       <li>Facebook Social Plugins <a href="http://goo.gl/wSkVL">http://goo.gl/wSkVL</a></li>
306 |       <li>Twitter Resources <a href="http://goo.gl/UOMhs">http://goo.gl/UOMhs</a></li>
307 |     </ul>
308 |   </div>
309 | 
310 |   <div class="page motivational">
311 |     <h1>Make it real.<br />Make it happen.</h1>
312 | 
313 |     <p>Coding is only part of the fun. As soon as you have an application up and running, you should start thinking about your users and how to keep your app running.</p>
314 | 
315 |     <figure>
316 |       <div class="frame"></div>
317 |       <figcaption>Draw here your first e-mail newsletter template to your users.</figcaption>
318 |     </figure>
319 |   </div>
320 | 
321 |   <div class="page empty"></div>
322 | 
323 |   <div class="page back">
324 |     <h1>That's all!</h1>
325 | 
326 |     <p class="copyright">
327 |       2010 - <%= Date.today.year %>, Rails Girls.<br />
328 |       Contact us at <a href="mailto:team@railsgirls.com">team@railsgirls.com</a>
329 |     </p>
330 | 
331 |     <p><a href="http://railsgirls.com">railsgirls.com</a></p>
332 |   </div>
333 | </body>
334 | </html>


--------------------------------------------------------------------------------
/source/stylesheets/_reset.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 3 |  * Richard Clark (http://richclarkdesign.com)
 4 |  * http://cssreset.com
 5 |  */
 6 | html, body, div, span, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | abbr, address, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, samp,
10 | small, strong, sub, sup, var,
11 | b, i,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, figcaption, figure,
16 | footer, header, hgroup, menu, nav, section, summary,
17 | time, mark, audio, video {
18 |     margin:0;
19 |     padding:0;
20 |     border:0;
21 |     outline:0;
22 |     font-size:100%;
23 |     vertical-align:baseline;
24 |     background:transparent;
25 | }
26 | body {
27 |     line-height:1;
28 | }
29 | article,aside,details,figcaption,figure,
30 | footer,header,hgroup,menu,nav,section {
31 |     display:block;
32 | }
33 | nav ul {
34 |     list-style:none;
35 | }
36 | blockquote, q {
37 |     quotes:none;
38 | }
39 | blockquote:before, blockquote:after,
40 | q:before, q:after {
41 |     content:'';
42 |     content:none;
43 | }
44 | a {
45 |     margin:0;
46 |     padding:0;
47 |     font-size:100%;
48 |     vertical-align:baseline;
49 |     background:transparent;
50 | }
51 | /* change colours to suit your needs */
52 | ins {
53 |     background-color:#ff9;
54 |     color:#000;
55 |     text-decoration:none;
56 | }
57 | /* change colours to suit your needs */
58 | mark {
59 |     background-color:#ff9;
60 |     color:#000;
61 |     font-style:italic;
62 |     font-weight:bold;
63 | }
64 | del {
65 |     text-decoration: line-through;
66 | }
67 | abbr[title], dfn[title] {
68 |     border-bottom:1px dotted;
69 |     cursor:help;
70 | }
71 | table {
72 |     border-collapse:collapse;
73 |     border-spacing:0;
74 | }
75 | /* change border colour to suit your needs */
76 | hr {
77 |     display:block;
78 |     height:1px;
79 |     border:0;
80 |     border-top:1px solid #cccccc;
81 |     margin:1em 0;
82 |     padding:0;
83 | }
84 | input, select {
85 |     vertical-align:middle;
86 | }


--------------------------------------------------------------------------------
/source/stylesheets/workbook.scss:
--------------------------------------------------------------------------------
  1 | @import 'reset';
  2 | 
  3 | $red: #bb2830;
  4 | $black: #1a1919;
  5 | $grey: #e4e4e3;
  6 | 
  7 | $page-width: 148mm;
  8 | $page-height: 210mm;
  9 | 
 10 | @page {
 11 |   margin: 0;
 12 |   size: A5;
 13 | }
 14 | 
 15 | @page cover {
 16 |   background: $red;
 17 | }
 18 | 
 19 | @page empty {
 20 |   background: $grey;
 21 | }
 22 | 
 23 | @page horizontal {
 24 |   size: A5 landscape;
 25 | }
 26 | 
 27 | body, html {
 28 |   width: 100%;
 29 |   height: 100%;
 30 | }
 31 | 
 32 | body {
 33 |   text-rendering: geometricPrecision;
 34 |   padding: 0;
 35 |   margin: 0;
 36 | 
 37 |   font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
 38 | }
 39 | 
 40 | input, textarea {
 41 |   background: $grey;
 42 |   display: block;
 43 |   width: 100%;
 44 |   border: none;
 45 |   font-size: 20pt;
 46 | }
 47 | 
 48 | textarea {
 49 |   height: 3em;
 50 | }
 51 | 
 52 | blockquote {
 53 |   margin: 0 0 1em 0;
 54 |   font-style: italic;
 55 | }
 56 | 
 57 | h1, h2 {
 58 |   color: $red;
 59 |   margin-bottom: .5em
 60 | }
 61 | 
 62 | h1 {
 63 |   font-size: 30pt;
 64 |   line-height: 1.1em;
 65 | }
 66 | 
 67 | h2 {
 68 |   font-size: 14pt;
 69 | }
 70 | 
 71 | p {
 72 |   margin: 1em 0;
 73 | }
 74 | 
 75 | ul {
 76 |   list-style: none;
 77 |   padding: 0;
 78 |   margin: 0;
 79 | 
 80 |   > li {
 81 |     margin: 0.4em 0;
 82 |   }
 83 | 
 84 |   li li {
 85 |     margin: 0.2em 0;
 86 |   }
 87 | }
 88 | 
 89 | code {
 90 |   display: inline-block;
 91 |   border: solid 1px grey;
 92 |   padding: 0.1em 0.4em;
 93 |   margin: 0.1em 0;
 94 |   border-radius: 0.2em;
 95 |   vertical-align: baseline;
 96 | }
 97 | 
 98 | a {
 99 |   color: inherit;
100 |   text-decoration: none;
101 | }
102 | 
103 | .frame {
104 |   border: 3pt $grey solid;
105 |   width: 100%;
106 |   height: 10em;
107 | }
108 | 
109 | figcaption {
110 |   font-size: 10pt;
111 |   font-style: italic;
112 | }
113 | 
114 | .page {
115 |   box-sizing: border-box;
116 |   page-break-before: always;
117 | 
118 |   position: relative;
119 | 
120 |   width: 100%;
121 |   height: 100%;
122 |   color: $black;
123 |   background: white;
124 |   font-size: 10pt;
125 |   line-height: 1.3;
126 | 
127 |   &:nth-child(odd) {
128 |     padding: 2cm 2cm 2cm 3cm;
129 |   }
130 | 
131 |   &:nth-child(even) {
132 |     padding: 2cm 3cm 2cm 2cm;
133 |   }
134 | 
135 |   &.horizontal {
136 |     page: horizontal;
137 | 
138 |     &:nth-child(odd) {
139 |       padding: 3cm 2cm 2cm 2cm;
140 |     }
141 | 
142 |     &:nth-child(even) {
143 |       padding: 2cm 2cm 3cm 2cm;
144 |     }
145 |   }
146 | 
147 |   img {
148 |     max-width: 100%;
149 |     max-height: 100%;
150 |   }
151 | 
152 |   &.front, &.back {
153 |     background: $red;
154 |     color: white;
155 |     text-align: center;
156 |     padding: 0;
157 |   }
158 | 
159 |   &.front {
160 |     page: cover;
161 |     font-weight: bold;
162 |     font-size: 12pt;
163 | 
164 |     .formula {
165 |       font-size: 50pt;
166 |       padding-top: 5cm;
167 |     }
168 | 
169 |     img {
170 |       width: 2cm;
171 |       vertical-align: middle;
172 | 
173 |       &.flask {
174 |         margin-top: -0.5cm;
175 |       }
176 |     }
177 | 
178 |     header {
179 |       font-size: 25pt;
180 |       margin-bottom: 2cm;
181 |     }
182 | 
183 |     h1 {
184 |       font-size: 70pt;
185 |       margin: 1.5cm 0 0 0;
186 |       color: inherit;
187 |     }
188 |   }
189 | 
190 |   &.back {
191 |     page: cover;
192 |     font-weight: bold;
193 |     font-size: 12pt;
194 | 
195 |     h1 {
196 |       font-size: 50pt;
197 |       padding-top: 8cm;
198 |       margin-top: 0;
199 |       color: inherit;
200 |     }
201 | 
202 |     .copyright {
203 |       font-weight: normal;
204 |     }
205 |   }
206 | 
207 |   &.empty {
208 |     page: empty;
209 |     background: $grey;
210 |   }
211 | 
212 |   &.motivational {
213 |     font-size: 16pt;
214 |     padding-top: 5cm;
215 | 
216 |     * {
217 |       position: relative;
218 |       bottom: 0cm;
219 |     }
220 |   }
221 | }
222 | 
223 | #bentobox {
224 |   position: relative;
225 | 
226 |   h2 {
227 |     margin: 0 0 .3em 0;
228 |   }
229 | 
230 |   p {
231 |     margin: 0;
232 |   }
233 | 
234 |   input {
235 |     width: 3cm;
236 |     background: white;
237 |   }
238 | 
239 |   label {
240 |     font-weight: bold;
241 |   }
242 | 
243 |   .meta {
244 |     position: absolute;
245 |     top: 2cm;
246 |     left: 2cm;
247 | 
248 |     * {
249 |       display: inline-block;
250 |       margin: 0;
251 |       vertical-align: baseline;
252 |     }
253 | 
254 |     h1 {
255 |       margin: 0 1em 0 0;
256 |     }
257 |   }
258 | 
259 |   img {
260 |     margin-top: 1cm;
261 |   }
262 | 
263 |   .compartment {
264 |     position: absolute;
265 |     z-index: 10;
266 |     overflow: hidden;
267 | 
268 |     &.top-left {
269 |       top: 4.75cm;
270 |       left: 2.8cm;
271 |       width: 5cm;
272 |       height: 3.5cm;
273 |     }
274 | 
275 |     &.top-right {
276 |       top: 4.75cm;
277 |       left: 8.75cm;
278 |       width: 9.2cm;
279 |       height: 1.8cm;
280 |     }
281 | 
282 |     &.bottom-left {
283 |       top: 9.3cm;
284 |       left: 2.8cm;
285 |       width: 5cm;
286 |       height: 2.2cm;
287 |     }
288 | 
289 |     &.bottom-right {
290 |       top: 7.3cm;
291 |       left: 8.75cm;
292 |       width: 9.2cm;
293 |       height: 1.8cm;
294 |     }
295 |   }
296 | }
297 | 
298 | @media screen {
299 |   body {
300 |     background: #ddd;
301 |   }
302 | 
303 |   .page {
304 |     box-shadow: 0 0 0.5cm #999;
305 |     width: $page-width;
306 |     height: $page-height;
307 |     margin: 1cm auto;
308 | 
309 |     &.horizontal {
310 |       height: $page-width;
311 |       width: $page-height;
312 |     }
313 |   }
314 | }


--------------------------------------------------------------------------------