/*
* Copyright (c) 2022. BraveGrumpy.
* Do not reproduce contents without express written permission from the author.
* You can get permission by cloning the repository https://github.com/bravegrumpy/bravegrumpy.website.git, and creating a new branch.
* Otherwise, you can email seacrestskylar@gmail.com, or join the discord server, linked within each page.
* The purpose of this website, is to practice responsive web design, and to publish creative writing.
*/
/************************************/
/* Including Fonts also used in the rest of BraveGrumpy */
/************************************/
/************************************/
/* Adding list of color names for easier future reference */
:root {
--light0: #ffffff;
--dark0: #000000;
--dark1: #144614;
--accent1A: #d2c8ff;
--accent1B: #beb4ff;
--accent2A: #d1dcff;
--accent2B: #a7bcff;
--boxShadowLight: rgba(0, 0, 0, 0.12);
--boxShadowDark: rgba(0, 0, 0, 0.24);
--base03: #002b36;
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--yellow: #b58900;
--orange: #cb4b16;
--red: #dc322f;
--magenta: #d33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
/*
background-color: var(--base03);
color: var(--base0);
a {
color: var(--blue);
}
a::visited {
color: var(--violet);
}
*/
}
/************************************/
/************************************/
/* Making sizing include padding */
* {
box-sizing: border-box;
}
/************************************/
/************************************/
/* Ensuring that rows are on a new line */
.row::after {
content: '';
clear: both;
display: table;
}
/************************************/
/************************************/
/* setting up columns to go left */
[class*='col-'] {
float: left;
padding: 15px;
}
/************************************/
/************************************/
/* Generic styling */
html {
font-family: 'Lucida Sans', sans-serif;
background-color: var(--light0);
}
/************************************/
/************************************/
/* header */
.header {
background-color: var(--accent1A);
color: var(--dark0);
text-align: center;
padding: 15px;
top: 0;
position: relative;
}
/*.row>.header>.left.spacer {
background-image: url("../Huetopia/assets/images/map01_001_d.png");
}*/
/************************************/
/************************************/
/************************************/
/* navbar */
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
margin-left: 2px;
padding: 10px;
text-decoration: none;
margin-bottom: 10px;
background-color: var(--accent1B);
color: var(--dark0);
box-shadow:
0 1px var(--boxShadowLight),
0,
1px 2px,
var(--boxShadowDark);
}
.navbar li a {
text-decoration: none;
color: var(--dark0);
}
.navbar li.active a {
color: var(--dark1);
}
.navbar .active {
background-color: var(--accent2A);
font-weight: bold;
}
.navbar .active:hover {
background-color: var(--accent1B);
}
.navbar li:hover {
background-color: var(--accent1A);
}
/************************************/
/************************************/
/* menu */
.menu .active {
font-weight: bold;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 10px;
margin-bottom: 10px;
background-color: var(--accent1A);
color: #000000;
box-shadow:
0 1px var(--boxShadowLight),
0 1px 2px var(--boxShadowDark);
}
.menu li a {
text-decoration: none;
color: var(--dark0);
}
.menu li.active {
background-color: var(--accent2B);
}
.menu li.active a {
color: var(--dark1);
}
.menu li:hover {
background-color: #a7bcff;
}
.menu li.active:hover {
background-color: var(--accent2B);
}
.menu li a {
text-decoration: none;
}
/************************************/
/************************************/
/* center (body) */
div.construction {
display: none;
background-color: var(--dark0);
font-size: 5rem;
text-align: center;
color: red;
font-family: 'Courier', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
transform: rotate(-10deg);
width: 100%;
}
p.construction {
display: none;
background-color: var(--dark0);
font-size: 1rem;
text-align: center;
color: red;
font-family: 'Courier', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
transform: rotate(10deg);
width: 100%;
}
/************************************/
/************************************/
/* table styling */
table {
border: var(--dark0) 1px;
}
/************************************/
/************************************/
/* aside */
.aside {
margin-bottom: 3rem;
background-color: var(--accent2B);
padding: 15px;
color: var(--dark0);
font-size: 14px;
border-radius: 10%;
box-shadow:
0 1px 3px var(--boxShadowLight),
0 1px 2px var(--boxShadowDark);
}
.aside h2 {
text-align: center;
font-family: var(--title-font);
}
/************************************/
/************************************/
/* footer */
.spacer {
height: 10rem;
}
.footer {
background-color: var(--accent1B);
font-size: 0.8rem;
padding: 15px;
color: var(--dark0);
bottom: 0;
position: relative;
height: 15%;
width: 100%;
}
/************************************/
/************************************/
/* For mobile phones: */
[class*='col-'] {
width: 100%;
}
/************************************/
/*************************************************/
/* portrait mode */
@media only screen and (orientation: portrait) {
[class*='col-'] {
width: 100%;
/* Uncomment the below line to see blocking guides*/
/*border: 1px solid orange;*/
}
}
/*************************************************/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* xs */
[class*='col-'] {
width: 100%;
/* Uncomment the below line to see blocking guides*/
/*border: 1px solid rgb(255, 0, 0);*/
}
/* Uncomment the code block below to enable specific widths for xs screens*/
/*
.col-xs-1 {width: 8.33%;}
.col-xs-2 {width: 16.66%;}
.col-xs-3 {width: 25%;}
.col-xs-4 {width: 33.33%;}
.col-xs-5 {width: 41.66%;}
.col-xs-6 {width: 50%;}
.col-xs-7 {width: 58.33%;}
.col-xs-8 {width: 64.66%;}
.col-xs-9 {width: 75%;}
.col-xs-10 {width: 83.33%;}
.col-xs-11 {width: 91.66%;}
.col-xs-12 {width: 100%;}
*/
}
/*************************************************/
/*************************************************/
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* s */
/* For tablets */
/* Uncomment the below line to see blocking guides*/
/*[class*='col-'] {
border: 1px solid rgb(0, 255, 0);
}*/
.col-s-1 {
width: 8.33%;
}
.col-s-2 {
width: 16.66%;
}
.col-s-3 {
width: 25%;
}
.col-s-4 {
width: 33.33%;
}
.col-s-5 {
width: 41.66%;
}
.col-s-6 {
width: 50%;
}
.col-s-7 {
width: 58.33%;
}
.col-s-8 {
width: 64.66%;
}
.col-s-9 {
width: 75%;
}
.col-s-10 {
width: 83.33%;
}
.col-s-11 {
width: 91.66%;
}
.col-s-12 {
width: 100%;
}
}
/*************************************************/
/*************************************************/
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* m */
/* For desktop */
/* Uncomment the below line to see blocking guides*/
/*[class*='col-'] {
border: 1px solid rgb(0, 0, 255);
}*/
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 64.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
/*************************************************/
/*************************************************/
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* l */
/* Uncomment the below line to see blocking guides*/
/*[class*="col-"] {
border: 1px solid rgb(0, 255, 255);
}*/
.col-l-1 {
width: 8.33%;
}
.col-l-2 {
width: 16.66%;
}
.col-l-3 {
width: 25%;
}
.col-l-4 {
width: 33.33%;
}
.col-l-5 {
width: 41.66%;
}
.col-l-6 {
width: 50%;
}
.col-l-7 {
width: 58.33%;
}
.col-l-8 {
width: 64.66%;
}
.col-l-9 {
width: 75%;
}
.col-l-10 {
width: 83.33%;
}
.col-l-11 {
width: 91.66%;
}
.col-l-12 {
width: 100%;
}
}
/*************************************************/
/*************************************************/
/* Extra large devices (large laptops and desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
/* xl */
/* Uncomment the below line to see blocking guides*/
/*[class*="col-"] {
border: 1px solid rgb(255, 0, 255);
}*/
.col-xl-1 {
width: 8.33%;
}
.col-xl-2 {
width: 16.66%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-4 {
width: 33.33%;
}
.col-xl-5 {
width: 41.66%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-7 {
width: 58.33%;
}
.col-xl-8 {
width: 64.66%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-10 {
width: 83.33%;
}
.col-xl-11 {
width: 91.66%;
}
.col-xl-12 {
width: 100%;
}
}
/*************************************************/
/*************************************************/
/* Extra-extra large devices (High res displays 1870 px and up) */
@media only screen and (min-width: 1870px) {
/*xxl*/
/* Uncomment the below line to see blocking guides*/
/*[class*="col-"] {
border: 1px solid rgb(255, 255, 0);
}*/
/* comment out this code block if you want the navbar to display */
div.xl-only {
display: none;
}
}
/*************************************************/
/*************************************************/
/* Only displayed on extra large devices */
@media only screen and (max-width: 1870px) {
div.xl-only {
display: none;
}
}
/*************************************************/