diff options
Diffstat (limited to 'clams-server/src/main/resources/templates')
6 files changed, 69 insertions, 141 deletions
diff --git a/clams-server/src/main/resources/templates/404.html b/clams-server/src/main/resources/templates/404.html index 6bbcecd..bb4c4d5 100644 --- a/clams-server/src/main/resources/templates/404.html +++ b/clams-server/src/main/resources/templates/404.html @@ -1,41 +1,14 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8"> - <title>404 - Page Not Found</title> - <link rel="stylesheet" href="/css/common.css"> - <style> - .error-container { - text-align: center; - margin-top: 100px; - } - .error-code { - font-size: 5rem; - margin-bottom: 10px; - opacity: 0.3; - } - </style> -</head> -<body> +{% extends "templates/layout.html" %} - <main class="main-container"> - <div class="error-container"> - <div class="error-code">404</div> - <h1>Page Not Found</h1> - <p>The page you are looking for does not exist.</p> - <p style="margin-top: 40px;"> - <a href="/">Return to Home Page</a> - </p> - </div> - </main> - - <footer> - <p> - <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> - <span class="footer-separator">|</span> - <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> +{% block content %} +<main class="main-container"> + <div class="error-container"> + <div class="error-code">404</div> + <h1>Page Not Found</h1> + <p>The page you are looking for does not exist.</p> + <p class="error-home-link"> + <a href="/">Return to Home Page</a> </p> - </footer> - -</body> -</html> + </div> +</main> +{% endblock %} diff --git a/clams-server/src/main/resources/templates/blog.html b/clams-server/src/main/resources/templates/blog.html index 168cfe1..200a144 100644 --- a/clams-server/src/main/resources/templates/blog.html +++ b/clams-server/src/main/resources/templates/blog.html @@ -1,13 +1,6 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8"> - <title>Elias Haugsbakk's Blog</title> - <link rel="stylesheet" href="/css/common.css"> - <link rel="stylesheet" href="/css/blog.css"> -</head> -<body> +{% extends "templates/layout.html" %} +{% block content %} <main class="main-container"> <header> <h1>Elias Haugsbakk's Blog</h1> @@ -21,28 +14,18 @@ <div class="content-grid"> <div class="left-column"> - <section id="all"> - <h2>{{ all_posts_title }}</h2> - <!-- Tells Pebble to trust your pre-grouped HTML links --> - {{ all_posts_by_year | raw }} + <section id="all" class="blog-section"> + <h2>All Posts</h2> + {{ all_posts| raw }} </section> </div> <div class="right-column"> - <section id="recent"> - <h2>Recent</h2> + <section id="recent" class="blog-section"> + <h2>Featured</h2> {{ recent_posts | raw }} </section> </div> </div> </main> - -<footer> - <p> - <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> - <span class="footer-separator">|</span> - <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> - </p> -</footer> -</body> -</html> +{% endblock %} diff --git a/clams-server/src/main/resources/templates/home.html b/clams-server/src/main/resources/templates/home.html index 199ae29..b5ff1d6 100644 --- a/clams-server/src/main/resources/templates/home.html +++ b/clams-server/src/main/resources/templates/home.html @@ -1,39 +1,22 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8"> - <title>Elias Haugsbakk</title> - <link rel="stylesheet" href="/css/common.css"> - <link rel="stylesheet" href="/css/home.css"> -</head> -<body> +{% extends "templates/layout.html" %} - <main class="main-container"> - <h1>Elias Haugsbakk's Webpage</h1> - - <div class="content-grid"> - <div class="left-column"> - <img src="/images/elias_haugsbakk.JPEG" alt="Image of Elias Haugsbakk" class="profile-img"> - <p>Hello! I am Elias and this is my webpage.</p> - </div> +{% block content %} +<main class="main-container"> + <h1>Elias Haugsbakk's Webpage</h1> - <div class="right-column"> - <ul> - <li><a href="/blog">Blog</a> <span class="description">-- personal projects and thoughts</span></li> - <li><a href="https://github.com/eliashaugsbakk">GitHub</a> <span class="description">-- home for my code</span></li> - <li><a href="/projects">Projects</a> <span class="description">-- the projects I have worked on</span></li> - </ul> - </div> + <div class="content-grid"> + <div class="left-column"> + <img src="/images/elias_haugsbakk.JPEG" alt="Image of Elias Haugsbakk" class="profile-img"> + <p>Hello! I am Elias and this is my webpage.</p> </div> - </main> - <footer> - <p> - <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> - <span class="footer-separator">|</span> - <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> - </p> - </footer> - -</body> -</html> + <div class="right-column"> + <ul> + <li><a href="/blog">Blog</a> <span class="description">-- personal projects and thoughts</span></li> + <li><a href="https://github.com/eliashaugsbakk">GitHub</a> <span class="description">-- home for my code</span></li> + <li><a href="/projects">Projects</a> <span class="description">-- the projects I have worked on</span></li> + </ul> + </div> + </div> +</main> +{% endblock %} diff --git a/clams-server/src/main/resources/templates/layout.html b/clams-server/src/main/resources/templates/layout.html new file mode 100644 index 0000000..4c8b8dc --- /dev/null +++ b/clams-server/src/main/resources/templates/layout.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>{{ page_title }}</title> + <link rel="stylesheet" href="/css/common.css"> + <link rel="stylesheet" href="/css/{{ page_css }}.css"> +</head> +<body> + +{% block content %}{% endblock %} + +<footer> + <p> + <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> + <span class="footer-separator">|</span> + <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> + </p> +</footer> + +</body> +</html> diff --git a/clams-server/src/main/resources/templates/post.html b/clams-server/src/main/resources/templates/post.html index 85f8977..40444b2 100644 --- a/clams-server/src/main/resources/templates/post.html +++ b/clams-server/src/main/resources/templates/post.html @@ -1,13 +1,6 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8"> - <title>{{ title }} - Elias Haugsbakk</title> - <link rel="stylesheet" href="/css/common.css"> - <link rel="stylesheet" href="/css/post.css"> -</head> -<body> +{% extends "templates/layout.html" %} +{% block content %} <main class="main-container"> <header class="post-header"> <span class="post-date">{{ published_date }}</span> @@ -25,14 +18,4 @@ {{ next_post_link | raw }} </nav> </main> - -<footer> - <p> - <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> - <span class="footer-separator">|</span> - <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> - </p> -</footer> - -</body> -</html> +{% endblock %} diff --git a/clams-server/src/main/resources/templates/projects.html b/clams-server/src/main/resources/templates/projects.html index 8af0538..bab2a05 100644 --- a/clams-server/src/main/resources/templates/projects.html +++ b/clams-server/src/main/resources/templates/projects.html @@ -1,13 +1,6 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8"> - <title>Projects - Elias Haugsbakk</title> - <link rel="stylesheet" href="/css/common.css"> - <link rel="stylesheet" href="/css/projects.css"> -</head> -<body> +{% extends "templates/layout.html" %} +{% block content %} <main class="main-container"> <header> <h1>Projects</h1> @@ -64,24 +57,14 @@ <li> <strong>Other Project One</strong> - A short one-line description. <span class="tech-stack-inline">(Bash)</span> - <a href="#" class="small-link">GitHub</a> + <a href="#">GitHub</a> </li> <li> <strong>Other Project Two</strong> - A short one-line description. <span class="tech-stack-inline">(Python, PostgreSQL)</span> - <a href="#" class="small-link">GitHub</a> + <a href="#">GitHub</a> </li> </ul> </section> </main> - -<footer> - <p> - <span class="footer-left"><a href="/">eliashaugsbakk.xyz</a></span> - <span class="footer-separator">|</span> - <span class="footer-right"><a href="mailto:[email protected]">[email protected]</a></span> - </p> -</footer> - -</body> -</html> +{% endblock %} |