Changed navbar to icons, moved content div into base template
This commit is contained in:
Awstin
parent
529a3113dd
commit
3e9024451e
11 changed files with 119 additions and 64 deletions
|
|
@ -41,11 +41,6 @@ html {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
width: 60%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.25rem; /* 36px */
|
font-size: 2.25rem; /* 36px */
|
||||||
line-height: 2.5rem; /* 40px */
|
line-height: 2.5rem; /* 40px */
|
||||||
|
|
@ -63,7 +58,7 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--orange);
|
color: var(--blue);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,23 +72,7 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: var(--blue);
|
color: var(--purple);
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
@ -105,6 +84,36 @@ img {
|
||||||
font-weight: bold;
|
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) {
|
@media (max-width: 1024px) {
|
||||||
html {
|
html {
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
|
|
@ -112,7 +121,17 @@ img {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -130,9 +149,4 @@ img {
|
||||||
font-size: 1rem; /* 16px */
|
font-size: 1rem; /* 16px */
|
||||||
line-height: 1.5rem; /* 24px */
|
line-height: 1.5rem; /* 24px */
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-list {
|
|
||||||
font-size: 1.125rem; /* 18px */
|
|
||||||
line-height: 1.75rem; /* 28px */
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
<h2>General</h2>
|
<h2>General</h2>
|
||||||
<p>
|
<p>
|
||||||
My greatest joy in life is learning new things.
|
My greatest joy in life is learning new things.
|
||||||
|
|
@ -58,5 +57,4 @@
|
||||||
Trying to live more in line with what feels right internally.
|
Trying to live more in line with what feels right internally.
|
||||||
A wonderful exploration and adventure.
|
A wonderful exploration and adventure.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,8 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
{{content|safe}}
|
{{content|safe}}
|
||||||
</div>
|
<br>
|
||||||
|
<br>
|
||||||
<footer>
|
|
||||||
{{footer|safe}}
|
{{footer|safe}}
|
||||||
</footer>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -11,18 +11,80 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="setActive('{{active_navbar}}');">
|
<body onload="setActive('{{active_navbar}}');">
|
||||||
<h1><a href="/">Awstin Chubb</a></h1>
|
<div class="container">
|
||||||
<div class="navbar">
|
<nav class="sidebar">
|
||||||
<ul class="navbar-list">
|
<ul>
|
||||||
<li><a id="blog" href="/blog">Blog</a></li>
|
<li><a href="/">
|
||||||
<li><a id="projects" href="/projects">Projects</a></li>
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<li><a id="now" href="/now">Now</a></li>
|
<title>Home</title>
|
||||||
<li><a id="about" href="/about">About</a></li>
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||||
<li><a id="contact" href="/contact">Contact</a></li>
|
<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>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
|
<main class="content">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
<a href="#">Top</a>
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
|
|
||||||
<ul class="no-bul">
|
<ul class="no-bul">
|
||||||
{{article_list|safe}}
|
{{article_list|safe}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,8 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
<p>
|
<p>
|
||||||
I am always happy to meet new people.
|
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>.
|
I can be contacted by email at <a href="mailto:awstin@achubb.com">awstin@achubb.com</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
<h2>Gifts</h2>
|
<h2>Gifts</h2>
|
||||||
<p>
|
<p>
|
||||||
If you are here you are probably thinking of getting me a gift.
|
If you are here you are probably thinking of getting me a gift.
|
||||||
|
|
@ -27,5 +26,4 @@
|
||||||
<p>
|
<p>
|
||||||
Awstin
|
Awstin
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section id="about">
|
<section id="about">
|
||||||
|
<h1>Awstin Chubb</h1>
|
||||||
<h2>About me</h2>
|
<h2>About me</h2>
|
||||||
<h3>Short version</h3>
|
<h3>Short version</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
<p>
|
<p>
|
||||||
Last updated: 2024-06-22
|
Last updated: 2024-06-22
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -60,5 +59,4 @@
|
||||||
<p>
|
<p>
|
||||||
Awstin
|
Awstin
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
|
|
||||||
<ul class="no-bul">
|
<ul class="no-bul">
|
||||||
{{project_list|safe}}
|
{{project_list|safe}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div id="content">
|
|
||||||
<h2>Things I use</h2>
|
<h2>Things I use</h2>
|
||||||
<h3>Analog stuff</h3>
|
<h3>Analog stuff</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -162,5 +161,4 @@
|
||||||
<b>Language Learning:</b> <a href="https://www.duolingo.com/learn">Duolingo</a>
|
<b>Language Learning:</b> <a href="https://www.duolingo.com/learn">Duolingo</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue