made structure better, both folder and how the js works
This commit is contained in:
@@ -310,5 +310,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
20
reviews.html
20
reviews.html
@@ -35,21 +35,29 @@
|
|||||||
<p><strong>Categories</strong></p>
|
<p><strong>Categories</strong></p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="gamereviews.html">Games</a>
|
<a href="reviews/warcraftreviews.html"
|
||||||
|
>The Warcraft Franchise</a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="moviereviews.html">Movies</a>
|
<a href="reviews/gamereviews.html">Games</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="tvreviews.html">TV/Series</a>
|
<a href="reviews/moviereviews.html">Movies</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="bookreviews.html">Books</a>
|
<a href="reviews/seriesreviews.html">TV/Series</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="comicreviews.html">Comics/Manga etc.</a>
|
<a href="reviews/bookreviews.html">Books</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="reviews/comicreviews.html"
|
||||||
|
>Comics/Manga etc.</a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -341,5 +349,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -50,6 +50,7 @@
|
|||||||
<a href="comicreviews.html">Comics/Manga etc.</a>
|
<a href="comicreviews.html">Comics/Manga etc.</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -341,5 +342,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
<a href="comicreviews.html">Comics/Manga etc.</a>
|
<a href="comicreviews.html">Comics/Manga etc.</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -341,5 +342,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
@@ -19,6 +19,11 @@
|
|||||||
<!-- MIDDLE !-->
|
<!-- MIDDLE !-->
|
||||||
<main>
|
<main>
|
||||||
<p><a href="../gamereviews.html">← Back to game reviews</a></p>
|
<p><a href="../gamereviews.html">← Back to game reviews</a></p>
|
||||||
|
<p>
|
||||||
|
<a href="../warcraftreviews.html"
|
||||||
|
>← Back to Warcraft reviews</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
|
||||||
<h1>World of Warcraft</h1>
|
<h1>World of Warcraft</h1>
|
||||||
<p><em>Last updated on: March 7, 2026</em></p>
|
<p><em>Last updated on: March 7, 2026</em></p>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</aside>
|
</aside>
|
||||||
<!-- MIDDLE !-->
|
<!-- MIDDLE !-->
|
||||||
<main>
|
<main>
|
||||||
<p><a href="reviews.html">← Back to all reviews</a></p>
|
<p><a href="../reviews.html">← Back to all reviews</a></p>
|
||||||
|
|
||||||
<h1>Game Reviews!</h1>
|
<h1>Game Reviews!</h1>
|
||||||
<p>
|
<p>
|
||||||
@@ -42,6 +42,7 @@
|
|||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -333,5 +334,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
<a href="comicreviews.html">Comics/Manga etc.</a>
|
<a href="comicreviews.html">Comics/Manga etc.</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -341,5 +342,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
<a href="comicreviews.html">Comics/Manga etc.</a>
|
<a href="comicreviews.html">Comics/Manga etc.</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h2>Review System</h2>
|
||||||
<p>
|
<p>
|
||||||
I find the modern 0-10 or 0-5 rating systems to be poorly
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
formatted, as people seem to think a 7/10 is okay, and that
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
@@ -341,5 +342,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="components.js"></script>
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
</body>
|
</body>
|
||||||
404
reviews/warcraftreviews.html
Normal file
404
reviews/warcraftreviews.html
Normal file
@@ -0,0 +1,404 @@
|
|||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header" style="height: 188px"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<div id="navbar-container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="flex">
|
||||||
|
<!-- left !-->
|
||||||
|
<aside id="leftSidebar" style="margin-right: 10px">
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
src="https://counter.websiteout.com/js/30/0/0/0"
|
||||||
|
></script>
|
||||||
|
<div id="leftSidebarPlaceholder">
|
||||||
|
<p>This content failed to load, try enabling javascript</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- MIDDLE !-->
|
||||||
|
<main>
|
||||||
|
<p><a href="../reviews.html">← Back to all reviews</a></p>
|
||||||
|
|
||||||
|
<h1>Warcraft Reviews!</h1>
|
||||||
|
<p>
|
||||||
|
Obviously, my opinion is important, especially so on the
|
||||||
|
internet, so I'll be sharing my thoughts on all kinds of
|
||||||
|
things.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Of course, these are not just opinions, they are facts, and
|
||||||
|
as such, if you disagree, you are wrong. Objectively.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Some reviews may be detailed, while others might just have a
|
||||||
|
brief summary and score.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This will be a review of all things Warcraft, from games,
|
||||||
|
books to the movie. On this page, I'll also be discussing
|
||||||
|
common points people bring up when talking about the
|
||||||
|
franchise, especially the games, and giving my thoughts on
|
||||||
|
them.
|
||||||
|
<strong>Spoiler alert!</strong> Most of what people say,
|
||||||
|
does not have thought behind it.
|
||||||
|
</p>
|
||||||
|
<p><strong>List of reviews</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="reviews/world-of-warcraft.html"
|
||||||
|
>World of Warcraft</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2>"Classic Plus"</h2>
|
||||||
|
<p>
|
||||||
|
There's a lot of discussion among players, especially those
|
||||||
|
of a certain demographic, about how "Classic Plus" should be
|
||||||
|
made into a thing.<br>
|
||||||
|
However, there are a few major issues with the idea:
|
||||||
|
<ul>
|
||||||
|
<li>Monetization</li>
|
||||||
|
<li>Splitting of the playerbase</li>
|
||||||
|
<li>Lost content (related to monetization)</li>
|
||||||
|
</ul>
|
||||||
|
Lets start with the most relevant one, monetization.
|
||||||
|
<h3>Monetization</h3>
|
||||||
|
<p>
|
||||||
|
The first issue Classic Plus runs into, is monetization.
|
||||||
|
The game would have to make money somehow, in order to
|
||||||
|
sustain development costs, as developing new content is not free.<br>
|
||||||
|
There are a few options for monetization, but they all have issues of their own:<br>
|
||||||
|
Starting with the subscription model, which is what WoW currently uses,
|
||||||
|
this immediately fails, as most people who are asking for Classic Plus, are already subscribed
|
||||||
|
and making it a separate subscription would not only be hard to sell, but would emphasize the split in playerbase.<br>
|
||||||
|
Next, there's the buy to play model, which is what retail uses, you buy each expansion once,
|
||||||
|
however, this also has an issue, where if someone who plays retail also wants to play Classic Plus, they would have to buy
|
||||||
|
not only the retail expansion, but also the Classic Plus one, and assuming both games getting one expansion every 2 years,
|
||||||
|
that would be $50 a year on top of the existing subscription.<br>
|
||||||
|
Lastly, there is the cash shop model, which is also in retail,
|
||||||
|
but is already something the classic playerbase does not like,
|
||||||
|
and would not want to have in their Classic Plus.
|
||||||
|
This also links to the lost content issue, discussed more in depth later.
|
||||||
|
</p>
|
||||||
|
<h3>Splitting of the playerbase</h3>
|
||||||
|
<p>
|
||||||
|
Classic Plus would be the 5th version of WoW,
|
||||||
|
after retail, classic, classic era and classic Season of Discovery,
|
||||||
|
and this is not including Anniversary (Currently TBC) and hardcore classic.<br>
|
||||||
|
With so many versions of the game, the playerbase is already largely split up,
|
||||||
|
of course, a lot of retail players don't play classic actively, and vice versa,
|
||||||
|
but there are a lot of people who do. Classic is already split into multiple versions,
|
||||||
|
adding another would only make it worse.
|
||||||
|
</p>
|
||||||
|
<h3>Lost content</h3>
|
||||||
|
<p>
|
||||||
|
Lost content, what is that? Well, it's content that would be added to Classic Plus.
|
||||||
|
This would be content that does not currently exist in the game, be it either expansion
|
||||||
|
content, or cash shop content, these would be items that would likely have to be added to retail as well,
|
||||||
|
especially so if they are paid content. This means that in order to logically add content, they would have to make it work alongside retail,
|
||||||
|
because if you could only have the cash shop mount within Classic Plus, you would hesitate buying it since if you later want to only play retail, you would lose it.
|
||||||
|
The same goes for content added to retail, why go play Classic Plus if you don't have all the things you've paid for in there.
|
||||||
|
</p>
|
||||||
|
<h3>Afterword, and WoW 2</h3>
|
||||||
|
<p>
|
||||||
|
These issues on their own are enough to make Classic Plus a non-working idea, and the same could be applied to the idea of a WoW 2.
|
||||||
|
People are attached to their characters, collections, and the zones found in current WoW, which is why it would be hard to convince people to move to a new game,
|
||||||
|
unless you add the existing content to the new game, but then you run into the issue where you've just re-released the same game, and it's not WoW 2 anymore.
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Review System</h2>
|
||||||
|
<p>
|
||||||
|
I find the modern 0-10 or 0-5 rating systems to be poorly
|
||||||
|
formatted, as people seem to think a 7/10 is okay, and that
|
||||||
|
5/10 is bad. As such, my rating scale will be -5 to 5, with
|
||||||
|
0 being a neutral score.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A neutral score? How horrible, everything must either be
|
||||||
|
good or bad!!! No.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Some things are just, okay, and nothing special but nothing
|
||||||
|
bad either, and I think it's important to have those in
|
||||||
|
reviews too, I'd go so far as to say that something I rate a
|
||||||
|
0, is still worth consuming if one desires to, it's when we
|
||||||
|
go below 0 that I am already starting to recommend not
|
||||||
|
toucing it.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<!-- right !-->
|
||||||
|
<aside id="rightSidebar" style="margin-left: 10px">
|
||||||
|
<div id="rightSidebarPlaceholder">
|
||||||
|
<p>This content failed to load, try enabling javascript</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer id="footer" style="margin-top: 10px"></footer>
|
||||||
|
</div>
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
/* user styles */
|
||||||
|
|
||||||
|
/* styles are what change the color and sizes of stuff on your site. */
|
||||||
|
|
||||||
|
/* these are variables that are being used in the code
|
||||||
|
these tended to confuse some people, so I only kept
|
||||||
|
the images as variables */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
|
||||||
|
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* if you have the URL of a font, you can set it below */
|
||||||
|
/* feel free to delete this if it's not your vibe */
|
||||||
|
|
||||||
|
/* this seems like a lot for just one font and I would have to agree
|
||||||
|
but I wanted to include an example of how to include a custom font.
|
||||||
|
If you download a font file you can upload it onto your Neocities
|
||||||
|
and then link it! Many fonts have separate files for each style
|
||||||
|
(bold, italic, etc. T_T) which is why there are so many!
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Nunito;
|
||||||
|
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Nunito;
|
||||||
|
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Nunito;
|
||||||
|
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Nunito;
|
||||||
|
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031a;
|
||||||
|
/* you can delete the line below if you'd prefer to not use an image */
|
||||||
|
background-size: 65px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* below this line is CSS for the layout */
|
||||||
|
|
||||||
|
/* this is a CSS comment
|
||||||
|
to uncomment a line of CSS, remove the * and the /
|
||||||
|
before and after the text */
|
||||||
|
|
||||||
|
/* the "container" is what wraps your entire website */
|
||||||
|
/* if you want something (like the header) to be Wider than
|
||||||
|
the other elements, you will need to move that div outside
|
||||||
|
of the container */
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
/* this is the width of your layout! */
|
||||||
|
/* if you change the above value, scroll to the bottom
|
||||||
|
and change the media query according to the comment! */
|
||||||
|
margin: 0 auto;
|
||||||
|
/* this centers the entire page */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the area below is for all links on your page
|
||||||
|
EXCEPT for the navigation */
|
||||||
|
#container a {
|
||||||
|
color: #fcc3ff;
|
||||||
|
font-weight: bold;
|
||||||
|
/* if you want to remove the underline
|
||||||
|
you can add a line below here that says:
|
||||||
|
text-decoration:none; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffa6da;
|
||||||
|
/* header color here! */
|
||||||
|
height: 150px;
|
||||||
|
/* this is only for a background image! */
|
||||||
|
/* if you want to put images IN the header,
|
||||||
|
you can add them directly to the <div id="header"></div> element! */
|
||||||
|
background-image: var(--header-image);
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navigation section!! */
|
||||||
|
#navbar {
|
||||||
|
height: 40px;
|
||||||
|
background-color: #a0006b;
|
||||||
|
/* navbar color */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar ul {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar li {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navigation links*/
|
||||||
|
#navbar li a {
|
||||||
|
color: #ed64f5;
|
||||||
|
/* navbar text color */
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
/* this removes the underline */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navigation link when a link is hovered over */
|
||||||
|
#navbar li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this colors BOTH sidebars
|
||||||
|
if you want to style them separately,
|
||||||
|
create styles for #leftSidebar and #rightSidebar */
|
||||||
|
aside {
|
||||||
|
background-color: #a0006b;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
/* this makes the sidebar text slightly smaller */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this is the color of the main content area,
|
||||||
|
between the sidebars! */
|
||||||
|
main {
|
||||||
|
background-color: #bd2289;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092d;
|
||||||
|
/* background color for footer */
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
/* this centers the footer text */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: #ed64f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
/* this styles bold text */
|
||||||
|
color: #ed64f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this is just a cool box, it's the darker colored one */
|
||||||
|
.box {
|
||||||
|
background-color: #13092d;
|
||||||
|
border: 1px solid #ed64f5;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS for extras */
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BELOW THIS POINT IS MEDIA QUERY */
|
||||||
|
|
||||||
|
/* so you wanna change the width of your page?
|
||||||
|
by default, the container width is 900px.
|
||||||
|
in order to keep things responsive, take your new height,
|
||||||
|
and then subtrack it by 100. use this new number as the
|
||||||
|
"max-width" value below
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the order of the items is adjusted here for responsiveness!
|
||||||
|
since the sidebars would be too small on a mobile device.
|
||||||
|
feel free to play around with the order!
|
||||||
|
*/
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar ul {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="https://moonsbian.gay/components.js"></script>
|
||||||
|
</body>
|
||||||
Reference in New Issue
Block a user