Add Stylelint, lint stylesheet
This commit is contained in:
parent
ddf235a61b
commit
644b75fdb4
4 changed files with 1873 additions and 154 deletions
3
.stylelintrc.json
Normal file
3
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "stylelint-config-standard"
|
||||||
|
}
|
||||||
1708
package-lock.json
generated
Normal file
1708
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
|
@ -2,13 +2,22 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build"
|
"build": "vite build",
|
||||||
|
"lint": "npm run lint:php; npm run lint:css",
|
||||||
|
"lint:fix": "npm run lint:php:fix; npm run lint:css:fix",
|
||||||
|
"lint:php": "./vendor/bin/phpcs",
|
||||||
|
"lint:php:fix": "./vendor/bin/phpcbf",
|
||||||
|
"lint:css": "npx stylelint ./public/css/app.css",
|
||||||
|
"lint:css:fix": "npm run lint:css -- --fix"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"axios": "^0.27",
|
"axios": "^0.27",
|
||||||
"laravel-vite-plugin": "^0.5.0",
|
"laravel-vite-plugin": "^0.5.0",
|
||||||
"lodash": "^4.17.19",
|
"lodash": "^4.17.19",
|
||||||
"postcss": "^8.1.14",
|
"postcss": "^8.1.14",
|
||||||
|
"stylelint": "^14.15.0",
|
||||||
|
"stylelint-config-standard": "^29.0.0",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.0"
|
||||||
}
|
},
|
||||||
|
"dependencies": {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
:root {
|
:root {
|
||||||
--dark: #020202;
|
--dark: #020202;
|
||||||
--light: #fffff0;
|
--light: #fffff0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -8,51 +8,51 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/*font-family: Verdana, Arial, sans-serif;*/
|
/* font-family: Verdana, Arial, sans-serif; */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--dark, #020202);
|
color: var(--dark, #020202);
|
||||||
background-color: var(--light, #fffff0);
|
background-color: var(--light, #fffff0);
|
||||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details h2 {
|
details h2 {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.positive,
|
.positive,
|
||||||
.negative {
|
.negative {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.positive {
|
.positive {
|
||||||
color: darkgreen;
|
color: darkgreen;
|
||||||
}
|
}
|
||||||
|
|
||||||
.negative {
|
.negative {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-variant: italic;
|
font-variant: italic;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#allCheckinsLink,
|
#allCheckinsLink,
|
||||||
#pastTripsList a {
|
#pastTripsList a {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
color: var(--dark, #020202);
|
color: var(--dark, #020202);
|
||||||
}
|
}
|
||||||
|
|
||||||
#allCheckinsLink:hover,
|
#allCheckinsLink:hover,
|
||||||
#pastTripsList a:hover {
|
#pastTripsList a:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -60,225 +60,224 @@ details h2 {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
border: 5px solid black;
|
border: 5px solid black;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"header"
|
"header"
|
||||||
"route";
|
"route";
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
grid-area: header;
|
grid-area: header;
|
||||||
border-bottom: 5px solid black;
|
border-bottom: 5px solid black;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links {
|
.other-links {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links ul {
|
.other-links ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links li {
|
.other-links li {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 1.5em;
|
margin-left: 1.5em;
|
||||||
border: 2px solid var(--dark);
|
border: 2px solid var(--dark);
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links li:first-of-type {
|
.other-links li:first-of-type {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links li:hover {
|
.other-links li:hover {
|
||||||
background-color: #ddddd2;
|
background-color: #ddddd2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links li p {
|
.other-links li p {
|
||||||
padding: 0.25em 0.5em;
|
padding: 0.25em 0.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other-links li p a {
|
.other-links li p a {
|
||||||
color: var(--dark, #020202);
|
color: var(--dark, #020202);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trip-meta {
|
.trip-meta {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main--list {
|
.main--list {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 980px;
|
max-width: 980px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#routeContainer {
|
#routeContainer {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-area: route;
|
grid-area: route;
|
||||||
grid-template-rows: 55% 45%;
|
grid-template-rows: 55% 45%;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"map"
|
"map"
|
||||||
"checkins";
|
"checkins";
|
||||||
}
|
}
|
||||||
|
|
||||||
#mapContainer {
|
#mapContainer {
|
||||||
grid-area: map;
|
grid-area: map;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkinList {
|
#checkinList {
|
||||||
grid-area: checkins;
|
grid-area: checkins;
|
||||||
border-top: 5px solid black;
|
border-top: 5px solid black;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin {
|
.checkin {
|
||||||
border-top: 1px solid black;
|
border-top: 1px solid black;
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin__summary {
|
.checkin__summary {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin[open] .checkin__summary {
|
.checkin[open] .checkin__summary {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
border-bottom: 1px solid gray;
|
border-bottom: 1px solid gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin__title {
|
.checkin__title {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin__meta {
|
.checkin__meta {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkin[open] .checkin__meta {
|
.checkin[open] .checkin__meta {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkinList li:first-child .checkin {
|
#checkinList li:first-child .checkin {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-popup {
|
.leaflet-popup {
|
||||||
max-width: 85vw;
|
max-width: 85vw;
|
||||||
max-height: 85vh;
|
max-height: 85vh;
|
||||||
min-width: 60vw;
|
min-width: 60vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-popup-content {
|
.leaflet-popup-content {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup__image,
|
.popup__image,
|
||||||
.popup__video {
|
.popup__video {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-width: 70vw;
|
max-width: 70vw;
|
||||||
max-height: 45vh;
|
max-height: 45vh;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 2px solid var(--dark, #020202);
|
border: 2px solid var(--dark, #020202);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Medium Display
|
* Medium Display
|
||||||
*/
|
*/
|
||||||
@media screen and (min-width: 728px) {
|
@media screen and (min-width: 728px) {
|
||||||
.page__title {
|
.page__title {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Large Display
|
* Large Display
|
||||||
*/
|
*/
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
#routeContainer {
|
#routeContainer {
|
||||||
grid-template-columns: 60% 40%;
|
grid-template-columns: 60% 40%;
|
||||||
grid-template-rows: 100%;
|
grid-template-rows: 100%;
|
||||||
grid-template-areas:
|
grid-template-areas: "map checkins";
|
||||||
"map checkins";
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.5em;
|
|
||||||
text-align: left;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.other-links {
|
.page-title {
|
||||||
font-size: 1.2em;
|
font-size: 2.5em;
|
||||||
display: inline-block;
|
text-align: left;
|
||||||
vertical-align: bottom;
|
display: inline-block;
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.other-links li a {
|
.other-links {
|
||||||
padding: 0.5em 1em;
|
font-size: 1.2em;
|
||||||
}
|
display: inline-block;
|
||||||
|
vertical-align: bottom;
|
||||||
.trip-meta {
|
}
|
||||||
text-align: left;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#checkinList {
|
|
||||||
border-top: 0;
|
|
||||||
border-left: 5px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__title {
|
.other-links li a {
|
||||||
text-align: center;
|
padding: 0.5em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkinList ol {
|
.trip-meta {
|
||||||
margin-top: 0;
|
text-align: left;
|
||||||
margin-right: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-popup {
|
#map {
|
||||||
min-width: 350px;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup__image,
|
#checkinList {
|
||||||
.popup__video {
|
border-top: 0;
|
||||||
max-width: 100%;
|
border-left: 5px solid black;
|
||||||
max-height: 60vh;
|
}
|
||||||
margin-top: 1em;
|
|
||||||
}
|
.section__title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkinList ol {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup {
|
||||||
|
min-width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup__image,
|
||||||
|
.popup__video {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 60vh;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue