Compare commits

..

2 Commits

Author SHA1 Message Date
Jakub
23e658e768 comit 2024-02-08 06:08:24 -05:00
Jakub
32836308d2 add table styling & clean up .content styles 2024-02-08 00:44:20 -05:00
4 changed files with 51 additions and 32 deletions

View File

@ -1,12 +1,10 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="content">
<h1>Error 404: </h1> <h1>Error 404: </h1>
<h2>Page Not Found</h2> <h2>Page Not Found</h2>
<p>The url you entered is invalid or has been deleted.</p> <p>The url you entered is invalid or has been deleted.</p>
<p><a class="button" href="/">Click here to return home.</a></p> <p><a class="button" href="/">Click here to return home.</a></p>
</div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

View File

@ -3,6 +3,19 @@
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a><br/> <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a><br/>
<a href="/contact">[ Contact ]</a> <a href="/donate">[ Donate ]</a> <a href="/donate">[ RSS ]</a> <br/> <a href="/contact">[ Contact ]</a> <a href="/donate">[ Donate ]</a> <a href="/donate">[ RSS ]</a> <br/>
</footer> </footer>
<script>
// JavaScript to check if content is shorter than the screen
// and add fixed class to footer if needed
window.addEventListener('DOMContentLoaded', function() {
var content = document.querySelector('.content');
var footer = document.querySelector('footer');
if (content.offsetHeight < window.innerHeight) {
footer.classList.add('fixed');
}
});
</script>
</div> </div>
</body> </body>
</html> </html>

View File

@ -4,6 +4,9 @@
--alt-bg: #d5c4a1; --alt-bg: #d5c4a1;
--acc-1: #076678; --acc-1: #076678;
--shadow: #504945; --shadow: #504945;
--table: #fbf1c7;
--table-alt: #d5c4a1;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -13,5 +16,8 @@
--alt-bg: #504945; --alt-bg: #504945;
--acc-1: #83a598; --acc-1: #83a598;
--shadow: #1d2021; --shadow: #1d2021;
--table: #282828;
--table-alt: #504945;
} }
} }

View File

@ -30,6 +30,13 @@ footer {
padding-bottom: 20px; padding-bottom: 20px;
} }
footer.fixed {
margin: 0;
position: fixed;
bottom: 0;
left: 0;
}
/* Header and Navigation Menu */ /* Header and Navigation Menu */
.header { .header {
@ -170,8 +177,10 @@ footer {
.menu a, .menu li { display: block; } .menu a, .menu li { display: block; }
.content { .content {
margin: auto 5% auto 20%; margin-left: calc(15%);
padding: 1px 16px; margin-top: auto;
padding: 20px;
} }
.menu-entries a:hover{ .menu-entries a:hover{
@ -179,8 +188,26 @@ footer {
} }
} }
/* Hugo Supported Markdown Styling */ /* Table Styles */
/* ToDO style md elements that have yet to been styled */
table { width: 100%; }
th, td, table {
border: 1px solid var(--bg);
border-collapse: collapse;
padding: 6px 13px;
}
table thead tr { background-color: var(--table); }
table tr { background-color: var(--table-alt); }
table tr:nth-child(2n) { background-color: var(--table); }
/* Markdown Blockquote styles */
blockquote { blockquote {
border-left-color: var(--alt-bg); border-left-color: var(--alt-bg);
border-left-width: 5px; border-left-width: 5px;
@ -249,31 +276,6 @@ blockquote.location p { padding: inherit; }
display: block; display: block;
} }
.grid-item {
margin: 0;
position: relative;
}
.grid-item p {
margin: 0;
}
.map-button {
color: var(--fg);
background-color: var(--acc-1);
padding: 5px;
border: solid 3px var(--acc-1);
border-radius: 8px;
}
.map {
display: flex;
}
.map img {
width: 350px;
max-height: 350px;
}
.map-txt-grid { .map-txt-grid {
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;