Created
April 2, 2014 18:00
-
-
Save ianrose/9939537 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Il Conde</h1> | |
| <p class="h5">By Joseph Conrad</p> | |
| <h2 class="h3"><em>"Vedi Napoli e poi mori."</em></h2> | |
| <p>The first time we got into conversation was in the National Museum in Naples, in the rooms on the ground floor containing the famous collection of bronzes from Herculaneum and Pompeii: that marvellous legacy of antique art whose delicate perfection has been preserved for us by the catastrophic fury of a volcano.</p> | |
| <p>He addressed me first, over the celebrated Resting Hermes which we had been looking at side by side. He said the right things about that wholly admirable piece. Nothing profound. His taste was natural rather than cultivated. He had obviously seen many fine things in his life and appreciated them: but he had no jargon of a dilettante or the connoisseur. A hateful tribe. He spoke like a fairly intelligent man of the world, a perfectly unaffected gentleman.</p> | |
| <p>We had known each other by sight for some few days past. Staying in the same hotel--good, but not extravagantly up to date--I had noticed him in the vestibule going in and out. I judged he was an old and valued client. The bow of the hotel-keeper was cordial in its deference, and he acknowledged it with familiar courtesy. For the servants he was Il Conde. There was some squabble over a man's parasol--yellow silk with white lining sort of thing--the waiters had discovered abandoned outside the dining-room door. Our gold-laced door-keeper recognized it and I heard him directing one of the lift boys to run after Il Conde with it. Perhaps he was the only Count staying in the hotel, or perhaps he had the distinction of being the Count par excellence, conferred upon him because of his tried fidelity to the house.</p> | |
| <p>Having conversed at the Museo--(and by the by he had expressed his dislike of the busts and statues of Roman emperors in the gallery of marbles: their faces were too vigorous, too pronounced for him)--having conversed already in the morning I did not think I was intruding when in the evening, finding the dining-room very full, I proposed to share his little table. Judging by the quiet urbanity of his consent he did not think so either. His smile was very attractive.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v0.7.0) | |
| // ---- | |
| @charset "UTF-8"; | |
| /* | |
| * --------------------- | |
| * Typesettings | |
| * --------------------- | |
| * A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines. | |
| * Oh, and pixel borders that maintain rhythm. | |
| * | |
| * Release Versions: https://github.com/ianrose/typesettings/releases | |
| * Github: https://github.com/ianrose/typesettings | |
| * License: The MIT License (MIT) | |
| * | |
| * Inspired by and used stuff from: | |
| * https://github.com/typeplate/typeplate.github.io | |
| * https://github.com/csswizardry/typecsset | |
| */ | |
| // --------------------- | |
| // Config Variables | |
| // --------------------- | |
| $font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; | |
| $font-serif: Georgia, 'Times New Roman', serif !default; | |
| $font-mono: 'Lucida Console', Monaco, monospace !default; | |
| $text-color: #000 !default; | |
| // The vertical grid unit. Margin, padding, and line-height are set to multiples of this value. | |
| // This is the value that determines the baseline for our vertical rhythm. The default value of 6px | |
| // allows more fine tuned designs that still obery vertical rhythm. | |
| $base-vertical-unit: 6px !default; | |
| // The value that multiplies the $base-vertical-unit to get the $base-line-height. This gives type | |
| // an ideal line-height. | |
| $base-line-multi: 4 !default; | |
| // Base font size in pixels. | |
| $base-font-size: 16px !default; | |
| // Modular scale ratio that is used to figure out all the different font sizes | |
| $ms-ratio: 1.414 !default; | |
| // Paragraph settings | |
| $paragraph-indent: true !default; | |
| $paragraph-justify: true !default; | |
| // --------------------- | |
| // Internal Variable(s) | |
| // --------------------- | |
| // Best not to adjust these variable. | |
| // Converts the $base-font-size value to EMs | |
| $base-em-font-size: ($base-font-size / 16px) * 1em !default; | |
| // One step down in the modular scale in EMs | |
| $ms-down1: $base-em-font-size / $ms-ratio; | |
| // Two steps down in the modular scale in EMs | |
| $ms-down2: $ms-down1 /$ms-ratio; | |
| // Three steps down in the modular scale in EMs | |
| $ms-down3: $ms-down2 / $ms-ratio; | |
| // One step up in the modular scale in EMs | |
| $ms-up1: $base-em-font-size * $ms-ratio; | |
| // Two steps up in the modular scale in EMs | |
| $ms-up2: $ms-up1 * $ms-ratio; | |
| // Three steps up in the modular scale in EMs | |
| $ms-up3: $ms-up2 * $ms-ratio; | |
| // Four steps up in the modular scale in EMs | |
| $ms-up4: $ms-up3 * $ms-ratio; | |
| // Creates a unitless line-height that is based on typographic ideals and maintains vertical rhythm. | |
| $base-line-height: ($base-vertical-unit * $base-line-multi) / $base-font-size; | |
| // --------------------- | |
| // Helper function(s) | |
| // --------------------- | |
| // Returns a number without a unit. For example 16px becomes 16 | |
| @function stripUnits($number) { | |
| @return $number / ($number * 0 + 1); | |
| } | |
| // Returns an EM value. For example 24px becomes 1.5em | |
| @function emCalc($target, $context: $base-font-size) { | |
| @return stripUnits(($target / $context)) + 0em; | |
| } | |
| // Returns an EM value that is a multiple of our defined base vertical unit. For example 3 becomes 1.125em | |
| @function emRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) { | |
| @return (stripUnits($lines) * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em; | |
| } | |
| // Returns a unitless number that is a multiple of our defined base vertical unit. For example 3 becomes 1.125 | |
| @function unitlessRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) { | |
| @return ($lines * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size)); | |
| } | |
| // --------------------- | |
| // Mixin(s) | |
| // --------------------- | |
| // Finally, the tools that you can use throughout your project to set | |
| // all the wonderful type related stuffs. | |
| // Sets the type in EMs and makes a vertical rhythm unitless line-height that is based on context. | |
| @mixin setType($lines: $base-line-multi, $font-size: $base-em-font-size) { | |
| font-size: $font-size; | |
| line-height: unitlessRhythm($lines, $font-size); | |
| } | |
| // Creates a vertical rhythm unitless line-height that is based on context | |
| @mixin setLeading($lines: $base-line-multi, $font-size: $base-em-font-size) { | |
| line-height: unitlessRhythm($lines, $font-size); | |
| } | |
| @mixin rhythmBorderTop($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) { | |
| border-top-width: $border-width; | |
| padding-top: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em; | |
| } | |
| @mixin rhythmBorderBottom($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) { | |
| border-bottom-width: $border-width; | |
| padding-bottom: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em; | |
| } | |
| @mixin rhythmBorder($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) { | |
| border-width: $border-width; | |
| padding: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em; | |
| } | |
| // --------------------- | |
| // Default Type Styles | |
| // --------------------- | |
| html { | |
| font-size: ($base-font-size / 16px) * 100%; // Sets the font-size of the project as a percentage. Making it easy to scale up/down the whole project for specific media queries | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: $font-serif; | |
| font-weight: 400; | |
| line-height: $base-line-height; | |
| color: $text-color; | |
| } | |
| h1, .h1, | |
| h2, .h2, | |
| h3, .h3, | |
| h4, .h4, | |
| h5, .h5, | |
| h6, .h6 { | |
| margin-top: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| font-family: $font-sans; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| // [1] Applies a margin bottom that is a multiple of the vertical grid in EMs. The first argument is the font size context and the second is multiple of the vertical grid unit. | |
| // [2] Sets the type to one of the modular scale values and the second argument sets a unitless line-height as a multiple of the vertical grid. | |
| // [3] A generic media query for tablet size ranges. | |
| // [4] Applies a margin bottom that is the same vertical grid value as the mobile first rule. | |
| // [5] Sets the type to one of the modular scale values and the second argument sets a unitless line-height as a multiple of the vertical grid. | |
| h1, .h1 { | |
| margin-bottom: emRhythm(4, $ms-up2); // [1] | |
| @include setType(6, $ms-up2); // [2] | |
| @media (min-width: 43.75em) { | |
| // [3] | |
| margin-bottom: emRhythm(4, $ms-up3); // [4] | |
| @include setType(8, $ms-up3); // [5] | |
| } | |
| @media (min-width: 56.25em) { | |
| margin-bottom: emRhythm(4, $ms-up4); | |
| @include setType(10, $ms-up4); | |
| } | |
| } | |
| h2, .h2 { | |
| margin-bottom: emRhythm(4, $ms-up1); | |
| @include setType(5, $ms-up1); | |
| @media (min-width: 43.75em) { | |
| margin-bottom: emRhythm(4, $ms-up2); | |
| @include setType(6, $ms-up2) | |
| } | |
| @media (min-width: 56.25em) { | |
| margin-bottom: emRhythm(4, $ms-up3); | |
| @include setType(8, $ms-up3); | |
| } | |
| } | |
| h3, .h3 { | |
| margin-bottom: emRhythm(4, $ms-up1); | |
| @include setType(5, $ms-up1); | |
| @media (min-width: 56.25em) { | |
| margin-bottom: emRhythm(4, $ms-up2); | |
| @include setType(6, $ms-up2); | |
| } | |
| } | |
| h4, .h4 { | |
| margin-bottom: emRhythm(4, $ms-up1); | |
| @include setType(5, $ms-up1); | |
| } | |
| h5, .h5, | |
| h6, .h6 { | |
| margin-bottom: emRhythm(4); | |
| @include setType(4); | |
| } | |
| p { | |
| margin-top: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| -ms-hyphens: auto; | |
| -o-hyphens: auto; | |
| hyphens: auto; | |
| word-wrap: break-word; | |
| max-width: emRhythm(96); | |
| margin-bottom: emRhythm(4); | |
| @media (min-width: 43.75em) { | |
| @if $paragraph-justify { | |
| text-align: justify; | |
| } | |
| } | |
| } | |
| @if $paragraph-indent { | |
| p + p { | |
| margin-top: emRhythm(-4); | |
| text-indent: emRhythm(4); | |
| } | |
| } | |
| small, | |
| .font-small { | |
| @include setType(3, $ms-down1); | |
| } | |
| em { | |
| font-style: italic; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| blockquote { | |
| margin-top: emRhythm(4); | |
| margin-bottom: emRhythm(4); | |
| margin-left: emRhythm(-5); | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: emRhythm(4); | |
| font-family: $font-mono; | |
| font-weight: bold; | |
| border-left: $base-vertical-unit solid lighten(#000, 50%); | |
| footer { | |
| cite { | |
| &:before { | |
| content: " – "; | |
| } | |
| } | |
| } | |
| } | |
| pre, | |
| code { | |
| font-family: $font-mono; | |
| } | |
| time, | |
| .time { | |
| text-transform: uppercase; | |
| } | |
| ol, | |
| ul, | |
| dl { | |
| margin-top: 0; | |
| margin-bottom: emRhythm(4); | |
| margin-left: emRhythm(4); | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| } | |
| ul ul, | |
| ol ol, | |
| dl dl { | |
| margin-left: 0; | |
| } | |
| ul { | |
| list-style: disc; | |
| } | |
| ol { | |
| list-style: decimal; | |
| } | |
| abbr { | |
| font-variant: small-caps; // https://developer.mozilla.org/en-US/docs/CSS/font-variant | |
| font-weight: 600; | |
| text-transform: lowercase; | |
| } | |
| abbr[title]:hover { | |
| cursor: help; // cursor changed to a question mark when it has a title | |
| } | |
| hr { | |
| border: 0; | |
| margin-top: emRhythm(4); | |
| margin-bottom: 0; | |
| border-top-color: $text-color; | |
| border-top-style: solid; | |
| @include rhythmBorderTop(1px, 4); | |
| } | |
| body { | |
| max-width: 36em; | |
| margin: 0 auto; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * --------------------- | |
| * Typesettings | |
| * --------------------- | |
| * A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines. | |
| * Oh, and pixel borders that maintain rhythm. | |
| * | |
| * Release Versions: https://github.com/ianrose/typesettings/releases | |
| * Github: https://github.com/ianrose/typesettings | |
| * License: The MIT License (MIT) | |
| * | |
| * Inspired by and used stuff from: | |
| * https://github.com/typeplate/typeplate.github.io | |
| * https://github.com/csswizardry/typecsset | |
| */ | |
| html { | |
| font-size: 100%; | |
| -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Georgia, 'Times New Roman', serif; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: #000; } | |
| h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { | |
| margin-top: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-weight: bold; | |
| text-transform: uppercase; } | |
| h1, .h1 { | |
| margin-bottom: 0.75023em; | |
| font-size: 1.9994em; | |
| line-height: 1.12534; } | |
| @media (min-width: 43.75em) { | |
| h1, .h1 { | |
| margin-bottom: 0.53057em; | |
| font-size: 2.82715em; | |
| line-height: 1.06114; } } | |
| @media (min-width: 56.25em) { | |
| h1, .h1 { | |
| margin-bottom: 0.37523em; | |
| font-size: 3.99758em; | |
| line-height: 0.93807; } } | |
| h2, .h2 { | |
| margin-bottom: 1.06082em; | |
| font-size: 1.414em; | |
| line-height: 1.32603; } | |
| @media (min-width: 43.75em) { | |
| h2, .h2 { | |
| margin-bottom: 0.75023em; | |
| font-size: 1.9994em; | |
| line-height: 1.12534; } } | |
| @media (min-width: 56.25em) { | |
| h2, .h2 { | |
| margin-bottom: 0.53057em; | |
| font-size: 2.82715em; | |
| line-height: 1.06114; } } | |
| h3, .h3 { | |
| margin-bottom: 1.06082em; | |
| font-size: 1.414em; | |
| line-height: 1.32603; } | |
| @media (min-width: 56.25em) { | |
| h3, .h3 { | |
| margin-bottom: 0.75023em; | |
| font-size: 1.9994em; | |
| line-height: 1.12534; } } | |
| h4, .h4 { | |
| margin-bottom: 1.06082em; | |
| font-size: 1.414em; | |
| line-height: 1.32603; } | |
| h5, .h5, h6, .h6 { | |
| margin-bottom: 1.5em; | |
| font-size: 1em; | |
| line-height: 1.5; } | |
| p { | |
| margin-top: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| -ms-hyphens: auto; | |
| -o-hyphens: auto; | |
| hyphens: auto; | |
| word-wrap: break-word; | |
| max-width: 36em; | |
| margin-bottom: 1.5em; } | |
| @media (min-width: 43.75em) { | |
| p { | |
| text-align: justify; } } | |
| p + p { | |
| margin-top: -1.5em; | |
| text-indent: 1.5em; } | |
| small, .font-small { | |
| font-size: 0.70721em; | |
| line-height: 1.59075; } | |
| em { | |
| font-style: italic; } | |
| strong { | |
| font-weight: bold; } | |
| blockquote { | |
| margin-top: 1.5em; | |
| margin-bottom: 1.5em; | |
| margin-left: -1.875em; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 1.5em; | |
| font-family: 'Lucida Console', Monaco, monospace; | |
| font-weight: bold; | |
| border-left: 6px solid #808080; } | |
| blockquote footer cite:before { | |
| content: " �� "; } | |
| pre, code { | |
| font-family: 'Lucida Console', Monaco, monospace; } | |
| time, .time { | |
| text-transform: uppercase; } | |
| ol, ul, dl { | |
| margin-top: 0; | |
| margin-bottom: 1.5em; | |
| margin-left: 1.5em; | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| ul ul, ol ol, dl dl { | |
| margin-left: 0; } | |
| ul { | |
| list-style: disc; } | |
| ol { | |
| list-style: decimal; } | |
| abbr { | |
| font-variant: small-caps; | |
| font-weight: 600; | |
| text-transform: lowercase; } | |
| abbr[title]:hover { | |
| cursor: help; } | |
| hr { | |
| border: 0; | |
| margin-top: 1.5em; | |
| margin-bottom: 0; | |
| border-top-color: #000; | |
| border-top-style: solid; | |
| border-top-width: 1px; | |
| padding-top: 1.4375em; } | |
| body { | |
| max-width: 36em; | |
| margin: 0 auto; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Il Conde</h1> | |
| <p class="h5">By Joseph Conrad</p> | |
| <h2 class="h3"><em>"Vedi Napoli e poi mori."</em></h2> | |
| <p>The first time we got into conversation was in the National Museum in Naples, in the rooms on the ground floor containing the famous collection of bronzes from Herculaneum and Pompeii: that marvellous legacy of antique art whose delicate perfection has been preserved for us by the catastrophic fury of a volcano.</p> | |
| <p>He addressed me first, over the celebrated Resting Hermes which we had been looking at side by side. He said the right things about that wholly admirable piece. Nothing profound. His taste was natural rather than cultivated. He had obviously seen many fine things in his life and appreciated them: but he had no jargon of a dilettante or the connoisseur. A hateful tribe. He spoke like a fairly intelligent man of the world, a perfectly unaffected gentleman.</p> | |
| <p>We had known each other by sight for some few days past. Staying in the same hotel--good, but not extravagantly up to date--I had noticed him in the vestibule going in and out. I judged he was an old and valued client. The bow of the hotel-keeper was cordial in its deference, and he acknowledged it with familiar courtesy. For the servants he was Il Conde. There was some squabble over a man's parasol--yellow silk with white lining sort of thing--the waiters had discovered abandoned outside the dining-room door. Our gold-laced door-keeper recognized it and I heard him directing one of the lift boys to run after Il Conde with it. Perhaps he was the only Count staying in the hotel, or perhaps he had the distinction of being the Count par excellence, conferred upon him because of his tried fidelity to the house.</p> | |
| <p>Having conversed at the Museo--(and by the by he had expressed his dislike of the busts and statues of Roman emperors in the gallery of marbles: their faces were too vigorous, too pronounced for him)--having conversed already in the morning I did not think I was intruding when in the evening, finding the dining-room very full, I proposed to share his little table. Judging by the quiet urbanity of his consent he did not think so either. His smile was very attractive.</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment