Created
August 1, 2023 03:48
-
-
Save alexmwalker/87531e38368810ff75be72f167fa080c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| /*! Import Foundry Fonts */ | |
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500'); | |
| /* ===================== */ | |
| :root { | |
| --typescale: 1.1; /* The type scaling factor relative to the <p>. ( h4 > h3 > h2 > h1). This DEFAULT scale is set low for phones. Media Queries scale it up for larger screens */ | |
| --typescale-lg: 1.25; /* increase the typescale on larger (non-mobile) screens */ | |
| --baselineratio: calc(16/9); /* This is the 'line-height:basefont size' ratio ( i.e 16/9 = 1.777778)*/ | |
| --basegrid: 32px; /* e.g. default phone */ | |
| --basegrid-tablet: 22px; /* tablet */ | |
| --basegrid-laptop: 32px; /* laptop */ | |
| --basegrid-wide: 36px; /* wide */ | |
| --baseline: calc(var(--baselineratio) * 1rem);/*--baseline: 1.7778 * 1rem;*/ | |
| --basefont: calc(var(--basegrid) / var(--baselineratio)); /* i.e. 32px / 1.7778 = 18px */ | |
| --basefont-tablet: calc(var(--basegrid-tablet) / var(--baselineratio)); | |
| --basefont-laptop: calc(var(--basegrid-laptop) / var(--baselineratio)); | |
| --basefont-wide: calc(var(--basegrid-wide) / var(--baselineratio)); | |
| font-family: Roboto, sans-serif; | |
| font-weight: 300; | |
| } | |
| /* Note: we prefer to use CSS Variables over Sass variables whenever possible. | |
| However, @media breakpoints can't use CSS variables - so SASS it is! */ | |
| $tabletbreak: 748px; | |
| $laptopbreak: 900px; | |
| $widebreak: 1200px; | |
| .wrapper{ /* This is handy for stopping layouts running wide on super wide monitors. It's unneccessary if you have proper layout CSS */ | |
| max-width: 58rem; | |
| margin: 0 auto; | |
| } | |
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500'); | |
| :root { | |
| /* DEFAULT - set for mobile */ | |
| font-size: var(--basefont); | |
| line-height: var(--baseline); | |
| } | |
| /* Medium devices (tablets, 48em and up)*/ | |
| @media (min-width: $tabletbreak) { | |
| :root { | |
| font-size: var(--basefont-tablet); | |
| --typescale: var(--typescale-lg); /* increase the typescale on larger screens */ | |
| } | |
| } | |
| /* Large devices (desktops, 62em and up) */ | |
| @media (min-width: $laptopbreak) { | |
| :root { | |
| font-size: var(--basefont-laptop); | |
| } | |
| } | |
| /* Extra large devices (large desktops, 75em and up)*/ | |
| @media (min-width: $widebreak) { | |
| :root { | |
| font-size: var(--basefont-wide); | |
| } | |
| } | |
| /* The New Typography */ | |
| h1, .is-size1 { | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 2); | |
| /* 4 grid lines */ | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 1); | |
| font-weight: 400; | |
| } | |
| h2, .is-size2 { | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1.5); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| } | |
| h3, .is-size-3, .h3 { | |
| font-size: calc(var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| } | |
| h4, .is-size-h4 { | |
| font-size: calc(var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) /2); | |
| font-weight: 400; | |
| } | |
| h5, .is-size-5 { | |
| font-size: 1rem; | |
| line-height: calc(var(--baseline) ); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| text-transform: capitalize; | |
| } | |
| p, ul, ol, pre, table, blockquote, .is-size-base { | |
| font-size: 1rem; | |
| font-weight: 300; | |
| margin-top: 0; | |
| line-height: calc(var(--baseline) / 1); | |
| margin-bottom: calc(var(--baseline) / 1); | |
| } | |
| .major { /* if you need a super big H1 */ | |
| font-weight: 400; | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 2); | |
| } | |
| .minor { /* smaller than stock body text */ | |
| font-size: calc(1rem / var(--typescale)); | |
| line-height: calc(var(--baseline) / 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| } | |
| .small { /* small text */ | |
| font-size: calc(1rem / var(--typescale) / var(--typescale)); | |
| font-weight: 200; | |
| color: #333; | |
| line-height: calc(var(--baseline) / 2); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| } | |
| ul ul, ol ol, ul ol, ol ul { | |
| margin-top: 0rem; | |
| margin-bottom: 0rem; | |
| } | |
| /* Let's make sure all's aligned */ | |
| hr, .hr { | |
| border: 1px solid; | |
| margin: -1px 0; | |
| } | |
| a:link { | |
| text-decoration: none; | |
| color: #333; | |
| } | |
| .card-component{ | |
| margin: calc(var(--baseline) / 2) 1rem; | |
| padding: calc(var(--baseline) / 2) 0 ; | |
| background: #cdcdef; | |
| outline: 1px solid red; | |
| } | |
| .card-inner{ | |
| margin: 0 1rem | |
| } | |
| /* CSS RESETS */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* vertical grid lines */ | |
| .vr { | |
| position: relative; | |
| } | |
| .vr:after { | |
| position: absolute; | |
| width: auto; | |
| height: 600vh; | |
| z-index: 9999; | |
| content: ''; | |
| display: block; | |
| pointer-events: none; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-size: var(--baseline) var(--baseline); | |
| background-image: repeating-linear-gradient(to bottom,rgba(173, 0, 0, 0.04) 0%,rgba(173, 0, 0, 0.04) 50%,rgba(0, 0, 0, 0) 50.01%,rgba(0, 0, 0, 0) 100%); | |
| } | |
| .wrapper{ | |
| width: 96%; | |
| margin-top: calc(var(--baseline) / 1) ; | |
| } |
This file contains hidden or 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
| <!-- - Comment out the 'labelling' class to kill the color | |
| - Comment out the 'vr' class to kill the vertical rows | |
| --> | |
| <body class="vr"> | |
| <div class="wrapper labelling"> | |
| <div class="device"></div> | |
| <h1 class="major">Heading with `.major` class <br /> Rolling on to a second line. | |
| </h1> | |
| <h1>This is a standard H1 Heading<br /> | |
| rolling to a second line. | |
| </h1> | |
| <h2>H2 - Second level heading<br /> | |
| rolling to a second line. </h2> | |
| <h3>Third level heading<br /> | |
| rolling to a second line.</h3> | |
| <h4>Heading 4<br /> | |
| rolling to a second line.</h4> | |
| <h5>Heading 5<br /> | |
| rolling to a second line.</h5> | |
| <p> Far out in the uncharted backwaters of the unfashionable end of the western | |
| spiral arm of the Galaxy lies a small unregarded yellow sun.Bushwick Schlitz. Est Shoreditch small batch, dolor Schlitz sapiente twee stumptown ex. Duis Carles pickled, cornhole Thundercats McSweeney's minim PBR vegan Tumblr irony. Kogi eu Thundercats, sed scenester before they sold out et aesthetic. Elit cred Vice ethical pickled sartorial. Stumptown roof party freegan High Life vero, ea sed minim meggings.</p> | |
| <p class="minor"><strong>P with '.minor class'. </strong> Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea. | |
| </p> | |
| <p class="small"><strong>P with '.small class'. </strong> Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea. | |
| </p> | |
| </div> | |
| </body> | |
| <div class="card-component"> | |
| <div class="card-inner"> | |
| <h4>Here's a title</h4> | |
| <p class="-minor"> | |
| This planet has – or rather had – a problem, which was this: most of the people on it were unhappy for pretty much of the time. Many solutions were | |
| suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole | |
| it wasn’t the small green pieces of paper that were unhappy. And so the problem remained; lots of the people were mean, and most of them were miserable, even the ones with digital watches. | |
| </p> | |
| </div> | |
| </div> |
This file contains hidden or 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
| /*! Import Foundry Fonts */ | |
| @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500"); | |
| /* ===================== */ | |
| @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500"); | |
| :root { | |
| --typescale: 1.1; | |
| /* The type scaling factor relative to the <p>. ( h4 > h3 > h2 > h1). This DEFAULT scale is set low for phones. Media Queries scale it up for larger screens */ | |
| --typescale-lg: 1.25; | |
| /* increase the typescale on larger (non-mobile) screens */ | |
| --baselineratio: calc(16/9); | |
| /* This is the 'line-height:basefont size' ratio ( i.e 16/9 = 1.777778)*/ | |
| --basegrid: 32px; | |
| /* e.g. default phone */ | |
| --basegrid-tablet: 22px; | |
| /* tablet */ | |
| --basegrid-laptop: 32px; | |
| /* laptop */ | |
| --basegrid-wide: 36px; | |
| /* wide */ | |
| --baseline: calc(var(--baselineratio) * 1rem); | |
| /*--baseline: 1.7778 * 1rem;*/ | |
| --basefont: calc(var(--basegrid) / var(--baselineratio)); | |
| /* i.e. 32px / 1.7778 = 18px */ | |
| --basefont-tablet: calc(var(--basegrid-tablet) / var(--baselineratio)); | |
| --basefont-laptop: calc(var(--basegrid-laptop) / var(--baselineratio)); | |
| --basefont-wide: calc(var(--basegrid-wide) / var(--baselineratio)); | |
| font-family: Roboto, sans-serif; | |
| font-weight: 300; | |
| } | |
| /* Note: we prefer to use CSS Variables over Sass variables whenever possible. | |
| However, @media breakpoints can't use CSS variables - so SASS it is! */ | |
| .wrapper { | |
| /* This is handy for stopping layouts running wide on super wide monitors. It's unneccessary if you have proper layout CSS */ | |
| max-width: 58rem; | |
| margin: 0 auto; | |
| } | |
| :root { | |
| /* DEFAULT - set for mobile */ | |
| font-size: var(--basefont); | |
| line-height: var(--baseline); | |
| } | |
| /* Medium devices (tablets, 48em and up)*/ | |
| @media (min-width: 748px) { | |
| :root { | |
| font-size: var(--basefont-tablet); | |
| --typescale: var(--typescale-lg); | |
| /* increase the typescale on larger screens */ | |
| } | |
| } | |
| /* Large devices (desktops, 62em and up) */ | |
| @media (min-width: 900px) { | |
| :root { | |
| font-size: var(--basefont-laptop); | |
| } | |
| } | |
| /* Extra large devices (large desktops, 75em and up)*/ | |
| @media (min-width: 1200px) { | |
| :root { | |
| font-size: var(--basefont-wide); | |
| } | |
| } | |
| /* The New Typography */ | |
| h1, .is-size1 { | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 2); | |
| /* 4 grid lines */ | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 1); | |
| font-weight: 400; | |
| } | |
| h2, .is-size2 { | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1.5); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| } | |
| h3, .is-size-3, .h3 { | |
| font-size: calc(var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| } | |
| h4, .is-size-h4 { | |
| font-size: calc(var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) /2); | |
| font-weight: 400; | |
| } | |
| h5, .is-size-5 { | |
| font-size: 1rem; | |
| line-height: calc(var(--baseline) ); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| font-weight: 400; | |
| text-transform: capitalize; | |
| } | |
| p, ul, ol, pre, table, blockquote, .is-size-base { | |
| font-size: 1rem; | |
| font-weight: 300; | |
| margin-top: 0; | |
| line-height: calc(var(--baseline) / 1); | |
| margin-bottom: calc(var(--baseline) / 1); | |
| } | |
| .major { | |
| /* if you need a super big H1 */ | |
| font-weight: 400; | |
| font-size: calc(var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem); | |
| line-height: calc(var(--baseline) * 2); | |
| } | |
| .minor { | |
| /* smaller than stock body text */ | |
| font-size: calc(1rem / var(--typescale)); | |
| line-height: calc(var(--baseline) / 1); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| } | |
| .small { | |
| /* small text */ | |
| font-size: calc(1rem / var(--typescale) / var(--typescale)); | |
| font-weight: 200; | |
| color: #333; | |
| line-height: calc(var(--baseline) / 2); | |
| margin-top: 0; | |
| margin-bottom: calc(var(--baseline) / 2); | |
| } | |
| ul ul, ol ol, ul ol, ol ul { | |
| margin-top: 0rem; | |
| margin-bottom: 0rem; | |
| } | |
| /* Let's make sure all's aligned */ | |
| hr, .hr { | |
| border: 1px solid; | |
| margin: -1px 0; | |
| } | |
| a:link { | |
| text-decoration: none; | |
| color: #333; | |
| } | |
| .card-component { | |
| margin: calc(var(--baseline) / 2) 1rem; | |
| padding: calc(var(--baseline) / 2) 0; | |
| background: #cdcdef; | |
| outline: 1px solid red; | |
| } | |
| .card-inner { | |
| margin: 0 1rem; | |
| } | |
| /* CSS RESETS */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* vertical grid lines */ | |
| .vr { | |
| position: relative; | |
| } | |
| .vr:after { | |
| position: absolute; | |
| width: auto; | |
| height: 600vh; | |
| z-index: 9999; | |
| content: ""; | |
| display: block; | |
| pointer-events: none; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-size: var(--baseline) var(--baseline); | |
| background-image: repeating-linear-gradient(to bottom, rgba(173, 0, 0, 0.04) 0%, rgba(173, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 50.01%, rgba(0, 0, 0, 0) 100%); | |
| } | |
| .wrapper { | |
| width: 96%; | |
| margin-top: calc(var(--baseline) / 1); | |
| } |
This file contains hidden or 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
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment