137 lines
2.3 KiB
CSS
137 lines
2.3 KiB
CSS
body
|
|
{
|
|
/*part3*/
|
|
background-color: #9999ff;
|
|
|
|
margin: 0px;
|
|
padding: 0px;
|
|
|
|
/*Move navbar to the bottom and use flex to reorder it to the top, so it isn't as intrusive without CSS.
|
|
Thanks to @heftig:archlinux.org (matrix) for showing me this.*/
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav
|
|
{
|
|
/*Positioning and no-scroll tricks*/
|
|
position: sticky;
|
|
top: 0px;
|
|
|
|
/*Stupid fix for a stupid bug*/
|
|
left: 0px;
|
|
|
|
width: 100%;
|
|
border: 1px solid;
|
|
display: inline-block;
|
|
|
|
background-color: #9999ff;
|
|
order: 1; /*flex thing*/
|
|
}
|
|
|
|
main
|
|
{
|
|
/*Another stupid fix for another stupid bug.
|
|
If you use position:fixed, it just vanishes from its original spot
|
|
and there's no standard syntax for telling it to not do this;
|
|
to leave a blank space where it was instead.*/
|
|
/*Yay, fixed by position:sticky*/
|
|
/*margin-top: 40px;*/
|
|
/*Hmm: https://www.w3schools.com/cssref/func_attr.asp*/
|
|
|
|
/* Made in 2 minutes (including login+open) to demonstrate efficiency
|
|
vs advanced libraries. Make of that what you will. */
|
|
background-color: #cccccc;
|
|
width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border: 2px solid;
|
|
text-align: center;
|
|
order: 2; /*flex thing*/
|
|
}
|
|
|
|
main *
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
ul.nav
|
|
{
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li.navpiece
|
|
{
|
|
/* Another stupid fix for YET ANOTHER stupid bug. This is how you vertically align text in an element.*/
|
|
max-width:100px;
|
|
display:table;
|
|
float:left;
|
|
position:relative;
|
|
}
|
|
|
|
a.navpiece/*, div.navpiece Apparently this wasn't doing anything either.*/
|
|
{
|
|
text-decoration-line:none;
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align:middle;
|
|
font-size: 16px; /* This wasn't actually doing anything, apparently.*/
|
|
padding: 10px;
|
|
|
|
/*part1*/
|
|
color: #0000ff;
|
|
background-color: #cccccc;
|
|
}
|
|
|
|
/*a,a:hover
|
|
{
|
|
style: none;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
I might need this again later, but for now, it's okay...*/
|
|
|
|
a.navpiece:hover
|
|
{
|
|
/*part2*/
|
|
background-color: #0000ff;
|
|
color: #cccccc;
|
|
}
|
|
|
|
li.navpiece>div
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
top:100%;
|
|
left:0%;
|
|
width:100%;
|
|
text-align:center;
|
|
}
|
|
|
|
li.navpiece:hover>div
|
|
{
|
|
display:inline;
|
|
}
|
|
|
|
li.right
|
|
{
|
|
float:right;
|
|
}
|
|
|
|
h1
|
|
{
|
|
text-align:center;
|
|
}
|
|
|
|
.foot
|
|
{
|
|
background-color: #cccccc;
|
|
float: right;
|
|
margin-left: auto;
|
|
margin-right: 0; /* Need to set this for flex thing*/
|
|
border: 2px solid;
|
|
text-align: center;
|
|
order: 3; /*flex thing*/
|
|
} |