mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-09 04:25:12 +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';
// 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-'] {
font-size: 1rem;
}
code {
background-color: #333333;
border: 1px solid black;
border: pxToRem(1) solid black;
color: white;
padding: 0.15em;
border-radius: 0.25em;
@ -77,22 +93,6 @@ $bold: 700;
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 {
border-top: 1rem solid red;
font-family: $sans-serif;
@ -131,8 +131,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);
}
}
@ -167,14 +167,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
@ -183,7 +183,7 @@ ul[class] {
}
}
@media (min-width: 800px) {
@media (min-width: #{pxToRem(800)}) {
.title__thicc {
grid-column: 1 / 3;
}
@ -229,7 +229,7 @@ th {
display: grid;
grid-gap: 1rem;
@media (min-width: 800px) {
@media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch;
}
}
@ -272,7 +272,7 @@ th {
padding-bottom: 0.5em;
&.subterm {
padding-left: 10px;
padding-left: pxToRem(10);
}
&:last-child {
@ -281,7 +281,7 @@ th {
&.subterm:before {
content: '\21B3';
padding-right: 5px;
padding-right: pxToRem(5);
}
}
}
@ -356,7 +356,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;