diff --git a/.babelrc b/.babelrc index 92346732ece18..34150f898cecd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,11 +1,30 @@ { + "sourceMaps": true, + // "env": { + // "development": { + // "sourceMaps": "inline" + // }, + // "production": { + // "sourceMaps": false + // } + // }, "presets": [ - 'react', - 'es2015', - 'stage-0', + [ + "env", + { + "targets": { + "node": 4.0, + "uglify": true, + } + } + ], + "react", + "flow" ], "plugins": [ - 'transform-flow-strip-types', - 'lodash', - ], + "transform-runtime", + "transform-object-rest-spread", + "transform-async-to-generator", + "transform-flow-strip-types" + ] } diff --git a/.eslintrc b/.eslintrc index 1a1413811d7e4..6ecc7c48c5e5e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,58 +1,73 @@ { "parser": "babel-eslint", "extends": [ - "eslint-config-airbnb", - "plugin:ava/recommended" + "google", + "eslint:recommended", + "plugin:flowtype/recommended", + "plugin:react/recommended", + "prettier", + "prettier/flowtype", + "prettier/react" ], "plugins": [ - "ava", "flowtype", - "flow-vars" + "react" ], - "rules": { - "indent": [2, 2, {"SwitchCase": 1}], - "no-console": [0], - "func-names": [0], - "semi": [2, "never"], - "no-extra-semi": [2], - "space-before-function-paren": [2, "always"], - "no-else-return": [0], - "space-infix-ops": [0], - "react/prefer-es6-class": [0], - "react/prefer-stateless-function": [0], - "no-underscore-dangle": ["error", { "allow": ["_config"] }], - "import/no-unresolved": [0], - "global-require": [0], - "no-duplicate-imports": [0], - /*"flowtype/require-parameter-type": 1,*/ - /*"flowtype/require-return-type": [*/ - /*1,*/ - /*"always",*/ - /*{*/ - /*"annotateUndefined": "never"*/ - /*}*/ - /*],*/ - /*"flowtype/space-after-type-colon": [*/ - /*1,*/ - /*"always"*/ - /*],*/ - /*"flowtype/space-before-type-colon": [*/ - /*1,*/ - /*"never"*/ - /*],*/ - /*"flowtype/type-id-match": [*/ - /*0,*/ - /*"^([A-Z][a-z0-9]+)+Type$"*/ - /*],*/ - /*"flow-vars/define-flow-type": 1,*/ - /*"flow-vars/use-flow-type": 1,*/ + "parserOptions": { + "ecmaVersion": 2016, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } }, - "globals": { - "__PREFIX_LINKS__": true, + "env": { + "es6": true, + "node": true, + "jest": true }, - "settings": { - "flowtype": { - "onlyFilesWithFlowAnnotation": true - } + "rules": { + "no-console": "off", + "valid-jsdoc": "off", + "require-jsdoc": "off", + "quotes": [ + "error", + "backtick" + ], + "consistent-return": [ + "error", + ], + "arrow-body-style": [ + "error", + "as-needed", + { "requireReturnForObjectLiteral": true } + ], + "jsx-quotes": [ + "error", + "prefer-double" + ], + "semi": [ + "error", + "never" + ], + "object-curly-spacing": [ + "error", + "always" + ], + "comma-dangle": [ + "error", + { + "arrays": "always-multiline", + "objects": "always-multiline", + "imports": "always-multiline", + "exports": "always-multiline", + "functions": "ignore" + } + ], + "react/prop-types": [ + "error", + { + "ignore": ["children"] + } + ] } } diff --git a/.flowconfig b/.flowconfig index 3f2c8ddeace7f..1fdf79f22aa58 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,24 +1,10 @@ [version] -0.27.0 +0.42.0 [ignore] -.*/node_modules/.* .*/test/.* - -[include] -node_modules - -[libs] -./interfaces/ -node_modules/iflow-debug/index.js.flow -node_modules/iflow-lodash/index.js.flow -node_modules/iflow-react-router/index.js.flow - -[options] -esproposal.class_instance_fields=enable -esproposal.class_static_fields=enable - -strip_root=true - -suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe -suppress_comment= \\(.\\|\n\\)*\\$FlowIssue \ No newline at end of file +.*/node_modules/typography/.* +.*/node_modules/fbjs/.* +.*/node_modules/react-side-effect/.* +.*/www/.* +.*/examples/.* diff --git a/.gitignore b/.gitignore index 8dfccdb41438d..631126b45fa73 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,12 @@ bin/published.js test/**/public .gatsby-context.js .DS_Store +public/ +node_modules/ +.cache/ +.netlify + +# IDE specific +.vscode/ +yarn.lock +package-lock.json diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000000000..7f8f011eb73d6 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +7 diff --git a/.pre-commit.sh b/.pre-commit.sh new file mode 100755 index 0000000000000..9a0a5667abde4 --- /dev/null +++ b/.pre-commit.sh @@ -0,0 +1,12 @@ +#!/bin/sh +jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ') +[ -z "$jsfiles" ] && exit 0 + +diffs=$(node_modules/.bin/prettier -l $jsfiles) +[ -z "$diffs" ] && exit 0 + +echo "here" +echo >&2 "Javascript files must be formatted with prettier. Please run:" +echo >&2 "node_modules/.bin/prettier --write "$diffs"" + +exit 1 diff --git a/.travis.yml b/.travis.yml index 9cc17aa33ce07..35ec826495ae5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,38 +1,17 @@ -# back to language cpp to try to bypass osx node failure -language: cpp -sudo: false -env: - - export NODE_VERSION="0.12" - - export NODE_VERSION="4" - - export NODE_VERSION="6" -os: - - linux - #- osx -# pre-install to bring in the correct version of node via nvm +language: node_js +node_js: + - "6" + - "8" + +os: [linux] +dist: trusty +sudo: required + before_install: - - git submodule update --init --recursive - - git clone https://github.com/creationix/nvm.git ./.nvm - - source ./.nvm/nvm.sh - - nvm install $NODE_VERSION - - nvm use $NODE_VERSION - - npm config set python `which python` - - if [ $TRAVIS_OS_NAME == "linux" ]; then - export CC="gcc-4.8"; - export CXX="g++-4.8"; - export LINK="gcc-4.8"; - export LINKXX="g++-4.8"; - fi - - gcc --version - - g++ --version -# node 4 depends on gcc 4.8 -addons: - apt: - sources: - - ubuntu-toolchain-r-test - packages: - - g++-4.8 - - gcc-4.8 -# script needed to test, because defaults don't work on osx -script: + - npm i -g npm@latest + +install: - npm install - - npm run test + +script: + - npm test diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000000000..c23dc4fa54641 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,432 @@ +# Change Log + +## [1.0.0-beta.4] - 2017-06-23 + +### Added + +* Add using-remark example site #1230 @fk +* Add friendly webpack ouput #1240 @craig-mulligan +* Add documentation on how to use custom webpack-config #1242 @bananenmannfrau +* Add graphql fields for creating responsive images using Contentful image API #1228 @kyleamathews + +### Changed + +* Refactor Contentful data processing into own module + use more standard GraphQL type names @kyleamathews +* Prefer floats over integers when inferring a GraphQL field #1229 @kyleamathews + +### Fixed + +* Fix babel compilation so targets uglify #1244 @kyleamathews +* Open external image link with rel='noopener' #1227 @wangsongiam +* Update index.d.ts for gatsby-link #1232 @timsuchanek + +## [1.0.0-beta.3] - 2017-06-21 + +### Added + +* Show better errors when there's a graphql compilation problem #1222 @kyleamathews +* Add google tagmanager plugin #1123 @0x80 +* Support path prefixes for service workers @kyleamathews +* When a new service worker is loaded, force reload #1217 @kyleamathews +* www: Make the header fixed for tablets and up #1215 @fk +* Update on Gatsby Windows instructions #1216 @sebastienfi +* Improve GQL query error handling #1214 @0x80 +* An array of linked nodes linking to heterogeneous node types is now converted to a union type #1211 @kyleamathews + +### Fixed +* Final fixes to highlight code line whitespace, doc #1207 @fk +* Increase contentful fetch limit to max of 1000 #1209 @kyleamathews +* Fix broken links on website #1205 @kyleamathews +* Merge sidebar components #1191 @fk +* absolute resolves for gatsby config files #1195 @craig-mulligan +* Update the default sitemap query #1204 @nicholaswyoung +* For Contentful, filter out unresolvable entries and create markdown text nodes #1202 @kyleamathews +* Reduce font-size of the mobile menu labels #1201 @fk +* gatsby-remark-responsive-image: fix misaligned images #1196 @rstacruz +* Fix 100% width code highlight background only being drawn for the vis… #1192 @fk + +## [1.0.0-beta.2] - 2017-06-16 + +### Added +* Add beta 1 blog post #1183 @kyleamathews + +### Fixed +* Fix prism line highlighting #1187 @kyleamathews +* Add .npmignore to source-drupal plugin so it'll publish @kyleamathews +* Fix building thumbnails when an image is processed multiple times #1185 @kyleamathews +* Add event when all plugins are finished running so know when to start running queries #1182 @kyleamathews +| Fix a typo on gatby-link updating #1181 @danielfarrell + + +## [1.0.0-beta.1] - 2017-06-15 + +Our first beta!!! 🎉 + +### Added +* Allow for gatsby-remark-smartypants options #1166 @mitchejj +* New design (for gatsbyjs.org) + new home page #1170 @kyleamathews +* Add ability to locally define plugins #1126 @0x80 +* Add rough draft for docs for creating source plugins #1159 @kyleamathews +* Optimizations around prefetching page resources #1133 @kyleamathews +* Redux example site #1081 @scottyeck +* Sitemap Generator Plugin #1115 @nicholaswyoung +* Add documentation to gatsby-remark-prism @kyleamathews + +### Changed +* Move all filter operators for connections under a top-level "filter" field #1177 @kyleamathews +* Change `linkPrefix` to `pathPrefix` and add an example site #1155 @kyleamathews +* Make the plugin options for remark plugins the second argument (like everywhere else) #1167 @kyleamathews +* Start using next instead of canary in example sites for package versions @kyleamathews + +### Fixed +* Fix graphql compiler on typescript #949 @fabien0102 +* Replace react.createClass with ES6 classes in examples html.js, add PropTypes #1169 @abachuk +* Fix windows build issue #1158 @kyleamathews +* Use custom delimiter when flattening example values for enum fields so easy to convert back @kyleamathews +* gatsby-remark-responsive-images: use span instead of div #1151 @rstacruz +* Add check that we can actually find a linked image file node @kyleamathews +* Ignore SVGs in gatsby-remark-responsive-image #1157 @fk +* Replace using levelup for caching with lowdb to avoid native dependency #1142 @kyleamathews +* Fix Appveyor bug regarding build all examples on release #1118 @jbolda + + +## [1.0.0-alpha20] - 2017-06-05 + +### Added + +- RSS Feed plugin #1073 @nicholaswyoung +- Contentful source plugin #1084 @mericsson +- MVP part 1 of new community Gatsby tutorial #1107 @kyleamathews +- Debuggin help when building HTML fails #1109 @kyleamathews +- Default `html.js` component #1107 @kyleamathews +- Can now highlight specific line numbers in markdown code blocks #1107 @kyleamathews + +## Changed + +- `gatsby-config.js` is no longer required #1107 @kyleamathews +- The Gatsby `serve-build` command is now just `serve` #1107 @kyleamathews + +## Fixed + +- Windows builds on Appveyor #1049 @jbolda + +## [1.0.0-alpha19] - 2017-06-02 +(Skipping over the previous two releases as they had bugs). + +### Added + +- Add a helpful 404 page during development that lists the page you might have wanted @kyleamathews +to link to or how to create a new page at that link #1051 @kyleamathews +- Add "Plop" script for quickly creating new packages #1059 @kyleamathews +- Add new plugin supporting server rendering of Styled Components #1060 @gutenye +- Add new plugin supporting server rendering of react-helmet #1085 @kyleamathews +- Add new plugin for extracting JSDocs information from JavaScript files using documentation.js #1053 @kyleamathews +- Add new API spec (rough draft) @kyleamathews https://www.gatsbyjs.org/docs/api-specification/ +- Add new API reference pages @kyleamathews e.g. https://www.gatsbyjs.org/docs/node-apis/ +- Add "duotone" image processing option to gatsby-plugin-sharp #1047 @fk +- Add example site for image processing @fk https://image-processing.gatsbyjs.org/ +- Add example site for css-in-js library Glamor @kyleamathews https://using-glamor.gatsbyjs.org/ +- Add example site for css-in-js library Styled Components @kyleamathews https://using-styled-components.gatsbyjs.org/ + +### Changed + +#### Grand big API renaming based on our new API spec https://www.gatsbyjs.org/docs/api-specification/ + +API changes: + +[Action creators](https://www.gatsbyjs.org/docs/bound-action-creators/): + +* `upsertPage` is now `createPage` +* `addFieldToNode` is now `createNodeField` +* `deletePageByPath` is now `deletePage` +* `addNodeToParent` is now `createParentChildLink` + +[gatsby-browser.js APIs](https://www.gatsbyjs.org/docs/browser-apis/): + +* `clientEntry` is now `onClientEntry` + +[gatsby-node.js APIs](https://www.gatsbyjs.org/docs/node-apis/): + +* `onNodeCreate` is now `onCreateNode` +* `onUpsertPage` is now `onCreatePage` +* `extendNodeType` is now `setFieldsOnGraphQLNodeType` + +[gatsby-ssr.js APIs](https://www.gatsbyjs.org/docs/ssr-apis/): + +* `modifyHeadComponents` and `modifyPostBodyComponents` were removed in favor of a +new API [`onRenderBody`](https://www.gatsbyjs.org/docs/ssr-apis/#onRenderBody). +* `replaceServerBodyRender` is now `replaceRenderer` + +### Fixed + +- Fix sharp image quality and force file format #1054 @0x80 +- Expose crop focus parameter and make consistent with base64 #1055 @0x80 +- Clean up TravisCI config #1066 @hawkrives +- Fix inference bug #1087 @jquense +- Provide default context for GraphQL #1052 @kyleamathews +- Make determining when a given stage is finished much more reliable #1080 @kyleamathews +- Pick values off plugin's package.json to avoid weird metadata from NPM #1090 @kyleamathews + +### New 1.0 sites launched + +- https://www.vauxlab.com +- https://meetfabric.com + +## [1.0.0-alpha16] - 2017-05-26 +### Added + +- Migration guide @kyleamathews #1032 +- Made nodes fully immutable @kyleamathews #1035 +- Add no-plugins example @scottyeck #1028 +- Add support for "internal" plugins #1010 +- Expose internal Gatsby data through GraphQL @kyleamathews #1014 + +### Changed + +- Removed `updateNode` action creator as part of making nodes immutable in #1035. +Now sites/plugins should use `addFieldToNode` for adding fields to nodes created +by other plugins and `addNodeToParent` for adding a new node as a child to +an existing node. + +### Fixed +- Don't override the default onClick handler in gatsby-link @scottyeck #1019 + +## [1.0.0-alpha15] - 2017-05-15 +### Added + +- Update version of React Router to v4 #940 +- API proxy for use during development #957 +- "static" directory for files to be copied directly into the "public" +directory #956 +- Add `toFormat` argument to the ImageSharp GraphQL type so can change +format of image e.g. from `png` to `jpg`. +- React Docgen transformer plugin for parsing propType info from React +components #928 + +### Changed + +- Change node format to hide most node-specific fields under an "internal" +key. Any code referencing `node.type` and others will need changed to +`node.internal.type` #960 +- Changed the id for the root `
` used by Gatsby to mount React to `___gatsby` +- The default layout component should be at `layouts/index.js` not `layouts/default.js` https://github.com/gatsbyjs/gatsby/pull/940#issuecomment-300537162 +- `this.props.children` in layout components is now a *function* https://github.com/gatsbyjs/gatsby/pull/940#issuecomment-300878300 +- Change the default port for serve-build to 9000 +- Change the path to GraphiQL to `/___graphql` + +### Chore +- Upgrade Jest to v20 #935 + +## [1.0.0-alpha14] - 2017-05-05 +### Added + +- Use the Relay Modern compiler for extracting GraphQL queries from components. +This allows us to now support components being added to *all* components. This +means you can now write queries next to the views that use them. #912 +- Hook for modifying pages #863 +- New Drupal source plugin and example site #890 +- Detect if a site's plugins have changed and when they do, delete the site +cache as it might now be invalid #927 +- New way to make connections between nodes e.g. article --> author #902 + +### Changed + +- Combine transformer and typegen plugins. The distinction between the two +types of plugins has proved somewhat artificial so they were combined. Any +typegen plugins in your `package.json` and `gatsby-config.js` need to be +removed. #918 +- Gatsby now garbage collects old nodes. Source plugins should now "touch" +- nodes that haven't changed #861 +- Due to adopting the Relay compiler, GraphQL query template strings need +named "graphql" plus must be named. So if previously you wrote: + +```js +export const pageQuery = ` +{ + allMarkdownMark { + edges { + node { + id + } + } + } +} +` +``` + +You must now write: + +```js +export const pageQuery = graphql` +query IndexQuery { + allMarkdownMark { + edges { + node { + id + } + } + } +} +` +``` + + +## [1.0.0-alpha10] - 2016-11-17 +### Added +- Did the intitial build of the new gatsbyjs.org! It's in the `www` + subdirectory on the 1.0 branch and is built on each push! That's my +kind of integration testing :-) You can see the early version of the +site at https://gatsbyjs.netlify.com/. PRs welcome! +- Added for page scripts. This speeds up loading scripts + slightly by telling the browser to start downloading the scripts when +the HTML first starts being parsed instead of when the browser reaches +the end. This is especially helpful for large HTML documents on slow +mobile networks. [PR](https://github.com/gatsbyjs/gatsby/pull/558) + +## Changed +- Use namedmodulesplugin instead of recordsPath for ensuring + deterministic builds and long-term cachability. The [previous PR adding +support for recordsPath](https://github.com/gatsbyjs/gatsby/pull/533) +proved unpleasant as you had to build locally and commit the outputted +records.json which was confusing and annoying. +[PR](https://github.com/gatsbyjs/gatsby/pull/559) + +## [1.0.0-alpha9] - 2016-11-04 +### Added +- Put the routes module on `window` to support experimental idea. See + this issue for more](https://github.com/gatsbyjs/gatsby/issues/537). +[commit](https://github.com/gatsbyjs/gatsby/commit/28e84f3aed480d1f5a8f9859172d1c6f531696d4) + +### Changed +- Removed the package `sharp` as it's not used and is preventing Gatsby + 1.0 from being installed on Windows. +[commit](https://github.com/gatsbyjs/gatsby/commit/34fff74e6fb3cae88010b42f74d784382ead4031) + +## [1.0.0-alpha8] - 2016-11-01 +### Added +- Extension API `swOnUpdated` for when a service worker finishes + updating. Use this to alert users of your app to reload to see the +latest version. +[commit](https://github.com/gatsbyjs/gatsby/commit/5173bdc5424e7c874b3f2abfad706cea2e38ebc3) + +### Fixed +- hot reloading now fully works. Apparently you can't use function + components for top-level routes on react-router with react-hot-loader +3.0 `¯\_(ツ)_/¯` [#532](https://github.com/gatsbyjs/gatsby/pull/532) and +[commit](https://github.com/gatsbyjs/gatsby/commit/36f2c169586ea30518639d7b1493e08e05befb73) +- Webpack needs the help of an obscure setting `recordsPath` to preserve + module ids across builds. Big thanks to @NekR for pointing this out to +me. Previous to this change, loading changed JS chunks could cause a JS +error as the module ids the new chunk expects wouldn't match the module +ids from the older chunks. +[#533](https://github.com/gatsbyjs/gatsby/pull/533) + +### Changed +- Disabled hard-source-webpack-plugin. It speeds up builds significantly + but has been causing hard-to-debug errors while developing. We'll +circle back to it down the road. +[commit](https://github.com/gatsbyjs/gatsby/commit/4bc9660ac8c371d23c0295cde52002775eee5aa1) +- Restored using ChunkManifestPlugin. It was disabled while trying to + debug the mismatched module id bug but that being fixed, we're using +it again. +[commit](https://github.com/gatsbyjs/gatsby/commit/8d16905f31b80ca56db225904d60ed78c6091ca9) +- Name modules ids in development for easier debugging. Primary benefit + is you can see which modules are getting hot reloaded. +[commit](https://github.com/gatsbyjs/gatsby/commit/93f6bd2c4206e71623c1a7fa007322f8dc9887be) + +## [1.0.0-alpha7] - 2016-10-27 +### Fixed +- Removed entries from the webpack config looking for + `node_modules/gatsby/node_modules`. This was added to help when +developing Gatsby using `npm link` but when Gatsby is installed +regularly, it then fails the Webpack validation as +`node_modules/gatsby/node_modules` doesn't now exist. + +## [1.0.0-alpha6] - 2016-10-27 +### Added +- extension API for adding types to the GraphQL schema + [commit](https://github.com/gatsbyjs/gatsby/commit/18b8b64ed4cbe3399fb262395c0c6e6a5a16099a) + +### Fixed +- Use babel-traverse instead of using babel-plugin so that don't say + done early when running graphql queries that have async resolvers +[commit](https://github.com/gatsbyjs/gatsby/commit/a19677e38d1ce8ba4fb39ddff75482904f168db6) + +## [1.0.0-alpha5] - 2016-10-14 +### Added +- hard-source-webpack-plugin + [commit](https://github.com/gatsbyjs/gatsby/commit/2c48e5c42887fecabc01c5f5b6f3dd8e06d3372f) +- New replacement API to wrap root component (useful for Redux, et + al.) +[commit](https://github.com/gatsbyjs/gatsby/commit/ebd57d2bd6c39b51a455b76018737e2957e146ef) +- yarn.lock + [commit](https://github.com/gatsbyjs/gatsby/commit/5ce3321b84e912925c4705ececef6f2c817b0684) + +### Changed +- Disable extracting the Webpack chunk manifest until understand why + this breaks updates when using Service Workers +[commit](https://github.com/gatsbyjs/gatsby/commit/07ed5b010ad27b1816084b361f06fd0ae6a017ba) + +## [1.0.0-alpha4] - 2016-10-07 +### Added +- Add more file extensions to file/url loader config. Default to url + loader unless it never makes sense to use data-uri e.g. favicons. +- Use api-runner-browser for calling browser extension + APIs/replacements. Prep for plugin system. +- Add extension API `clientEntry` that let's site code and plugins to + run code at the very start of client app. + +### Changed +- Add config to uglify to ignore ie8. +- Disable building AppCache until can research if useful. +- Turn on screw_ie8 options in UglifyJS. + +### Fixed +- Actually use the "sources" key from gatsby-config.js for looking for +markdown files. This will be getting an overhaul soon. +- Don't use null-loader for css during the build-js stage as this + prevents offline-plugin from caching files referenced in your CSS. +- Add missing publicPath for build-html step. + +## [1.0.0-alpha3] - 2016-10-05 +### Added +- Introduce way to programatically add components to `` + API to take over SSR rendering [a39c2a5](https://github.com/gatsbyjs/gatsby/commit/a39c2a5) +- Extract webpack manifest from commons.js so it doesn't change on every + build improving its cachability +[0941d33](https://github.com/gatsbyjs/gatsby/commit/0941d33) +- Always add babel-plugin-add-module-exports + [97f083d](https://github.com/gatsbyjs/gatsby/commit/97f083d) + +### Changed +- Upgraded React Hot Loader to 3.0-beta5 + [5185c3a](https://github.com/gatsbyjs/gatsby/commit/5185c3a) + +### Fixed +- Ensure bundle names for components and paths are unique [342030d](https://github.com/gatsbyjs/gatsby/commit/342030d) + [a1dfe19](https://github.com/gatsbyjs/gatsby/commit/a1dfe19) +- Remove old code loading config.toml + [66f901](https://github.com/gatsbyjs/gatsby/commit/66f901) + +## [1.0.0-alpha2] - 2016-09-21 +### Added +- New system for specifying page layouts inspired by Jekyll. +- `` and `` helper components for rendering + correct scripts and styles in your html.js, +- Validate at runtime gatsby-config.js and page objects. +- Start of new plugin system. +- New extension API: `onPostCreatePages` — called with pages after all + pages are created. Useful for programmatically modifying pages created +in plugins. + +### Changed +- Removed remaining 0.x code +- Exit if can't find local install of Gatsby. + [030f655](https://github.com/gatsbyjs/gatsby/commit/030f655075be5ad91af1dc12a05e6bd153a861df) +- Fix folder hierarchy for looking for loaders and modules #435 +- Changed default `Config` GraphQL type to `Site` and added some + Jekyll-inspired fields. + +## [1.0.0-alpha1] - 2016-09-02 +### Added +- Initial versions of new GraphQL data layer, PRPL pattern, programmatic routes, code + splitting, supporting long-term caching of JS files. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3e9c7b273410d..fa71d45d16e27 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,34 +1,84 @@ -# Filing an issue +--- +title: How to contribute +--- -If you want your issue to be resolved quickly, please include in your -issue: +## Filing an issue + +If you want your issue to be resolved quickly, please include in your issue: * Gatsby version, node.js version, OS version -* The contents of your `gatsby-node.js`, `gatsby-browser.js`, and `package.json`. +* The contents of your `gatsby-config.js` and `package.json` as well as your + `gatsby-node.js`, `gatsby-browser.js` `gatsby-ssr.js` files depending on + changes you've made there. -# Contributing -You can install the latest `master` version of Gatsby by following these -simple steps: +## Contributing +You can install the latest version of Gatsby by following these steps: * Clone the repo, navigate to its directory. -* Execute `npm install` to install packages. -* Execute `npm uninstall -g gatsby && npm link` -* Use `git pull` to update to latest Gatsby. - -Test suite can be run via `npm test`. - -This project uses [FlowType](https://flowtype.org/) for static type checking. +* Install dependencies using `npm install` in the root of the repo. The usual contributing steps are: * Fork the [official repository](https://github.com/gatsbyjs/gatsby). * Clone your fork: git clone `git@github.com:/gatsby.git` -* Make sure tests are passing for you: npm install && npm test -* Create a topic branch: git checkout -b topics/new-feature-name -* Run `npm run watch` to watch code and compile your changes. -* Clone one of the official repositories and "link" your fork of Gatsby - to it (run `npm link gatsby`). +* Install gatsby-dev-cli globally: `npm install -g gatsby-dev-cli@canary` +* Checkout the 1.0 branch: `git checkout 1.0` +* Install dependencies: `npm install` +* Make sure tests are passing for you: `npm test` +* Create a topic branch: `git checkout -b topics/new-feature-name` +* Run `npm run watch` to do an initial Babel build of all packages and watch for + changes to packages' source code and compile changes on the fly as you + work. +* For each of your Gatsby test sites, run the `gatsby-dev` command there to copy + the built files from your cloned copy of Gatsby. It'll watch for your changes + to Gatsby packages and copy them into the site. For more detailed + instructions see the [gatsby-dev-cli README](/docs/packages/gatsby-dev-cli/) * Add tests and code for your changes. -* Once you‘re done, make sure all tests still pass: npm install && npm test +* Once you're done, make sure all tests still pass: `npm test` * Commit and push to your fork. * Create an pull request from your branch. + +## Development tools + +### Redux devtools + +Gatsby uses Redux for managing state during development and building. It's +often helpful to see the flow of actions and builtup state for a site you're +working on or if adding new functionality to core. We leverage +https://github.com/zalmoxisus/remote-redux-devtools and +https://github.com/zalmoxisus/remotedev-server to give you use the Redux +devtools extension for debugging Gatsby. + +To use this, first install +[redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) +in your browser. Then in your Gatsby repo, run `npm run remotedev`. Then in +your site directory run `REDUX_DEVTOOLS=true gatsby develop`. Depending on +your operating system and shell, you may need to modify how you set the +`REDUX_DEVTOOLS` environment variable. + +At this point, your site will be sending Redux actions and state to the remote server. + +To connect to this, you need to setup the devtools extension to talk to the remote +server. + +First open the remote devtools. + +![how to open the redux remote devtools extension](./images/open-remote-dev-tools.png) + +Then click settings along the bottom menu and set the host and port. + +![how to set the host/port for the remote devtools extension to connect to Gatsby](./images/remote-dev-settings.png) + +After this, the devtools extension *should* connect to the remote server and you'll +see actions start showing up. + +![gatsby redux remote devtools](./images/running-redux-devtools.png) + +**Warning!! Lots of buginess**. While having this available is extreamly +helpful, this setup is very buggy and fragile. There is a memory leak in the +extension that's triggered it seems every time you restart the Gatsby +development server. Also the extension often, for no apparent reason, just +won't show any actions from the remote server. It'll also often freeze up. The +best solution seems to just be turning everything off and on again. Fixing up +these tools would be very helpful for us and many others using these tools if +someone wants to take this on! diff --git a/README.md b/README.md index 66f830daa9a34..9e76a0981825b 100644 --- a/README.md +++ b/README.md @@ -3,494 +3,21 @@ [![gatsby channel on discord](https://img.shields.io/badge/discord-gatsby%40reactiflux-738bd7.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bVoxkfV) [![Twitter Follow](https://img.shields.io/twitter/follow/gatsbyjs.svg?style=social)](https://twitter.com/gatsbyjs) -# Gatsby -Transform plain text into dynamic blogs and websites using the latest -web technologies. A React.js static site generator. +# Gatsby 1.0 -Supports Markdown, HTML, and React.js pages out of the box. Easy to add -support for additional files types. +⚛️📄🚀 Blazing fast React.js static site generator -Leverages React's [component model](https://facebook.github.io/react/blog/2013/06/05/why-react.html) - and [React Router's "nested component hierarchy"](https://github.com/rackt/react-router/blob/master/docs/Introduction.md) -to make templating incredibly powerful and intuitive. +1.0 is close to being finished! Come help test and develop the remaining features. +There's a list of remaining work in the umbrella issue. Hop on Discord to ask +get context on where you can help out. Check out the contributor guide for +how to setup your Gatsby development environment. -All templates, css, and content are *hot reloadable* — powered by -[webpack](https://github.com/webpack/webpack). +* [1.0 intro issue](https://github.com/gatsbyjs/gatsby/issues/419) +* [1.0 umbrella issue](https://github.com/gatsbyjs/gatsby/issues/796) +* [Guide to getting started with developing on Gatsby core](https://www.gatsbyjs.org/docs/how-to-contribute/) -Build sites like it's 1995. Files are translated into HTML pages at the -same position within the file system. Add a markdown file at `/docs/index.md` and -it'll be converted to `/docs/index.html`. +## 1.0 sites -*[We've started work on a 1.0 release of Gatsby!](https://github.com/gatsbyjs/gatsby/issues/419)* - -![live-reloading example](http://zippy.gfycat.com/UltimateWeeklyBarebirdbat.gif) - -## Goals -* No-reload page transitions -* Hot reload editing. Tweak your pages, templates, and styles and see changes in - real time. -* Make React.js component model and ecosystem available for building static sites -* Intuitive directory-based URLs. The URL of a page is derived from its - spot on the file system. -* Support "Starters" — install starter sites directly from Github. Use open sourced - starters or build your own. - -## Why use Gatsby instead of other Static Site Generators -* No-refresh page transitions -* The awesome React.js component model -* Live editing on every part of your site. Dramatically speed development. - -## Sites built with Gatsby -* [bricolage.io](https://bricolage.io/?utm_source=github.com) ([source](https://github.com/KyleAMathews/blog)) -* [relaterocket.co](https://relaterocket.co?utm_source=github.com) -* [reindex.io](https://www.reindex.io) -* [syncano.io](https://www.syncano.io) ([source](https://github.com/Syncano/syncano.com)) -* [graphene-python.org](http://graphene-python.org/) ([source](https://github.com/graphql-python/graphene/tree/master/docs)) -* [back-to-the-basics.io](http://back-to-the-basics.io/) -* [ashk.io](http://ashk.io/) ([source](https://github.com/wpioneer/blog)) -* [nordnet.se/brand](https://www.nordnet.se/brand/) -* [likescoffee.com](https://likescoffee.com/) ([source](https://github.com/pamo/pamo.github.io/tree/development)) -* [vii.campjs.com](http://vii.campjs.com/) ([source](https://github.com/campjs/campjs-vii)) -* [michaeljdeeb.com](http://michaeljdeeb.com) ([source](https://github.com/michaeljdeeb/michaeljdeeb-gatsby-blog)) -* [brittcrawford.com](http://brittcrawford.com) ([source](https://github.com/britt/britt.github.com/tree/gatsby)) -* [React-MDL](https://tleunen.github.io/react-mdl/) ([source](https://github.com/tleunen/react-mdl/tree/master/docs)) -* [Snapgit](https://snapgit.com) ([source](https://github.com/glassfalcon/snapgit.com)) -* [iamdustan.com](http://iamdustan.com/) ([source](https://github.com/iamdustan/iamdustan.github.io)) -* [React Hardware](http://iamdustan.com/react-hardware/) ([source](https://github.com/iamdustan/react-hardware/tree/master/docs)) -* [peterp.me](https://www.peterp.me) ([source](https://github.com/peterpme/peterpme.github.io)) -* [k-create.com](https://k-create.com) ([source](https://github.com/kristofferh/kristoffer)) -* [kylegach.com](https://kylegach.com) ([source](https://github.com/kylegach/kylegach_com)) -* [jazlal.li](http://jazlal.li) ([source](https://github.com/jazlalli/jazlal.li)) -* [React Headroom](https://kyleamathews.github.io/react-headroom/) ([source](https://github.com/KyleAMathews/react-headroom/tree/master/website)) -* [Völlig Ohne](http://volligohne.com/) ([source](https://github.com/voellig-ohne/voellig-ohne-website)) -* [michaelcereda.com](https://michaelcereda.com/) ([source](https://github.com/MichaelCereda/michaelcereda.com)) -* [openFDA](https://open.fda.gov/) ([source](https://github.com/FDA/open.fda.gov)) -* [emilyaviva.com](http://emilyaviva.com) ([source](https://github.com/emilyaviva/eakm-website-gatsby)) -* [dynamicext.com](http://www.dynamicext.com/) -* [React Gravatar](http://kyleamathews.github.io/react-gravatar/) ([source](https://github.com/KyleAMathews/react-gravatar/tree/master/www)) -* [johnm.io](http://johnm.io) ([source](https://github.com/johnpmorris/johnpmorris.github.io/tree/react-rebuild)) -* [twnsnd.co](http://twnsnd.co/) -* [Beau Han Xu](http://www.beauhanxu.com/) -* [HalfAtheist](https://halfatheist.com/) ([source](https://github.com/halfatheist/halfatheist.github.io)) -* [joshuahorwitz.net](http://joshuahorwitz.net) -* [DOSH](http://www.dosh.cash/) -* [Outcomes.com](https://www.outcomes.com/) -* [Codefellows.org](https://www.codefellows.org) -* [ollieglass.com](http://ollieglass.com/) -* [waigojs.com](https://waigojs.com/) ([source](https://github.com/waigo/waigo.github.io)) -* [The State Of JavaScript](http://stateofjs.com/) -* [FlashMobile](http://www.flashmobile.mx/en/) -* [ZBT MIT Website](http://zbt.mit.edu) ([source](https://github.com/Slava/zbt-website)) -* [ethereumclassic.org](http://ethereumclassic.org/) ([source](https://github.com/ethereumclassic/ethereumclassic.github.io/tree/source)) -* [Husam Machlovi, Portfolio & Blog](http://husammachlovi.com) -* [Edit this file to add yours!](https://github.com/gatsbyjs/gatsby/blob/master/README.md) - -*Note, for the sites that have made their source available, you can -install them locally by running `gatsby new SITE_NAME SOURCE_URL`.* - -## Sponsors -* [RelateRocket](https://relaterocket.co) -* [Thinkmill](http://thinkmill.com.au/) - -## Videos and blogs -* [Scott Nonnenberg](https://twitter.com/scottnonnenberg) presents on Gatsby to the Seattle React.js Meetup https://blog.scottnonnenberg.com/static-site-generation-with-gatsby-js/ -* [Kyle Mathews](https://twitter.com/kylemathews) gave a lightning talk @ the 2016 React.js Conference on Gatsby https://www.youtube.com/watch?v=RFkNRKL6ZoE -* [Kyle Mathews](https://twitter.com/kylemathews) spoke on Gatsby to the San Francisco Static Web Tech meetup http://www.staticwebtech.com/presentations/developing-with-react-gatsbyjs/ -* [ReactJS E-Commerce With No Backend Using Snipcart & Gatsby](https://snipcart.com/blog/snipcart-reactjs-static-ecommerce-gatsby) -* [A step-by-step guide: Gatsby on Netlify](https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify) -* [Hosting GatsbyJS – A React Static Site Generator](https://www.aerobatic.com/blog/gatsbyjs) -* [Michael Cereda's multi-part series of blog posts on building his site with Gatsby](https://medium.com/@michaelcereda/creating-an-isomorphic-universal-website-with-react-part-1-a905350acba8#.akoo25l6j) - -## I'm already building a server-rendered React.js site, is Gatsby a good fit? - -If your site falls closer to the site end of the app<---->site spectrum -then yes. - -Gatsby is an excellent fit for blogs, marketing sites, docs sites, etc. Proper web -apps should probably remain as normal web apps (though I'd love to be -proved wrong!). - -## Warning! - -Gatsby is not yet stable. APIs will break. Functionality is missing. It's -usable but if you plan on building with it, expect a rocky road for some time. - -Contributions welcome! - -## Getting started - -### Install -`npm install -g gatsby` - -### Usage -1. Create new Gatsby site `gatsby new my-test-gatsby-site` This creates the - directory for your Gatsby project and adds the minimal files - needed. -2. `cd my-test-gatsby-site` -3. `gatsby develop` — Gatsby will start a hot-reloading development - server accessible at [localhost:8000](http://localhost:8000) -4. See the tutorial below for more. - -### Gatsby Starters -The Gatsby CLI tool lets you install "starters". These are -partially built sites preconfigured to help you get moving faster on -creating a certain type of site. - -When creating a new site, you can optionally specify a starter to -base your new site on e.g. `gatsby new [SITE_DIRECTORY] [URL_OF_STARTER]` - -For example, to quickly create a blog using Gatsby, you could install -the Gatsby Starter Blog by running: - -`gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog` - -This downloads the files and initializes the site by running `npm -install` - -If you don't specify a custom starter, your site will be created -from the [default -starter](https://github.com/gatsbyjs/gatsby-starter-default). - -There are several starters that have been created. Create a PR to -include yours! - -* [Kitchen sink default starter](https://github.com/gatsbyjs/gatsby-starter-default) ([Demo](http://gatsbyjs.github.io/gatsby-starter-default/)) -* [Simple blog](https://github.com/gatsbyjs/gatsby-starter-blog) ([Demo](http://gatsbyjs.github.io/gatsby-starter-blog/)) -* [Simple documentation site](https://github.com/gatsbyjs/gatsby-starter-documentation) ([Demo](http://gatsbyjs.github.io/gatsby-starter-documentation/)) -* [Lumen](https://github.com/wpioneer/gatsby-starter-lumen) ([Demo](http://wpioneer.github.io/gatsby-starter-lumen/)) -* [DrunkenBlog](https://github.com/konsumer/gatsby-starter-drunkenblog) ([Demo](http://konsumer.js.org/gatsby-starter-drunkenblog/)) - -### Tutorial: Building a documentation site from the Gatsby Documentation Starter -1. Install gatsby `npm install -g gatsby` -1. Install documentation site starter `gatsby new docs-site - gh:gatsbyjs/gatsby-starter-documentation` -2. type `cd docs-site` -2. type `gatsby develop` -3. Open site in browser at [localhost:8000](http://localhost:8000). Verify clicking on links works. -4. Try editing the site's config file `config.toml`. - Change the `siteTitle` key. The site's title should change shortly - after saving. -5. Next try editing a doc page. Open - `/pages/docs/getting-started/index.md` and edit it. Again any saved - changes should load without refreshing in the browser. -6. Add a new markdown page to the documentation. Copy the `getting-started` - directory to `some-additional-steps`. Then edit the markdown file - within the new directory. If you're familiar with other static site - generation software, you'll be familiar with the "frontmatter" at the - top of the file. Edit the title there + change the order to "5". Save - this. Ideally this new file would be hot reloaded like other changes - but I haven't figured out how to make this happen yet ([help - appreciated here](https://github.com/webpack/webpack/issues/1162)). - So to see your new page, restart `gatsby develop` and then refresh your - browser. -7. Build your site `gatsby build`. The site is built to the `/public` - directory. Test that the build worked by running `gatsby serve-build` - which serves the contents of the `/public` directory. - -## How Gatsby works - -### How files become pages -The process is file --> Webpack loader --> React.js wrapper component ---> static HTML page. - -Gatsby leverages [Webpack](http://webpack.github.io/) extensively. - Webpack is a sophisticated module bundler that can turn any sort of -file into a commonjs module. Webpack uses "Loaders" to convert a file -into a module. These loaded modules are then wrapped inside a React.js -component that's specific to a given file type. Gatsby then generates a -static HTML page from this component. - -Gatsby ships with default loaders and wrappers for HTML, Markdown, and -JSX/CJSX but for most projects you'll want to write your own loaders and -wrappers (very easy to do). - -As an example of how this process works, let's walk quickly through -converting a markdown file into an HTML page. - -The [default Gatsby markdown -loader](https://github.com/gatsbyjs/gatsby/blob/master/lib/loaders/markdown-loader/index.js) - parses the markdown into HTML and uses [Highlight.js](https://highlightjs.org/) - to syntax highlight code blocks. - -Our markdown file. - -```markdown ---- -title: This is a title ---- - -# Hi friends. -This is a markdown file. -``` - -When loaded and required, the resulting javascript object looks like the following: - -```javascript -{ - file: { - // Information about file on disk e.g. extension, directory path, etc. - }, - data: { - title: "This is a title", - body: "

Hi friends.

This is a markdown file

" - } -} -``` -Now Gatsby wraps the markdown file in this very simple React.js component. - -```javascript -module.exports = React.createClass({ - displayName: "MarkdownWrapper", - - render: function() { - var post = this.props.route.page.data - - return
-

{post.title}

-
-
- } -}) -``` - -### Structure of a Gatsby site -* `config.toml` - Core application configuration is stored here. Available via a `require` -or `import` of 'config'. Values: - * `noProductionJavascript` - set to a truthy value to prevent generation of bundle.js - (containing your client-side Single Page App) during a `gatbsy build`. You'll need - to update your top-level `html.js` file so that it doesn't pull in `bundle.js` in - production, but you'll want to keep it for `gatsby develop` mode. -* `/pages` - All pages go here. Everything is turned into a page except -files which start with an underscore: - * `_template` files under `/pages` are treated as parent templates for other pages in - the same directory tree. - * (optional) `pages/404.js` or `pages/404.html` - automatically picked up as your 'not - found' page. If you `` to an unknown URL, this page will be shown. Note: in - production, you'll need to [set up your server host to show this page when it can't find - the requested file](https://github.com/gatsbyjs/gatsby/pull/121#issuecomment-194715068). -* (optional) `gatsby-browser.js` - a way to hook into key application events. Export -`onRouteUpdate` of type `function()` to be notified whenever React-Router -navigates. -* (optional) `gatsby-node.js` - a way to hook into events during build -and development. - -### How to use your own webpack loaders - -Gatsby uses [webpack-configurator](https://github.com/lewie9021/webpack-configurator) -to make changing the webpack loaders easy. The default set of loaders is organized by [key](lib/utils/webpack.config.js#L125). - -To modify the Webpack configuration, create a `gatsby-node.js` in the root of your project -and export there a `modifyWebpackConfig` function. - -```javascript -exports.modifyWebpackConfig = function(config, env) { - // edit loaders here - return config -} -``` - -Gatsby calls this function with the webpack-configurator object and -environment string when it creates a Webpack config. It first -loads the defaults and then allows you to modify it. - -The `env` can be - -* `develop` (when running `gatsby develop`) -* `static` (when Gatsby is building static HTML pages) -* `production` (when Gatsby is generating the CSS/JS bundles) - -Consider the following example which removes the default css loader -and replaces it with a loader that uses css-modules. - -```javascript -exports.modifyWebpackConfig = function(config, env) { - config.removeLoader('css') - config.loader('css', function(cfg) { - cfg.test = /\.css$/ - cfg.loader = 'style!css?modules' - return cfg - }) - return config -} -``` - -Each loader (`cfg` in the above example) can be a valid -[webpack loader](https://webpack.github.io/docs/configuration.html#module-loaders) -and there are a host of -[preexisting loaders](https://webpack.github.io/docs/list-of-loaders.html) -which you can use to enhance Gatsby. - -It is also possible to [write your own loaders](https://webpack.github.io/docs/how-to-write-a-loader.html). - -Gatsby includes [some default loaders](https://github.com/gatsbyjs/gatsby/tree/master/lib/loaders) that you can also override. - -To write your own loader or override a Gatsby loader, make a `loaders` directory at the root of your site that contains directories for custom loaders. - -e.g. `loaders/markdown-loader/index.js` [will take precedence](https://github.com/gatsbyjs/gatsby/blob/master/lib/utils/webpack.config.js#L325) -over the markdown-loader that Gatsby includes. - -[See an example of a custom loader in the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/master/loaders/markdown-loader/index.js). - -### How to use your own webpack plugins - -Similar to the loaders, plugins are handled via -[webpack-configurator](https://github.com/lewie9021/webpack-configurator) -and `gatsby-node.js`. - -_Note: the following example is now redundant since -ExtractTextWebpackPlugin is now setup by default but you can still use -it as an example of how to modify the Webpack plugins._ - -If we wanted to extract all of the css in our project into a since -`styles.css` file for production, we could add the -`ExtractTextWebpackPlugin`. To do this, we need to modify the loader -and add the plugin when generating the static HTML for our site. - -```javascript -var ExtractTextPlugin = require("extract-text-webpack-plugin") - -exports.modifyWebpackConfig = function(config, env) { - if(env === 'static') { - config.removeLoader('css') - config.loader('css', function(cfg) { - cfg.test = /\.css$/ - cfg.loader = ExtractTextPlugin.extract('css?minimize') - return cfg - }) - config.plugin('extract-css', - ExtractTextPlugin, - ["styles.css", { allChunks: true }]) - } - return config -} -``` - -Each plugin (`extract-css` in the above example) can be a valid -[webpack plugin](https://webpack.github.io/docs/using-plugins.html) -and there are a host of -[preexisting plugins](https://webpack.github.io/docs/list-of-plugins.html) -which you can use to enhance Gatsby. - -It is also possible to -[write your own plugins](https://webpack.github.io/docs/how-to-write-a-plugin.html). - -### Perform additional post build step - -Gatsby also uses `gatsby-node.js` to pass control of the final build step over -to the user when running `gatsby build`. The post build function takes two arguments, the pages and the callback for completing the build: - -```javascript -export.postBuild = function(pages, callback) { - // perform actions on pages here - - callback() -} -``` - -### How to write your own wrappers -* Coming... - -## FAQ - -### I added a new page and it's not showing up! - -[Webpack doesn't currently support hot-reloading new files added to a context](https://github.com/webpack/webpack/issues/1162). When you add a new file, restart the `gatsby develop` process and your new page will show up. - -Make sure you also including the **trailing slash** in your URLs: - -- Bad: `http://localhost:8000/foo` -- Good: `http://localhost:8000/foo/` - -### Inline CSS - -A neat performance feature supported by Gatsby is inlining your CSS in -the `` of each HTML page. Not referencing external style sheets -significantly speeds up the initial render of your site by avoiding -another round trip to your server as the initial render of a page is -blocked by external CSS files. This is a best practice suggested by -many groups including [Google's AMP -project](https://www.ampproject.org/docs/guides/responsive/style_pages.html). - -Each of [the official starters supports this pattern](https://github.com/gatsbyjs/gatsby-starter-default/blob/master/html.js). - The code to make it happen is in brief: - -```javascript -// In your html.js -let css -// In development, css is injected by Javascript by the Webpack style-loader. -if (process.env.NODE_ENV === 'production') { - css = + + diff --git a/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/Creativecommons-informational-flyer_eng.pdf b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/Creativecommons-informational-flyer_eng.pdf new file mode 100644 index 0000000000000..c590f0895e82f Binary files /dev/null and b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/Creativecommons-informational-flyer_eng.pdf differ diff --git a/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/denys-nevozhai-184452.jpg b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/denys-nevozhai-184452.jpg new file mode 100644 index 0000000000000..386763b9eed0e Binary files /dev/null and b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/denys-nevozhai-184452.jpg differ diff --git a/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/index.md b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/index.md new file mode 100644 index 0000000000000..18e4d63d33ac2 --- /dev/null +++ b/examples/using-remark/src/pages/2017-03-21---copy-linked-files-intercepting-local-links/index.md @@ -0,0 +1,31 @@ +--- +title: "Copying Linked Files and Intercepting Local Links" +date: "2017-03-21" +draft: false +author: Daisy Buchanan +tags: + - remark + - linked files + - local links +--- +![](denys-nevozhai-184452.jpg) +*Photo by [Denys Nevozhai](https://unsplash.com/@dnevozhai) via [Unsplash](https://unsplash.com/@dnevozhai?photo=DlnK1KOREds)* + +## Copying Linked Files + +[gatsby-remark-copy-linked-files][1] copies files linked to from Markdown to +your `public` folder. + +Let's try with a PDF, that you should be able to preview and/or download by +clicking this link: [Creative Commons Informational Flyer.pdf](Creativecommons-informational-flyer_eng.pdf) + +## Intercepting Local Links + +[gatsby-plugin-catch-links][2] intercepts local links from Markdown and other +non-react pages and does a client-side `pushState` to avoid the browser having +to refresh the page. + +Let's try linking to the "[Code and Syntax Highlighting with PrismJS](/code-and-syntax-highlighting/)" article… + +[1]: https://www.gatsbyjs.org/docs/packages/gatsby-remark-copy-linked-files/ +[2]: https://www.gatsbyjs.org/docs/packages/gatsby-plugin-catch-links/ diff --git a/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md new file mode 100644 index 0000000000000..fd20df5249b35 --- /dev/null +++ b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md @@ -0,0 +1,164 @@ +--- +title: "Code and Syntax Highlighting with PrismJS" +date: "2017-04-04" +draft: false +author: Daisy Buchanan +tags: + - remark + - Code Highlighting +--- +![](jeremy-bishop-262119.jpg) +*Photo by [Jeremy Bishop](https://unsplash.com/@tidesinourveins) via [Unsplash](https://unsplash.com/?photo=XxpCNQ_w3is)* + +Code blocks are part of the Markdown spec, but syntax highlighting isn't. +However, many renderers support syntax highlighting. +In [gatsby-remark-prismjs][1], we use 🤔 [PrismJS][2]. + +## Inline code + +```no-highlight +Inline `code` has `back-ticks around` it. +``` + +Inline `code` has `back-ticks around` it. + +## Code blocks + +In Markdown, blocks of code are either fenced by lines with three back-ticks +```, or are indented with four spaces. Fenced code +blocks are easier to write and maintain, and only they support syntax +highlighting by indicating a language. + +To see the complete list of supported languages, and how to write language +names, see the [PrismJS homepage][3]. + + ```javascript + var s = "JavaScript syntax highlighting"; + alert(s); + ``` + + ```python + s = "Python syntax highlighting" + print s + ``` + + ``` + No language indicated, so no syntax highlighting. + But let's throw in a <b>tag</b>. + ``` + +```javascript +var s = "JavaScript syntax highlighting"; +alert(s); +``` + +```python +s = "Python syntax highlighting" +print s +``` + +``` +No language indicated, so no syntax highlighting. +But let's throw in a tag. +``` + +## Line highlighting + +[gatsby-remark-prismjs][1] has its own line highlighting implementation which +differs a bit from PrismJS's own. You can find out everything about it in the +[corresponding README][1]. + + ```javascript{1-2,22} + // In your gatsby-config.js + // Let's make this line very long so that our container has to scroll its overflow… + plugins: [ + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + { + resolve: `gatsby-remark-responsive-image`, + options: { + maxWidth: 756, + }, + }, + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + `gatsby-remark-copy-linked-files`, + `gatsby-remark-smartypants`, + `gatsby-remark-prismjs`, + ] + } + } + ] + ``` + +```javascript{1-2,22} +// In your gatsby-config.js +// Let's make this line very long so that our container has to scroll its overflow… +plugins: [ + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + { + resolve: `gatsby-remark-responsive-image`, + options: { + maxWidth: 756, + }, + }, + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + `gatsby-remark-copy-linked-files`, + `gatsby-remark-smartypants`, + `gatsby-remark-prismjs`, + ] + } + } +] +``` + +Let's do something crazy and add a list with another code example: + +* **A list item** + + …and a paragraph! In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. + + 1. A nested numbered list + 2. “Whenever you feel like criticizing any one,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve had.” + +* Roger that, now back to topic: _Highlighted code blocks work here, too:_ + ```css{10,13} + .clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + .clearfix { display: inline-table; } + /* Hides from IE-mac \*/ + * html .clearfix { height: 1%; } + .clearfix { display: block; } + /* End hide from IE-mac */ + ``` + + Wow, "IE-mac"? [Yeah, that was a thing](https://en.wikipedia.org/wiki/Internet_Explorer_for_Mac) back in the day … a good one at the time, too: + + > Initial versions were developed from the same code base as Internet Explorer for Windows. Later versions diverged, particularly with the release of version 5 which included the cutting edge, [fault-tolerant](https://en.wikipedia.org/wiki/Fault-tolerant) and highly standards-compliant [Tasman](https://en.wikipedia.org/wiki/Tasman_(layout_engine)) [layout engine](https://en.wikipedia.org/wiki/Layout_engine). + + Source: https://en.wikipedia.org/wiki/Internet_Explorer_for_Mac +* ** The last list item** –- no more list items after this one, pinky swear! + +[1]: https://www.gatsbyjs.org/docs/packages/gatsby-remark-prismjs/ +[2]: http://prismjs.com/ +[3]: http://prismjs.com/#languages-list diff --git a/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/jeremy-bishop-262119.jpg b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/jeremy-bishop-262119.jpg new file mode 100644 index 0000000000000..762ac12dde094 Binary files /dev/null and b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/jeremy-bishop-262119.jpg differ diff --git a/examples/using-remark/src/pages/author.yaml b/examples/using-remark/src/pages/author.yaml new file mode 100644 index 0000000000000..a4c5fadaa1da6 --- /dev/null +++ b/examples/using-remark/src/pages/author.yaml @@ -0,0 +1,6 @@ +- id: Daisy Buchanan + avatar: avatars/daisy.jpg + bio: is an attractive, if shallow and self-absorbed, young woman. +- id: Jay Gatsby + avatar: avatars/jay.jpg + bio: is a mysterious millionaire with shady business connections. diff --git a/examples/using-remark/src/pages/avatars/daisy.jpg b/examples/using-remark/src/pages/avatars/daisy.jpg new file mode 100644 index 0000000000000..efff30fbd05af Binary files /dev/null and b/examples/using-remark/src/pages/avatars/daisy.jpg differ diff --git a/examples/using-remark/src/pages/avatars/jay.jpg b/examples/using-remark/src/pages/avatars/jay.jpg new file mode 100644 index 0000000000000..b36909b88093f Binary files /dev/null and b/examples/using-remark/src/pages/avatars/jay.jpg differ diff --git a/examples/using-remark/src/pages/index.js b/examples/using-remark/src/pages/index.js new file mode 100644 index 0000000000000..9029f35dff34a --- /dev/null +++ b/examples/using-remark/src/pages/index.js @@ -0,0 +1,102 @@ +import React from "react" +import Link from "gatsby-link" +import styles from "../styles" +import presets from "../utils/presets" +import { rhythm, scale } from "../utils/typography" + +class Index extends React.Component { + render() { + const posts = this.props.data.allMarkdownRemark.edges + const author = this.props.data.site.siteMetadata.author + const authorTitle = this.props.data.site.siteMetadata.authorTitle + const description = this.props.data.site.siteMetadata.description + + return ( +
+
+

+ This example demonstrates{` `} + + gatsby-transformer-remark + + {` `} + and its plugins. It uses{` `} + + Typography.js + + {` `} + and self-hosted fonts via the{` `} + Typefaces + {` `} + project. +

+
    + {posts.map(post => +
  • + + {post.node.frontmatter.date} + + + {post.node.frontmatter.title} + +
    • + )} +
+
+
+ ) + } +} + +export default Index + +export const pageQuery = graphql` + query IndexQuery { + site { + siteMetadata { + title + author + description + } + } + allMarkdownRemark( + limit: 2000, + sort: { fields: [frontmatter___date], order: DESC }, + filter: { frontmatter: { draft: { ne: true } } }, + ) { + edges { + node { + fields { + slug + } + frontmatter { + title + date(formatString: "MMMM DD, YYYY") + } + } + } + } + } +` diff --git a/examples/using-remark/src/pages/tags.js b/examples/using-remark/src/pages/tags.js new file mode 100644 index 0000000000000..7721a39618cf2 --- /dev/null +++ b/examples/using-remark/src/pages/tags.js @@ -0,0 +1,50 @@ +import React from "react" +import Link from "gatsby-link" +import kebabCase from "lodash/kebabCase" + +class TagsPageRoute extends React.Component { + render() { + const allTags = this.props.data.allMarkdownRemark.group + + return ( +
+

Tags

+
    + {allTags.map(tag => +
  • + + {tag.fieldValue} ({tag.totalCount}) + +
    • + )} +
+
+ ) + } +} + +export default TagsPageRoute + +export const pageQuery = graphql` + query TagsQuery { + site { + siteMetadata { + title + } + } + allMarkdownRemark( + limit: 2000, + filter: { frontmatter: { draft: { ne: true } } }, + ) { + group(field: frontmatter___tags) { + fieldValue + totalCount + } + } + } +` diff --git a/examples/using-remark/src/styles/colors.js b/examples/using-remark/src/styles/colors.js new file mode 100644 index 0000000000000..ea08d9dcf5b0f --- /dev/null +++ b/examples/using-remark/src/styles/colors.js @@ -0,0 +1,15 @@ +const baseHsl = `291, 0%, 18%` + +const colors = { + black: `hsla(${baseHsl},1)`, + text: `hsla(${baseHsl},0.95)`, + light: `hsla(${baseHsl},0.4)`, + calm: `hsla(${baseHsl},0.2)`, + smoke: `hsla(${baseHsl},0.1)`, + whiteSmoke: `hsla(${baseHsl},0.02)`, + white: `#fff`, + link: `#03a9f4`, + linkHover: `#ff5252`, +} + +export default { colors, baseHsl } diff --git a/examples/using-remark/src/styles/index.js b/examples/using-remark/src/styles/index.js new file mode 100644 index 0000000000000..5bec7b6db5a03 --- /dev/null +++ b/examples/using-remark/src/styles/index.js @@ -0,0 +1,26 @@ +import { style } from "glamor" +import { rhythm } from "../utils/typography" +import { colors } from "./colors" +import presets from "../utils/presets" + +const animations = { + animationCurveFastOutSlowIn: `cubic-bezier(0.4, 0, 0.2, 1)`, + animationCurveLinearOutSlowIn: `cubic-bezier(0, 0, 0.2, 1)`, + animationCurveFastOutLinearIn: `cubic-bezier(0.4, 0, 1, 1)`, + animationCurveDefault: `cubic-bezier(0.4, 0, 0.2, 1)`, + animationSpeedDefault: `250ms`, + animationSpeedFast: `200ms`, + animationSpeedSlow: `300ms`, +} + +export default { + animations: animations, + colors: colors, + verticalPadding: style({ + padding: rhythm(3 / 4), + }), + container: style({ + maxWidth: `37rem`, + margin: `0 auto`, + }), +} diff --git a/examples/using-remark/src/templates/template-blog-post.js b/examples/using-remark/src/templates/template-blog-post.js new file mode 100644 index 0000000000000..e7a73ccffb21e --- /dev/null +++ b/examples/using-remark/src/templates/template-blog-post.js @@ -0,0 +1,154 @@ +import React from "react" +import Link from "gatsby-link" +import styles from "../styles" +import { rhythm, scale } from "../utils/typography" +import presets from "../utils/presets" + +class BlogPostRoute extends React.Component { + render() { + const post = this.props.data.markdownRemark + + let tags + let tagsSection + if (post.fields.tagSlugs) { + const tagsArray = post.fields.tagSlugs + tags = tagsArray.map((tag, i) => { + const divider = i < tagsArray.length - 1 && {`, `} + return ( + + + {post.frontmatter.tags[i]} + + {divider} + + ) + }) + tagsSection = ( + + tagged {tags} + + ) + } + + return ( +
+
+

+ {post.frontmatter.title} +

+

+ {post.timeToRead} min read · {tagsSection} +

+
+
+
+

+ {`Avatar + + + {post.frontmatter.author.id} + + {` `} + {post.frontmatter.author.bio} + +

+
+ ) + } +} + +export default BlogPostRoute + +export const pageQuery = graphql` + query BlogPostBySlug($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + timeToRead + fields { + tagSlugs + } + frontmatter { + title + tags + date(formatString: "MMMM DD, YYYY") + author { + id + bio + avatar { + children { + ... on ImageSharp { + responsiveResolution( + width: 50, + height: 50, + quality: 75, + grayscale: true, + ) { + src + srcSet + } + } + } + } + } + } + } + } +` diff --git a/examples/using-remark/src/templates/template-tag-page.js b/examples/using-remark/src/templates/template-tag-page.js new file mode 100644 index 0000000000000..336d8b95a779f --- /dev/null +++ b/examples/using-remark/src/templates/template-tag-page.js @@ -0,0 +1,54 @@ +import React from "react" +import Link from "gatsby-link" + +class TagRoute extends React.Component { + render() { + const posts = this.props.data.allMarkdownRemark.edges + const postLinks = posts.map(post => +
  • + + {post.node.frontmatter.title} + +
    • + ) + + return ( +
    +

    + {this.props.data.allMarkdownRemark.totalCount} + {` `}posts tagged with “{this.props.pathContext.tag}” +

    +
      + {postLinks} +
    +

    + Browse all tags +

    +
    + ) + } +} + +export default TagRoute + +export const pageQuery = graphql` + query TagPage($tag: String) { + allMarkdownRemark( + limit: 1000, + sort: { fields: [frontmatter___date], order: DESC }, + filter: { frontmatter: { tags: { in: [$tag] }, draft: { ne: true } } }, + ) { + totalCount + edges { + node { + fields { + slug + } + frontmatter { + title + } + } + } + } + } +` diff --git a/examples/using-remark/src/utils/presets.js b/examples/using-remark/src/utils/presets.js new file mode 100644 index 0000000000000..b2e79d819ea8c --- /dev/null +++ b/examples/using-remark/src/utils/presets.js @@ -0,0 +1,12 @@ +module.exports = { + mobile: `(min-width: 400px)`, + Mobile: `@media (min-width: 400px)`, + phablet: `(min-width: 550px)`, + Phablet: `@media (min-width: 550px)`, + tablet: `(min-width: 750px)`, + Tablet: `@media (min-width: 750px)`, + desktop: `(min-width: 1000px)`, + Desktop: `@media (min-width: 1000px)`, + hd: `(min-width: 1200px)`, + Hd: `@media (min-width: 1200px)`, +} diff --git a/examples/using-remark/src/utils/typography.js b/examples/using-remark/src/utils/typography.js new file mode 100644 index 0000000000000..41b3ebad5810e --- /dev/null +++ b/examples/using-remark/src/utils/typography.js @@ -0,0 +1,202 @@ +import Typography from "typography" +import { baseHsl, colors } from "../styles/colors" +import presets from "../utils/presets" + +const linkRaw = colors.link.substr(1) +const linkHoverRaw = colors.linkHover.substr(1) + +const options = { + baseFontSize: `17px`, + baseLineHeight: 1.6, + headerColor: `${colors.black}`, + bodyColor: `${colors.text}`, + blockMarginBottom: 0.75, + headerWeight: 800, + headerFontFamily: [ + `Spectral`, + `-apple-system`, + `BlinkMacSystemFont`, + `Segoe UI`, + `Roboto`, + `Oxygen`, + `Ubuntu`, + `Cantarell`, + `Fira Sans`, + `Droid Sans`, + `Helvetica Neue`, + `sans-serif`, + ], + bodyFontFamily: [ + `Spectral`, + `-apple-system`, + `BlinkMacSystemFont`, + `Segoe UI`, + `Roboto`, + `Oxygen`, + `Ubuntu`, + `Cantarell`, + `Fira Sans`, + `Droid Sans`, + `Helvetica Neue`, + `sans-serif`, + ], + overrideStyles: ({ rhythm, scale }, options) => { + return { + a: { + borderColor: `${colors.link}`, + color: `${colors.link}`, + textDecoration: `none`, + }, + blockquote: { + borderLeft: `${rhythm(1 / 4)} solid hsla(${baseHsl},0.1)`, + color: `hsla(${baseHsl},0.8)`, + fontStyle: `italic`, + marginLeft: 0, + marginRight: rhythm(1), + marginTop: rhythm(1), + marginBottom: rhythm(1), + paddingLeft: rhythm(2 / 4), + paddingRight: 0, + paddingTop: 0, + paddingBottom: 0, + }, + hr: { + background: `${colors.smoke}`, + height: `2px`, + }, + // Style gatsby-remark-responsive-image elements. + ".gatsby-resp-image-link": { + boxShadow: `none`, + }, + ".gatsby-resp-image-link:hover": { + background: `none`, + boxShadow: `none`, + }, + "@media only screen and (min-width:38rem)": { + ".gatsby-resp-image-link": { + borderRadius: `.15rem`, + overflow: `hidden`, + }, + }, + // Pull highlighted code blocks and iframes into the horizontal + // padding of their container. + // Note that we only do this for code blocks that are direct children of + // .post so that code blocks are correctly indented e. g. in lists. + ".post > .gatsby-highlight, .gatsby-resp-iframe-wrapper, .gatsby-resp-image-link": { + marginLeft: rhythm(-3 / 4), // 3/4 rhythm is amount of padding on mobile. + marginRight: rhythm(-3 / 4), + }, + // Fake image captions. + ".post .gatsby-resp-image-link + em": { + ...scale(0 / 5), + fontFamily: `Spectral, serif`, + lineHeight: 1.4, + display: `block`, + textAlign: `right`, + marginTop: rhythm(2 / 4), + marginBottom: rhythm(1), + color: `${colors.light}`, + }, + // Code highlighting. + "tt, code": { + fontFamily: `"Space Mono",Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Menlo,Courier,monospace`, + // Disable ligatures as they look funny w/ Space Mono as code. + fontVariant: `none`, + WebkitFontFeatureSettings: `"clig" 0, "calt" 0`, + fontFeatureSettings: `"clig" 0, "calt" 0`, + paddingTop: `0.1em`, + paddingBottom: `0.1em`, + backgroundColor: `#fef9ec`, + borderRadius: `2px`, + }, + // Add space before and after code/tt elements. + // @see https://github.com/KyleAMathews/typography.js/blob/66f78f0f4b8d2c5abf0262bcc1118610139c3b5f/packages/typography-plugin-code/src/index.js#L38-L46 + "code:before,code:after,tt:before,tt:after": { + letterSpacing: `-0.2em`, + content: `"\u00A0"`, + }, + // But don't add spaces if the code is inside a pre. + "pre code:before,pre code:after,pre tt:before,pre tt:after": { + content: `""`, + }, + // Highlighted code blocks in Markdown via gatsby-remark-prismjs. + ".gatsby-highlight": { + backgroundColor: `#fef9ec`, + borderRadius: `.15rem`, + marginTop: `0`, + marginBottom: rhythm(3 / 4), + padding: rhythm(3 / 4), + overflow: `auto`, + }, + ".gatsby-highlight pre[class*='language-']": { + backgroundColor: `transparent`, + borderRadius: 0, + margin: 0, + padding: 0, + overflow: `initial`, + float: `left`, + minWidth: `100%`, + textShadow: `none`, + }, + ".gatsby-highlight-code-line": { + background: `#fff2cc`, + display: `block`, + marginRight: rhythm(-3 / 4), + marginLeft: rhythm(-3 / 4), + paddingRight: rhythm(3 / 4), + paddingLeft: rhythm(2 / 4), + borderLeft: `${rhythm(1 / 4)} solid #ffd9b3`, + }, + // Fancy underline links in .post. + ".post a:not(.gatsby-resp-image-link):not(.anchor), .link-underline": { + position: `relative`, + backgroundImage: `linear-gradient(${colors.link},${colors.link})`, + textShadow: `0.03em 0 ${colors.white}, -0.03em 0 ${colors.white}, 0 0.03em ${colors.white}, 0 -0.03em ${colors.white}, 0.06em 0 ${colors.white}, -0.06em 0 ${colors.white}, 0.09em 0 ${colors.white}, -0.09em 0 ${colors.white}, 0.12em 0 ${colors.white}, -0.12em 0 ${colors.white}, 0.15em 0 ${colors.white}, -0.15em 0 ${colors.white}`, + transition: `all 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + backgroundPosition: `0 98%`, + backgroundRepeat: `repeat-x`, + backgroundSize: `1px 1px`, + }, + ".post a:not(.gatsby-resp-image-link):not(.anchor):hover, .link-underline:hover": { + color: `${colors.linkHover}`, + backgroundImage: `linear-gradient(${colors.linkHover},${colors.linkHover})`, + }, + ".post a.anchor": { + textShadow: `0 !important`, + backgroundImage: `0 !important`, + }, + // Fancy external links in posts, borrowed from + // https://github.com/comfusion/after-dark/ + // @see https://github.com/comfusion/after-dark/blob/8fdbe2f480ac40315cf0e01cece785d2b5c4b0c3/layouts/partials/critical-theme.css#L36-L39 + ".post a[href*='//']:after": { + content: `" " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23${linkRaw}'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E")`, + }, + ".post a[href*='//']:hover:after": { + content: `" " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23${linkHoverRaw}'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E")`, + }, + // Increase base font-size for phablet and desktop. + [presets.Phablet]: { + html: { + fontSize: `${18 / 16 * 100}%`, + }, + h1: { + ...scale(7 / 5), + }, + }, + [presets.Desktop]: { + html: { + fontSize: `${20 / 16 * 100}%`, + }, + }, + } + }, +} + +const typography = new Typography(options) + +// Hot reload typography in development. +if (process.env.NODE_ENV !== `production`) { + typography.injectStyles() +} + +module.exports = typography diff --git a/examples/using-styled-components/.eslintrc b/examples/using-styled-components/.eslintrc new file mode 100644 index 0000000000000..aadde9c0aa03d --- /dev/null +++ b/examples/using-styled-components/.eslintrc @@ -0,0 +1,8 @@ +{ + "env": { + "browser": true + }, + "globals": { + "graphql": false + } +} \ No newline at end of file diff --git a/examples/using-styled-components/README.md b/examples/using-styled-components/README.md new file mode 100644 index 0000000000000..c23a8e2b232cf --- /dev/null +++ b/examples/using-styled-components/README.md @@ -0,0 +1,6 @@ +# Using Styled Components + +https://using-styled-components.gatsbyjs.org + +Example site that demostrates how to build Gatsby sites +with [Styled Components](https://www.styled-components.com/). diff --git a/examples/using-styled-components/gatsby-config.js b/examples/using-styled-components/gatsby-config.js new file mode 100644 index 0000000000000..4bd5976146856 --- /dev/null +++ b/examples/using-styled-components/gatsby-config.js @@ -0,0 +1,15 @@ +module.exports = { + siteMetadata: { + title: `Gatsby with styled components`, + }, + plugins: [ + `gatsby-plugin-styled-components`, + { + resolve: `gatsby-plugin-google-analytics`, + options: { + trackingId: `UA-93349937-2`, + }, + }, + `gatsby-plugin-offline`, + ], +} diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json new file mode 100644 index 0000000000000..dd70d6cb4e030 --- /dev/null +++ b/examples/using-styled-components/package.json @@ -0,0 +1,26 @@ +{ + "name": "gatsby-example-using-styled-components", + "private": true, + "description": "Gatsby example site using the styled components plugin", + "version": "1.0.0", + "author": "Kyle Mathews ", + "dependencies": { + "gatsby": "next", + "gatsby-link": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-styled-components": "next", + "lodash": "^4.16.4", + "react-typography": "^0.15.0", + "slash": "^1.0.0", + "typography": "^0.15.8", + "typography-breakpoint-constants": "^0.14.0" + }, + "keywords": ["gatsby"], + "license": "MIT", + "main": "n/a", + "scripts": { + "develop": "gatsby develop", + "build": "gatsby build" + } +} diff --git a/examples/using-styled-components/src/html.js b/examples/using-styled-components/src/html.js new file mode 100644 index 0000000000000..f59c09fe5c20b --- /dev/null +++ b/examples/using-styled-components/src/html.js @@ -0,0 +1,64 @@ +import React, { Component } from "react" +import * as PropTypes from "prop-types" +import { TypographyStyle } from "react-typography" +import typography from "./utils/typography" + +let stylesStr +if (process.env.NODE_ENV === `production`) { + try { + stylesStr = require(`!raw-loader!../public/styles.css`) + } catch (e) { + console.log(e) + } +} + +const propTypes = { + headComponents: PropTypes.node.isRequired, + body: PropTypes.node.isRequired, + postBodyComponents: PropTypes.node.isRequired, +} + +class Html extends Component { + render() { + let css + if (process.env.NODE_ENV === `production`) { + css = ( + , + + + + + + + +Futura PT Book Specimen + + + + + + +
    + + + +
    + + +
    + +
    +
    +
    AaBb
    +
    +
    + +
    +
    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    +
    +
    +
    + + + + + + + + + + + + + + + + +
    10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    + +
    + +
    + + + +
    + + +
    +
    body
    body
    body
    body
    +
    + bodyFutura PT Book +
    +
    + bodyArial +
    +
    + bodyVerdana +
    +
    + bodyGeorgia +
    + + + +
    + + +
    + +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    + +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + +
    +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + + +
    + +
    + +
    + +
    +

    Lorem Ipsum Dolor

    +

    Etiam porta sem malesuada magna mollis euismod

    + +

    By Aenean Lacinia

    +
    +
    +
    +
    +

    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + +

    Pellentesque ornare sem

    + +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    + +

    Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    + +

    Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    + +

    Cras mattis consectetur

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

    + +

    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

    +
    + +
    + +
    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    + +

    Maecenas sed diam eget risus varius.

    + +

    Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + + +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

    + +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + +
    +
    + +
    + + + + + + +
    +
    +
    + +

    Language Support

    +

    The subset of Futura PT Book in this kit supports the following languages:
    + + Albanian, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Azerbaijani (Cyrillic), Bashkir, Basque, Belarusian, Belarusian (Lacinka), Bislama, Bosnian, Breton, Buryat (Cyrillic), Catalan, Cebuano, Chamorro, Cheyenne, Chuvash, Cimbrian, Corsican, Croatian, Cyrillic, Czech, Danish, Demo, Dungan, Dutch, English, Esperanto, Estonian, Evenki (Cyrillic), Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Friulian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hawaiian, Hiligaynon, Hill Mari, Hmong, Hopi, Hungarian, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Istro-Romanian, Italian, Jèrriais, Kalmyk (Cyrillic), Karachay (Cyrillic), Kashubian, Kazakh (Cyrillic), Khalkha, Khanty, Komi-Permyak, Kurdish (Kurmanji), Kyrgyz (Cyrillic), Ladin, Latin Basic, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgian, Malagasy, Maltese, Manx, Maori, Meadow Mari, Megleno-Romanian, Mohawk, Moldovan, Nahuatl, Nenets, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Ossetian, Pangasinan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Quechua, Rhaeto-Romance, Romanian, Romansh (Rumantsch), Rotokas, Russian, Rusyn, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Serbian (Cyrillic), Seychellois Creole (Seselwa), Shona, Sicilian, Slovak, Slovenian (Slovene), Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tahitian, Tajik, Tatar (Cyrillic), Tausug, Tetum (Tetun), Tok Pisin, Tongan (Faka-Tonga), Tswana, Turkish, Turkmen, Turkmen (Cyrillic), Turkmen (Latinized), Tuvaluan, Tuvin, ubasic, Udmurt, Ukrainian, Uyghur (Cyrillic), Uyghur (Latinized), Uzbek (Cyrillic), Veps, Volapük, Votic (Cyrillic), Votic (Latinized), Walloon, Warlpiri, Xhosa, Yakut/Sakha, Yapese, Zulu

    +

    Glyph Chart

    +

    The subset of Futura PT Book in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

    +
    + +
    +
    + + +
    +
    + + +
    + +
    + +
    +
    +
    +

    Installing Webfonts

    + +

    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    + +

    1. Upload your webfonts

    +

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    + +

    2. Include the webfont stylesheet

    +

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    + + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

    We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    + <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

    3. Modify your own stylesheet

    +

    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

    +p { font-family: 'MyWebFont', Arial, sans-serif; } + +

    4. Test

    +

    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

    +
    + +
    +
    +

    Troubleshooting
    Font-Face Problems

    +

    Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

    + +

    Fonts not showing in any browser

    + +

    This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

    + +

    Fonts not loading in iPhone or iPad

    + +

    The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

    + +

    Fonts not loading in Firefox

    + +

    The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    + +

    Fonts not loading in IE

    + +

    Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

    + +

    Fonts not loading in IE9

    + +

    IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

    +
    +
    +
    + +
    + +
    + +
    + + diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.eot b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.eot new file mode 100644 index 0000000000000..2590a957ecf1c Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.eot differ diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.svg b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.svg new file mode 100644 index 0000000000000..f141e1a8959d9 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.svg @@ -0,0 +1,1089 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.ttf b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.ttf new file mode 100644 index 0000000000000..e92958b4eea90 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.ttf differ diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff new file mode 100644 index 0000000000000..0159627f845df Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff differ diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff2 b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff2 new file mode 100644 index 0000000000000..ad77f33878578 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_book_macroman/ftn45-webfont.woff2 differ diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/grid_12-825-55-15.css b/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000000000..3d6aef783a908 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/specimen_stylesheet.css b/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000000000..aecc43c32ce0e --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_book_macroman/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/www/src/fonts/Webfonts/futurapt_book_macroman/stylesheet.css b/www/src/fonts/Webfonts/futurapt_book_macroman/stylesheet.css new file mode 100644 index 0000000000000..c90ca03ced708 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_book_macroman/stylesheet.css @@ -0,0 +1,37 @@ +/* + * Web Fonts from fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2016 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: ParaType + * License URL: https://www.fontspring.com/licenses/paratype/webfont + * + * + */ + +@font-face { + font-family: "Futura PT"; + src: url('./ftn45-webfont.eot'); + src: url('./ftn45-webfont.eot?#iefix') format('embedded-opentype'), + url('./ftn45-webfont.woff2') format('woff2'), + url('./ftn45-webfont.woff') format('woff'), + url('./ftn45-webfont.ttf') format('truetype'), + url('./ftn45-webfont.svg#futura_ptbook') format('svg'); + font-weight: normal; + font-style: normal; + +} + diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-demo.html b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-demo.html new file mode 100644 index 0000000000000..89c10879be287 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-demo.html @@ -0,0 +1,382 @@ + + + + + + + + + + + + +Futura PT Book Italic Specimen + + + + + + +
    + + + +
    + + +
    + +
    +
    +
    AaBb
    +
    +
    + +
    +
    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    +
    +
    +
    + + + + + + + + + + + + + + + + +
    10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    + +
    + +
    + + + +
    + + +
    +
    body
    body
    body
    body
    +
    + bodyFutura PT Book Italic +
    +
    + bodyArial +
    +
    + bodyVerdana +
    +
    + bodyGeorgia +
    + + + +
    + + +
    + +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    + +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + +
    +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + + +
    + +
    + +
    + +
    +

    Lorem Ipsum Dolor

    +

    Etiam porta sem malesuada magna mollis euismod

    + +

    By Aenean Lacinia

    +
    +
    +
    +
    +

    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + +

    Pellentesque ornare sem

    + +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    + +

    Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    + +

    Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    + +

    Cras mattis consectetur

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

    + +

    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

    +
    + +
    + +
    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    + +

    Maecenas sed diam eget risus varius.

    + +

    Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + + +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

    + +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + +
    +
    + +
    + + + + + + +
    +
    +
    + +

    Language Support

    +

    The subset of Futura PT Book Italic in this kit supports the following languages:
    + + Albanian, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Azerbaijani (Cyrillic), Bashkir, Basque, Belarusian, Belarusian (Lacinka), Bislama, Bosnian, Breton, Buryat (Cyrillic), Catalan, Cebuano, Chamorro, Cheyenne, Chuvash, Cimbrian, Corsican, Croatian, Cyrillic, Czech, Danish, Demo, Dungan, Dutch, English, Esperanto, Estonian, Evenki (Cyrillic), Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Friulian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hawaiian, Hiligaynon, Hill Mari, Hmong, Hopi, Hungarian, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Istro-Romanian, Italian, Jèrriais, Kalmyk (Cyrillic), Karachay (Cyrillic), Kashubian, Kazakh (Cyrillic), Khalkha, Khanty, Komi-Permyak, Kurdish (Kurmanji), Kyrgyz (Cyrillic), Ladin, Latin Basic, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgian, Malagasy, Maltese, Manx, Maori, Meadow Mari, Megleno-Romanian, Mohawk, Moldovan, Nahuatl, Nenets, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Ossetian, Pangasinan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Quechua, Rhaeto-Romance, Romanian, Romansh (Rumantsch), Rotokas, Russian, Rusyn, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Serbian (Cyrillic), Seychellois Creole (Seselwa), Shona, Sicilian, Slovak, Slovenian (Slovene), Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tahitian, Tajik, Tatar (Cyrillic), Tausug, Tetum (Tetun), Tok Pisin, Tongan (Faka-Tonga), Tswana, Turkish, Turkmen, Turkmen (Cyrillic), Turkmen (Latinized), Tuvaluan, Tuvin, ubasic, Udmurt, Ukrainian, Uyghur (Cyrillic), Uyghur (Latinized), Uzbek (Cyrillic), Veps, Volapük, Votic (Cyrillic), Votic (Latinized), Walloon, Warlpiri, Xhosa, Yakut/Sakha, Yapese, Zulu

    +

    Glyph Chart

    +

    The subset of Futura PT Book Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

    +
    + +
    +
    + + +
    +
    + + +
    + +
    + +
    +
    +
    +

    Installing Webfonts

    + +

    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    + +

    1. Upload your webfonts

    +

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    + +

    2. Include the webfont stylesheet

    +

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    + + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

    We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    + <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

    3. Modify your own stylesheet

    +

    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

    +p { font-family: 'MyWebFont', Arial, sans-serif; } + +

    4. Test

    +

    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

    +
    + +
    +
    +

    Troubleshooting
    Font-Face Problems

    +

    Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

    + +

    Fonts not showing in any browser

    + +

    This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

    + +

    Fonts not loading in iPhone or iPad

    + +

    The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

    + +

    Fonts not loading in Firefox

    + +

    The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    + +

    Fonts not loading in IE

    + +

    Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

    + +

    Fonts not loading in IE9

    + +

    IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

    +
    +
    +
    + +
    + +
    + +
    + + diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.eot b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.eot new file mode 100644 index 0000000000000..fb20f5c4be255 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.eot differ diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.svg b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.svg new file mode 100644 index 0000000000000..38f7662548181 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.svg @@ -0,0 +1,1202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.ttf b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.ttf new file mode 100644 index 0000000000000..83e13574a9a89 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.ttf differ diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff new file mode 100644 index 0000000000000..3c34a793ef4a9 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff differ diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff2 b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff2 new file mode 100644 index 0000000000000..09f5dd66b1d9f Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/ftn46-webfont.woff2 differ diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/grid_12-825-55-15.css b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000000000..3d6aef783a908 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/specimen_stylesheet.css b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000000000..aecc43c32ce0e --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/stylesheet.css b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/stylesheet.css new file mode 100644 index 0000000000000..0cfa5cf50dafe --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_bookitalic_macroman/stylesheet.css @@ -0,0 +1,37 @@ +/* + * Web Fonts from fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2016 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: ParaType + * License URL: https://www.fontspring.com/licenses/paratype/webfont + * + * + */ + +@font-face { + font-family: 'Futura PT'; + src: url('ftn46-webfont.eot'); + src: url('ftn46-webfont.eot?#iefix') format('embedded-opentype'), + url('ftn46-webfont.woff2') format('woff2'), + url('ftn46-webfont.woff') format('woff'), + url('ftn46-webfont.ttf') format('truetype'), + url('ftn46-webfont.svg#futura_ptbook_oblique') format('svg'); + font-weight: normal; + font-style: italic; + +} + diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-demo.html b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-demo.html new file mode 100644 index 0000000000000..84a1a5011ebbf --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-demo.html @@ -0,0 +1,382 @@ + + + + + + + + + + + + +Futura PT Demi Specimen + + + + + + +
    + + + +
    + + +
    + +
    +
    +
    AaBb
    +
    +
    + +
    +
    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    +
    +
    +
    + + + + + + + + + + + + + + + + +
    10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    + +
    + +
    + + + +
    + + +
    +
    body
    body
    body
    body
    +
    + bodyFutura PT Demi +
    +
    + bodyArial +
    +
    + bodyVerdana +
    +
    + bodyGeorgia +
    + + + +
    + + +
    + +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    + +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + +
    +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + + +
    + +
    + +
    + +
    +

    Lorem Ipsum Dolor

    +

    Etiam porta sem malesuada magna mollis euismod

    + +

    By Aenean Lacinia

    +
    +
    +
    +
    +

    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + +

    Pellentesque ornare sem

    + +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    + +

    Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    + +

    Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    + +

    Cras mattis consectetur

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

    + +

    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

    +
    + +
    + +
    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    + +

    Maecenas sed diam eget risus varius.

    + +

    Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + + +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

    + +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + +
    +
    + +
    + + + + + + +
    +
    +
    + +

    Language Support

    +

    The subset of Futura PT Demi in this kit supports the following languages:
    + + Albanian, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Azerbaijani (Cyrillic), Bashkir, Basque, Belarusian, Belarusian (Lacinka), Bislama, Bosnian, Breton, Buryat (Cyrillic), Catalan, Cebuano, Chamorro, Cheyenne, Chuvash, Cimbrian, Corsican, Croatian, Cyrillic, Czech, Danish, Demo, Dungan, Dutch, English, Esperanto, Estonian, Evenki (Cyrillic), Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Friulian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hawaiian, Hiligaynon, Hill Mari, Hmong, Hopi, Hungarian, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Istro-Romanian, Italian, Jèrriais, Kalmyk (Cyrillic), Karachay (Cyrillic), Kashubian, Kazakh (Cyrillic), Khalkha, Khanty, Komi-Permyak, Kurdish (Kurmanji), Kyrgyz (Cyrillic), Ladin, Latin Basic, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgian, Malagasy, Maltese, Manx, Maori, Meadow Mari, Megleno-Romanian, Mohawk, Moldovan, Nahuatl, Nenets, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Ossetian, Pangasinan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Quechua, Rhaeto-Romance, Romanian, Romansh (Rumantsch), Rotokas, Russian, Rusyn, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Serbian (Cyrillic), Seychellois Creole (Seselwa), Shona, Sicilian, Slovak, Slovenian (Slovene), Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tahitian, Tajik, Tatar (Cyrillic), Tausug, Tetum (Tetun), Tok Pisin, Tongan (Faka-Tonga), Tswana, Turkish, Turkmen, Turkmen (Cyrillic), Turkmen (Latinized), Tuvaluan, Tuvin, ubasic, Udmurt, Ukrainian, Uyghur (Cyrillic), Uyghur (Latinized), Uzbek (Cyrillic), Veps, Volapük, Votic (Cyrillic), Votic (Latinized), Walloon, Warlpiri, Xhosa, Yakut/Sakha, Yapese, Zulu

    +

    Glyph Chart

    +

    The subset of Futura PT Demi in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

    +
    + +
    +
    + + +
    +
    + + +
    + +
    + +
    +
    +
    +

    Installing Webfonts

    + +

    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    + +

    1. Upload your webfonts

    +

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    + +

    2. Include the webfont stylesheet

    +

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    + + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

    We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    + <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

    3. Modify your own stylesheet

    +

    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

    +p { font-family: 'MyWebFont', Arial, sans-serif; } + +

    4. Test

    +

    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

    +
    + +
    +
    +

    Troubleshooting
    Font-Face Problems

    +

    Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

    + +

    Fonts not showing in any browser

    + +

    This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

    + +

    Fonts not loading in iPhone or iPad

    + +

    The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

    + +

    Fonts not loading in Firefox

    + +

    The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    + +

    Fonts not loading in IE

    + +

    Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

    + +

    Fonts not loading in IE9

    + +

    IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

    +
    +
    +
    + +
    + +
    + +
    + + diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.eot b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.eot new file mode 100644 index 0000000000000..27a25b8c44a7c Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.eot differ diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.svg b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.svg new file mode 100644 index 0000000000000..950a4eb3ca264 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.svg @@ -0,0 +1,1469 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.ttf b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.ttf new file mode 100644 index 0000000000000..c91b25f275d12 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.ttf differ diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff new file mode 100644 index 0000000000000..36879e23207ba Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff differ diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff2 b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff2 new file mode 100644 index 0000000000000..0edbbe3238408 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demi_macroman/ftn65-webfont.woff2 differ diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/grid_12-825-55-15.css b/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000000000..3d6aef783a908 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/specimen_stylesheet.css b/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000000000..aecc43c32ce0e --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demi_macroman/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/www/src/fonts/Webfonts/futurapt_demi_macroman/stylesheet.css b/www/src/fonts/Webfonts/futurapt_demi_macroman/stylesheet.css new file mode 100644 index 0000000000000..a06109c270a72 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demi_macroman/stylesheet.css @@ -0,0 +1,37 @@ +/* + * Web Fonts from fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2016 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: ParaType + * License URL: https://www.fontspring.com/licenses/paratype/webfont + * + * + */ + +@font-face { + font-family: 'Futura PT'; + src: url('ftn65-webfont.eot'); + src: url('ftn65-webfont.eot?#iefix') format('embedded-opentype'), + url('ftn65-webfont.woff2') format('woff2'), + url('ftn65-webfont.woff') format('woff'), + url('ftn65-webfont.ttf') format('truetype'), + url('ftn65-webfont.svg#futura_ptdemi') format('svg'); + font-weight: bold; + font-style: normal; + +} + diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-demo.html b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-demo.html new file mode 100644 index 0000000000000..cc89f50ec1d7b --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-demo.html @@ -0,0 +1,382 @@ + + + + + + + + + + + + +Futura PT Demi Italic Specimen + + + + + + +
    + + + +
    + + +
    + +
    +
    +
    AaBb
    +
    +
    + +
    +
    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    +
    +
    +
    + + + + + + + + + + + + + + + + +
    10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    + +
    + +
    + + + +
    + + +
    +
    body
    body
    body
    body
    +
    + bodyFutura PT Demi Italic +
    +
    + bodyArial +
    +
    + bodyVerdana +
    +
    + bodyGeorgia +
    + + + +
    + + +
    + +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    + +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + +
    +
    +

    10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    +

    18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    + +
    +
    + +
    + +
    +
    +

    20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    +

    24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    + +
    + +
    + +
    +
    +

    30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

    +
    +
    + +
    + + + + +
    + +
    + +
    + +
    +

    Lorem Ipsum Dolor

    +

    Etiam porta sem malesuada magna mollis euismod

    + +

    By Aenean Lacinia

    +
    +
    +
    +
    +

    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + +

    Pellentesque ornare sem

    + +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    + +

    Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    + +

    Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    + +

    Cras mattis consectetur

    + +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

    + +

    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

    +
    + +
    + +
    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    + +

    Maecenas sed diam eget risus varius.

    + +

    Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + + + +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

    + +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    + +
    +
    + +
    + + + + + + +
    +
    +
    + +

    Language Support

    +

    The subset of Futura PT Demi Italic in this kit supports the following languages:
    + + Albanian, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Azerbaijani (Cyrillic), Bashkir, Basque, Belarusian, Belarusian (Lacinka), Bislama, Bosnian, Breton, Buryat (Cyrillic), Catalan, Cebuano, Chamorro, Cheyenne, Chuvash, Cimbrian, Corsican, Croatian, Cyrillic, Czech, Danish, Demo, Dungan, Dutch, English, Esperanto, Estonian, Evenki (Cyrillic), Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Friulian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hawaiian, Hiligaynon, Hill Mari, Hmong, Hopi, Hungarian, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Istro-Romanian, Italian, Jèrriais, Kalmyk (Cyrillic), Karachay (Cyrillic), Kashubian, Kazakh (Cyrillic), Khalkha, Khanty, Komi-Permyak, Kurdish (Kurmanji), Kyrgyz (Cyrillic), Ladin, Latin Basic, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgian, Malagasy, Maltese, Manx, Maori, Meadow Mari, Megleno-Romanian, Mohawk, Moldovan, Nahuatl, Nenets, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Ossetian, Pangasinan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Quechua, Rhaeto-Romance, Romanian, Romansh (Rumantsch), Rotokas, Russian, Rusyn, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Serbian (Cyrillic), Seychellois Creole (Seselwa), Shona, Sicilian, Slovak, Slovenian (Slovene), Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tahitian, Tajik, Tatar (Cyrillic), Tausug, Tetum (Tetun), Tok Pisin, Tongan (Faka-Tonga), Tswana, Turkish, Turkmen, Turkmen (Cyrillic), Turkmen (Latinized), Tuvaluan, Tuvin, ubasic, Udmurt, Ukrainian, Uyghur (Cyrillic), Uyghur (Latinized), Uzbek (Cyrillic), Veps, Volapük, Votic (Cyrillic), Votic (Latinized), Walloon, Warlpiri, Xhosa, Yakut/Sakha, Yapese, Zulu

    +

    Glyph Chart

    +

    The subset of Futura PT Demi Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

    +
    + +
    +
    + + +
    +
    + + +
    + +
    + +
    +
    +
    +

    Installing Webfonts

    + +

    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    + +

    1. Upload your webfonts

    +

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    + +

    2. Include the webfont stylesheet

    +

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    + + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

    We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    + <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

    3. Modify your own stylesheet

    +

    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

    +p { font-family: 'MyWebFont', Arial, sans-serif; } + +

    4. Test

    +

    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

    +
    + +
    +
    +

    Troubleshooting
    Font-Face Problems

    +

    Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

    + +

    Fonts not showing in any browser

    + +

    This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

    + +

    Fonts not loading in iPhone or iPad

    + +

    The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

    + +

    Fonts not loading in Firefox

    + +

    The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    + +

    Fonts not loading in IE

    + +

    Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

    + +

    Fonts not loading in IE9

    + +

    IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

    +
    +
    +
    + +
    + +
    + +
    + + diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.eot b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.eot new file mode 100644 index 0000000000000..920f8a207e928 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.eot differ diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.svg b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.svg new file mode 100644 index 0000000000000..f09aa864eb217 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.svg @@ -0,0 +1,1366 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.ttf b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.ttf new file mode 100644 index 0000000000000..1a2738a454751 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.ttf differ diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff new file mode 100644 index 0000000000000..adda7a1fa81b8 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff differ diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff2 b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff2 new file mode 100644 index 0000000000000..d174a85c59d49 Binary files /dev/null and b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/ftn66-webfont.woff2 differ diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/grid_12-825-55-15.css b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000000000..3d6aef783a908 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/specimen_stylesheet.css b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000000000..aecc43c32ce0e --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css new file mode 100644 index 0000000000000..ecd4df123e739 --- /dev/null +++ b/www/src/fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css @@ -0,0 +1,37 @@ +/* + * Web Fonts from fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2016 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: ParaType + * License URL: https://www.fontspring.com/licenses/paratype/webfont + * + * + */ + +@font-face { + font-family: 'Futura PT'; + src: url('ftn66-webfont.eot'); + src: url('ftn66-webfont.eot?#iefix') format('embedded-opentype'), + url('ftn66-webfont.woff2') format('woff2'), + url('ftn66-webfont.woff') format('woff'), + url('ftn66-webfont.ttf') format('truetype'), + url('ftn66-webfont.svg#futura_ptdemi_oblique') format('svg'); + font-weight: bold; + font-style: italic; + +} + diff --git a/www/src/gatsby-negative.svg b/www/src/gatsby-negative.svg new file mode 100644 index 0000000000000..ea9bcbc3a3672 --- /dev/null +++ b/www/src/gatsby-negative.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/www/src/gatsby-positive.svg b/www/src/gatsby-positive.svg new file mode 100644 index 0000000000000..4f918628b6afb --- /dev/null +++ b/www/src/gatsby-positive.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/www/src/html.js b/www/src/html.js new file mode 100644 index 0000000000000..92088bfc488f0 --- /dev/null +++ b/www/src/html.js @@ -0,0 +1,91 @@ +import React from "react" +import { TypographyStyle } from "react-typography" + +import typography from "./utils/typography" + +let stylesStr +if (process.env.NODE_ENV === `production`) { + try { + stylesStr = require(`!raw-loader!../public/styles.css`) + } catch (e) { + console.log(e) + } +} + +module.exports = React.createClass({ + render() { + let css + if (process.env.NODE_ENV === `production`) { + css = ( +