awstin/achubb_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed navbar to icons, moved content div into base template

Browse source
This commit is contained in:
Awstin 2024-07-07 08:16:21 -04:00
parent 529a3113dd
commit 3e9024451e
11 changed files with 119 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
assets/main.css
View file

@ -41,11 +41,6 @@ html {
padding: 0.25rem;
}
body {
width: 60%;
margin: auto;
}
h1 {
font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
@ -63,7 +58,7 @@ h3 {
}
a {
color: var(--orange);
color: var(--blue);
text-decoration: none;
}
@ -77,23 +72,7 @@ p {
}
code {
color: var(--blue);
}
.navbar {
overflow: hidden;
text-align: center;
margin: 0px;
}
.navbar-list {
paddign: 0px;
display: flex;
justify-content: space-between;
list-style-type: none;
font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
color: var(--red);
color: var(--purple);
}
img {
@ -105,6 +84,36 @@ img {
font-weight: bold;
}
.container {
display: flex;
}
.sidebar {
width: 250px;
height: 100vh;
padding-top: 20px;
position: fixed;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
padding: 10px;
}
.sidebar ul li a {
text-decoration: none;
}
.content {
width: 60%;
margin: auto;
padding: 20px;
}
@media (max-width: 1024px) {
html {
line-height: 1.75rem;
@ -112,7 +121,17 @@ img {
padding: 0.25rem;
}
body {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
position: static;
}
.content {
width: 90%;
}
@ -130,9 +149,4 @@ img {
font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
}
.navbar-list {
font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
}
}

2
templates/about.html
View file

@ -2,7 +2,6 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<h2>General</h2>
<p>
My greatest joy in life is learning new things.
@ -58,5 +57,4 @@
Trying to live more in line with what feels right internally.
A wonderful exploration and adventure.
</p>
</div>
{% endblock %}

7
templates/article.html
View file

@ -2,11 +2,8 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
{{content|safe}}
</div>
<footer>
<br>
<br>
{{footer|safe}}
</footer>
{% endblock %}

84
templates/base.html
View file

@ -11,18 +11,80 @@
</head>
<body onload="setActive('{{active_navbar}}');">
<h1><a href="/">Awstin Chubb</a></h1>
<div class="navbar">
<ul class="navbar-list">
<li><a id="blog" href="/blog">Blog</a></li>
<li><a id="projects" href="/projects">Projects</a></li>
<li><a id="now" href="/now">Now</a></li>
<li><a id="about" href="/about">About</a></li>
<li><a id="contact" href="/contact">Contact</a></li>
</ul>
<div class="container">
<nav class="sidebar">
<ul>
<li><a href="/">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Home</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M22 22L2 22" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round"></path> <path d="M2 11L6.06296 7.74968M22 11L13.8741 4.49931C12.7784 3.62279 11.2216 3.62279 10.1259 4.49931L9.34398 5.12486" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round"></path> <path d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round"></path> <path d="M4 22V9.5" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round"></path> <path d="M20 9.5V13.5M20 22V17.5" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round"></path> <path d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393M9 22V17" stroke=" #83a598" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke=" #83a598" stroke-width="1.5"></path>
</g>
</svg>
</a>
</li>
<li>
<a id="blog" href="/blog">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#8ec07c" transform="rotate(0)">
<title>Posts</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M4 19V6.2C4 5.0799 4 4.51984 4.21799 4.09202C4.40973 3.71569 4.71569 3.40973 5.09202 3.21799C5.51984 3 6.0799 3 7.2 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V17H6C4.89543 17 4 17.8954 4 19ZM4 19C4 20.1046 4.89543 21 6 21H20M9 7H15M9 11H15M19 17V21" stroke="#8ec07c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</li>
<li><a id="projects" href="/projects">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Projects</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M13 15H16" stroke="#d3869b" stroke-width="2" stroke-linecap="round"></path> <path d="M8 15L10.5 12.5V12.5C10.7761 12.2239 10.7761 11.7761 10.5 11.5V11.5L8 9" stroke="#d3869b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M3 8C3 6.11438 3 5.17157 3.58579 4.58579C4.17157 4 5.11438 4 7 4H12H17C18.8856 4 19.8284 4 20.4142 4.58579C21 5.17157 21 6.11438 21 8V12V16C21 17.8856 21 18.8284 20.4142 19.4142C19.8284 20 18.8856 20 17 20H12H7C5.11438 20 4.17157 20 3.58579 19.4142C3 18.8284 3 17.8856 3 16V12V8Z" stroke="#d3869b" stroke-width="2" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</li>
<li><a id="now" href="/now">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Now</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#fe8019" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</li>
<li><a id="about" href="/about">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>About</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g clip-path="url(#clip0_429_11160)"> <circle cx="12" cy="11.9999" r="9" stroke="#fabd2f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></circle> <rect x="12" y="8" width="0.01" height="0.01" stroke="#fabd2f" stroke-width="3.75" stroke-linejoin="round"></rect> <path d="M12 12V16" stroke="#fabd2f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_429_11160"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g>
</svg>
</a>
</li>
<li><a id="contact" href="/contact">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Contact</title>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="#928374" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <rect x="3" y="5" width="18" height="14" rx="2" stroke="#928374" stroke-width="2" stroke-linecap="round"></rect>
</g>
</svg>
</a></li>
</ul>
</nav>
<main class="content">
{% block content %}{% endblock %}
</main>
</div>
{% block content %}{% endblock %}
<a href="#">Top</a>
</body>
</html>

5
templates/blog.html
View file

@ -2,12 +2,7 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<ul class="no-bul">
{{article_list|safe}}
</ul>
</div>
{% endblock %}

2
templates/contact.html
View file

@ -2,10 +2,8 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<p>
I am always happy to meet new people.
I can be contacted by email at <a href="mailto:awstin@achubb.com">awstin@achubb.com</a>.
</p>
</div>
{% endblock %}

2
templates/gifts.html
View file

@ -2,7 +2,6 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<h2>Gifts</h2>
<p>
If you are here you are probably thinking of getting me a gift.
@ -27,5 +26,4 @@
<p>
Awstin
</p>
</div>
{% endblock %}

1
templates/home.html
View file

@ -3,6 +3,7 @@
{% block content %}
<section id="about">
<h1>Awstin Chubb</h1>
<h2>About me</h2>
<h3>Short version</h3>
<p>

2
templates/now.html
View file

@ -2,7 +2,6 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<p>
Last updated: 2024-06-22
</p>
@ -60,5 +59,4 @@
<p>
Awstin
</p>
</div>
{% endblock %}

4
templates/projects.html
View file

@ -2,11 +2,7 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<ul class="no-bul">
{{project_list|safe}}
</ul>
</div>
{% endblock %}

2
templates/uses.html
View file

@ -2,7 +2,6 @@
{% extends "base.html" %}
{% block content %}
<div id="content">
<h2>Things I use</h2>
<h3>Analog stuff</h3>
<ul>
@ -162,5 +161,4 @@
<b>Language Learning:</b> <a href="https://www.duolingo.com/learn">Duolingo</a>
</li>
</ul>
</div>
{% endblock %}