Specify image sizes so the page doesn't move elements around during the first couple ms of display

This commit is contained in:
dginovker 2022-11-14 05:23:48 +09:00
parent a2f9b30869
commit 6ce61ee89e
10 changed files with 28 additions and 27 deletions

View File

@ -7,7 +7,7 @@
Conditions</a> and <a href="/site/privacy/privacy.html">Privacy Policy</a>.<br /> Conditions</a> and <a href="/site/privacy/privacy.html">Privacy Policy</a>.<br />
</div> </div>
<a class="jagexlink" href="/"> <a class="jagexlink" href="/">
<img src="/site/2009scape-resources/img/branding/logo-footer-dark.webp" alt="2009Scape" /> <img src="/site/2009scape-resources/img/branding/logo-footer-dark.webp" width="110" height="33" alt="2009Scape" />
</a> </a>
</div> </div>
</div> </div>

View File

@ -32,7 +32,7 @@
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">

View File

@ -44,7 +44,7 @@
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">

View File

@ -38,7 +38,7 @@
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">

View File

@ -31,7 +31,7 @@
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">

View File

@ -7,47 +7,48 @@ title: A free & open-source remake of 2009 era RuneScape
<div id="left"> <div id="left">
<!--MAIN BUTTON: LEFT (DISCORD)--> <!--MAIN BUTTON: LEFT (DISCORD)-->
<a href="https://forum.2009scape.org/" target="_blank" class="createbutton"> <a href="https://forum.2009scape.org/" target="_blank" class="createbutton">
<img src="./site/2009scape-resources/img/buttons/btn-forums2.webp" alt="Join us on the forums" /> <img src="./site/2009scape-resources/img/buttons/btn-forums2.webp" alt="Join us on the forums"
width="268" height="151"/>
<span class="shim"></span> <span class="shim"></span>
</a> </a>
<!--WEBSITE FEATURES--> <!--WEBSITE FEATURES-->
<div id="features"> <div id="features">
<div class="narrowHeader"><img src="./site/2009scape-resources/img/titles/title-websitefeatures.webp" <div class="narrowHeader"><img src="./site/2009scape-resources/img/titles/title-websitefeatures.webp"
alt="Website Features" /> width="162" height="12" alt="Website Features" />
</div> </div>
<div class="section"> <div class="section">
<div class="feature" <div class="feature"
style="background-image: url(./site/img/2009img/main/home/featured_feature_bg.webp)"> style="background-image: url(./site/img/2009img/main/home/featured_feature_bg.webp)">
<a href="./site/game_guide/how_do_i_get_started0.html"><img <a href="./site/game_guide/how_do_i_get_started0.html"><img
src="./site/img/2009img/main/home/feature_kbsearch_icon.webp" alt="Getting Started" /></a> src="./site/img/2009img/main/home/feature_kbsearch_icon.webp" width="57" height="57" alt="Getting Started" /></a>
<div class="featureTitle">Getting Started</div> <div class="featureTitle">Getting Started</div>
<div class="featureDesc">If you're new to 2009Scape, check out our <a <div class="featureDesc">If you're new to 2009Scape, check out our <a
href="./site/game_guide/how_do_i_get_started0.html">Getting Started Guide</a>!</div> href="./site/game_guide/how_do_i_get_started0.html">Getting Started Guide</a>!</div>
</div> </div>
<div class="feature"> <div class="feature">
<a href="./services/m=hiscore/hiscores.html?world=2"><img <a href="./services/m=hiscore/hiscores.html?world=2"><img
src="./site/img/2009img/main/home/feature_poll_icon.webp" alt="Hiscores" /></a> src="./site/img/2009img/main/home/feature_poll_icon.webp" width="57" height="57" alt="Hiscores" /></a>
<div class="featureTitle">Community Hiscores</div> <div class="featureTitle">Community Hiscores</div>
<div class="featureDesc">See who's on top &amp; check your skill levels! View the <a <div class="featureDesc">See who's on top &amp; check your skill levels! View the <a
href="./services/m=hiscore/hiscores.html?world=2">Hiscores</a>.</div> href="./services/m=hiscore/hiscores.html?world=2">Hiscores</a>.</div>
</div> </div>
<div class="feature"> <div class="feature">
<a href="https://gitlab.com/2009scape/2009scape/-/issues"><img <a href="https://gitlab.com/2009scape/2009scape/-/issues"><img
src="./site/2009scape-resources/img/icons/feature-bugreport.webp" alt="Report a Bug" /></a> src="./site/2009scape-resources/img/icons/feature-bugreport.webp" width="57" height="57" alt="Report a Bug" /></a>
<div class="featureTitle">Report a Bug</div> <div class="featureTitle">Report a Bug</div>
<div class="featureDesc">Found a bug in game? Send us a <a href="https://gitlab.com/2009scape/2009scape/-/issues" <div class="featureDesc">Found a bug in game? Send us a <a href="https://gitlab.com/2009scape/2009scape/-/issues"
target="_blank">Bug report</a>!</div> target="_blank">Bug report</a>!</div>
</div> </div>
<div class="feature"> <div class="feature">
<a href="./site/classicapplet/playclassic.html"><img <a href="./site/classicapplet/playclassic.html"><img
src="./site/2009scape-resources/img/icons/feature-openrsc.webp" alt="Open RuneScape Classic" /></a> src="./site/2009scape-resources/img/icons/feature-openrsc.webp" width="57" height="57" alt="Open RuneScape Classic" /></a>
<div class="featureTitle">OpenRSC</div> <div class="featureTitle">OpenRSC</div>
<div class="featureDesc">Experience RuneScape Classic in its original glory: <a <div class="featureDesc">Experience RuneScape Classic in its original glory: <a
href="./site/classicapplet/playclassic.html">OpenRSC</a>!</div> href="./site/classicapplet/playclassic.html">OpenRSC</a>!</div>
</div> </div>
<div class="feature"> <div class="feature">
<a target="_blank" href="https://github.com/2009scape/2009Scape-mobile#readme"><img src="./site/2009scape-resources/img/icons/aog_icon.jpeg" <a target="_blank" href="https://github.com/2009scape/2009Scape-mobile#readme"><img src="./site/2009scape-resources/img/icons/aog_icon.jpeg"
alt="AOG" /></a> width="57" height="57" alt="AOG" /></a>
<div class="featureTitle">2009Scape Mobile</div> <div class="featureTitle">2009Scape Mobile</div>
<div class="featureDesc">Enjoy our project on the go with the Android <a target="_blank" href="https://github.com/2009scape/2009Scape-mobile#readme"> <div class="featureDesc">Enjoy our project on the go with the Android <a target="_blank" href="https://github.com/2009scape/2009Scape-mobile#readme">
mobile client!</a> mobile client!</a>
@ -58,18 +59,18 @@ title: A free & open-source remake of 2009 era RuneScape
<!--GAME GUIDE--> <!--GAME GUIDE-->
<DIV id=articles> <DIV id=articles>
<DIV class=narrowHeader><IMG alt="Game Guide" <DIV class=narrowHeader><IMG alt="Game Guide"
src="./site/2009scape-resources/img/titles/title-gameguide.webp"> src="./site/2009scape-resources/img/titles/title-gameguide.webp" width="162" height="12">
</DIV> </DIV>
<DIV class=section> <DIV class=section>
<DIV class=articlesBody> <DIV class=articlesBody>
<DIV class=articlesTitle> <DIV class=articlesTitle>
<!--When weekly article script is implemented, switch image to 'title-article-weekly.webp'--> <!--When weekly article script is implemented, switch image to 'title-article-weekly.webp'-->
<img alt="Featured Article" src="./site/2009scape-resources/img/titles/title-article-featured.webp"> <img alt="Featured Article" src="./site/2009scape-resources/img/titles/title-article-featured.webp" width="164" height="9">
</DIV> </DIV>
<DIV class=aowBody> <DIV class=aowBody>
<DIV class=aowHeight> <DIV class=aowHeight>
<DIV class=aowImage><A href="https://discord.gg/YY7WSttN7H"><IMG alt="" <DIV class=aowImage><A href="https://discord.gg/YY7WSttN7H"><IMG alt=""
src="./site/img/2009img/main/kbase/aow_icons/discord-promo.webp"></A></DIV> src="./site/img/2009img/main/kbase/aow_icons/discord-promo.webp" width="249" height="87"></A></DIV>
<P class=aowTitle>Join us on Discord</P> <P class=aowTitle>Join us on Discord</P>
<P> 2009Scape has an active community on our Discord Server. Discuss the game, ask questions, or just hang out! <P> 2009Scape has an active community on our Discord Server. Discuss the game, ask questions, or just hang out!
<a href="https://discord.gg/YY7WSttN7H">Join Now!</a> <a href="https://discord.gg/YY7WSttN7H">Join Now!</a>
@ -86,7 +87,7 @@ title: A free & open-source remake of 2009 era RuneScape
<!--MAIN BUTTON: PLAY/CLIENT DOWNLOAD--> <!--MAIN BUTTON: PLAY/CLIENT DOWNLOAD-->
<a href="./site/game_guide/how_do_i_get_started0.html" id="playbutton"> <a href="./site/game_guide/how_do_i_get_started0.html" id="playbutton">
<img src="./site/2009scape-resources/img/buttons/btn-play.webp" <img src="./site/2009scape-resources/img/buttons/btn-play.webp"
alt="Play 2009Scape" /> alt="Play 2009Scape" width="480" height="151"/>
<span class="shim"></span> <span class="shim"></span>
</a> </a>
<div id="recentnews"> <div id="recentnews">
@ -95,7 +96,7 @@ title: A free & open-source remake of 2009 era RuneScape
<div class="left"> <div class="left">
<div class="right"> <div class="right">
<div class="plaque"> <div class="plaque">
<img src="./site/2009scape-resources/img/titles/title-latestupdates.webp" alt="Latest Updates" /> <img src="./site/2009scape-resources/img/titles/title-latestupdates.webp" width="162" height="12" alt="Latest Updates" />
</div> </div>
</div> </div>
</div> </div>
@ -126,7 +127,7 @@ title: A free & open-source remake of 2009 era RuneScape
{% assign promoImage = "./site/2009scape-resources/img/updates/update-monthly-" | append: page.date | date: './site/2009scape-resources/img/updates/update-monthly-%m.webp' %} {% assign promoImage = "./site/2009scape-resources/img/updates/update-monthly-" | append: page.date | date: './site/2009scape-resources/img/updates/update-monthly-%m.webp' %}
{% endif %} {% endif %}
<a class="newsImage" href="{{ page.url | prepend: site.baseurl }}"><img clalt='' <a class="newsImage" href="{{ page.url | prepend: site.baseurl }}"><img clalt=''
src="{{promoImage}}"></a> src="{{promoImage}}" width=215" height="137"></a>
<!--UPDATE CONTENT TEASER--> <!--UPDATE CONTENT TEASER-->
<p> {{ page.excerpt | truncate: 350 }} <p> {{ page.excerpt | truncate: 350 }}
<!--READ MORE LINK--> <!--READ MORE LINK-->
@ -151,7 +152,7 @@ title: A free & open-source remake of 2009 era RuneScape
GENERIC // generic1.webp, generic2.webp, generic3.webp GENERIC // generic1.webp, generic2.webp, generic3.webp
SETTINGS & TWEAKS // settings1.webp, settings2.webp, settings3.webp SETTINGS & TWEAKS // settings1.webp, settings2.webp, settings3.webp
OTHER // account.webp, award.webp, bugfix.webp, combat.webp, hiscores.webp, money,webp, random.webp, website.webp --> OTHER // account.webp, award.webp, bugfix.webp, combat.webp, hiscores.webp, money,webp, random.webp, website.webp -->
<img src="./site/2009scape-resources/img/updates/icons/generic1.webp" /> <img src="./site/2009scape-resources/img/updates/icons/generic1.webp" width="65" height="70"/>
<!--UPDATE CONTENT TEASER--> <!--UPDATE CONTENT TEASER-->
<p>{{page.excerpt | truncate: 280 }} <p>{{page.excerpt | truncate: 280 }}
@ -172,7 +173,7 @@ title: A free & open-source remake of 2009 era RuneScape
<div class="left"> <div class="left">
<div class="right"> <div class="right">
<div class="plaque"> <div class="plaque">
<img src="./site/2009scape-resources/img/titles/title-moreupdates.webp" alt="More Updates" /> <img src="./site/2009scape-resources/img/titles/title-moreupdates.webp" width="162" height="12" alt="More Updates" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -587,7 +587,7 @@ en, English
Conditions</a> and <a href="../../site/privacy/privacy.html">Privacy Policy</a>. Conditions</a> and <a href="../../site/privacy/privacy.html">Privacy Policy</a>.
</div> </div>
<a class="jagexlink" href="/"> <a class="jagexlink" href="/">
<img src="./../../site/2009scape-resources/img/branding/logo-footer-dark.webp" alt="2009Scape" /> <img src="./../../site/2009scape-resources/img/branding/logo-footer-dark.webp" width="110" height="33" alt="2009Scape" />
</a> </a>
<br class="clear" /> <br class="clear" />
</div> </div>

