mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-04-19 16:19:16 +00:00
* tooling: add stylelint and base configuration (see #74) * Autofix with stylelint on commit
This commit is contained in:
Ned Zimmerman
GitHub
parent
ca07ab31f6
commit
86713728a4
13
.stylelintrc
Normal file
13
.stylelintrc
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "stylelint-config-recommended-scss",
|
||||
"plugins": [
|
||||
"stylelint-order"
|
||||
],
|
||||
"rules": {
|
||||
"order/order": [
|
||||
"custom-properties",
|
||||
"declarations"
|
||||
],
|
||||
"order/properties-alphabetical-order": true
|
||||
}
|
||||
}
|
||||
@ -16,4 +16,4 @@
|
||||
|
||||
@mixin icon__embed() {
|
||||
margin-right: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ $primary-color: hsl(0, 100%, 50%);
|
||||
$secondary-color: hsl(120, 100%, 25%);
|
||||
|
||||
$dark-red: hsl(0, 100%, 32.2%);
|
||||
$pink: hsl(349.5, 100%, 87.6%);
|
||||
$pink: hsl(349.5, 100%, 87.6%);
|
||||
$black: hsl(0, 0%, 13%);
|
||||
$white: hsl(0, 0%, 100%);
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ body {
|
||||
border-top: 1rem solid $primary-color;
|
||||
font-family: $sans-serif;
|
||||
font-size: pxToRem(20);
|
||||
padding: 2rem;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -15,22 +15,22 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $black;
|
||||
border-bottom: $dark-grey solid 0.1em;
|
||||
color: $black;
|
||||
font-family: $ext-sans;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: $primary-color solid 0.1rem;
|
||||
@ -44,16 +44,16 @@ a {
|
||||
code {
|
||||
background-color: $dark-grey;
|
||||
border: 1px solid $black;
|
||||
color: $white;
|
||||
padding: 0.15em;
|
||||
border-radius: 0.25em;
|
||||
color: $white;
|
||||
font-size: 95%;
|
||||
padding: 0.15em;
|
||||
|
||||
pre & {
|
||||
border: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,4 +69,4 @@ th {
|
||||
|
||||
pre[class*='language-'] {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
:root {
|
||||
--auto-grid-min-size: 17rem;
|
||||
--l-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,4 +9,4 @@ $thin: 200;
|
||||
$light: 300;
|
||||
$regular: 400;
|
||||
$medium: 500;
|
||||
$bold: 700;
|
||||
$bold: 700;
|
||||
|
||||
@ -15,4 +15,4 @@
|
||||
li {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.subtitle {
|
||||
font-family: $ext-sans;
|
||||
font-weight: $regular;
|
||||
letter-spacing: 0.1;
|
||||
grid-column: span 2;
|
||||
}
|
||||
letter-spacing: 0.1;
|
||||
}
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
.word__type {
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.word__link {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border-bottom: darkgrey solid 0.1em;
|
||||
color: black;
|
||||
font-family: $ext-sans;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.word__breakdown {
|
||||
font-family: $sans-serif;
|
||||
border-left: 0.1rem solid lightgrey;
|
||||
font-family: $sans-serif;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.flag__red {
|
||||
background-color: rgb(255, 192, 203);
|
||||
border-radius: 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
border-radius: 1rem;
|
||||
padding: 0.45rem 0.65rem;
|
||||
margin: 0.25rem 0.75rem;
|
||||
padding: 0.45rem 0.65rem;
|
||||
text-transform: lowercase;
|
||||
|
||||
&:before {
|
||||
@include icon__avoid();
|
||||
@include icon__embed();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
ol {
|
||||
padding: 0 0 0 1em;
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
@ -20,11 +20,11 @@
|
||||
padding-right: pxToRem(5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list-semicolon {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
display: inline;
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
|
||||
&__title {
|
||||
font-family: $serif;
|
||||
font-weight: 900;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
@ -16,8 +16,8 @@
|
||||
@supports (display: grid) {
|
||||
// align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
|
||||
& > * {
|
||||
margin: 0;
|
||||
@ -25,17 +25,17 @@
|
||||
}
|
||||
|
||||
& > p {
|
||||
grid-column: 1 / -1;
|
||||
font-family: $sans-serif;
|
||||
font-size: 1.5rem;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
& h4 {
|
||||
grid-column: 1;
|
||||
flex: 0 1 auto;
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
flex: 0 1 auto;
|
||||
grid-column: 1;
|
||||
text-transform: uppercase;
|
||||
transform: translateY(0.4em);
|
||||
|
||||
@ -51,16 +51,16 @@
|
||||
|
||||
& h4 ~ p,
|
||||
& h4 ~ ul {
|
||||
font-size: inherit;
|
||||
// border-left: 0.1rem solid lightgrey;
|
||||
// padding-left: 1rem;
|
||||
grid-column: 2;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__speech {
|
||||
font-size: 0.5em;
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
&__signal {
|
||||
@ -68,10 +68,10 @@
|
||||
color: var(--word-signal-color);
|
||||
display: inline-block;
|
||||
font-family: $ext-sans;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&--avoid {
|
||||
--word-signal-color: #a40000;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.site-footer {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,19 +5,19 @@
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: 4rem;
|
||||
grid-row-gap: 10rem;
|
||||
grid-template-columns: repeat(4, [col] 1fr [col]);
|
||||
grid-template-rows: fit-content, fit-content, auto;
|
||||
grid-row-gap: 10rem;
|
||||
grid-column-gap: 4rem;
|
||||
}
|
||||
|
||||
.auto-grid {
|
||||
display: grid;
|
||||
grid-gap: var(--l-gap);
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(var(--auto-grid-min-size), 1fr)
|
||||
);
|
||||
grid-gap: var(--l-gap);
|
||||
}
|
||||
|
||||
.small-left-grid {
|
||||
@ -30,23 +30,23 @@
|
||||
}
|
||||
|
||||
.block__dictionary {
|
||||
max-width: 50rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 50rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.block__word {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: span 2;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.block__type {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page {
|
||||
@ -62,11 +62,11 @@
|
||||
.box {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0.5rem;
|
||||
height: auto;
|
||||
margin: 1rem 0.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
// a sensible base font size
|
||||
font-size: 3rem;
|
||||
line-height: 0.75;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0rem;
|
||||
padding: 0;
|
||||
// transform: rotateZ(90deg);
|
||||
// margin: 13rem -7rem;
|
||||
}
|
||||
@ -35,10 +35,10 @@
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.summary {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
// TODO: Add themes.
|
||||
1519
package-lock.json
generated
1519
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -9,7 +9,8 @@
|
||||
"build:site": "eleventy",
|
||||
"build": "npm run build:css && npm run build:site",
|
||||
"create-definitions": "bin/create-definitions",
|
||||
"lint": "npm run lint:js",
|
||||
"lint": "npm run lint:css && npm run lint:js",
|
||||
"lint:css": "stylelint \"assets/css/**/*.scss\"",
|
||||
"lint:js": "eslint \"11ty/**/*.js\"",
|
||||
"serve": "concurrently \"npm run serve:site\" \"npm run watch:css\"",
|
||||
"serve:site": "eleventy --serve",
|
||||
@ -42,6 +43,9 @@
|
||||
"11ty/**/*.js": [
|
||||
"npm run lint:js -- --fix",
|
||||
"npm run test"
|
||||
],
|
||||
"assets/css/**/*.scss": [
|
||||
"npm run lint:css -- --fix"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
@ -62,6 +66,10 @@
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"prettier": "^1.19.1",
|
||||
"sass": "^1.23.7",
|
||||
"slugify": "^1.3.6"
|
||||
"slugify": "^1.3.6",
|
||||
"stylelint": "^13.2.0",
|
||||
"stylelint-config-recommended-scss": "^4.2.0",
|
||||
"stylelint-order": "^4.0.0",
|
||||
"stylelint-scss": "^3.14.2"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user