This is an automated email from the ASF dual-hosted git repository.
sbp pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/tooling-atr-experiments.git
The following commit(s) were added to refs/heads/main by this push:
new fb77110 Add CSS linting
fb77110 is described below
commit fb771103a3672b9ef3c9a1fb206e5832ae54ee20
Author: Sean B. Palmer <[email protected]>
AuthorDate: Tue Feb 18 15:22:16 2025 +0200
Add CSS linting
---
.pre-commit-config.yaml | 9 ++++
.stylelintrc.json | 21 ++++++++++
atr/static/css/atr.css | 91 +++++++++++++++++++++++++---------------
atr/static/css/root.css | 16 +++----
atr/templates/user-keys-add.html | 12 +++---
5 files changed, 102 insertions(+), 47 deletions(-)
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 8394d5b..35483d4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -37,6 +37,15 @@ repos:
args:
- --profile=jinja
- --reformat
+- repo: https://github.com/thibaudcolas/pre-commit-stylelint
+ rev: v16.14.1
+ hooks:
+ - id: stylelint
+ additional_dependencies: ['[email protected]',
'[email protected]']
+ files: "atr/static/css/.*\\.css$"
+ exclude:
"atr/static/css/bootstrap\\.min\\.css$|atr/static/css/fontawesome\\.all\\.min\\.css$|atr/static/css/normalize\\.css$"
+ types_or: ['css']
+ args: ['--fix']
- repo: local
hooks:
- id: ruff
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..915c623
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,21 @@
+{
+ "extends": "stylelint-config-standard",
+ "rules": {
+ "alpha-value-notation": "percentage",
+ "color-function-notation": "modern",
+ "color-hex-length": "long",
+ "declaration-block-single-line-max-declarations": 1,
+ "font-family-name-quotes": "always-unless-keyword",
+ "function-url-quotes": "always",
+ "hue-degree-notation": "angle",
+ "import-notation": "url",
+ "keyframe-selector-notation": "percentage",
+ "lightness-notation": "percentage",
+ "media-feature-range-notation": "context",
+ "no-descending-specificity": true,
+ "no-duplicate-selectors": true,
+ "selector-not-notation": "simple",
+ "selector-pseudo-element-colon-notation": "double",
+ "value-keyword-case": "lower"
+ }
+}
diff --git a/atr/static/css/atr.css b/atr/static/css/atr.css
index da9eff1..bb72ad1 100644
--- a/atr/static/css/atr.css
+++ b/atr/static/css/atr.css
@@ -6,7 +6,7 @@
}
@font-face {
- font-family: Inter;
+ font-family: "Inter";
src: url("../webfonts/inter-v.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
@@ -19,7 +19,7 @@
}
body {
- font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe
UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe
UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 17px;
line-height: 24px;
@@ -28,7 +28,7 @@ body {
}
input, textarea, button, select, option {
- font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe
UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe
UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
font-size: 17px;
line-height: 24px;
font-variation-settings: "opsz" 22;
@@ -39,7 +39,26 @@ a { font-weight: 450; }
h1, h2, h3 {
font-weight: 475;
- font-family: Jost;
+ font-family: "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe
UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1 { margin-bottom: 2rem; }
+
+h2 {
+ border-bottom: 1px solid #d1d2d3;
+ padding-bottom: 0.5rem;
+ margin-top: 2.5rem;
+ margin-bottom: 1.5rem;
+}
+h3, p, ul { margin-bottom: 1rem; }
+
+ul { padding-left: 1rem; }
+
+label {
+ font-weight: 500;
+ border-bottom: 1px dashed #b1b2b3;
+ padding-bottom: 0.5rem;
+ cursor: pointer;
}
aside h1 {
@@ -49,46 +68,38 @@ aside h1 {
}
aside h1 span.rest {
- color: #777;
+ color: #777777;
}
aside h3 {
margin-top: 1.5rem;
}
-.site-title {
- text-decoration: none;
- color: inherit;
-}
-
-h1 { margin-bottom: 2rem; }
-h2 { border-bottom: 1px solid #d1d2d3; padding-bottom: 0.5rem;
- margin-top: 2.5rem; margin-bottom: 1.5rem; }
-h3, p, ul { margin-bottom: 1rem; }
-
-ul { padding-left: 1rem; }
-
-label { font-weight: 500; border-bottom: 1px dashed #d1d2d3; padding-bottom:
0.5rem; }
-
-form.striking { background-color: #ffe; border: 1px solid #ddb; padding: 1rem;
border-radius: 0.5rem; }
-
footer {
padding: 2rem;
- background: #eee;
+ background: #eeeeee;
font-size: 15px;
margin: 2rem;
- color: #333;
+ color: #333333;
font-variation-settings: "opsz" 14;
border-radius: 0.5rem;
+ border: 2px solid #d1d2d3;
}
-footer a { color: #333; font-weight: 425; }
-footer a:visited { color: #333; font-weight: 425; }
+footer a {
+ color: #333333;
+ font-weight: 425;
+}
+
+footer a:visited {
+ color: #333333;
+ font-weight: 425;
+}
button {
margin-top: 1rem;
padding: 0.5rem 1rem;
- background: #036;
+ background: #003366;
color: white;
border: none;
border-radius: 4px;
@@ -97,7 +108,7 @@ button {
}
button:hover {
- background: #047;
+ background: #004477;
}
input,
@@ -111,15 +122,27 @@ textarea {
min-height: 200px;
}
+form.striking {
+ background-color: #ffffee;
+ border: 1px solid #ddddbb;
+ padding: 1rem;
+ border-radius: 0.5rem;
+}
+
+.site-title {
+ text-decoration: none;
+ color: inherit;
+}
+
span.warning {
- color: #c00;
+ color: #cc0000;
font-weight: 550;
}
.hex {
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
monospace;
+ font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco",
"Consolas", monospace;
font-size: 0.9em;
- background: #fff;
+ background: #ffffff;
padding: 0.25rem 0.5rem;
border-radius: 2px;
border: 1px solid #e0e0e0;
@@ -170,7 +193,7 @@ span.warning {
.sidebar hr {
border: none;
- border-top: 1px solid #999;
+ border-top: 1px solid #999999;
margin: 1.5rem auto;
width: 62%;
height: 0;
@@ -201,7 +224,7 @@ span.warning {
display: block;
width: 25px;
height: 3px;
- background-color: #333;
+ background-color: #333333;
margin: 5px 0;
transition: 0.3s;
}
@@ -210,7 +233,7 @@ span.warning {
display: none;
}
-@media (max-width: 768px) {
+@media (width <= 768px) {
.hamburger {
display: block;
position: fixed;
@@ -243,7 +266,7 @@ span.warning {
}
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
- opacity: 0;
+ opacity: 0%;
}
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
diff --git a/atr/static/css/root.css b/atr/static/css/root.css
index 3cbc448..ada4c11 100644
--- a/atr/static/css/root.css
+++ b/atr/static/css/root.css
@@ -5,7 +5,7 @@ body {
}
h1 {
- color: #036;
+ color: #003366;
}
.pmc-list {
@@ -17,27 +17,27 @@ h1 {
.pmc-item {
padding: 1.5em;
margin: 0.75em 0;
- border: 1px solid #ddd;
+ border: 1px solid #dddddd;
border-radius: 8px;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+ background: #ffffff;
+ box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pmc-item:hover {
transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}
.pmc-name {
font-weight: bold;
font-size: 1.2em;
- color: #036;
+ color: #003366;
margin-bottom: 0.5em;
}
.pmc-stats {
- color: #666;
+ color: #666666;
display: flex;
gap: 1.5em;
flex-wrap: wrap;
@@ -50,7 +50,7 @@ h1 {
.intro {
max-width: 800px;
- color: #555;
+ color: #555555;
}
.ribbon {
diff --git a/atr/templates/user-keys-add.html b/atr/templates/user-keys-add.html
index d8a886e..a219685 100644
--- a/atr/templates/user-keys-add.html
+++ b/atr/templates/user-keys-add.html
@@ -15,9 +15,11 @@
margin-bottom: 1rem;
}
+ /* TODO: Consider moving this to atr.css */
.form-group label {
- display: block;
- margin-bottom: 0.5rem;
+ display: inline-block;
+ margin-bottom: 1rem;
+ padding: 0;
}
.error-message {
@@ -64,8 +66,8 @@
}
.existing-keys {
- margin: 2rem 0;
- padding: 1rem;
+ margin-bottom: 2rem;
+ padding: 1rem 2rem 2rem 2rem;
background: #f8f9fa;
border-radius: 4px;
}
@@ -166,8 +168,8 @@
{% endif %}
{% if user_keys %}
+ <h2>Your Existing Keys</h2>
<div class="existing-keys">
- <h2>Your Existing Keys</h2>
<div class="keys-grid">
{% for key in user_keys %}
<div class="key-card">
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
