Froge
2623244fb3
Axel helped me unfuck the HTML and CSS so the background gradient scaling no longer depends on the size of the body element, which I was previously locking to the size of the outer html element, and locking THAT to 100% of the view port size (which is awful code and bad practice) Axel refactored this so that the outer html element and body element both naturally scale to the browser size, as expected, and the CSS background was changed to be fixed at 100% height/width regardless of viewport size, which results in much cleaner code (thanks Axel)
133 lines
1.9 KiB
CSS
133 lines
1.9 KiB
CSS
* {
|
|
margin: 0rem;
|
|
}
|
|
|
|
html {
|
|
margin: 0rem;
|
|
padding: 0rem;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
font-family: monospace;
|
|
padding: 2rem;
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
/* Fancy background CSS styling lives here */
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
rgba(0, 0, 0, 1),
|
|
rgba(65, 15, 75, 1) 40%,
|
|
rgba(65, 15, 90, 1) 50%,
|
|
rgba(30, 15, 80, 1) 60%,
|
|
rgba(0, 0, 0, 1)
|
|
);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
ul {
|
|
padding: 0rem;
|
|
}
|
|
|
|
a {
|
|
color: #4361ee;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a:visited {
|
|
color: #6d49ca;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#site-content {
|
|
max-width: 55rem;
|
|
color: #e4e4e4;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
background: rgba(0,0,0, 0.78);
|
|
box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5);
|
|
}
|
|
|
|
#ascii-header {
|
|
font-size: 10px;
|
|
color: #e4e4e4;
|
|
text-decoration: none;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#ascii-header a {
|
|
color: #e4e4e4;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#ascii-header a:visited {
|
|
color: #e4e4e4;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#welcome-message {
|
|
padding: 1rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
#blog-page-title {
|
|
padding-bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#blog-post-content {
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
#blog-post-content p {
|
|
padding: 1rem;
|
|
}
|
|
|
|
#blog-post-content li {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
#blog-post-content ul {
|
|
padding: 1rem;
|
|
padding-top: 0rem;
|
|
/* Align the inner il elements correctly */
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.dotted-border {
|
|
border-bottom: #e4e4e4 8px dotted;
|
|
width: 100%;
|
|
}
|
|
|
|
.title {
|
|
letter-spacing: -2px;
|
|
text-align: center;
|
|
}
|
|
|
|
.blog-entry-container {
|
|
padding: 1rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.blog-entry-title {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.blog-post-date {
|
|
text-align: center;
|
|
}
|