Experimental logo for vimb browser

showbox.html 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .box { width: 3em; height: 3em }
  6. .black { padding: 1em; background: black }
  7. .white { padding: 1em; background: white }
  8. .grey { padding: 1em; background: grey }
  9. .red { padding: 1em; background: red }
  10. .green { padding: 1em; background: green }
  11. .blue { padding: 1em; background: blue }
  12. .box { position: relative; }
  13. .box>img {
  14. position: absolute;
  15. top: 50%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>16x16gw.png</h1>
  23. <div class="black"><img src='16x16gw.png'/>a</div>
  24. <div class="white"><img src='16x16gw.png'/></div>
  25. <div class="grey"><img src='16x16gw.png'/></div>
  26. <div class="red"><img src='16x16gw.png'/></div>
  27. <div class="green"><img src='16x16gw.png'/></div>
  28. <div class="blue"><img src='16x16gw.png'/></div>
  29. Just about the smallest bearable with this design (well, Windows tray used to have even 14, if i rememer correctly.). The oceans and land is re-drawn; automatic render is no use with this scale.
  30. <h1>16x16g.png</h1>
  31. Same as above, but vastly simplified -- the globe is now just a dot.
  32. <div class="black"><img src='16x16g.png'/>a</div>
  33. <div class="white"><img src='16x16g.png'/></div>
  34. <div class="grey"><img src='16x16g.png'/></div>
  35. <div class="red"><img src='16x16g.png'/></div>
  36. <div class="green"><img src='16x16g.png'/></div>
  37. <div class="blue"><img src='16x16g.png'/></div>
  38. <h1>32x32.png</h1>
  39. Good ol' 32x32, used to be Windows desktop icon size. Just automatic render, no GIMP.
  40. <div class="black"><img src='32x32.png'/>a</div>
  41. <div class="white"><img src='32x32.png'/></div>
  42. <div class="grey"><img src='32x32.png'/></div>
  43. <div class="red"><img src='32x32.png'/></div>
  44. <div class="green"><img src='32x32.png'/></div>
  45. <div class="blue"><img src='32x32.png'/></div>
  46. <h1>symbolic.svg</h1>
  47. Font-like symbol to be used in some minimalistic modes.
  48. <div class="black"><img src='symbolic.svg'/>a</div>
  49. <div class="white"><img src='symbolic.svg'/></div>
  50. <div class="grey"><img src='symbolic.svg'/></div>
  51. <div class="red"><img src='symbolic.svg'/></div>
  52. <div class="green"><img src='symbolic.svg'/></div>
  53. <div class="blue"><img src='symbolic.svg'/></div>
  54. <h1>main.svg</h1>
  55. Working file with all versions. The :V version is for tiny renders (which is why Australia, Madagascar and Cuba are missing :)).
  56. <div class="black"><img src='main.svg'/>a</div>
  57. <div class="white"><img src='main.svg'/></div>
  58. <div class="grey"><img src='main.svg'/></div>
  59. <div class="red"><img src='main.svg'/></div>
  60. <div class="green"><img src='main.svg'/></div>
  61. <div class="blue"><img src='main.svg'/></div>
  62. </body>
  63. </html>