colindean / colindean/colindean.github.io
Improve smolweb experience
- Dominant language
- HTML
- Stars
- 1
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
I think keeping the site basic is important. [Smolweb](https://smolweb.org) seems to be a good thing and includes a validator against its standard subset of HTML and CSS.
https://smolweb.org/validator/
```text
SmolWeb Validator v1.4.1
π Validating: https://cad.cx
ββββββββββββββββββββββββββββββββββββββββ
Loaded 190 CSS property rules from css-grading.conf
β°β± HTML VALIDATION SUMMARY
ββββββββββββββββββββββββββββββββββββββββ
β INVALID: This page does not conform to the smolweb HTML subset.
π Statistics:
Total elements: 200
Valid elements: 200
Invalid elements: 0
π« Misnested Tags (1):
1. HTML parsing error at position 7818 (line 145): Unexpected EndTag token [] when in state [InBody]
β Errors (2):
1. must have a closing at position 7752 (line 145): html > body > div > div > section > div > ul > li > a > span.pronunciation
2. Missing required attribute 'content' on at position 773 (line 14): html > head > meta
β οΈ Warnings (4):
β’ Page must be usable without block at position 17626 (line 334): html > body > script
β’ Page must be usable without <script> block at position 17697 (line 335): html > body > script
β’ Page must be usable without <script> block at position 17763 (line 336): html > body > script
β’ Page must be usable without <script> block at position 17874 (line 339): html > body > script
π‘ Recommendations (4):
β’ Consider adding recommended attribute 'role' on <section> at position 1332 (line 26): html > body > div > div > section#internal
β’ Consider adding recommended attribute 'type' on <script> at position 17763 (line 336): html > body > script
β’ Consider adding recommended attribute 'src' on <script> at position 17874 (line 339): html > body > script
β’ Consider adding recommended attribute 'type' on <script> at position 17874 (line 339): html > body > script
β
Valid tags used:
β’ <a>: 68 occurrence(s)
β’ <li>: 66 occurrence(s)
β’ <img>: 15 occurrence(s)
β’ <meta>: 9 occurrence(s)
β’ <ul>: 7 occurrence(s)
β’ <div>: 6 occurrence(s)
β’ <link>: 5 occurrence(s)
β’ <h2>: 4 occurrence(s)
β’ <script>: 4 occurrence(s)
β’ <h1>: 3 occurrence(s)
β’ <h3>: 3 occurrence(s)
β’ <nav>: 2 occurrence(s)
β’ <section>: 1 occurrence(s)
β’ <body>: 1 occurrence(s)
β’ <title>: 1 occurrence(s)
β’ <p>: 1 occurrence(s)
β’ <head>: 1 occurrence(s)
β’ <header>: 1 occurrence(s)
β’ <html>: 1 occurrence(s)
β’ <span>: 1 occurrence(s)
ββββββββββββββββββββββββββββββββββββββββ
HTML Validation complete.
π¨ CSS VALIDATION REPORT
ββββββββββββββββββββββββββββββββββββββββ
URL: https://cad.cx
Final Grade: π₯ F-
- Property Grade: F (heavy performance impact)
- Size: 7,2KB (minor penalty)
π Statistics:
CSS Rules: 85
Total Occurrences: 165
Unique Rule Patterns: 50
File Size: 7344 bytes (7,2KB)
π Occurrences by Grade:
- Grade A: 124 occurrences
- Grade B: 11 occurrences
- Grade C: 8 occurrences
- Grade D: 11 occurrences
- Grade E: 2 occurrences
- Grade F: 9 occurrences
π Rules Breakdown:
π© Grade A (124 occurrences across 31 rules):
background-image - Background images (18 occurrences):
β’ colors.css:6 - background-image: url(../images/2013/logos/pittco.png)
β’ colors.css:9 - background-image: url(../images/2013/logos/thinkcomputers.png)
β’ colors.css:12 - background-image: url(../images/2013/logos/scrc.png)
β’ colors.css:15 - background-image: url(../images/2018/logos/watson.png)
β’ colors.css:19 - background-image: url(../images/2013/logos/vivisimo.png)
β’ colors.css:22 - background-image: url(../images/2013/logos/metamesh.png)
β’ colors.css:25 - background-image: url(../images/2023/logos/codeandsupply.png)
β’ colors.css:29 - background-image: url(../images/2023/logos/codeandsupplyfund.png)
β’ colors.css:33 - background-image: url(../images/2014/logos/devopsdays.png)
β’ colors.css:36 - background-image: url(../images/2014/logos/imaginecareers.png)
β’ colors.css:39 - background-image: url(../images/2014/logos/gxl.png)
β’ colors.css:42 - background-image: url(../images/2016/logos/abstractions.png)
β’ colors.css:45 - background-image: url(../images/2018/logos/arcadia.png)
β’ colors.css:48 - background-image: url(../images/2017/logos/uptime.png)
β’ colors.css:51 - background-image: url(../images/2017/logos/heartifacts.png)
β’ colors.css:54 - background-image: url(../images/2019/logos/target.png)
β’ colors.css:58 - background-image: url(../images/2023/logos/homebrew.svg)
β’ colors.css:62 - background-image: url(../images/2023/logos/community_internet_solutions.png)
width - Element width (14 occurrences):
β’ structure.css:5 - width: 100%
β’ structure.css:11 - width: 1280px
β’ structure.css:42 - width: 24px
β’ structure.css:47 - width: 32px
β’ structure.css:52 - width: 32px
β’ structure.css:57 - width: 64px
β’ structure.css:115 - width: 95%
β’ structure.css:149 - width: 50%
β’ structure.css:153 - width: 100%
β’ structure.css:159 - width: 960px
β’ structure.css:168 - width: 61%
β’ structure.css:180 - width: 768px
β’ structure.css:187 - width: 97%
β’ structure.css:203 - width: 500px
font-size - Font sizing (12 occurrences):
β’ reset.css:22 - font-size: 100%
β’ structure.css:30 - font-size: 1.3em
β’ structure.css:111 - font-size: 110%
β’ structure.css:195 - font-size: 5em !important
β’ structure.css:198 - font-size: 0.9em !important
β’ fonts.css:2 - font-size: calc(1rem + 0.25vw)
β’ fonts.css:7 - font-size: 7em
β’ fonts.css:32 - font-size: 16px
β’ fonts.css:35 - font-size: 90%
β’ fonts.css:40 - font-size: 120%
β’ fonts.css:44 - font-size: 140%
β’ fonts.css:53 - font-size: x-small
height - Element height (7 occurrences):
β’ structure.css:6 - height: 1px
β’ structure.css:43 - height: 24px
β’ structure.css:48 - height: 32px
β’ structure.css:53 - height: 32px
β’ structure.css:58 - height: 64px
β’ structure.css:66 - height: 64px
β’ structure.css:69 - height: 64px
color - Text and foreground colors (6 occurrences):
β’ structure.css:116 - color: black
β’ fonts.css:9 - color: #bbb
β’ fonts.css:15 - color: #fff
β’ fonts.css:20 - color: #888
β’ fonts.css:25 - color: #888
β’ fonts.css:57 - color: inherit
margin-bottom - Box model bottom margin (6 occurrences):
β’ structure.css:26 - margin-bottom: 20px
β’ structure.css:104 - margin-bottom: 1em
β’ structure.css:107 - margin-bottom: 0.2em
β’ structure.css:110 - margin-bottom: 0.4em
β’ structure.css:123 - margin-bottom: 0.7em
β’ structure.css:142 - margin-bottom: 1em
margin-left - Box model left margin (6 occurrences):
β’ structure.css:12 - margin-left: -640px
β’ structure.css:160 - margin-left: -480px
β’ structure.css:172 - margin-left: 5px
β’ structure.css:181 - margin-left: -384px
β’ structure.css:188 - margin-left: 0px
β’ structure.css:204 - margin-left: -250px
display[inline|block|list-item|none] - Basic display values (5 occurrences):
β’ reset.css:29 - display: block
β’ structure.css:29 - display: inline
β’ structure.css:73 - display: inline
β’ structure.css:78 - display: inline
β’ structure.css:81 - display: inline
margin - Box model margins (5 occurrences):
β’ reset.css:19 - margin: 0
β’ structure.css:62 - margin: 0 auto
β’ structure.css:120 - margin: 0.4em 0.2em
β’ structure.css:130 - margin: 0.3em
β’ structure.css:174 - margin: 0 auto
border-top - Top border (4 occurrences):
β’ structure.css:161 - border-top: 1px solid yellow
β’ structure.css:182 - border-top: 1px solid red
β’ structure.css:190 - border-top: 1px solid green
β’ structure.css:205 - border-top: 1px solid blue
text-align - Text alignment (4 occurrences):
β’ structure.css:18 - text-align: center
β’ structure.css:74 - text-align: center
β’ structure.css:95 - text-align: center
β’ fonts.css:54 - text-align: right
padding-left - Box model left padding (3 occurrences):
β’ structure.css:85 - padding-left: 18px
β’ structure.css:100 - padding-left: 18px
β’ structure.css:191 - padding-left: 5px !important
margin-top - Box model top margin (3 occurrences):
β’ structure.css:22 - margin-top: 20px
β’ structure.css:25 - margin-top: 0px
β’ structure.css:112 - margin-top: 0.3em
float - Element floating (3 occurrences):
β’ structure.css:126 - float: left
β’ structure.css:150 - float: left
β’ structure.css:170 - float: left
padding - Box model padding (3 occurrences):
β’ reset.css:20 - padding: 0
β’ structure.css:114 - padding: 0.2em
β’ structure.css:134 - padding: 0 1em 1em 1em
font-variant - Font variant (small-caps) (3 occurrences):
β’ fonts.css:19 - font-variant: small-caps
β’ fonts.css:26 - font-variant: small-caps
β’ fonts.css:52 - font-variant: all-petite-caps
font-family - Font family selection (2 occurrences):
β’ fonts.css:6 - font-family: Arial
β’ fonts.css:30 - font-family: "Ubuntu Light","Ubuntu","Arial", sans-serif
font-weight - Font weight (2 occurrences):
β’ fonts.css:8 - font-weight: bold
β’ fonts.css:31 - font-weight: 300
margin-right - Box model right margin (2 occurrences):
β’ structure.css:127 - margin-right: 0.2em
β’ structure.css:171 - margin-right: 5px
vertical-align - Vertical alignment (2 occurrences):
β’ reset.css:24 - vertical-align: baseline
β’ structure.css:39 - vertical-align: top
background-repeat - Background image repeat (2 occurrences):
β’ structure.css:86 - background-repeat: no-repeat
β’ structure.css:99 - background-repeat: no-repeat
line-height - Line height (2 occurrences):
β’ reset.css:32 - line-height: 1
β’ fonts.css:36 - line-height: 130%
font-style - Font style (normal/italic) (2 occurrences):
β’ structure.css:119 - font-style: italic
β’ fonts.css:48 - font-style: italic
border - Basic borders (1 occurrences):
β’ reset.css:21 - border: 0
text-decoration - Text decoration (1 occurrences):
β’ fonts.css:61 - text-decoration: dotted underline 0.1em
background-color - Background colors (1 occurrences):
β’ colors.css:2 - background-color: #eee
list-style - List styling shorthand (1 occurrences):
β’ reset.css:35 - list-style: none
background - Background shorthand property (1 occurrences):
β’ structure.css:113 - background: #bbb
font - Font shorthand property (1 occurrences):
β’ reset.css:23 - font: inherit
padding-right - Box model right padding (1 occurrences):
β’ structure.css:192 - padding-right: 5px !important
list-style-type - List bullet styles (1 occurrences):
β’ structure.css:133 - list-style-type: disc
π¦ Grade B (11 occurrences across 4 rules):
@media - Responsive design media queries (6 occurrences):
β’ structure.css:146 - @media
β’ structure.css:157 - @media
β’ structure.css:165 - @media
β’ structure.css:178 - @media
β’ structure.css:185 - @media
β’ structure.css:201 - @media
position[relative] - Relative positioning (3 occurrences):
β’ structure.css:63 - position: relative
β’ structure.css:148 - position: relative
β’ structure.css:167 - position: relative
visibility - Element visibility control (1 occurrences):
β’ fonts.css:65 - visibility: hidden
display[inline-block] - Inline-block layout (1 occurrences):
β’ structure.css:138 - display: inline-block
πͺ Grade C (8 occurrences across 3 rules):
background-size - Background image sizing (5 occurrences):
β’ colors.css:16 - background-size: contain
β’ colors.css:26 - background-size: contain
β’ colors.css:30 - background-size: contain
β’ colors.css:55 - background-size: contain
β’ colors.css:63 - background-size: contain
content - Generated content for pseudo-elements (2 occurrences):
β’ reset.css:42 - content: ''
β’ reset.css:43 - content: none
overflow - Content overflow handling (1 occurrences):
β’ structure.css:7 - overflow: visible
π¨ Grade D (11 occurrences across 6 rules):
left - Positioned element coordinates (3 occurrences):
β’ structure.css:4 - left: 0px
β’ structure.css:14 - left: 50%
β’ structure.css:189 - left: 0
text-shadow - Text shadows (3 occurrences):
β’ fonts.css:10 - text-shadow: 0px 1px 0px #a99, 0px 2px 0px #988, 0px 3px 0px #877, 0px 4px 0px #766, 0px 5px 0px #655, 0px 6px 0px #544, 0px 7px 0px #433, 0px 8px 7px #001135
β’ fonts.css:14 - text-shadow: 0px 1px 1px #d99, 0px 2px 2px #c88, 0px 3px 3px #b77, 0px 4px 4px #a66, 0px 5px 5px #955, 0px 6px 6px #844, 0px 7px 7px #733, 0px 8px 8px #331135, 0px -2px 10px #f00
β’ fonts.css:24 - text-shadow: 0px 1px 10px #4d4d4d
position[absolute|fixed] - Absolute positioning requires layout calculations (2 occurrences):
β’ structure.css:2 - position: absolute
β’ structure.css:13 - position: absolute
border-collapse - Table border model (1 occurrences):
β’ reset.css:46 - border-collapse: collapse
border-spacing - Table border spacing (1 occurrences):
β’ reset.css:47 - border-spacing: 0
top - Positioned element coordinates (1 occurrences):
β’ structure.css:3 - top: 0px
π§ Grade E (2 occurrences across 1 rules):
transition - CSS transitions (2 occurrences):
β’ structure.css:37 - transition: all 0.2s ease-in-out
β’ structure.css:94 - transition: all 1s ease-in
π₯ Grade F (9 occurrences across 5 rules):
-webkit-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
β’ structure.css:33 - -webkit-transition: all 0.2s ease-in-out
β’ structure.css:90 - -webkit-transition: all 1s ease-in
-o-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
β’ structure.css:35 - -o-transition: all 0.2s ease-in-out
β’ structure.css:92 - -o-transition: all 1s ease-in
-ms-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
β’ structure.css:36 - -ms-transition: all 0.2s ease-in-out
β’ structure.css:93 - -ms-transition: all 1s ease-in
-moz-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
β’ structure.css:34 - -moz-transition: all 0.2s ease-in-out
β’ structure.css:91 - -moz-transition: all 1s ease-in
quotes - Unknown or unsupported CSS property (1 occurrences):
β’ reset.css:38 - quotes: none
ββββββββββββββββββββββββββββββββββββββββ
CSS validation complete.```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the SmolWeb validator report and inspect reset.css, structure.css, fonts.css, and colors.css, which it identifies in the CSS findings. Confirm which HTML or CSS violations are in scope before making changes; the issue does not define a specific target or acceptance criteria for being done.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100