initial commit - add files
|
|
@ -0,0 +1,16 @@
|
|||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"src/style/theme.css": "/style/theme.css",
|
||||
"src/style/scrollbar.css": "/style/scrollbar.css",
|
||||
"src/image": "/image"
|
||||
});
|
||||
eleventyConfig.setLiquidOptions({
|
||||
dynamicPartials: false,
|
||||
strictFilters: false
|
||||
});
|
||||
return {
|
||||
markdownTemplateEngine: "liquid",
|
||||
input: "src",
|
||||
output: "_site"
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
package.json
|
||||
README.md
|
||||
CHANGELOG.md
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
_site/
|
||||
node_modules/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
birds:
|
||||
- robin
|
||||
- finch
|
||||
- sparrow
|
||||
---
|
||||
|
||||
{% include header.liquid %}
|
||||
|
||||
<div id="flex">
|
||||
<!-- Sidebar Content -->
|
||||
{% include sidebar.liquid %}
|
||||
<!-- End Sidebar -->
|
||||
|
||||
<main>
|
||||
{{ content }}
|
||||
</main>
|
||||
|
||||
</div> <!-- Flex -->
|
||||
|
||||
{% include footer.liquid %}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<footer id="footer">CC0 Public Domain, 2022</footer>
|
||||
</div> <!-- container -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="style/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="headerArea">
|
||||
<div id="header"></div>
|
||||
{% include nav.liquid %}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ content }}
|
||||
<p>{{ disclaimer }}</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
/* 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('/* replace with header from game */');
|
||||
--body-bg-image: url('image/purplegalaxy.png');
|
||||
|
||||
/* 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 */
|
||||
|
||||
/* 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: #ED64F5;
|
||||
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: #5e4e8c;
|
||||
/* 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: #13092D;
|
||||
/* 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: #241445;
|
||||
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: #43256E;
|
||||
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;
|
||||
}
|
||||
|
||||
ul.nobull {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="recruitment.html">Recruitment</a></li>
|
||||
<li><a href="leadership.html">Leadership</a></li>
|
||||
<li><a href="resources.html">Resources</a></li>
|
||||
<li><a href="https://na.finalfantasyxiv.com/lodestone/freecompany/9232238498621316564/">Lodestone</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Inspiration taken from cameronsworld.net, a great site. I made the scrollbar buttons myself. You can use this on your site. */
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #000;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX////AwMCU81DAAAAADElEQVQIHWNoYHAAAAHEAMEKQ169AAAAAElFTkSuQmCC);
|
||||
background-size: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: silver;
|
||||
border-left: ridge 2px #fff;
|
||||
border-top: ridge 2px #fff;
|
||||
border-right: ridge 2px grey;
|
||||
border-bottom: ridge 2px grey;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: darkgrey;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
background-position: -45px 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
background-position: 0 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
background-position: -15px 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
background-position: -30px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<aside id="leftSidebar">
|
||||
<h2>Basic Information</h2>
|
||||
<div class="box">
|
||||
<p>Here's some basic info at a glance about the FC</p>
|
||||
<ul style="padding-left:10px;">
|
||||
<li>Located in the Aether Datacenter, on the Gilgamesh server</li>
|
||||
<li>21+ But not NSFW</li>
|
||||
<li>We are Allied with the Maelstrom</li>
|
||||
<li>Our Discord can be found <a href="https://discord.gg/gXaFA4GqSc" target="_blank">Here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2>Affiliates and Friends</h2>
|
||||
<ul>
|
||||
<li><i>The Collab</i> Discord - invite only</li>
|
||||
<li>The <i>Aether Hunts</i> Discord - <a href="https://aetherhunts.net/">Website Here</a></li>
|
||||
<li><i><a href="https://www.thebalanceffxiv.com/">The Balance</a></i> Website and Discord</li>
|
||||
</ul>
|
||||
<ul class="nobull">
|
||||
<li><a href="https://discord.gg/gXaFA4GqSc" target="_blank"><img src="image/88x31/discordserver.gif"></a></li>
|
||||
<li><img src="image/88x31/got_html.gif"></li>
|
||||
<li><img src="image/88x31/neocities_button.gif"></li>
|
||||
<li><a href="https://code.visualstudio.com/" target="_blank"><img src="image/88x31/vscbutton.gif"></a></li>
|
||||
<li><a href="https://yesterweb.org/" target="_blank"><img src="https://yesterweb.org/img/button.png" alt="a button that says Yesterweb Reclaim The Net" /></a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
permalink: theme.css
|
||||
---
|
||||
{% include main.css %}
|
||||
{% include scrollbar.css %}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "Ashes-Site",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"corepack": "^0.23.0",
|
||||
"npm": "^10.2.4",
|
||||
"liquidjs": "^10.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^2.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
title: About
|
||||
permalink: about.html
|
||||
---
|
||||
|
||||
<h1>About the <i>Ashes of Amethyst</i> Free Company</h1>
|
||||
<p>
|
||||
<strong>Ashes of Amethyst</strong> is a Free Company on the Gilgamesh server in the Aether Datacenter of <i>Final Fantasy XIV</i>. Our charter was started on <time datetime="2024-01-07">January 7th, 2024</time>, and we officially "incorporated" as a Free Company on <time datetime="2024-01-08">January 8th, 2024</time>. We were founded by Nexan, who goes by <i>Mahosurn Aesotth</i>, Maho for short, in-game, after their previous Free Company was disbanded without warning, leaving them and several of their friends out in the cold (it was early January, after all).<br>
|
||||
<em>What does <strong>Ashes of Amethyst</strong> stand for?</em><br>
|
||||
Currently, our Free Company stands mostly for friends who were displaced by the disbanding of that former Free Company, but we are looking to expand, make new friends, and bring people together. While we aim to be a 21+ Free Company and group, that does primarily apply to attitude, language, and emotional maturity. We do NOT intend to be an NSFW group, and while we may make some exceptions to our rule of "21+ years old" at times, it will be on a case-by-case basis.
|
||||
</p>
|
||||
<h3>Rules at a Glance</h3>
|
||||
<p>
|
||||
While we do have our rules listed on our Discord server, here's a quick glance over the rules as they are.<br>
|
||||
• <strong>Respect other members of the community</strong><br>
|
||||
Whether those people are of our Free Company or of another, be respectful. Additionally, please do not talk down about another FC.<br>
|
||||
• <strong>Read the pins and stay relevant</strong><br>
|
||||
Please stay on-topic in Discord. In-game, if a topic is becoming something that should be taken to Direct Messages or party chat, take it there. <br>
|
||||
• <strong>Keep NSFW Topics out</strong><br>
|
||||
Do not post NSFW pictures, RP logs, or other objectionable content to the Discord server, and please keep in mind that while we are a 21+ community, we are not pornographic or overtly lewd. While some NSFW discussion may take place in voice chat, please use your discretion on when that is appropriate. We are all adults here, even if we don't always act like it.<br>
|
||||
• <strong>Don't be afraid to ask for help</strong><br>
|
||||
We are here to help, so if you're new, feel free to reach out asking for help with learning something, if you need people for a dungeon, or anything else. Please keep in mind, we are not your therapists and you should try to keep asking for help limited to the game.
|
||||
</p>
|
||||
<h3>What do we intend to do as an FC?</h3>
|
||||
<p>
|
||||
In the short term, we want to build up from the remnants of our old FC and work to bring people together again.
|
||||
<br>For longer-term plans, we want to become a place for new players, old players, and anyone in-between to gather, have fun playing Final Fantasy XIV, and also have experiences outside of the game with activities like Movie Nights, board games, and other activities.
|
||||
</p>
|
||||
<h3>What We Currently Have</h3>
|
||||
<p>
|
||||
At the moment, our small Free Company only has a few things. We are currently <strong>Respected</strong> with the Maelstrom, and are working our way to ranking up enough to possibly purchase a house, get a workshop started, and make some money. We also only have a few members, so we are looking to expand over time. However, being small relatively tight-knit, we do want to try and recruit friendly people who mesh well with the rest of the crew.
|
||||
</p>
|
||||
<h3>Entitlements:</h3>
|
||||
<ul>
|
||||
<li>Rank 1: Company Chest</li>
|
||||
<li>Rank 2: Company Crest Customization</li>
|
||||
<li>Rank 3: Chest Expansion</li>
|
||||
<li>Rank 4: Gear Customization (put the company crest on certain pieces of armor)</li>
|
||||
<li>Rank 5: Company Actions</li>
|
||||
<li>Rank 6: Land Acquisition (ability to bid on housing plots)</li>
|
||||
<li>Rank 7: Crest Expansion</li>
|
||||
<li><strike>Rank 8: Action Expansion (increases maximum number of active and inactive actions)</strike></li>
|
||||
<li><strike>Rank 10: Chest Expansion 2</strike></li>
|
||||
<li><strike>Rank 12: Action Expansion 2</strike></li>
|
||||
<li><strike>Rank 15: Chest Expansion 3</strike></li>
|
||||
<li><strike>Rank 18: Action Expansion 3</strike></li>
|
||||
<li><strike>Rank 20: Action Expansion 4</strike></li>
|
||||
<li><strike>Rank 30: Rank-ups Complete!</strike></li>
|
||||
</ul>
|
||||
<h3>Company Chest</h3>
|
||||
<p>
|
||||
This will be expanded upon over time, but as of now, the company chest is unrestricted. This does not mean you can take advantage of the chest to use it as your own personal storage, or that you can take anything out of it that you wish. Below is a small list of how we wish it to be used.
|
||||
<ul>
|
||||
<li><strong>Items 1:</strong> Anything here is free for the taking. If you don't want someone to take items, don't put them in this tab.</li>
|
||||
<li><strong>Items 2:</strong> If you have furniture you don't want or need, place it here. This tab is for when we get a house. Consider this a donation bin of sorts.</li>
|
||||
<li><strong>Items 3:</strong> This is for crafting materials for the house. Anything we cannot purchase, or that we would need to make with an FC workshop, should go here.</li>
|
||||
<li><strong>Crystals:</strong> Similar to Tabs 1 and 2, this is a donation bin for anyone who needs crystals to craft with.</li>
|
||||
<li><strong>Gil:</strong> For the time being, this is a donation bin for Gil that we can use to buy a house with. Once we are able to enter the housing lottery as a Free Company, we will try to go for a small house, so we need about 4 Million Gil for the plot, and another 450,000 Gil for the construction permit. All-told, approximately 4.5 Million Gil is required, and while I know there are some people with that much, I would like to make this a team effort.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>Source for this website is available at [insert link here]</p>
|
||||
|
After Width: | Height: | Size: 318 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 605 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
title: Ashes of Amethyst
|
||||
permalink: index.html
|
||||
---
|
||||
|
||||
<h1>Welcome to the <i>Ashes of Amethyst</i> Free Company, on the Gilgamesh Server</h1>
|
||||
<p><strong>Please read this first!</strong></p>
|
||||
<p>What will you find here? Mostly some basic information about our Free Company, plus we will occasionally update it with some details about our current ongoing projects, events, and some resources we find helpful or interesting</p>
|
||||
<h3>Freshly Updated</h3>
|
||||
<p>
|
||||
<ul>
|
||||
<li><a href="about.html">About Page</a></li>
|
||||
<li><a href="recruitment.html">Recruitment Page</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
title: Ashes of Amethyst
|
||||
permalink: leadership.html
|
||||
---
|
||||
|
||||
<h1>Ashes of Amethyst Staff and Leadership</h1>
|
||||
<p>This page will be a list, and small profile, for the leadership of the Free Company</p>
|
||||
<hr class="separator">
|
||||
<h3>Nexan</h3>
|
||||
<div class="member">
|
||||
<div class="mem-img">
|
||||
<img src="image/member/mahosurn.jpg" float="left" width="200px">
|
||||
</div>
|
||||
<div class="mem-text">
|
||||
Nexan, known in-game as <a href="https://na.finalfantasyxiv.com/lodestone/character/31198609/" target="_blank"> Mahosurn Aesotth</a>, is the Leader of the Ashes of Amethyst. They have been playing FFXIV since July of 2020, and their character is a Keeper of the Moon Miqo'te who is typically seen as a Red Mage. They started this Free Company in response to their previous Free Company being dissolved without warning and wanting a new place for some of their friends to be in a safe space, as well as wanting somewhere for those interested to hang out and play games.
|
||||
</div>
|
||||
</div>
|
||||
<hr class="separator">
|
||||
<h2>More to come...</h2>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
/* 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('/* replace with header from game */');
|
||||
--body-bg-image: url('image/purplegalaxy.png');
|
||||
|
||||
/* 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 */
|
||||
|
||||
/* 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: #ED64F5;
|
||||
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: #5e4e8c;
|
||||
/* 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: #13092D;
|
||||
/* 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: #241445;
|
||||
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: #43256E;
|
||||
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;
|
||||
}
|
||||
|
||||
ul.nobull {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
title: Ashes of Amethyst
|
||||
permalink: recruitment.html
|
||||
---
|
||||
|
||||
<h1>Ashes of Amethyst Recruitment</h1>
|
||||
<p>
|
||||
<strong>What are we looking for?</strong>
|
||||
<br />Here are the Jobs and Classes we are currently recruiting for. If you don't know what the job is by the icon, hover over it for a tooltip!
|
||||
</p>
|
||||
<p>
|
||||
<strong>DOH/DOL</strong>
|
||||
<br><img src="image/icons/dohdol/Alchemist.png" width="64px" title="Alchemist">
|
||||
<img src="image/icons/dohdol/Armorer.png" width="64px" title="Armorer">
|
||||
<img src="image/icons/dohdol/Blacksmith.png" width="64px" title="Blacksmith">
|
||||
<img src="image/icons/dohdol/Carpenter.png" width="64px" title="Carpenter">
|
||||
<img src="image/icons/dohdol/Culinarian.png" width="64px" title="Culinarian">
|
||||
<img src="image/icons/dohdol/Goldsmith.png" width="64px" title="Goldsmith">
|
||||
<img src="image/icons/dohdol/Leatherworker.png" width="64px" title="Leatherworker">
|
||||
<img src="image/icons/dohdol/Weaver.png" width="64px" title="Weaver">
|
||||
<br><img src="image/icons/dohdol/Botanist.png" width="64px" title="Botanist">
|
||||
<img src="image/icons/dohdol/Miner.png" width="64px" title="Miner">
|
||||
<img src="image/icons/dohdol/Fisher.png" width="64px" title="Fisher">
|
||||
</p>
|
||||
<p>
|
||||
<strong>Combat Jobs</strong>
|
||||
<br><!-- Tanks -->
|
||||
<img src="image/icons/jobs/Paladin.png" width="64px" title="Paladin">
|
||||
<img src="image/icons/jobs/Warrior.png" width="64px" title="Warrior">
|
||||
<img src="image/icons/jobs/Dark_Knight.png" width="64px" title="Dark Knight">
|
||||
<img src="image/icons/jobs/Gunbreaker.png" width="64px" title="Gunbreaker">
|
||||
<br> <!-- Healers -->
|
||||
<img src="image/icons/jobs/White_Mage.png" width="64px" title="White Mage">
|
||||
<img src="image/icons/jobs/Scholar.png" width="64px" title="Scholar">
|
||||
<img src="image/icons/jobs/Astrologian.png" width="64px" title="Astrologian">
|
||||
<img src="image/icons/jobs/Sage.png" width="64px" title="Sage">
|
||||
<br><!-- Melee DPS -->
|
||||
<img src="image/icons/jobs/Dragoon.png" width="64px" title="Dragoon">
|
||||
<img src="image/icons/jobs/Monk.png" width="64px" title="Monk">
|
||||
<img src="image/icons/jobs/Ninja.png" width="64px" title="Ninja">
|
||||
<img src="image/icons/jobs/Samurai.png" width="64px" title="Samurai">
|
||||
<img src="image/icons/jobs/Reaper.png" width="64px" title="Reaper">
|
||||
<br><!-- Ranged Phsyical DPS -->
|
||||
<img src="image/icons/jobs/Bard.png" width="64px" title="Bard">
|
||||
<img src="image/icons/jobs/Machinist.png" width="64px" title="Machinist">
|
||||
<img src="image/icons/jobs/Dancer.png" width="64px" title="Dancer">
|
||||
<br><!-- Ranged Magical DPS -->
|
||||
<img src="image/icons/jobs/Black_Mage.png" width="64px" title="Black Mage">
|
||||
<img src="image/icons/jobs/Summoner.png" width="64px" title="Summoner">
|
||||
<img src="image/icons/jobs/Red_Mage.png" width="64px" title="Red Mage">
|
||||
<img src="image/icons/jobs/Blue_Mage.png" width="64px" title="Blue Mage">
|
||||
</p>
|
||||
<p>
|
||||
<strong>Content</strong>
|
||||
<br>This is the content we are looking to run with people.
|
||||
<br>MSQ, Dungeons, Treasure Maps, Blue Mage Academy (learning spells), FATE Farming, Variant Dungeons, PVP, Wonderous Tales, Hunt Trains and S-Ranks, Gold Saucer, Adventuring Forays (Eureka & Bozja), Deep Dungeons (Palace, Heaven, Orthos). We are also looking to potentially do unsynced high-level content for farming (mounts and minion farming, primarily), as well as activities outside of the game, such as Tabletop Simulator, Minecraft, and other games.
|
||||
</p>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: base.liquid
|
||||
title: Ashes of Amethyst
|
||||
permalink: resources.html
|
||||
---
|
||||
|
||||
<h1>Welcome to my Layout Maker!</h1>
|
||||
<p>This page is for links to, and examples of, resources that we, as a Free Company, find useful. There will be links to websites, webpages, guides, and more.</p>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Inspiration taken from cameronsworld.net, a great site. I made the scrollbar buttons myself. You can use this on your site. */
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #000;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX////AwMCU81DAAAAADElEQVQIHWNoYHAAAAHEAMEKQ169AAAAAElFTkSuQmCC);
|
||||
background-size: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: silver;
|
||||
border-left: ridge 2px #fff;
|
||||
border-top: ridge 2px #fff;
|
||||
border-right: ridge 2px grey;
|
||||
border-bottom: ridge 2px grey;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: darkgrey;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
background-position: -45px 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
background-position: 0 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
background-position: -15px 0;
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
background-position: -30px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
/* 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('/* replace with header from game */');
|
||||
--body-bg-image: url('../image/purplegalaxy.png');
|
||||
|
||||
/* 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 */
|
||||
|
||||
/* 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: #ED64F5;
|
||||
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: #5e4e8c;
|
||||
/* 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: #13092D;
|
||||
/* 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: #241445;
|
||||
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: #43256E;
|
||||
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;
|
||||
}
|
||||
|
||||
ul.nobull {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.member {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 250px;
|
||||
}
|
||||
.text {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||