Skip to content

Commit

Permalink
Merge pull request #109 from noelleleigh/add-img-dimensions
Browse files Browse the repository at this point in the history 
Reduce reflows and improve accessibility
  • Loading branch information
@neauoire
neauoire authored Nov 26, 2024
2 parents 6e01241 + bc2d820 commit ed3643d
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 35 deletions.
18 changes: 8 additions & 10 deletions links/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ body.page_travel nav a.travel_rabbit img.active { display:block }
body.page_travel nav a.travel_rabbit img.inactive { display:none }

nav { padding: 20px 30px; max-width:900px; margin-top: 45px; margin-bottom:20px }
nav a { display:inline-block; max-width: 16% }
nav a img { width:100%; display:block; }
nav a { display:inline-block; }
nav a img { width:144px; height:auto; display:block; }
nav .hidden {position:absolute; overflow:hidden; left: -9999px}

main { padding: 0px 0px 45px 45px; max-width:900px; }
main img { width:100%; max-width: 900px; margin-bottom: 15px;}
main img { width:100%; height:auto; max-width: 900px; margin-bottom: 15px;}
main > * { max-width: 900px; margin-bottom: 30px }
main > h1 { font-size:45px; text-transform: capitalize; display: none}
main > h2 { font-size:30px; text-transform: capitalize}
Expand Down Expand Up @@ -119,7 +119,7 @@ ul.nobull li {list-style-type: none}

@media (prefers-color-scheme: dark) {
body {background: #000; color: white}
nav a img.text, img.invert, footer a.logo { filter: invert(1)}
nav a img.text, img.invert, footer a.logo { color:#000; filter: invert(1)}
body a { color: white;}
main > pre { background: white; color:#000}
main > code { background:white; color:#000}
Expand All @@ -135,10 +135,8 @@ ul.nobull li {list-style-type: none}
/* Mobile */

@media only screen and (max-width: 1100px) {

nav a {display:inline-block; max-width: 25%}
nav {padding: 20px;text-align: center}
main {padding: 20px;}
.gridprojects, .projects {grid-column-start: span 2;}
.article, .grid, .featured {grid-column-start: span 3;}
nav {padding: 20px;text-align: center}
main {padding: 20px;}
.gridprojects, .projects {grid-column-start: span 2;}
.article, .grid, .featured {grid-column-start: span 3;}
}
2 changes: 1 addition & 1 deletion src/inc/home.htm
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<img src='../media/content/about/galley.png' alt='an isometric drawing of the interior of a sailboat. Rek is stoking a woodstove, Little Ninj is updating his website at the nav table and Devine is cooking something tasty in the galley' loading='lazy' />
<img src='../media/content/about/galley.png' alt='an isometric drawing of the interior of a sailboat. Rek is stoking a woodstove, Little Ninj is updating his website at the nav table and Devine is cooking something tasty in the galley' loading='lazy' width='900' height='438'/>

{/log}
48 changes: 24 additions & 24 deletions src/inc/meta.nav.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,34 @@
</ul>
</nav>
<nav>
<a href='home.html' class='home_rabbit'>
<img src='../media/interface/home.png' alt='a rabbit wearing a funky sweater'/>
<img class='text inactive' src='../media/interface/home_txt.png' title='Home'/>
<img class='text active' src='../media/interface/home_txt_underline.png' title='Home'/>
<a href='home.html' class='home_rabbit' aria-label='Home'>
<img src='../media/interface/home.png' alt='a rabbit wearing a funky sweater' width='200' height='200'/>
<img class='text inactive' src='../media/interface/home_txt.png' alt='Home' width='200' height='35'/>
<img class='text active' src='../media/interface/home_txt_underline.png' alt='Home' width='200' height='35'/>
</a>
<a href='about.html' class='about_rabbit'>
<img src='../media/interface/about.png' alt='a mariner rabbit with a spyglass, coiled in ropes'/>
<img class='text inactive' src='../media/interface/about_txt.png' title='About'/>
<img class='text active' src='../media/interface/about_txt_underline.png' title='About'/>
<a href='about.html' class='about_rabbit' aria-label='About'>
<img src='../media/interface/about.png' alt='a mariner rabbit with a spyglass, coiled in ropes' width='200' height='200'/>
<img class='text inactive' src='../media/interface/about_txt.png' alt='About' width='200' height='35'/>
<img class='text active' src='../media/interface/about_txt_underline.png' alt='About' width='200' height='35'/>
</a>
<a href='knowledge.html' class='knowledge_rabbit'>
<img src='../media/interface/knowledge.png' alt='a rabbit holding some rolled up documents'/>
<img class='text inactive' src='../media/interface/knowledge_txt.png' title='knowledge'/>
<img class='text active' src='../media/interface/knowledge_txt_underline.png' title='knowledge'/>
<a href='knowledge.html' class='knowledge_rabbit' aria-label='Knowledge'>
<img src='../media/interface/knowledge.png' alt='a rabbit holding some rolled up documents' width='200' height='200'/>
<img class='text inactive' src='../media/interface/knowledge_txt.png' alt='Knowledge' width='200' height='35'/>
<img class='text active' src='../media/interface/knowledge_txt_underline.png' alt='Knowledge' width='200' height='35'/>
</a>
<a href='articles.html' class='articles_rabbit'>
<img src='../media/interface/articles.png' alt='a rabbit laying on their belly and writing into a book'/>
<img class='text inactive' src='../media/interface/articles_txt.png' title='articles'/>
<img class='text active' src='../media/interface/articles_txt_underline.png' title='articles'/>
<a href='articles.html' class='articles_rabbit' aria-label='Articles'>
<img src='../media/interface/articles.png' alt='a rabbit laying on their belly and writing into a book' width='200' height='200'/>
<img class='text inactive' src='../media/interface/articles_txt.png' alt='Articles' width='200' height='35'/>
<img class='text active' src='../media/interface/articles_txt_underline.png' alt='Articles' width='200' height='35'/>
</a>
<a href='projects.html' class='projects_rabbit'>
<img src='../media/interface/projects.png' alt='a rabbit working on a project, taking measurements while while a hard hat'/>
<img class='text inactive' src='../media/interface/projects_txt.png' title='projects'/>
<img class='text active' src='../media/interface/projects_txt_underline.png' title='projects'/>
<a href='projects.html' class='projects_rabbit' aria-label='Projects'>
<img src='../media/interface/projects.png' alt='a rabbit working on a project, taking measurements while while a hard hat' width='200' height='200'/>
<img class='text inactive' src='../media/interface/projects_txt.png' alt='Projects' width='200' height='35'/>
<img class='text active' src='../media/interface/projects_txt_underline.png' alt='Projects' width='200' height='35'/>
</a>
<a href='travel.html' class='travel_rabbit'>
<img src='../media/interface/travel.png' alt='a rabbit sitting in a small boat wearing a rain coat'/>
<img class='text inactive' src='../media/interface/travel_txt.png' title='travel'/>
<img class='text active' src='../media/interface/travel_txt_underline.png' title='travel'/>
<a href='travel.html' class='travel_rabbit' aria-label='Travel'>
<img src='../media/interface/travel.png' alt='a rabbit sitting in a small boat wearing a rain coat' width='200' height='200'/>
<img class='text inactive' src='../media/interface/travel_txt.png' alt='Travel' width='200' height='35'/>
<img class='text active' src='../media/interface/travel_txt_underline.png' alt='Travel' width='200' height='35'/>
</a>
</nav>

0 comments on commit ed3643d

Please sign in to comment.