eeef2a7 · webring · git.iko.soy

git.iko.soy/webring

on master help sign in

Improved responsive

eeef2a7Devine Lu Linvega7 years ago

links/main.css+16−4

compare with master

unifiedsplit

@@ -8,10 +8,22 @@ body div p a { text-decoration: underline;}

8body div p a:hover { text-decoration: underline; }

9body div p b { font-weight: normal; font-family: 'input_mono_medium' }

10body div p.readme { max-width:500px; }

11−body div ul { display:flex; flex-wrap:wrap; max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}

11+body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden; columns:3;}

12−body div ul li { width: 22em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase;}

12+body div ul li { display:block; padding-left:5px; text-overflow: ellipsis; text-transform: lowercase;}

13−body div ul li.wiki::after { content:"<wiki>"; color:#555;}

13+body div ul li.wiki::after { content:"<wiki>"; color:#555; }

14−body div ul li.blog::after { content:"<blog>"; color:#555;}

14+body div ul li.blog::after { content:"<blog>"; color:#555; }

15body div ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}

16body div ul li a:visited { color:#ccc; text-decoration: none;}

17body div ul li a:hover { text-decoration: underline; }

18+

19+@media (max-width: 730px) {

20+ body div ul li span.counter { display: none }

21+}

22+@media (max-width: 630px) {

23+ body div ul { columns: 2 !important; }

24+ body div ul li span.counter { display: none }

25+}

26+@media (max-width: 530px) {

27+ body div ul { columns: 1 !important; }

28+ body div ul li span.counter { display: inline }

29+}

scripts/portal.js+1−1

@@ -16,7 +16,7 @@ function Portal (sites) {

17 function _directory (sites) {

18 return `

19− <ul>${sites.reduce((acc, site, id) => { return `${acc}<li class='${site.type}'>${id}) <a href='${site.url}'>${_name(site)}</a></li>` }, '')}</ul>\n${_readme()}${_buttons()}`

19+ <ul>${sites.reduce((acc, site, id) => { return `${acc}<li class='${site.type}'><span class='counter'>${id})</span><a href='${site.url}'>${_name(site)}</a></li>` }, '')}</ul>\n${_readme()}${_buttons()}`

20 }

22 function _name(site) {