View File

@ -85,7 +85,7 @@ new_subcat=add_subcat(4, 5, "Postbag from the Hedge", -1 == 5);new_subcat=add_su
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">
@ -217,7 +217,7 @@ This entire website is getting a massive overhaul and this page will change. If
Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br /> Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br />
</div> </div>
<a class="jagexlink" href="/"> <a class="jagexlink" href="/">
<img src="../2009scape-resources/img/branding/logo-footer-dark.webp" alt="2009Scape" /> <img src="../2009scape-resources/img/branding/logo-footer-dark.webp" width="110" height="33" alt="2009Scape" />
</a> </a>
<br class="clear" /> <br class="clear" />
</div> </div>

View File

@ -56,7 +56,7 @@ English
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">
@ -648,7 +648,7 @@ English
Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br /> Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br />
</div> </div>
<a class="jagexlink" href="/"> <a class="jagexlink" href="/">
<img src="../2009scape-resources/img/branding/logo-footer-dark.webp" alt="2009Scape" /> <img src="../2009scape-resources/img/branding/logo-footer-dark.webp" width="110" height="33" alt="2009Scape" />
</a> </a>
<br class="clear" /> <br class="clear" />
</div> </div>

View File

@ -55,7 +55,7 @@ English
<div id="head"> <div id="head">
<div id="headBg"> <div id="headBg">
<div id="headOrangeTop"></div> <div id="headOrangeTop"></div>
<img id="banner" src="" alt="RuneScape"> <img id="banner" src="" alt="RuneScape" width="766" height="143">
<!--SCRIPT: MONTHLY BANNER--> <!--SCRIPT: MONTHLY BANNER-->
<script type="text/javascript"> <script type="text/javascript">
@ -226,7 +226,7 @@ English
Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br /> Conditions</a> and <a href="../privacy/privacy.html">Privacy Policy</a>.<br />
</div> </div>
<a class="jagexlink" href="/"> <a class="jagexlink" href="/">
<img src="../2009scape-resources/img/branding/logo-footer-dark.webp" alt="2009Scape" /> <img src="../2009scape-resources/img/branding/logo-footer-dark.webp" width="110" height="33" alt="2009Scape" />
</a> </a>
<br class="clear" /> <br class="clear" />
</div> </div>