mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-04-20 16:39:09 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #69 from greatislander/add/rem-function

Browse Source 
🏗️ Add a Sass function to convert pixels to rems (resolves #67)
This commit is contained in:
Tatiana Mac 2020-02-18 16:24:26 +11:00 committed by GitHub
commit 01b0018aff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/_sass/_functions.scss Normal file
View File

@ -0,0 +1,11 @@
@function pxToRem($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1rem;
}

25
assets/css/base.scss
View File

@ -2,6 +2,9 @@
@import url('https://use.typekit.net/qlo3dpu.css'); @import url('https://use.typekit.net/qlo3dpu.css');
@import '~prism-themes/themes/prism-a11y-dark'; @import '~prism-themes/themes/prism-a11y-dark';
@import '_sass/functions';
$browser-context: 16;
pre[class*='language-'] { pre[class*='language-'] {
font-size: 1rem; font-size: 1rem;
@ -9,7 +12,7 @@ pre[class*='language-'] {
code { code {
background-color: #333333; background-color: #333333;
border: 1px solid black; border: pxToRem(1) solid black;
color: white; color: white;
padding: 0.15em; padding: 0.15em;
border-radius: 0.25em; border-radius: 0.25em;
@ -80,7 +83,7 @@ $bold: 700;
body { body {
border-top: 1rem solid red; border-top: 1rem solid red;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 20px; font-size: pxToRem(20);
padding: 2rem; padding: 2rem;
margin: 0; margin: 0;
} }
@ -115,8 +118,8 @@ a {
border-bottom: red solid 0.1rem; border-bottom: red solid 0.1rem;
} }
&:focus { &:focus {
outline: 3px solid $primary-color; outline: pxToRem(3) solid $primary-color;
outline-offset: 5px; outline-offset: pxToRem(5);
} }
} }
@ -151,14 +154,14 @@ ul[class] {
// margin: 13rem -7rem; // margin: 13rem -7rem;
} }
@media (min-width: 51rem) and (min-height: 400px) { @media (min-width: 51rem) and (min-height: #{pxToRem(400)}) {
// a dramatic font size // a dramatic font size
.title__thicc { .title__thicc {
font-size: 12vh; font-size: 12vh;
} }
} }
@media (min-width: 51rem) and (min-height: 850px) { @media (min-width: 51rem) and (min-height: #{pxToRem(850)}) {
// cap the max-height of the title // cap the max-height of the title
// at the same size that 12vh computes to // at the same size that 12vh computes to
// when the viewport is 850px high // when the viewport is 850px high
@ -167,7 +170,7 @@ ul[class] {
} }
} }
@media (min-width: 800px) { @media (min-width: #{pxToRem(800)}) {
.title__thicc { .title__thicc {
grid-column: 1 / 3; grid-column: 1 / 3;
} }
@ -213,7 +216,7 @@ th {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
@media (min-width: 800px) { @media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch; grid-template-columns: 10rem 60ch;
} }
} }
@ -256,7 +259,7 @@ th {
padding-bottom: 0.5em; padding-bottom: 0.5em;
&.subterm { &.subterm {
padding-left: 10px; padding-left: pxToRem(10);
} }
&:last-child { &:last-child {
@ -265,7 +268,7 @@ th {
&.subterm:before { &.subterm:before {
content: '\21B3'; content: '\21B3';
padding-right: 5px; padding-right: pxToRem(5);
} }
} }
} }
@ -340,7 +343,7 @@ th {
} }
&__signal { &__signal {
border-top: 1px solid var(--word-signal-color); border-top: pxToRem(1) solid var(--word-signal-color);
color: var(--word-signal-color); color: var(--word-signal-color);
display: inline-block; display: inline-block;
font-family: $ext-sans; font-family: $ext-sans;