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