mirror of
https://github.com/rvtr/rmc_website.git
synced 2025-10-31 13:31:21 -04:00
261 lines
11 KiB
HTML
261 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Stylizing The Site | rmc's site</title>
|
|
<link rel="icon" type="image/png" href="/icon.png"/>
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/styledsi.css">
|
|
<link id="pagestyle" rel="stylesheet" type="text/css" href="">
|
|
<link rel="alternate" type="application/atom+xml" href="https://ianskinner1982.github.io/feed.xml">
|
|
<script src="/assets/bootstrap/js/bootstrap.bundle.js"></script>
|
|
<script src="/assets/js/main.js"></script>
|
|
|
|
<meta property="og:title" content="Stylizing The Site">
|
|
|
|
<meta property="og:locale" content="en_US">
|
|
<meta name="description" content="Stylizing The Site | rmc's site">
|
|
<meta property="og:description" content="Stylizing The Site | rmc's site">
|
|
<link rel="canonical" href="https://ianskinner1982.github.io">
|
|
<meta property="og:url" content="https://ianskinner1982.github.io">
|
|
<meta property="og:site_name" content="rmc's site">
|
|
|
|
<meta property="og:image" content="https://ianskinner1982.github.io/icon.png">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
background-image: url('/assets/dsi/background.jpg');
|
|
}
|
|
.nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: 3.5%;
|
|
/* overflow: hidden; */
|
|
}
|
|
.navstd {
|
|
float: left;
|
|
}
|
|
.navalt {
|
|
float: right;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.imageOne {
|
|
z-index: 0;
|
|
}
|
|
.imageTwo {
|
|
z-index: 1;
|
|
}
|
|
.imageThree {
|
|
z-index: 2;
|
|
}
|
|
.image {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.navimgoverlay {
|
|
opacity: 0.0;
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: .6vw;
|
|
width: 6vw;
|
|
height: auto;
|
|
}
|
|
.navimgoverlay:hover {
|
|
opacity: 1.0;
|
|
}
|
|
.navimg {
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: .6vw;
|
|
width: 6vw;
|
|
height: auto;
|
|
}
|
|
.navicon {
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: 2.1vw;
|
|
padding-left: 1.38vw;
|
|
width: 3.2vw;
|
|
height: auto;
|
|
}
|
|
.navedge {
|
|
text-align: center;
|
|
float: left;
|
|
margin: 1%;
|
|
width: 1.5vw;
|
|
height: auto;
|
|
}
|
|
.navpadding li {
|
|
padding-top: 1.5%;
|
|
}
|
|
.image2 {
|
|
position: absolute;
|
|
border-color: #FFFFFF
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.titleimgoverlay {
|
|
margin: 0% 2% 0%;
|
|
opacity: 0.0;
|
|
text-align: center;
|
|
float: left;
|
|
width: 16vw;
|
|
height: auto;
|
|
}
|
|
.titleimgoverlay:hover {
|
|
opacity: 1.0;
|
|
}
|
|
.titleimg {
|
|
margin: 0% 2% 0%;
|
|
text-align: center;
|
|
float: left;
|
|
width: 16vw;
|
|
height: auto;
|
|
}
|
|
.titleedge {
|
|
text-align: center;
|
|
float: left;
|
|
margin: 1%;
|
|
width: 18vw;
|
|
height: auto;
|
|
}
|
|
.titlepadding li {
|
|
padding-top: 1.5%;
|
|
margin: 0% 2% 0%
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<div class="nav">
|
|
<nav>
|
|
<ul>
|
|
<li class="navedge"><img src="/assets/dsi/leftbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
|
|
<div class="navpadding">
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/home.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/blog"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/twldevapps.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/aaaaaaa/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/devshop.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/gaming/htmls/DEBUG/startup.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/discord.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="https://discord.gg/XZxxZngwDQ"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/github.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="https://github.com/IanSkinner1982/ianskinner1982.github.io/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
<li class="navedge"><img src="/assets/dsi/rightbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div id="content-wrap">
|
|
<div class="text-center pt-3">
|
|
<h1>Stylizing The Site</h1>
|
|
<h3>2021-05-15</h3>
|
|
<h4>NinjaCheetah</h4>
|
|
<p><a href=/blog><- Back</a></p>
|
|
</div>
|
|
<div class="container">
|
|
<hr>
|
|
<p>So as you've probably noticed if you got this far on the site, we've finally added CSS. For a while (from the start of the website on January 29th, actually) it became a joke of sorts that this site had absolutely no styling. That was mainly because of how annoying CSS can be, and also how bad <a href="https://ninjacheetah.github.io">my other site that uses CSS looks.</a> <sub>Editor's note: this article was written before NinjaCheetah overhauled his site in 2022.</sub></p>
|
|
<p>What started me off on making this site look better was some free time I had during school just yesterday. I decided to open GIMP and just see if I could create some sort of banner. It ended up coming out really good (in my opinion at least) so I added it to the website. From there, I decided to try and add the nav bar I used on my old site to this one, but this time actually make it look good. From there, I didn't like that the banner and nav bar used Sans-Serif but the body used Times New Roman, so more CSS it was! Eventually, with the help of <a href="/members/ianskinner1982">IanSkinner1982</a>, we managed to get the banner and nav bar to stretch to the edges of the screen which greatly improved how it looked. All I did after that was add the GitHub and Discord link icons, and it was done! (also for the record I have no idea if this is in chronological order)</p>
|
|
<p>I woke up this morning and had an idea: more banners! So I created banners for the <a href="/programs/">Programs page<a> and the <a href="/members/">Members page</a>, which both also came out pretty good (again, in my opinion at least). So for now, I think that just about wraps up our website "renovation". We will of course still add new things, but there shouldn't be any major changes coming soon.</p>
|
|
<p>Sorry for the short article, but I felt like it would be better to at least say something about it than nothing.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<footer class="bg-light text-lg-start border-top align-items-center text-center" style="text-align:center;">
|
|
<div class="text-center p-3 align-items-center" style="font-size: 8px;">
|
|
Copyright © 2021-<span id="footerDate"></span> Ian M. Skinner <a href="/contactus" class="text-reset fw-bold">Contact me.</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</footer>
|
|
</html>
|