diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..3cc5329 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +_site +.idea +node_modules diff --git a/404.html b/404.html new file mode 100644 index 0000000..4a727a4 --- /dev/null +++ b/404.html @@ -0,0 +1,7 @@ +--- +layout: default +--- + +

404

+

Page not found :(

+

The requested page could not be found.

diff --git a/_config.yml b/_config.yml new file mode 100755 index 0000000..02de342 --- /dev/null +++ b/_config.yml @@ -0,0 +1,17 @@ +# Site settings +title: Design Resources +description: My favorite websites, tools, and books for design. +author: Jessica Paoli +locale: en-US + +# Build settings +markdown: kramdown +highlighter: rouge +permalink: /:title + +# Exclude from site build +exclude: + - .DS_Store + - node_modules + - gulpfile.js + - package.json diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..7409e7d --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,5 @@ + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..cdd8988 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,17 @@ + + + + + + {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} + + + + + + + + {% if jekyll.environment == 'production' and site.google_analytics %} + {% include google-analytics.html %} + {% endif %} + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100755 index 0000000..a5221d0 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,14 @@ + + + + {% include head.html %} + + + +
+ {{ content }} +
+ + {% include footer.html %} + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100755 index 0000000..d86064a --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,14 @@ +--- +layout: default +--- + +
+

{{ site.title }}

+

Websites, tools, and books for designers.

+
+ +

{{ post.title }}

+ +
+{{ content }} +
diff --git a/_posts/.DS_Store b/_posts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/_posts/.DS_Store differ diff --git a/_posts/2017-06-30-a11y.md b/_posts/2017-06-30-a11y.md new file mode 100755 index 0000000..b8d786d --- /dev/null +++ b/_posts/2017-06-30-a11y.md @@ -0,0 +1,11 @@ +--- +layout: post +title: Accessibility guidelines and tools +--- + +## Guidelines +- [Vox Media’s Designer Accessibility Checklist](http://) : steps to take when designing to be sure your visual design and experience design is accessible for all users +- [Google Material Design](http://) : a11y principles; practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation + +## Tools +- [Color palette ideas and contrast ratio checkers](http://) 👆 diff --git a/_posts/2017-06-30-browser-extensions.md b/_posts/2017-06-30-browser-extensions.md new file mode 100755 index 0000000..22b7837 --- /dev/null +++ b/_posts/2017-06-30-browser-extensions.md @@ -0,0 +1,12 @@ +--- +title: "Browser extensions and tools" +layout: post +--- + +## Google Chrome +- [WhatFont?](http://) +- [Type Tester](http://) + +### Chrome Dev tools +- [Animation tools](http://) +- [Full-page screenshot](http://) diff --git a/_posts/2017-06-30-brushes.md b/_posts/2017-06-30-brushes.md new file mode 100644 index 0000000..3e6669b --- /dev/null +++ b/_posts/2017-06-30-brushes.md @@ -0,0 +1,9 @@ +--- +title: "Brushes, PSDs" +layout: post +--- + +- [Kyle T. Webster](https://www.kylebrush.com/): best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet) +- [RetroSupply](http://www.retrosupply.co/collections/brushes) Photoshop and Illustrator brushes for adding large (2000px) texture; recommended packs are RetroSupply 1 and 2 for PS, VectorFuzz for Illustrator +- [CreativeMarket](https://creativemarket.com/): huge marketplace for relatively high-quality design assets (including fonts and stock photos), great for when you need to recreate a specific style or work in a particular niche +- [YouWorkForThem](https://www.youworkforthem.com/graphics/): cool textures and “graphics” diff --git a/_posts/2017-06-30-colors.md b/_posts/2017-06-30-colors.md new file mode 100644 index 0000000..3991e32 --- /dev/null +++ b/_posts/2017-06-30-colors.md @@ -0,0 +1,15 @@ +--- +title: "Colors and color palettes" +layout: post +--- + +- [Coolors](https://coolors.co/app): interactive color palette generator +- [Paletteable](http://www.palettable.io/): interactive color palette generator +- [Sip](http://sipapp.io/): beautifully-designed OSX and iOS colorpicker app, saves palettes +- [Randoma11y](https://randoma11y.com/): accessibility friendly text & bg color generator +- [Colors from A11y Stats](http://clrs.cc/a11y/): text & bg combinations with their contrast ratio and WCAG AA/AAA rating +- [Online contrast checker](http://webaim.org/resources/contrastchecker/) for accessibility (input hex code for text color and bg color) +- [Contrast Analyzer for OSX](https://www.paciellogroup.com/resources/contrastanalyser/) for easy eye-dropper–tool accessibility color testing +- [Hex Naw](https://hexnaw.com/ +- [Kuler](https://color.adobe.com/create/color-wheel/): Adobe color palette resource +- [Wikipedia’s category for color shades](https://en.wikipedia.org/wiki/Category:Shades_of_color_templates): omg so nerdy diff --git a/_posts/2017-06-30-fonts.md b/_posts/2017-06-30-fonts.md new file mode 100644 index 0000000..6e59eca --- /dev/null +++ b/_posts/2017-06-30-fonts.md @@ -0,0 +1,37 @@ +--- +title: "Fonts" +layout: post +--- +## Directories and marketplaces +- [Google Fonts](https://fonts.google.com/&sa=D&ust=1498933355778000&usg=AFQjCNH-hhkhkMn9pvoSUaDCoWeb_lgzYQ): [free] +- [Type Network](http://www.typenetwork.com/): [paid] +- [YouWorkForThem](https://www.youworkforthem.com/&sa=D&ust=1498933355779000&usg=AFQjCNEWrJwheEFvwG2raZBXfM13w9g_vQ): [paid] +- [MyFonts](http://myfonts.com&sa=D&ust=1498933355779000&usg=AFQjCNFL8IvctCLeLFB_2Bio-gaoJ3gXog): [paid] +- [TypeKit](https://typekit.com/&sa=D&ust=1498933355779000&usg=AFQjCNHI9-NVjfcM3o-JF0C6tBS7zLgn8g): [paid] included with Adobe CC subscription, some only available for desktop or web use + +## Individual foundries +- [Village](https://vllg.com/&sa=D&ust=1498933355779000&usg=AFQjCNF3fLFYrD3WN0eIp236xOyaw26RDw) +- [Font Bureau](http://fontbureau.typenetwork.com/&sa=D&ust=1498933355780000&usg=AFQjCNEekABOiPNRm14ummFIu9JMNxfFAA) +- [GrilliType](https://www.grillitype.com/&sa=D&ust=1498933355780000&usg=AFQjCNHgIHtkOrI_EwLrSVoICmyHh66atw) +- [Okay Type](https://okaytype.com/&sa=D&ust=1498933355780000&usg=AFQjCNGlmL-3_tXTtoJGcxMqb8JopeMBFg) +- [HvD Fonts](http://www.hvdfonts.com/&sa=D&ust=1498933355780000&usg=AFQjCNExMpcalIckvIT2UQQVx-ZMeJ4uRQ) +- [Colophon](http://www.colophon-foundry.org/&sa=D&ust=1498933355781000&usg=AFQjCNExFmdqENTPeg2OMrchOnC0f6WvJw) +- [TypeTogether](http://www.type-together.com/&sa=D&ust=1498933355781000&usg=AFQjCNEnA2lMtBlDhwy0lYHR2-50j43t3w) +- [Lineto](https://lineto.com/&sa=D&ust=1498933355781000&usg=AFQjCNEKheEYnm9dnC9Y6TfBaPl2Usqi6A) +- [Mark Simpson](http://www.marksimpson.com/&sa=D&ust=1498933355781000&usg=AFQjCNHc2BCuBlpOBEfkzCNYJjz6zIvZwA) +- [Just Another Foundry](http://justanotherfoundry.com/&sa=D&ust=1498933355781000&usg=AFQjCNEO4pS8er4_LeHdCEXNhvCQiY9v0g) +- [DSType](http://www.dstype.com/&sa=D&ust=1498933355782000&usg=AFQjCNHIzlQoKCVvfMRD7EQxY5WiTQhcmg) +- [P22](https://www.p22.com/&sa=D&ust=1498933355782000&usg=AFQjCNF7-f9TT4wXaOPalrnS7bbG6DBwAw) +- [Process Type](https://processtypefoundry.com/fonts/&sa=D&ust=1498933355782000&usg=AFQjCNGwUt19kM_1ibmawX3Tq96stRItEg) +- [Commercial Type](https://commercialtype.com/&sa=D&ust=1498933355782000&usg=AFQjCNFZKFfDAMTWGvRGtE8LI2HVHJgz3A) +- [Dalton Maag](https://www.daltonmaag.com/&sa=D&ust=1498933355782000&usg=AFQjCNEnA3gYuUSstIUsDvD3JWIwCP4mTA) +- [Hoefler & Co.](http://www.typography.com/&sa=D&ust=1498933355783000&usg=AFQjCNHW_Zv3-zdsJdAY4bIkPzHVc4TOuw) +- [A2 Type](http://www.a2-type.co.uk/&sa=D&ust=1498933355783000&usg=AFQjCNFY7ZGWnOwj3raERKkftBib4V6Olg) +- [Sudtipos](http://www.sudtipos.com/&sa=D&ust=1498933355783000&usg=AFQjCNEp3iLJdhYA-_SEIMQNpiFIaCofMQ) +- [Fountain](http://www.fountaintype.com/&sa=D&ust=1498933355784000&usg=AFQjCNF5HbCJF4ZyxEzjVq_bJgwr7sWRcA) +- [Beta Type](http://betatype.com/&sa=D&ust=1498933355784000&usg=AFQjCNFgGsxAozHZukjaJY0N6YTjDFam3Q) +- [Typotheque](https://www.typotheque.com/&sa=D&ust=1498933355784000&usg=AFQjCNG-YqIjAfWsExpNTqJLS9Ummmk9wg) +- [Bold Monday](https://www.boldmonday.com/&sa=D&ust=1498933355784000&usg=AFQjCNE49Bd8YQIZLUdkDwooYCExqVNO9w) +- [Avondale Type Co.](https://avondaletypeco.com/&sa=D&ust=1498933355784000&usg=AFQjCNFIHrIfpH8n1Q6jcqhSQMXzxaCBRg) +- [FontFont](https://www.fontfont.com/&sa=D&ust=1498933355785000&usg=AFQjCNEwDh9ZH2Lrc3klAOy7eJnGvqa0GA) +- [House Industries](http://www.houseind.com/&sa=D&ust=1498933355785000&usg=AFQjCNEY1EpYjGA49VqfjG69V9VhL_dqnQ) diff --git a/_posts/2017-06-30-icons.md b/_posts/2017-06-30-icons.md new file mode 100644 index 0000000..237de6e --- /dev/null +++ b/_posts/2017-06-30-icons.md @@ -0,0 +1,9 @@ +--- +title: "Icons and emoji" +layout: post +--- + +- The Noun Project: [free/paid] available for use with Creative Commons attribution or available to purchase without attribution for cheap +- ≤ iOS9 Apple emoji 160x160px transparent PNGs +- EmojiOne vectors [free, open source] +- SymbolSet: [paid] super high-quality icon fonts categorized by topic and style diff --git a/_posts/2017-06-30-inspiration.md b/_posts/2017-06-30-inspiration.md new file mode 100755 index 0000000..07848ec --- /dev/null +++ b/_posts/2017-06-30-inspiration.md @@ -0,0 +1,55 @@ +--- +title: "Inspiration and criticism websites" +layout: post +--- + +## Web, mobile, product + +### Visual design +- [Siteinspire](http://siteinspire.com): website design gallery +- [One Page Love](https://onepagelove.com): one-page website design gallery +- [Web Creme](http://www.webcreme.com): website design gallery +- [Site See](https://sitesee.co): website design gallery +- [HTTPSTER](http://httpster.net): website design gallery +- [Really Good Emails](http://reallygoodemails.com): email design gallery + + +### UX patterns and components +- [PTTRNS](http://pttrns.com): mobile design patterns and components +- [Capptivate](http://capptivate.co): mobile design patterns and components in video form +- [Unmatched Style](http://unmatchedstyle.com): website design and interactive components gallery +- [Pattern Tap](http://zurb.com/patterntap): website components gallery +- [Empty Stat.es](http://emptystat.es): empty state designs +- [Little Big Details](http://littlebigdetails.com): delightful, thoughtful UX components that make a big difference + +## Typography +- [Alphabettes](http://www.alphabettes.org): commentary, research, and work showcases by women in type design +- [Typographica](http://typographica.org): reviews and commentary on type books and typefaces +- [Fonts In Use](https://fontsinuse.com): identifying type in print in real life +- [Type Wolf](https://www.typewolf.com): basically Fonts In Use online + +## Brand identity + +- [Brand New](http://www.underconsideration.com/brandnew): brand identity case studies +- [BP & O](http://bpando.org): killer packaging and brand design gallery +- [Shipcom](http://shipcom.tumblr.com): collection of shipping, manufacturing, transport, and logistics logos + +## Print, layout, packaging, art direction + +- [FPO](http://www.underconsideration.com/fpo): print design case studies +- [Art of the Menu](http://www.underconsideration.com/artofthemenu): restaurant-specific print menu design case studies +- [Grafik](https://www.grafik.net): cutting-edge and old school fringe aesthetic case studies +- [Trendlist](http://www.trendlist.org): graphic design trends for the designer’s designer +- [NubbyTwiglet on Pinterest](https://www.pinterest.com/nubbytwiglet/graphic-design-editorial-layout): print editorial layout gallery +- [It’s Nice That](http://www.itsnicethat.com): creative inspiration worldwide +- [Designspiration](http://designspiration.net): photography, print design, cool stuff gallery, Pinterest style +- [Mind Sparkle Mag](http://mindsparklemag.com): print, brand, interior, industrial design features + +## Illustration and art + +- [Jacky Winter](http://www.jackywinter.com/all-artists): illustration collective +- [Boooooooom](http://www.booooooom.com): art, illustration, design, photography interviews and features + +## Motion + +- [Wine After Coffee](https://vimeo.com/channels/wineaftercoffee): curated channel of the best motion graphics, animation, and video diff --git a/_posts/2017-06-30-mocks.md b/_posts/2017-06-30-mocks.md new file mode 100644 index 0000000..ed9cfde --- /dev/null +++ b/_posts/2017-06-30-mocks.md @@ -0,0 +1,9 @@ +--- +title: "Mockups" +layout: post +--- + +- [Facebook Design](http://facebook.design/handskit/): [free] diverse hands holding mobile devices +- [Graphicburger](http://graphicburger.com/mock-ups/): [free] physical product mockups & templates +- [Pixeden](http://www.pixeden.com): [free] physical product mockups & templates +- [GraphicRiver](https://graphicriver.net/): [paid] any product mockup you can ever think of diff --git a/_posts/2017-06-30-prototyping-tools.md b/_posts/2017-06-30-prototyping-tools.md new file mode 100644 index 0000000..26f90bc --- /dev/null +++ b/_posts/2017-06-30-prototyping-tools.md @@ -0,0 +1,12 @@ +--- +title: "Prototyping tools" +layout: post +--- + +- [Adobe Experience Design](http://www.adobe.com/products/experience-design.html): included with Adobe CC subscription, for creating wireframes and protoyping interactivity +- [Principle](http://principleformac.com/): motion design prototyping tool for mobile and web applications +- [InVision](https://www.invisionapp.com/): collaborative click-through prototyping tool for web and mobile +- [Marvel](https://marvelapp.com/): simple click-through prototyping tool for web and mobile apps +- [Atomic](https://atomic.io): prototyping tool for mobile or desktop interactions or animations +- [Framer](https://framerjs.com): prototyping tool built on framer.js for prototyping mobile and desktop apps +- 👆 [More details on these apps and the differences between them @ cooper.com](https://www.cooper.com/prototyping-tools) diff --git a/_posts/2017-06-30-stock-photography.md b/_posts/2017-06-30-stock-photography.md new file mode 100644 index 0000000..715589f --- /dev/null +++ b/_posts/2017-06-30-stock-photography.md @@ -0,0 +1,12 @@ +--- +title: "Stock photography" +layout: post +--- + +- [Stocksy](http://stocksy.com): [paid] high quality, stylish lifestyle paid stock photos (watermarked comps) +- [Masterfile](http://masterfile.com): [paid] stock photos, a little higher quality than iStock (unwatermarked hi-res comps with a registered account) +- [Women of Color in Tech](https://www.flickr.com/photos/wocintechchat/albums): [free] photos of women in color in tech settings since every other stock photo site fails at this hardcore +- [Unsplash](https://unsplash.com/): [free] the first of the hip and gorgeous free with no strings attached stock photo sites +- [Gratisography](http://gratisography.com/): [free] photos by one photographer requiring no attribution, most are weird but some are chill to save in a folder for later since they’re free +- [Magdeline](http://magdeleine.co/browse/): [free] similar to unsplash, some are licensed in public domain, some require Creative Commons attribution +- [Death to the Stock Photo](http://deathtothestockphoto.com/): [free/paid] new sets emailed weekly, premium plans available for more photos and unlimited access diff --git a/_posts/2017-06-30-user-testing.md b/_posts/2017-06-30-user-testing.md new file mode 100755 index 0000000..8543e82 --- /dev/null +++ b/_posts/2017-06-30-user-testing.md @@ -0,0 +1,8 @@ +--- +title: "User testing and interactive feedback tools" +layout: post +--- + +- [Lookback](http://): users record their screen, face, voice, and touches while using your site/app/prototype/wireframe +- [UserTesting](http://): finds participants for you, runs a usability test, and records and stores videos of real people speaking their thoughts as they use your site/app/prototype/wireframe +- [UsabilityHub](http://): for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images diff --git a/_scss/.DS_Store b/_scss/.DS_Store new file mode 100644 index 0000000..fd8f950 Binary files /dev/null and b/_scss/.DS_Store differ diff --git a/_scss/_syntax.scss b/_scss/_syntax.scss new file mode 100755 index 0000000..2774b76 --- /dev/null +++ b/_scss/_syntax.scss @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_scss/base/_base.scss b/_scss/base/_base.scss new file mode 100755 index 0000000..0abc6e9 --- /dev/null +++ b/_scss/base/_base.scss @@ -0,0 +1,4 @@ +@import 'reset', + 'colors', + 'typography', + 'forms'; diff --git a/_scss/base/_colors.scss b/_scss/base/_colors.scss new file mode 100755 index 0000000..e69de29 diff --git a/_scss/base/_forms.scss b/_scss/base/_forms.scss new file mode 100755 index 0000000..e69de29 diff --git a/_scss/base/_reset.scss b/_scss/base/_reset.scss new file mode 100755 index 0000000..caea735 --- /dev/null +++ b/_scss/base/_reset.scss @@ -0,0 +1,465 @@ +/** + * + * @group Reset + * +*/ + +/// Border box <3 +/// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +/// ------------- +/// +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss new file mode 100755 index 0000000..78f67a5 --- /dev/null +++ b/_scss/base/_typography.scss @@ -0,0 +1,45 @@ +/** + * + * @group Typography + * +*/ + +/// Settings +/// ------------- + +/// Weights + sizing +$font-weight__normal: 400; +$font-weight__bold: 700; +$font-size__base: 100%; +$leading: 1.5; + +/// Family stacks +$font-family__body: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + +/// Styles +/// ------------- +body { + font: $font-weight__normal $font-size__base $font-family__body; + line-height: $leading; + color: #343434; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.1; +} + +a { + color: inherit; + cursor: pointer; + text-decoration: none; + font-weight: $font-weight__bold; + border-bottom: solid 1px #92c1ff; + &:hover { + color: #136ec2; + } +} + +p, ul { + margin-bottom: 2rem; + font-size: 1.125rem; +} diff --git a/_scss/components/_article.scss b/_scss/components/_article.scss new file mode 100755 index 0000000..7cc15d0 --- /dev/null +++ b/_scss/components/_article.scss @@ -0,0 +1,36 @@ +.post { + margin-bottom: 6rem; +} + +.post__title { + font-size: 2.75rem; + font-weight: $font-weight__normal; + &:hover { + .post__title__anchor:before { + color: #136ec2; + } + } +} + + .post__title__anchor:before { + content: "#"; + margin-left: -2.75rem; + border: 0; + font-weight: $font-weight__normal; + color: #ddd; + } + +.post h2, +.post h3 { + margin-top: 2rem; + margin-bottom: 0.25rem; +} + +.post ul { + margin-left: 0; + padding-left: 0; +} + + .post li { + margin-bottom: 0.75rem; + } diff --git a/_scss/components/_footer.scss b/_scss/components/_footer.scss new file mode 100755 index 0000000..f6121fa --- /dev/null +++ b/_scss/components/_footer.scss @@ -0,0 +1,4 @@ +.site__footer p { + font-size: .9rem; + color: #777; +} diff --git a/_scss/components/_header.scss b/_scss/components/_header.scss new file mode 100755 index 0000000..43c4a04 --- /dev/null +++ b/_scss/components/_header.scss @@ -0,0 +1,20 @@ +.site__header { + margin-bottom: 6rem; + font-size: .9rem; +} + +.site__header__nav { + margin: 0; + padding: 0; + font-size: .9rem; + list-style: none; + display: inline; + text-transform: lowercase; + li { + display: inline-block; + } + li:not(:last-child):after { + content: " \00B7"; + color: #aaa; + } +} diff --git a/_scss/components/_page.scss b/_scss/components/_page.scss new file mode 100755 index 0000000..7e6aee7 --- /dev/null +++ b/_scss/components/_page.scss @@ -0,0 +1,7 @@ +.site__content { + max-width: 40rem; + margin: 0 auto; + @media only screen and ( max-width: 800px ) { + margin: 3rem; + } +} diff --git a/_scss/main.scss b/_scss/main.scss new file mode 100755 index 0000000..1e1e07f --- /dev/null +++ b/_scss/main.scss @@ -0,0 +1,10 @@ +@charset "utf-8"; + +@import 'base/reset', + 'base/colors', + 'base/typography', + 'base/forms', + 'components/page', + 'components/header', + 'components/footer', + 'components/article'; diff --git a/assets/main.css b/assets/main.css new file mode 100755 index 0000000..e7804df --- /dev/null +++ b/assets/main.css @@ -0,0 +1,483 @@ +/** + * + * @group Reset + * +*/ +html { + box-sizing: border-box; } + +*, *:before, *:after { + box-sizing: inherit; } + +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + /* 1 */ + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } + +/** + * + * @group Typography + * +*/ +body { + font: 400 100% -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.5; + color: #343434; } + +h1, h2, h3, h4, h5, h6 { + line-height: 1.1; } + +a { + color: inherit; + cursor: pointer; + text-decoration: none; + font-weight: 700; + border-bottom: solid 1px #92c1ff; } + a:hover { + color: #136ec2; } + +p, ul { + margin-bottom: 2rem; + font-size: 1.125rem; } + +.site__content { + max-width: 40rem; + margin: 0 auto; } + @media only screen and (max-width: 800px) { + .site__content { + margin: 3rem; } } + +.site__header { + margin-bottom: 6rem; + font-size: .9rem; } + +.site__header__nav { + margin: 0; + padding: 0; + font-size: .9rem; + list-style: none; + display: inline; + text-transform: lowercase; } + .site__header__nav li { + display: inline-block; } + .site__header__nav li:not(:last-child):after { + content: " \00B7"; + color: #aaa; } + +.site__footer p { + font-size: .9rem; + color: #777; } + +.post { + margin-bottom: 6rem; } + +.post__title { + font-size: 2.75rem; + font-weight: 400; } + .post__title:hover .post__title__anchor:before { + color: #136ec2; } + +.post__title__anchor:before { + content: "#"; + margin-left: -2.75rem; + border: 0; + font-weight: 400; + color: #ddd; } + +.post h2, +.post h3 { + margin-top: 2rem; + margin-bottom: 0.25rem; } + +.post ul { + margin-left: 0; + padding-left: 0; } + +.post li { + margin-bottom: 0.75rem; } diff --git a/css/main.css b/css/main.css new file mode 100755 index 0000000..bb1adc0 --- /dev/null +++ b/css/main.css @@ -0,0 +1,432 @@ +/** + * + * @group Reset + * +*/ +html { + box-sizing: border-box; } + +*, *:before, *:after { + box-sizing: inherit; } + +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + /* 1 */ + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } + +/** + * + * @group Typography + * +*/ +body { + font: 400 1.25rem -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.7; } + @media only screen and (max-width: 500px) { + body { + font-size: 1.1rem; } } + +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + text-transform: uppercase; + letter-spacing: .4rem; } + +h2 { + font-size: 1.4rem; + line-height: 1.3; } + +a { + color: inherit; + cursor: pointer; + text-decoration: none; + font-weight: 700; } + +p, ul { + margin-bottom: 2rem; + font-size: 1.125rem; } diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..b914910 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,67 @@ +var gulp = require('gulp'); +var browserSync = require('browser-sync'); +var sass = require('gulp-sass'); +var prefix = require('gulp-autoprefixer'); +var cp = require('child_process'); + +var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; +var messages = { + jekyllBuild: 'Running: $ jekyll build' +}; + +/** + * Build the Jekyll Site + */ +gulp.task('jekyll-build', function (done) { + browserSync.notify(messages.jekyllBuild); + return cp.spawn( jekyll , ['build'], {stdio: 'inherit'}) + .on('close', done); +}); + +/** + * Rebuild Jekyll & do page reload + */ +gulp.task('jekyll-rebuild', ['jekyll-build'], function () { + browserSync.reload(); +}); + +/** + * Wait for jekyll-build, then launch the Server + */ +gulp.task('browser-sync', ['sass', 'jekyll-build'], function() { + browserSync({ + server: { + baseDir: '_site' + } + }); +}); + +/** + * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds) + */ +gulp.task('sass', function () { + return gulp.src('_scss/main.scss') + .pipe(sass({ + includePaths: ['scss'], + onError: browserSync.notify + })) + .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) + .pipe(gulp.dest('_site/css')) + .pipe(browserSync.reload({stream:true})) + .pipe(gulp.dest('assets')); +}); + +/** + * Watch scss files for changes & recompile + * Watch html/md files, run jekyll & reload BrowserSync + */ +gulp.task('watch', function () { + gulp.watch('_scss/**/*.scss', ['sass']); + gulp.watch(['*.html', '*.md', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']); +}); + +/** + * Default task, running just `gulp` will compile the sass, + * compile the jekyll site, launch BrowserSync & watch files. + */ +gulp.task('default', ['browser-sync', 'watch']); diff --git a/index.html b/index.html new file mode 100644 index 0000000..7d1eb41 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +--- +layout: default +--- + +
+

{{ site.title }}

+
+ My favorite for designers. +
+
+ +{% for post in site.posts %} +
+

{{ post.title }}

+
+ {{ post.content }} +
+
+{% endfor %} diff --git a/main.css b/main.css new file mode 100755 index 0000000..bb1adc0 --- /dev/null +++ b/main.css @@ -0,0 +1,432 @@ +/** + * + * @group Reset + * +*/ +html { + box-sizing: border-box; } + +*, *:before, *:after { + box-sizing: inherit; } + +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + /* 1 */ + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } + +/** + * + * @group Typography + * +*/ +body { + font: 400 1.25rem -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.7; } + @media only screen and (max-width: 500px) { + body { + font-size: 1.1rem; } } + +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + text-transform: uppercase; + letter-spacing: .4rem; } + +h2 { + font-size: 1.4rem; + line-height: 1.3; } + +a { + color: inherit; + cursor: pointer; + text-decoration: none; + font-weight: 700; } + +p, ul { + margin-bottom: 2rem; + font-size: 1.125rem; } diff --git a/package.json b/package.json new file mode 100755 index 0000000..7003608 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "browser-sync-jekyll", + "version": "0.0.0", + "description": "A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Shane Osbourne", + "license": "ISC", + "devDependencies": { + "gulp": "^3.8.8", + "gulp-sass": "^2.1.0", + "browser-sync": "^1.3.7", + "gulp-autoprefixer": "1.0.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git" + }, + "keywords": [ + "jekyll", + "gulp", + "sass", + "browsersync" + ], + "bugs": { + "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues" + }, + "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync" +}