mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-09 12:30:51 +00:00
Code Issues Projects Releases Wiki Activity

Rename function, replace pixel usage with rem conversions

Browse Source
This commit is contained in:
Ned Zimmerman 2020-02-16 12:14:24 -07:00
parent dd9d4a00e4
commit 1c1e82bdc6
1 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/css/base.scss
View File

@ -3,13 +3,29 @@
@import '~prism-themes/themes/prism-a11y-dark'; @import '~prism-themes/themes/prism-a11y-dark';
// FUNCTIONS
$browser-context: 16;
@function pxToRem($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1rem;
}
pre[class*='language-'] { pre[class*='language-'] {
font-size: 1rem; font-size: 1rem;
} }
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;
@ -77,22 +93,6 @@ $bold: 700;
margin-right: 0.35rem; margin-right: 0.35rem;
} }
// FUNCTIONS
$browser-context: 16;
@function rem($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1rem;
}
body { body {
border-top: 1rem solid red; border-top: 1rem solid red;
font-family: $sans-serif; font-family: $sans-serif;
@ -131,8 +131,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);
} }
} }
@ -167,14 +167,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
@ -183,7 +183,7 @@ ul[class] {
} }
} }
@media (min-width: 800px) { @media (min-width: #{pxToRem(800)}) {
.title__thicc { .title__thicc {
grid-column: 1 / 3; grid-column: 1 / 3;
} }
@ -229,7 +229,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;
} }
} }
@ -272,7 +272,7 @@ th {
padding-bottom: 0.5em; padding-bottom: 0.5em;
&.subterm { &.subterm {
padding-left: 10px; padding-left: pxToRem(10);
} }
&:last-child { &:last-child {
@ -281,7 +281,7 @@ th {
&.subterm:before { &.subterm:before {
content: '\21B3'; content: '\21B3';
padding-right: 5px; padding-right: pxToRem(5);
} }
} }
} }
@ -356,7 +356,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;