--- /dev/null
+.DS_Store
+.cache
+node_modules
+_doc
+dist
--- /dev/null
+# IP Global Landing Page
+
+This project is a single static page with compilation by [ParcelJS](https://parceljs.org/)
+
+To setup, run:
+
+`yarn`
+
+Then for [development](http://localhost:1234):
+
+`yarn start`
+
+Or to build the files (output to /dist)
+
+`yarn build`
+
+Customisations to scripts can be done in package.json.
+
+### Notes
+
+ParcelJS is managing everything but it could be used just for Stylus > CSS compilation (see reference [here](https://github.com/parcel-bundler/parcel/issues/711])). The index.html would need to be changed to reference the output .css file and the JS would need to be handled differently too.
+
+### Image Maps
+
+Image maps can be updated [here](http://image-map.weebly.com/) and the existing `<map>` code can be imported to save having to redo links. The main important detail is that the replacement images are always the same width and start from the same top/left position to avoid misplacement of links.
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#ffffff" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/></svg>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 100 100" height="100px" id="Layer_1" version="1.1" viewBox="0 0 100 100" width="100px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><defs><rect height="100" width="100"/></defs><path fill="#ffffff" d="M95,59.727V93H75.71V61.955c0-7.799-2.79-13.121-9.771-13.121 c-5.331,0-8.503,3.587-9.898,7.057c-0.509,1.24-0.64,2.967-0.64,4.703V93H36.104c0,0,0.26-52.58,0-58.028h19.294v8.225 c-0.039,0.062-0.09,0.128-0.127,0.188h0.127v-0.188c2.563-3.948,7.142-9.588,17.389-9.588C85.482,33.609,95,41.903,95,59.727 M15.919,7C9.318,7,5,11.33,5,17.024c0,5.57,4.193,10.031,10.663,10.031h0.129c6.729,0,10.914-4.46,10.914-10.031 C26.579,11.33,22.521,7,15.919,7 M6.146,93h19.289V34.972H6.146V93z"/></g></svg>
\ No newline at end of file
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="66.06" viewBox="0 0 58 66.06">
+ <path fill="#ffffff" d="M416.1,3847.01l-53.428-30.74a2.291,2.291,0,0,0-3.437,1.98v61.48a2.291,2.291,0,0,0,3.437,1.98l53.428-30.74A2.284,2.284,0,0,0,416.1,3847.01Z" transform="translate(-359.25 -3815.97)"/>
+</svg>
--- /dev/null
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#ffffff" d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454 c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303 c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412 c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91 c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019 c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541 c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"/></svg>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>path, polygon { fill: #fff; }</style><g><path d="M43.911,28.21H12.782c-4.948,0-8.959,4.015-8.959,8.962v7.201c0,4.947,4.011,8.961,8.959,8.961h31.129 c4.947,0,8.959-4.014,8.959-8.961v-7.201C52.87,32.225,48.858,28.21,43.911,28.21z M19.322,33.816h-2.894v14.38h-2.796v-14.38 H10.74V31.37h8.582V33.816z M27.497,48.196h-2.48v-1.36c-0.461,0.503-0.936,0.887-1.432,1.146c-0.496,0.27-0.975,0.396-1.441,0.396 c-0.576,0-1.004-0.183-1.297-0.555c-0.288-0.371-0.435-0.921-0.435-1.664V35.782h2.48v9.523c0,0.294,0.055,0.505,0.154,0.636 c0.107,0.135,0.277,0.197,0.51,0.197c0.18,0,0.412-0.086,0.691-0.26c0.281-0.176,0.537-0.396,0.77-0.668v-9.429h2.48V48.196z M36.501,45.633c0,0.877-0.195,1.551-0.584,2.021c-0.387,0.47-0.953,0.701-1.686,0.701c-0.488,0-0.922-0.088-1.299-0.27 c-0.379-0.18-0.736-0.457-1.061-0.841v0.951h-2.51V31.37h2.51v5.419c0.336-0.375,0.691-0.666,1.062-0.861 c0.379-0.199,0.76-0.295,1.146-0.295c0.785,0,1.383,0.262,1.797,0.791c0.416,0.529,0.623,1.304,0.623,2.32V45.633z M45.104,42.288 h-4.746v2.339c0,0.652,0.08,1.106,0.242,1.359c0.166,0.254,0.445,0.378,0.842,0.378c0.412,0,0.697-0.107,0.863-0.321 c0.16-0.216,0.246-0.686,0.246-1.416v-0.565h2.553v0.637c0,1.272-0.309,2.231-0.936,2.878c-0.617,0.641-1.547,0.959-2.783,0.959 c-1.113,0-1.99-0.339-2.627-1.021c-0.635-0.678-0.959-1.619-0.959-2.815v-5.576c0-1.073,0.354-1.956,1.057-2.633 c0.701-0.677,1.604-1.015,2.715-1.015c1.137,0,2.01,0.313,2.619,0.941c0.609,0.629,0.914,1.529,0.914,2.706V42.288z"/><path d="M41.466,37.646c-0.396,0-0.678,0.111-0.85,0.343c-0.176,0.218-0.258,0.591-0.258,1.112v1.255h2.193v-1.255 c0-0.521-0.088-0.895-0.262-1.112C42.122,37.758,41.843,37.646,41.466,37.646z"/><path d="M32.909,37.604c-0.176,0-0.354,0.039-0.525,0.12c-0.174,0.079-0.344,0.21-0.512,0.38v7.733 c0.199,0.2,0.396,0.354,0.588,0.442c0.191,0.085,0.389,0.133,0.6,0.133c0.305,0,0.527-0.088,0.67-0.266 c0.141-0.176,0.213-0.457,0.213-0.854v-6.411c0-0.422-0.084-0.738-0.26-0.955C33.501,37.712,33.243,37.604,32.909,37.604z"/><polygon points="16.858,23.898 20.002,23.898 20.002,16.208 23.663,5.36 20.467,5.36 18.521,12.77 18.323,12.77 16.28,5.36 13.113,5.36 16.858,16.554 "/><path d="M27.923,24.243c1.27,0,2.266-0.333,2.992-0.999c0.721-0.669,1.082-1.582,1.082-2.752v-7.064 c0-1.041-0.369-1.898-1.104-2.559c-0.74-0.659-1.688-0.991-2.844-0.991c-1.27,0-2.281,0.314-3.033,0.941 c-0.75,0.627-1.127,1.468-1.127,2.531v7.088c0,1.163,0.367,2.083,1.1,2.773C25.722,23.898,26.702,24.243,27.923,24.243z M26.765,13.246c0-0.297,0.107-0.537,0.316-0.725c0.217-0.184,0.492-0.273,0.834-0.273c0.369,0,0.668,0.089,0.896,0.273 c0.227,0.188,0.34,0.428,0.34,0.725v7.451c0,0.365-0.111,0.655-0.336,0.864c-0.223,0.21-0.523,0.313-0.9,0.313 c-0.369,0-0.654-0.1-0.854-0.31c-0.197-0.205-0.297-0.493-0.297-0.868V13.246z"/><path d="M36.214,24.098c0.525,0,1.064-0.15,1.619-0.438c0.561-0.292,1.098-0.719,1.609-1.276v1.515h2.793V10.224h-2.793v10.38 c-0.26,0.297-0.549,0.541-0.859,0.735c-0.316,0.192-0.576,0.288-0.781,0.288c-0.262,0-0.455-0.072-0.568-0.221 c-0.115-0.143-0.18-0.377-0.18-0.698V10.224h-2.789v11.429c0,0.815,0.164,1.424,0.488,1.828 C35.083,23.891,35.565,24.098,36.214,24.098z"/></g></svg>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>IP Global</title>
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700" rel="stylesheet">
+ <link rel="stylesheet" href="styles/main.styl">
+</head>
+
+<body>
+ <header class="site">
+
+ <div class="inner">
+ <img src="images/logo.png" alt="IP Global" class="logo">
+ <nav class="nav secondary">
+ <ul>
+ <li>
+ <a href="https://www.ipglobal-ltd.com/en/" target="_blank">Global Website</a>
+ </li>
+ <li>
+ <a href="http://www.ipglobal-ltd.com.hk/about-ipg/" target="_blank">Hong Kong Website</a>
+ </li>
+ <li>
+ <a href="http://platinum.ipglobal-ltd.com/" target="_blank">Platinum Club Website</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="nav primary">
+ <ul>
+ <li>
+ <a href="#corporate-brochure">Corporate Brochure</a>
+ </li>
+ <li>
+ <a href="#project-brochures">Project Brochures</a>
+ </li>
+ <li>
+ <a href="#track-records">Track Records</a>
+ </li>
+ <li>
+ <a href="#investor-guides">Investor Guide Series</a>
+ </li>
+ <li>
+ <a href="#videos">Videos</a>
+ </li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <section class="block corporate">
+ <div class="content">
+ <h2 id="corporate-brochure">Corporate Brochure</h2>
+
+ <div class="columns">
+ <div class="col">
+ <img src="images/corporate-brochure.png" alt="Corporate Brochure">
+ </div>
+
+ <div class="col text">
+ <h3>IP Global</h3>
+ <p>
+ Our mission is to change the way the world views global real estate investment, placing it on a level footing with other
+ recognised asset classes. We provide our clients with access to the best opportunities and deliver an
+ end-to-end service that guides them through every step of their investment journey.
+ </p>
+ <p>
+ <a href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Corporate-Brochure/m/" target="_blank" class="btn">View the brochure</a>
+ </p>
+ </div>
+ </div>
+
+
+ </div>
+ </section>
+ <section class="block project-brochures">
+ <div class="content">
+ <h2 id="project-brochures">Project Brochures</h2>
+ <div class="brochures">
+ <h3>UK Projects</h3>
+
+ <!-- ### IMAGE MAP EDITOR: http://image-map.weebly.com/ ### -->
+
+ <img src="images/brochures-uk.jpg" alt="UK projects" style="margin-top: -38px" usemap="#brochures_uk">
+ <map name="brochures_uk">
+ <area shape="rect" coords="4, 3, 197, 312" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Liverpool-Quay-Central/m/" alt="Quay Central" target="_blank" />
+ <area shape="rect" coords="241, 33, 410, 329" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-The-Loom/m/" alt="The Loom" target="_blank" />
+ <area shape="rect" coords="469, 34, 633, 329" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Leeds-Centenary-house/m/" alt="Centenary House" target="_blank" />
+ <area shape="rect" coords="688, 34, 847, 329" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-THE-CURVE-II-At-Park-Central/m/" alt="The Curve II" target="_blank" />
+ <area shape="circle" coords="1114, 112, 25" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-THE-CURVE-At-Park-Central/" alt="The Curve (EN)" target="_blank" />
+ <area shape="circle" coords="1111, 176, 24" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-THE-CURVE-At-Park-Central-CH/m/" alt="The Curve (CN)" target="_blank" />
+ <area shape="rect" coords="242, 394, 405, 683" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-River-Wandle-Apartments/m/" alt="River Wandle" target="_blank" />
+ <area shape="rect" coords="456, 459, 694, 677" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Horizon/m/" alt="Horizon" target="_blank" />
+ <area shape="circle" coords="944, 473, 23" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Woolwich-Wellington/m/" alt="Wellington Quarter (EN)" target="_blank" />
+ <area shape="circle" coords="945, 535, 24" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Woolwich-Wellington-CH/m/" alt="Wellington Quarter (CN)" target="_blank" />
+ </map>
+ </div>
+ <div class="brochures">
+ <h3>German Projects</h3>
+ <img src="images/brochures-germany.jpg" usemap="#brochures_germany">
+ <map name="brochures_germany">
+ <area shape="rect" coords="714, 1, 873, 280" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-THE-Galleries/m/" alt="The Galleries" />
+ <area shape="rect" coords="495, 0, 655, 274" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Berlin-Koda/m/" alt="Köda Berlin" />
+ <area shape="rect" coords="274, 0, 432, 286" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Berlin-RiverGardens/m/" alt="River Gardens" />
+ </map>
+ </div>
+ </div>
+ </section>
+ <section class="block track-records">
+ <div class="content">
+ <h2 id="track-records">Track Records</h2>
+ <img src="images/brochures-track-records.jpg" usemap="#track_records">
+ <map name="track_records">
+ <area shape="rect" coords="340, 2, 515, 286" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Berlin-portfolio-analysis-2014-2016/m/" alt="Berlin Portfolio Analysis" />
+ <area shape="circle" coords="843, 46, 24" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-London-portfolio-analysis/m/" alt="London Portfolio (EN)" />
+ <area shape="circle" coords="843, 109, 22" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-London-portfolio-analysis-CH/m/" alt="London Portfolio (CN)" />
+ <area shape="circle" coords="843, 170, 22" target="_blank" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-London-portfolio-analysis-AR/m/" alt="London Portfolio (AR)" />
+ </map>
+ </div>
+ </section>
+ <section class="block investor-guide">
+ <div class="content">
+ <h2 id="investor-guides">Investor Guide Series</h2>
+ <img src="images/brochures-investor-guide.jpg" usemap="#investor_guides">
+ <map name="investor_guides">
+ <area shape="rect" coords="125, 1, 285, 266" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Investing-in-property-BERLIN/m/" target="_blank" alt="Berlin" />
+ <area shape="rect" coords="353, 1, 510, 272" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Investing-in-property-CROSSRAIL/m/" target="_blank" alt="Crossrail" />
+ <area shape="circle" coords="774, 79, 24" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Investing-in-property-CROSSRAIL_update/m/" target="_blank" alt="Crossrail Update (EN)" />
+ <area shape="circle" coords="775, 144, 24" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Investment-guide-CROSSRAIL-CH/m/" target="_blank" alt="Crossrail Update (CN)" />
+ <area shape="rect" coords="872, 2, 1031, 270" href="http://hosting.fluidbook.com/ipglobal/IP-GLOBAL-Investment-guide-Chicago/m/" target="_blank" alt="Chicago" />
+ </map>
+ </div>
+ </section>
+
+ <section id="videos" class="block videos">
+ <a href="https://www.youtube.com/watch?v=cPKO8mzOu_w" target="_blank">
+ <img src="images/video-1.jpg">
+ <span>
+ <img src="images/play.svg" class="play">
+ IP Global Corporate Video<br>(English)
+ </span>
+ </a>
+ <a href="https://www.youtube.com/watch?v=KKjO95YNdPQ" target="_blank">
+ <img src="images/video-2.jpg">
+ <span>
+ <img src="images/play.svg" class="play">
+ IP Global Corporate Video<br>(Cantonese)
+ </span>
+ </a>
+ <a href="http://people.ipglobal-ltd.com/episodes/trailer-investor-stories/" target="_blank">
+ <img src="images/video-3.jpg">
+ <span>
+ <img src="images/play.svg" class="play">
+ Investor Stories - Why investing in<br>property
+ </span>
+ </a>
+ <a href="https://www.youtube.com/watch?v=SKtflN9vKic" target="_blank">
+ <img src="images/video-4.jpg">
+ <span>
+ <img src="images/play.svg" class="play">
+ Client Testimonials
+ </span>
+ </a>
+ </section>
+ </main>
+
+ <footer class="site">
+ <div class="social">
+ <h3>Follow Us</h3>
+ <a href="https://www.linkedin.com/company/ip-global-ltd" target="_blank" rel="noopener"><img src="images/linkedin.svg" alt="Linkedin"></a>
+ <a href="https://www.facebook.com/ipglobal/" target="_blank" rel="noopener"><img src="images/facebook.svg" alt="Facebook"></a>
+ <a href="https://twitter.com/IPGloballtd" target="_blank" rel="noopener"><img src="images/twitter.svg" alt="Twitter"></a>
+ <a href="https://www.youtube.com/channel/UC9qMKGaa4LAyy5gu3aTsj0w" target="_blank" rel="noopener"><img src="images/youtube.svg" alt="YouTube"></a>
+ </div>
+ <div class="copyright">
+ © 2018 IP Global
+ </div>
+ </footer>
+
+
+ <script src="index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- /dev/null
+// https://github.com/cferdinandi/smooth-scroll (installed via yarn)
+import SmoothScroll from 'smooth-scroll';
+
+var scroll = new SmoothScroll('a[href*="#"]', {
+ offset: 50
+});
\ No newline at end of file
--- /dev/null
+{
+ "name": "IP-Global",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "scripts": {
+ "start": "rimraf ./dist && parcel ./index.html",
+ "build": "rimraf ./dist && parcel build ./index.html --public-url=./"
+ },
+ "devDependencies": {
+ "rimraf": "^2.6.2",
+ "rupture": "^0.7.1",
+ "smooth-scroll": "^12.1.5",
+ "stylus": "^0.54.5"
+ }
+}
--- /dev/null
+html
+ font-size: $font-size-base
+
+body
+ min-width: $content-max-width
+ font-family: $font
+ color: $colors.text
+ line-height: 1.3
+ box-sizing: border-box
+
+*, *::before, *::after
+ box-sizing: inherit
+
+p
+ &:not(:last-of-type)
+ margin-bottom: 1.5em
+
+.block
+ &:nth-child(even)
+ background-color: $colors.light-grey
+
+.content
+ center()
+ vertical-spacing()
+
+ // Centred underline below headings
+ h3
+ &:after
+ content: ''
+ display: block
+ width: 33px
+ height: 3px
+ background-color: currentColor
+ margin: 30px auto
+
+.columns
+ display: flex
+ align-items: center
+
+.col
+ flex: 1 0 50%
+
+.text
+ padding: 0 9%
+ text-align: center
+ font-weight: 300
+
+.brochures
+ &:not(:last-of-type)
+ margin-bottom: 90px
--- /dev/null
+// Constrain a fractional property value (% or vw units) to work within a maximum width
+// Normally fractions are based on the container/screen width but we need to cap the value
+// on screens that are wider than the $max-content-width, otherwise value will become
+// disproportionally large. This is key to making the max-width layout work and scale.
+constrain(property, value = $horizontal-gutter, max-width = $content-max-width) {
+ {property}: value
+
+ +above(max-width) {
+ // Only do this if we are dealing with a percentage or vw unit
+ if (unit(value) is '%' || unit(value) is 'vw') {
+ $max = max-width * unit(value / 100, '') // Convert percentage to a decimal
+ {property}: $max
+ }
+ }
+}
+
+// Apply percentage based vertical padding - defaults to global gutter value if nothing passed
+// Note: fractional vertical padding is based on width
+vertical-spacing(amount = $vertical-gutter)
+ constrain(padding-top, amount)
+ constrain(padding-bottom, amount)
+
+//---------------------------------------//
+
+// Apply percentage based vertical padding - defaults to global gutter value if nothing passed
+horizontal-spacing(amount = $horizontal-gutter)
+ constrain(padding-left, amount)
+ constrain(padding-right, amount)
+
+//---------------------------------------//
+
+center(max-width = $content-max-width)
+ max-width: max-width
+ margin: 0 auto
+ padding-left: $outer-gutter
+ padding-right: @padding-left
+
+//---------------------------------------//
+
+reset-list()
+ list-style-type: none
+ padding: 0
+ margin: 0
+
+inline-list()
+ reset-list()
+ li
+ display: inline-block
+
+//---------------------------------------//
+
+// Automatically convert font-size in px to rem with fallback
+// Inspired by: https://davidwalsh.name/stylus-rem
+font-size(value, arguments...)
+
+ // Handle special case of setting base font size on html element
+ // In this case, we don't want pixel value converted to a REM
+ // Also bail out if 'inherit' is the value
+ if (selector() is 'html' || value is 'inherit') {
+ font-size: value
+ } else {
+ // Only px values are converted to rem but we still want to use the px value as a fallback
+ // Other values like 'inherit' or rems/ems are displayed as normal...
+ font-size: value arguments
+
+ if (unit(value) is 'px') {
+ font-size: r(value) arguments // rem value
+ }
+ }
+
+
+//---------------------------------------//
+// Standalone function for converting px to rem
+// Non-px values will be passed back in their original units
+r(value)
+ u = unit(value)
+
+ if (u is 'px')
+ return unit(value / $font-size-base, 'rem')
+ else
+ return value
+
+//---------------------------------------//
+// Enable font smoothing for thinning fonts in certain contexts
+// (light text on dark backgrounds normally)
+font-smoothing()
+ -webkit-font-smoothing: antialiased
+ -moz-osx-font-smoothing: grayscale
+
+font-smoothing-reset()
+ -webkit-font-smoothing: auto
+ -moz-osx-font-smoothing: auto
+
+//---------------------------------------//
--- /dev/null
+/*
+ * Fix
+ * Version 0.1.1
+ * https://github.com/jaydenseric/Fix
+*/
+html {
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ //-webkit-font-smoothing: antialiased;
+ //-moz-osx-font-smoothing: grayscale;
+ -webkit-tap-highlight-color: transparent;
+}
+body {
+ margin: 0;
+ line-height: 1;
+ font-family: sans-serif;
+}
+iframe {
+ border: 0;
+}
+main {
+ display: block;
+}
+ul,
+ol {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 1.2em;
+}
+dl {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+dd {
+ margin-left: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: inherit;
+}
+blockquote {
+ margin: 0;
+ padding: 0;
+}
+p {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+sup {
+ position: relative;
+ top: -.5em;
+ vertical-align: baseline;
+ font-size: 75%;
+ line-height: 0;
+}
+strong {
+ font-weight: bold;
+}
+figure {
+ margin: 0;
+}
+img {
+ border: 0;
+ max-width: 100%;
+ height: auto;
+ vertical-align: middle;
+}
+a {
+ text-decoration: none;
+ color: inherit;
+}
+button {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ text-align: inherit;
+ text-transform: inherit;
+ font: inherit;
+ -webkit-font-smoothing: inherit;
+ letter-spacing: inherit;
+ background: none;
+ cursor: pointer;
+ overflow: visible;
+}
+::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
--- /dev/null
+// General Setup
+$debug = false
+
+// Gutters (assumed to always be a vw, vh or % unit)
+$horizontal-gutter = 5%
+$vertical-gutter = 6%
+$outer-gutter = 20px // Used to give a minimum gap when screen is
+
+$content-max-width = 1150px + (2 * $outer-gutter)
+
+// Fonts
+$font = Montserrat, sans-serif
+
+// Font sizing (based on 1.5x multiplier)
+$font-size-base = 15px // Size of 1rem
+$font-size-large = 36px
+$font-size-medium = 24px
+$font-size-small = 12px
+
+// Breakpoints in Rupture (https://github.com/jescalan/rupture)
+rupture.scale = 0 400px 768px 1024px
+rupture.scale-names = 'small' 'medium' 'large'
+rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
+$breakpoint-menu = 1024px
+
+// Colours - available as .color-{name} class to set the color of the element
+$colors = {
+ headings: #07306e,
+ text: #515252,
+ footer: #363d4f,
+ blue: #00b5e1,
+ light-grey: #f2f2f2,
+}
+
+// Colour class helpers
+for colorName, colorCode in $colors
+ .color-{colorName}
+ color: colorCode !important
--- /dev/null
+.btn
+ font-smoothing()
+ display: inline-block
+ padding: 1em 1.5em
+ background-color: $colors.blue
+ color: #fff
+ text-transform: uppercase
+ font-size: 16px
+ font-weight: bold
+
+ .text &
+ margin-top: 10px
+
+ &:before
+ content: ''
+ display: inline-block
+ width: 12px
+ height: @width
+ transform: rotate(45deg)
+ border-top: 2px solid #fff
+ border-right: @border-top
+ margin-right: 15px
\ No newline at end of file
--- /dev/null
+h1, h2, h3
+ color: $colors.headings
+ text-transform: uppercase
+ text-align: center
+ margin-bottom: 1.9em
+
+h1, h2
+ font-size: $font-size-large
+
+h3
+ font-size: $font-size-medium
\ No newline at end of file
--- /dev/null
+.nav
+ &.primary
+ font-smoothing()
+ background-color: $colors.blue
+ color: #fff
+ text-transform: uppercase
+ font-size: 14px
+ font-weight: bold
+ text-align: center
+
+ ul
+ reset-list()
+ center()
+ display: flex
+ align-items: stretch
+ justify-content: center
+
+ li
+ flex: 1 0 auto
+ border-left: 1px solid #6cd3ed
+ &:last-child
+ border-right: @border-left
+
+ a
+ display: inline-block
+ padding: 1.5em 1em
+
+
+ &.secondary
+ position: absolute
+ top: 13px
+ right: $outer-gutter
+ color: #000
+ text-transform: uppercase
+ font-size: 11px
+
+ ul
+ inline-list()
+
+ li
+ padding: 4px 30px
+ border-left: 1px solid currentColor
+
+ &:last-child
+ border-right: @border-left
+
+ a
+ &:before
+ content: ''
+ display: inline-block
+ width: 8px
+ height: @width
+ transform: rotate(45deg)
+ border-top: 2px solid $colors.blue
+ border-right: @border-top
+ margin-right: 8px
--- /dev/null
+.videos
+ display: flex
+ flex-wrap: wrap
+ max-width: 1536px
+ margin: 0 auto
+
+ a
+ flex: 0 1 50%
+ position: relative
+
+ &:hover .play
+ transform: scale(1.1)
+
+ span
+ position: absolute
+ top: 50%
+ left: 0
+ right: 0
+ transform: translateY(-50%)
+ text-align: center
+ text-transform: uppercase
+ font-size: $font-size-medium
+ font-weight: bold
+ color: #fff
+
+ .play
+ display: block
+ margin: 40px auto 30px
+ transition: transform 0.2s ease-in
+ backface-visibility: hidden // Stops text below moving when scale happens
\ No newline at end of file
--- /dev/null
+footer
+ background-color: $colors.footer
+ color: #fff
+
+ h3
+ font-smoothing()
+ color: currentColor
+ font-size: $font-size-large
+
+.social
+ center()
+ constrain(padding-top, $vertical-gutter)
+ constrain(padding-bottom, ($vertical-gutter / 2))
+ text-align: center
+
+ a
+ &:not(:last-of-type)
+ margin-right: 33px
+
+ img
+ width: 25px
+
+.copyright
+ center(940px)
+ text-align: center
+ color: #666a77
+ border-top: 1px solid @color
+ font-size: $font-size-small
+ font-weight: 300
+ padding: 2rem 0 3.5rem
\ No newline at end of file
--- /dev/null
+header.site
+
+ .logo
+ margin: 20px 0
+
+ .inner
+ center()
+ position: relative
\ No newline at end of file
--- /dev/null
+@import '../node_modules/rupture/rupture'
+
+@import 'common/variables'
+@import 'common/mixins'
+
+@import 'common/reset'
+@import 'common/global'
+
+@import 'layout/header'
+@import 'layout/footer'
+
+@import 'components/headings'
+@import 'components/navigation'
+@import 'components/buttons'
+@import 'components/videos'
\ No newline at end of file
--- /dev/null
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+amdefine@>=0.0.4:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+balanced-match@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+brace-expansion@^1.1.7:
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+ dependencies:
+ balanced-match "^1.0.0"
+ concat-map "0.0.1"
+
+concat-map@0.0.1:
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+css-parse@1.7.x:
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
+debug@*:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+ dependencies:
+ ms "2.0.0"
+
+fs.realpath@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+glob@7.0.x:
+ version "7.0.6"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^3.0.2"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+glob@^7.0.5:
+ version "7.1.2"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^3.0.4"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+inflight@^1.0.4:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+ dependencies:
+ once "^1.3.0"
+ wrappy "1"
+
+inherits@2:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+minimatch@^3.0.2, minimatch@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+ dependencies:
+ brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+mkdirp@0.5.x:
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+ dependencies:
+ minimist "0.0.8"
+
+ms@2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+once@^1.3.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+ dependencies:
+ wrappy "1"
+
+path-is-absolute@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+rimraf@^2.6.2:
+ version "2.6.2"
+ resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+ dependencies:
+ glob "^7.0.5"
+
+rupture@^0.7.1:
+ version "0.7.1"
+ resolved "https://registry.yarnpkg.com/rupture/-/rupture-0.7.1.tgz#d51bcd5fe93757b4855e4ea70ac9d97a897183a1"
+
+sax@0.5.x:
+ version "0.5.8"
+ resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
+smooth-scroll@^12.1.5:
+ version "12.1.5"
+ resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-12.1.5.tgz#b6d8deca371a9edd5ea3ad291ef0fb7e741ed41e"
+
+source-map@0.1.x:
+ version "0.1.43"
+ resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+ dependencies:
+ amdefine ">=0.0.4"
+
+stylus@^0.54.5:
+ version "0.54.5"
+ resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+ dependencies:
+ css-parse "1.7.x"
+ debug "*"
+ glob "7.0.x"
+ mkdirp "0.5.x"
+ sax "0.5.x"
+ source-map "0.1.x"
+
+wrappy@1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
projects / ipglobal-library.git / commitdiff
