html {
height: 100%;
}
body {
/* The tag is set up as a flex container, and that container is styled with flex-direction: column to create a vertical primary axis for the page as a whole. */
display: flex;
flex-direction: column;
/* the body element also declares gap: 1rem to create a 1rem space between each flex item. */
gap: 1rem;
justify-content: flex-start;
align-items: stretch;
font-size: 0.75em;
/* The body element has its height property set to 100%, which makes the flex container always take up the entire height of the browsers content area. Note that setting height: 100% on the body element only works because earlier I added the same declaration to the HTML element. */
height: 100%;
margin-left: 1rem;
width: 95%;
background-image: url('../Images/metal.jpeg') ;
background-size: 500px;
}
/* all the content elements – header, nav, article, site, and footer elements are given a border and some padding. */
header,
nav,
article,
aside,
footer{
outline: 1px solid black;
padding: 0.5rem;
Margin: 0.5rem;
background-color: wheat;
}
main {
/* the main element is stalled with flex – grow: one which tells the browser to grow the main element vertically until it uses up the empty space in the flex container. This also ensures that the footer element appears at the bottom of the content area, even if there isn't enough content to fill the main element. */
flex-grow: 1;
/* the main element is also a flex container styled with flex – direction: row to set a horizontal primary axis. Note, as well, the use of the gap property to set a one REM horizontal gap between each flex item. */
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: flex-start;
align-items: stretch;
}
article {
/* inside the main flex container, the article element is given flex – grow: one, so it grows as needed to take up the remaining width of the main element ( that is, the width of the element is taken into account). */
flex-grow: 1;
}
aside {
/* to get a fixed – width sidebar, the side elements rule has both flex – grow and flex – shrink set to zero and it also includes the decoration flex – basis: 10 REM. The flex – basis property provides the browser with a suggested starting point for the size of the ele in this case, with both flex – grow and flex – shrink set zero, the flex – basis value acts like a fixed width */
flex: 0 0 10rem;
}
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
@font-face {
font-family: 'JMH Cthulumbus Arcade';
src: url(assets/cthulu.ttf) format('truetype');
}
.myfont {
font-family: 'JMH Cthulumbus Arcade', sans-serif;
font-size: 1em;
}
body {
font-family: jmh cthulumbus arcade, sans-serif;
margin: 0;
}
p {
line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
font-family: Arial, Helvetica, sans-serif;
}
#content li {
line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}
/*This makes images shrink when their container becomes too small (responsive design)*/
img {
max-width: 100%;
height: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
iframe {
max-width: 100%;
height: 350px;
width:600px;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.right {
float: right;
margin-left: 1em;
}
.left {
float: left;
margin-right: 1em;
}
.center {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
@media only screen and (min-width: 600px) {
.small {
max-width: 60%;
height: auto;
}
}
.caption {
margin-top: 0;
font-size: 0.9em;
font-style: italic;
}
a:hover {
background-color: #c9f1fe;
}
/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
background-color: wheat;
margin: 3em auto;
width: 90%;
max-width: 700px;
color: black;
outline-color: black;
outline-style: solid;
outline-width: 1px;
outline-offset: 0;
}
#content {
padding: 10px 5% 20px 5%;
}
/*HEADER STYLE*/
#header {
background-color: black;
padding: 0 5%;
}
#header ul {
list-style-type: none;
padding: 0.5em 0;
margin: 0;
}
#header li {
font-size: 1.2em;
display: inline-block;
margin-right: 1.5em;
margin-bottom: 0.2em;
margin-top: 0.2em;
}
#header li a {
color: white;
text-decoration: none;
background-color: inherit;
}
#header li a:hover {
text-decoration: underline;
}
/*POST LIST STYLE*/
#postlistdiv ul {
font-size: 1.2em;
padding: 0;
list-style-type: none;
}
#recentpostlistdiv ul {
font-size: 1.2em;
padding: 0;
list-style-type: none;
}
.moreposts {
font-size: 0.8em;
margin-top: 0.2em;
}
/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
text-align: center;
margin-top: 1.4em;
}
/*DISQUS STYLE*/
#disqus_thread {
margin-top: 1.6em;
}
/*FOOTER STYLE*/
#footer {
font-size: 0.8em;
padding: 0 5% 10px 5%;
}
#canvasDiv {
width: auto;
height: auto;
font-size: 0.75em;
padding: 0;
}
.p5Canvas {
position: absolute;
}