diff --git a/_site/scss/base.scss b/_site/scss/base.scss index 7fcd1ee2..b3d9e1b9 100644 --- a/_site/scss/base.scss +++ b/_site/scss/base.scss @@ -1,5 +1,5 @@ @charset 'utf-8'; - @import url("https://use.typekit.net/qlo3dpu.css"); +@import url('https://use.typekit.net/qlo3dpu.css'); // COLORS // @@ -7,42 +7,42 @@ --auto-grid-min-size: 17rem; } - $primary-color: #0e4bff; //cobalt blue is so pretty// - $secondary-color: #F3F315; // +$primary-color: #0e4bff; //cobalt blue is so pretty// +$secondary-color: #f3f315; // - $black: #222222; - $white: #ffffff; - $pistachio: #e5ffe5; - $yellow: #ffff00; +$black: #222222; +$white: #ffffff; +$pistachio: #e5ffe5; +$yellow: #ffff00; - $dark-grey: #4F4F4F; - $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y - $light-grey: #eeeeee; // for backgrounds only +$dark-grey: #4f4f4f; +$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y +$light-grey: #eeeeee; // for backgrounds only - // TYPOGRAPHY // - $sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif; - $serif: orpheuspro, Palatino, Times, serif; - $ext-sans: monotype-grotesque-extended, Arial Black, sans-serif; - $con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif; +// TYPOGRAPHY // +$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif; +$serif: orpheuspro, Palatino, Times, serif; +$ext-sans: monotype-grotesque-extended, Arial Black, sans-serif; +$con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif; - $thin: 200; - $light: 300; - $regular: 400; - $medium: 500; - $bold: 700; +$thin: 200; +$light: 300; +$regular: 400; +$medium: 500; +$bold: 700; //MIXINS @mixin icon__avoid() { - content: "🚨"; + content: '🚨'; } @mixin icon__alt() { - content: "👍"; + content: '👍'; } @mixin icon__tool() { - content: "🧰"; + content: '🧰'; } @mixin icon__hanging() { @@ -50,15 +50,16 @@ } @mixin icon__embed() { - margin-right: .35rem; + margin-right: 0.35rem; } body { border-top: 1rem solid red; font-family: $sans-serif; font-size: 20px; - padding: 2rem; margin:0; - } + padding: 2rem; + margin: 0; +} h1 { font-family: $ext-sans; @@ -68,7 +69,7 @@ h1 { .subtitle { font-family: $ext-sans; font-weight: $regular; - letter-spacing: .1; + letter-spacing: 0.1; grid-column: span 2; } @@ -77,27 +78,27 @@ h1 { } .small { - font-size: .75em; - } + font-size: 0.75em; +} .title__thicc { font-size: 8vh; - line-height: .75; + line-height: 0.75; padding: 0; margin: 0.5rem 0rem; grid-column: span 2; // transform: rotateZ(90deg); // margin: 13rem -7rem; - } +} - .help { - margin: 1rem 0; +.help { + margin: 1rem 0; li { - margin: .75rem 0; - } + margin: 0.75rem 0; } +} - // GRID // +// GRID // .grid { display: grid; @@ -109,46 +110,49 @@ h1 { .auto-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); - grid-gap: 1rem; - } + grid-template-columns: repeat( + auto-fill, + minmax(var(--auto-grid-min-size), 1fr) + ); + grid-gap: 1rem; +} - .box { - background: black; +.box { + background: black; + color: white; + padding: 1rem; + margin: 1rem 0.5rem; + height: auto; + + a { color: white; - padding: 1rem; - margin: 1rem .5rem; - height: auto; + } +} - a { - color: white; - } +.list { + ul { + padding: 0 0 0 1em; + margin: 0; } - .list { - ul { - padding: 0 0 0 1em; - margin: 0; - } - - li { - list-style: none; - padding-bottom: .5em; + li { + list-style: none; + padding-bottom: 0.5em; - &.subterm { + &.subterm { padding-left: 10px; - } - - &:last-child { + } + + &:last-child { padding: 0; - } - - &.subterm:before { - content: "\21B3 "; + } + + &.subterm:before { + content: '\21B3 '; padding-right: 5px; - } } } +} .block__dictionary { max-width: 50rem; @@ -158,88 +162,88 @@ h1 { } .block__word { -display: flex; -flex-direction: column; -margin: 1rem; + display: flex; + flex-direction: column; + margin: 1rem; } p { -margin: .75rem 0; -font-size: 1.25rem; + margin: 0.75rem 0; + font-size: 1.25rem; } .style__italics { -font-style: italic; + font-style: italic; } .word { &__title { - font-family: $serif; - font-weight: 900; - font-size: 2.5rem; - line-height: 1.25; + font-family: $serif; + font-weight: 900; + font-size: 2.5rem; + line-height: 1.25; + margin: 0; } + & > p:first-of-type, &__definition { - font-family: $sans-serif; - font-size: 1.5rem; + font-family: $sans-serif; + font-size: 1.5rem; } &__speech { - font-size: .5em; - font-family: $sans-serif; + font-size: 0.5em; + font-family: $sans-serif; } &__signal { - border-top: 1px solid currentcolor; - display: inline-block; - font-family: $ext-sans; - text-transform: uppercase; - font-size: .75rem; - letter-spacing: .15rem; - padding: .5rem .75rem; + border-top: 1px solid currentcolor; + display: inline-block; + font-family: $ext-sans; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.15rem; + padding: 0.5rem 0.75rem; - &__avoid { - color: red; - - &:before { - @include icon__avoid(); - @include icon__hanging(); - } - } - - &__better { - color: green; - - &:before { - @include icon__avoid(); - @include icon__hanging(); + &__avoid { + color: red; + + &:before { + @include icon__avoid(); + @include icon__hanging(); } - } - - &__tool { - color: black; - - &:before { - @include icon__tool(); - @include icon__hanging(); } - } + &__better { + color: green; + + &:before { + @include icon__avoid(); + @include icon__hanging(); + } + } + + &__tool { + color: black; + + &:before { + @include icon__tool(); + @include icon__hanging(); + } + } } &__link { text-decoration: none; color: black; - border-bottom: darkgrey solid .1em; + border-bottom: darkgrey solid 0.1em; font-family: $ext-sans; margin: 1rem 0; &:hover { - border-bottom: red solid .1rem; + border-bottom: red solid 0.1rem; } } - } .block__dictionary { @@ -250,74 +254,77 @@ font-style: italic; } .auto-grid { -display: grid; -grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); -grid-gap: 1rem; - } + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(var(--auto-grid-min-size), 1fr) + ); + grid-gap: 1rem; +} .block__word { -grid-column: span 2; -display: flex; -flex-direction: column; -margin: 1rem; + grid-column: span 2; + display: flex; + flex-direction: column; + margin: 1rem; } p { -margin: .75rem 0; -font-size: 1.25rem; -line-height: 1.25; + margin: 0.75rem 0; + font-size: 1.25rem; + line-height: 1.25; } .style__italics { -font-style: italic; + font-style: italic; } .word { -&__title { -font-family: $serif; -font-weight: 900; -font-size: 2.5rem; -line-height: 1.25; -} + &__title { + font-family: $serif; + font-weight: 900; + font-size: 2.5rem; + line-height: 1.25; + } -&__definition { -font-family: $sans-serif; -font-size: 1.5rem; -} + &__definition { + font-family: $sans-serif; + font-size: 1.5rem; + } -&__speech { -font-size: .5em; -font-family: $sans-serif; -} + &__speech { + font-size: 0.5em; + font-family: $sans-serif; + } -&__signal { -border-top: 1px solid currentcolor; -// border-radius: 100px; -display: inline-block; -font-family: $ext-sans; -text-transform: uppercase; -font-size: .75rem; -letter-spacing: .15rem; -padding: .5rem .75rem; - - &__avoid { - color: red; - - &:before { - content: "🚨"; - margin-left: -2.15rem; + &__signal { + border-top: 1px solid currentcolor; + // border-radius: 100px; + display: inline-block; + font-family: $ext-sans; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.15rem; + padding: 0.5rem 0.75rem; + + &__avoid { + color: red; + + &:before { + content: '🚨'; + margin-left: -2.15rem; + } + } + + &__better { + color: green; + + &:before { + content: '👍'; + margin-left: -2.15rem; + } } } - - &__better { - color: green; - - &:before { - content: "👍"; - margin-left: -2.15rem; - } - } -} } .block__type { @@ -327,39 +334,40 @@ padding: .5rem .75rem; } .word__type { -text-align: right; -padding-right: 1rem; -font-family: $con-sans; -font-size: .85rem; -text-transform: uppercase; + text-align: right; + padding-right: 1rem; + font-family: $con-sans; + font-size: 0.85rem; + text-transform: uppercase; } .word__link { -text-decoration: none; -color: black; -border-bottom: darkgrey solid .1em; -font-family: $ext-sans; + text-decoration: none; + color: black; + border-bottom: darkgrey solid 0.1em; + font-family: $ext-sans; } .word__breakdown { -font-family: $sans-serif; -border-left: .1rem solid lightgrey; -padding-left: 1rem; + font-family: $sans-serif; + border-left: 0.1rem solid lightgrey; + padding-left: 1rem; } .flag__red { background-color: rgb(255, 192, 203); - font-size: .9rem; + font-size: 0.9rem; font-weight: bold; border-radius: 1rem; - padding: .45rem .65rem; - margin: .25rem .75rem; + padding: 0.45rem 0.65rem; + margin: 0.25rem 0.75rem; text-transform: lowercase; &:before { @include icon__avoid(); @include icon__embed(); } } + .list-semicolon { margin: 0; padding: 0;