Thread:Herald of meridian/@comment-25364614-20170909061821

Hello Herald.

I have finished upgrading all of the infobox templates on the wiki to the new portable infobox code.

Now I can work on the more intersting things: Front Page and CSS edits.

There are quite a few things to fix up and I have been quietly working in my sandbox and css page to try them out.

Could you please add the following:

The first matter - Sharpening images on the front page:

/** sharpen image class **/ .sharpen img { max-width: 100%; height: auto; }

When you upload an image to the wiki and then need to display a scaled down version of it, the quality of the scaled down version is pretty bad. Instead, the new sharpen class can be added to a div container; then all the images in the div container will be scaled to fit in the container despite actually being bigger. This results in a sharper image (and yes this is different to how the wiki normally does it).

The second matter - Template:Weblinks CSS /** For Template:Weblinks **/ div.weblinks { display: inline-flex; width: 169px; }

div.weblinks img { vertical-align: middle; transition: opacity 0.5s; -webkit-filter: invert(0%); /* Safari */ filter: invert(0%); }

/* style properties for images in weblinks div on hover */ div.weblinks img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ transition: opacity 0.5s; }

div.weblinks img:active { -webkit-filter: invert(100%); /* Safari */ filter: invert(100%); }

Completely reworking the Weblinks template on the front page to look more visually appealing and take up less space.

The third matter - Template:Update CSS /** For Template:Update **/ /* in-out animation */ @keyframes update { 0%   {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} 25%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 50%  {color: yellow;text-shadow: 0 0 3px red, 0 0 5px orange;} 75%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 100% {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} } /* apply 'update' animation to span update class */ .update { animation: update 2s infinite linear; }

A new template which has a simple function. Once there is a new update (whether a new volume or chapter has been released or if there is a new News item), this template adds a fancy '[new]' next to it bring notice to it. The template has inputs in it such that you can add the date of the update and for how long you want the fancy '[new]' to appear for.

e.g. NT19 releasing on October 7 and we'd want the fancy '[new]' to be visible for 4 weeks then: The '[new]' would appear after 7 Oct 2017 (midnight in Japan). After 4 weeks, it would disappear.

Let's start with these first before talking about other stuff. 