Finalize theme

4 years ago · 5190e4b812
parent 7a4b8385dc
commit 5190e4b812
12 changed files with 113 additions and 11 deletions
--- a/themes/theme/static/fonts/AppSILB.ttf
+++ b/themes/theme/static/fonts/AppSILB.ttf
--- a/themes/theme/static/fonts/AppSILBI.ttf
+++ b/themes/theme/static/fonts/AppSILBI.ttf
--- a/themes/theme/static/fonts/AppSILI.ttf
+++ b/themes/theme/static/fonts/AppSILI.ttf
--- a/themes/theme/static/fonts/AppSILR.ttf
+++ b/themes/theme/static/fonts/AppSILR.ttf
--- a/themes/theme/static/fonts/Lato-Bold.ttf
+++ b/themes/theme/static/fonts/Lato-Bold.ttf
--- a/themes/theme/static/fonts/Lato-BoldItalic.ttf
+++ b/themes/theme/static/fonts/Lato-BoldItalic.ttf
--- a/themes/theme/static/fonts/Lato-Italic.ttf
+++ b/themes/theme/static/fonts/Lato-Italic.ttf
--- a/themes/theme/static/fonts/Lato-Regular.ttf
+++ b/themes/theme/static/fonts/Lato-Regular.ttf
--- a/themes/theme/static/fonts/fonts.css
+++ b/themes/theme/static/fonts/fonts.css
@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Apparatus SIL';
+    src: url('AppSILR.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Apparatus SIL';
+	font-style: italic;
+    src: url('AppSILI.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Apparatus SIL';
+	font-weight: bold;
+    src: url('AppSILB.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Apparatus SIL';
+	font-weight: bold;
+	font-style: italic;
+    src: url('AppSILBI.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url('Lato-Bold.ttf') format('truetype');
+}
--- a/themes/theme/static/logo.png
+++ b/themes/theme/static/logo.png
--- a/themes/theme/static/style.css
+++ b/themes/theme/static/style.css
@ -1,15 +1,22 @@
 body {
 	text-rendering: optimizeLegibility;
-	font: 1rem/1.3 sans-serif;
+	font: 1.2rem/1.0 Lato,sans-serif;
+	background-color: rgb(245, 245, 245);
+}
+
+a {
+	color: #000000;
+	text-decoration: none;
+	outline: none;
 }

 .container {
-	max-width: 40rem;
+	max-width: 56rem;
 	margin: 1rem auto 0 auto;
 }

 .sidebar {
-	margin-top: 1rem;
+	margin-top: 2px;
 	float: left;
 	width: 8rem;
 	text-align: right;
@ -17,9 +24,24 @@ body {

 .sidebar img {
 	width: 100%;
+	display: block;
+}
+
+.sidebar p {
+	margin-top: 1.1875rem;
+}
+
+.sidebar a {
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	display: block;
+}
+.sidebar a:hover {
+	background-color: #eeeeee;
 }

 .topbar {
+	text-align: center;
 }

 .topbar ul {
@ -31,10 +53,27 @@ body {
 	margin-right: 0.5rem;
 }

+.toc {
+	float: right;
+}
+
+.toc li {
+	margin-top: 0.5rem;
+}
+
 .content {
+	max-width: 36rem;
+}
+
+.content p {
+	font: 1.2rem/1.5 Apparatus SIL,serif;
+}
+
+.content a {
+	border-bottom: 1px solid #000;
 }

-@media screen and (min-width:30rem) {
+@media screen and (min-width:36rem) {
 	.content {
 		margin-left: 10rem;
 	}
@ -43,7 +82,7 @@ body {
 	}
 }

-@media screen and (max-width:30rem) {
+@media screen and (max-width:36rem) {
 	.sidebar {
 		display: none;
 	}
--- a/themes/theme/templates/base.html
+++ b/themes/theme/templates/base.html
@ -7,6 +7,7 @@
 		<title>Tanner Collin</title>

 		<link rel="stylesheet" type="text/css" href="/theme/style.css" />
+		<link rel="stylesheet" type="text/css" href="/theme/fonts/fonts.css" />
 	</head>

 	<body>
@ -17,15 +18,15 @@
 					Tanner Collin
 				</p>
 				<p>
-					Home <br />
-					About <br />
-					Contact <br />
+					<a href="about.html">About</a>
+					<a href="posts.html">Posts</a>
+					<a href="contact.html">Contact</a>
 				</p>
 			</div>
 			<div class="content">
 				<div class="topbar">
 					<p>
-						Tanner Collin
+						<img src="/theme/logo.png" />
 					</p>

 					<ul>
@ -37,11 +38,22 @@
 				<header>
 					<h1>My Title</h1>
 					<p>May 7th, 2020</p>
-				<header>
+				</header>
 				<hr />
 				<article>
+					<div class="toc">
+						<ol>
+							<li>Section One</li>
+							<li>Section Two</li>
+							<ol type="a">
+								<li>Subsection One</li>
+								<li>Subsection Two</li>
+							</ol>
+							<li>Section Three</li>
+						</ol>
+					</div>
 					<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a semper lacus. Sed vulputate ligula eget odio mollis, sed dictum dui euismod. Vivamus quis gravida diam. Sed elementum dolor non augue egestas scelerisque. Donec odio diam, feugiat sit amet accumsan eget, lobortis vel mi. Mauris a ipsum ut urna vestibulum bibendum. Nunc ut placerat ex. Morbi eleifend risus in neque suscipit aliquet. Praesent sed dolor vel tellus sagittis viverra. Vestibulum et tincidunt sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel laoreet nibh, pulvinar porta risus.
+					Lorem <a href="asdf">ipsum</a> dolor sit amet, consectetur adipiscing elit. Curabitur a semper lacus. Sed vulputate ligula eget odio mollis, sed dictum dui euismod. Vivamus quis gravida diam. Sed elementum dolor non augue egestas scelerisque. Donec odio diam, feugiat sit amet accumsan eget, lobortis vel mi. Mauris a ipsum ut urna vestibulum bibendum. Nunc ut placerat ex. Morbi eleifend risus in neque suscipit aliquet. Praesent sed dolor vel tellus sagittis viverra. Vestibulum et tincidunt sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel laoreet nibh, pulvinar porta risus.
 					<p>

 					<p>