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

prettier && make definition styling independent from classes

Browse Source
This commit is contained in:
Oscar 2019-11-12 15:16:51 +01:00
parent c1389725c5
commit 6455825e6b
1 changed files with 188 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

360
_site/scss/base.scss
View File

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