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,
|
||||
"scripts": {
|
||||
"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": {
|
||||
"axios": "^0.27",
|
||||
"laravel-vite-plugin": "^0.5.0",
|
||||
"lodash": "^4.17.19",
|
||||
"postcss": "^8.1.14",
|
||||
"stylelint": "^14.15.0",
|
||||
"stylelint-config-standard": "^29.0.0",
|
||||
"vite": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
--dark: #020202;
|
||||
--light: #fffff0;
|
||||
--dark: #020202;
|
||||
--light: #fffff0;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -8,51 +8,51 @@
|
|||
*/
|
||||
|
||||
body {
|
||||
/*font-family: Verdana, Arial, sans-serif;*/
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: var(--dark, #020202);
|
||||
background-color: var(--light, #fffff0);
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
/* font-family: Verdana, Arial, sans-serif; */
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: var(--dark, #020202);
|
||||
background-color: var(--light, #fffff0);
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
details h2 {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.positive,
|
||||
.negative {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: darkgreen;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-variant: italic;
|
||||
font-size: 0.8em;
|
||||
font-variant: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#allCheckinsLink,
|
||||
#pastTripsList a {
|
||||
opacity: 0.7;
|
||||
color: var(--dark, #020202);
|
||||
opacity: 0.7;
|
||||
color: var(--dark, #020202);
|
||||
}
|
||||
|
||||
#allCheckinsLink:hover,
|
||||
#pastTripsList a:hover {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -60,225 +60,224 @@ details h2 {
|
|||
*/
|
||||
|
||||
body {
|
||||
border: 5px solid black;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"route";
|
||||
border: 5px solid black;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"route";
|
||||
}
|
||||
|
||||
.page-header {
|
||||
grid-area: header;
|
||||
border-bottom: 5px solid black;
|
||||
padding-top: 1em;
|
||||
grid-area: header;
|
||||
border-bottom: 5px solid black;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.other-links {
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.other-links ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.other-links li {
|
||||
float: left;
|
||||
margin-left: 1.5em;
|
||||
border: 2px solid var(--dark);
|
||||
border-radius: 1em;
|
||||
float: left;
|
||||
margin-left: 1.5em;
|
||||
border: 2px solid var(--dark);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.other-links li:first-of-type {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.other-links li:hover {
|
||||
background-color: #ddddd2;
|
||||
background-color: #ddddd2;
|
||||
}
|
||||
|
||||
.other-links li p {
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.other-links li p a {
|
||||
color: var(--dark, #020202);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--dark, #020202);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.trip-meta {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main--list {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
#routeContainer {
|
||||
display: grid;
|
||||
grid-area: route;
|
||||
grid-template-rows: 55% 45%;
|
||||
grid-template-columns: 100%;
|
||||
overflow: hidden;
|
||||
grid-template-areas:
|
||||
"map"
|
||||
"checkins";
|
||||
display: grid;
|
||||
grid-area: route;
|
||||
grid-template-rows: 55% 45%;
|
||||
grid-template-columns: 100%;
|
||||
overflow: hidden;
|
||||
grid-template-areas:
|
||||
"map"
|
||||
"checkins";
|
||||
}
|
||||
|
||||
#mapContainer {
|
||||
grid-area: map;
|
||||
grid-area: map;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#checkinList {
|
||||
grid-area: checkins;
|
||||
border-top: 5px solid black;
|
||||
padding: 0 1em;
|
||||
overflow: scroll;
|
||||
grid-area: checkins;
|
||||
border-top: 5px solid black;
|
||||
padding: 0 1em;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.checkin {
|
||||
border-top: 1px solid black;
|
||||
padding: 1em 0;
|
||||
border-top: 1px solid black;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.checkin__summary {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkin[open] .checkin__summary {
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid gray;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
|
||||
.checkin__title {
|
||||
font-size: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.checkin__meta {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkin[open] .checkin__meta {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#checkinList li:first-child .checkin {
|
||||
border-top: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
max-width: 85vw;
|
||||
max-height: 85vh;
|
||||
min-width: 60vw;
|
||||
max-width: 85vw;
|
||||
max-height: 85vh;
|
||||
min-width: 60vw;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
width: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.popup__image,
|
||||
.popup__video {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 70vw;
|
||||
max-height: 45vh;
|
||||
margin-top: 1em;
|
||||
display: block;
|
||||
background-color: white;
|
||||
border: 2px solid var(--dark, #020202);
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 70vw;
|
||||
max-height: 45vh;
|
||||
margin-top: 1em;
|
||||
display: block;
|
||||
background-color: white;
|
||||
border: 2px solid var(--dark, #020202);
|
||||
}
|
||||
|
||||
/*
|
||||
* Medium Display
|
||||
*/
|
||||
@media screen and (min-width: 728px) {
|
||||
.page__title {
|
||||
font-size: 2em;
|
||||
}
|
||||
.page__title {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Large Display
|
||||
*/
|
||||
@media screen and (min-width: 1024px) {
|
||||
#routeContainer {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas:
|
||||
"map checkins";
|
||||
}
|
||||
#routeContainer {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas: "map checkins";
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.5em;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.page-header {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.other-links {
|
||||
font-size: 1.2em;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 2.5em;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.other-links li a {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.trip-meta {
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#checkinList {
|
||||
border-top: 0;
|
||||
border-left: 5px solid black;
|
||||
}
|
||||
.other-links {
|
||||
font-size: 1.2em;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
text-align: center;
|
||||
}
|
||||
.other-links li a {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
.trip-meta {
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#checkinList {
|
||||
border-top: 0;
|
||||
border-left: 5px solid black;
|
||||
}
|
||||
|
||||
.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