commit 196e434b84a28484a9cc467d9882e55c74ed9446
parent e4e66b9653fdfac01e86131ccd1f619ce49915c9
Author: underd0g1 <hide4@comcast.net>
Date: Wed, 7 Oct 2020 23:29:43 -0400
reconfigured template
Diffstat:
2 files changed, 71 insertions(+), 308 deletions(-)
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,26 @@
+html {
+ position: relative;
+ min-height: 100%;
+}
+body {
+ margin-bottom: 60px; /* Margin bottom by footer height */
+}
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 60px; /* Set the fixed height of the footer here */
+ line-height: 60px; /* Vertically center the text there */
+ background-color: #bd305c;
+}
+
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.container {
+ width: auto;
+ max-width: 680px;
+ padding: 0 15px;
+}
diff --git a/src/template.html b/src/template.html
@@ -1,310 +1,47 @@
-<!-- TEMPLATE FROM: https://www.tailwindtoolbox.com/templates/minimal-blog -->
-<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <title>
- Tailwind Starter Template - Minimal Blog: Tailwind Toolbox
- </title>
- <meta name="author" content="name" />
- <meta name="description" content="description here" />
- <meta name="keywords" content="keywords,here" />
- <link
- href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
- rel="stylesheet"
- />
- <!--Replace with your tailwind.css once created-->
- </head>
- <body class="bg-gray-100 font-sans leading-normal tracking-normal">
- <nav id="header" class="fixed w-full z-10 top-0">
- <div
- id="progress"
- class="h-1 z-20 top-0"
- style="
- background: linear-gradient(
- to right,
- #4dc0b5 var(--scroll),
- transparent 0
- );
- "
- ></div>
-
- <div
- class="w-full md:max-w-4xl mx-auto flex flex-wrap items-center justify-between mt-0 py-3"
- >
- <div class="pl-4">
- <a
- class="text-gray-900 text-base no-underline hover:no-underline font-extrabold text-xl"
- href="/"
- >
- JavaScript Joel
- </a>
- </div>
-
- <div class="block lg:hidden pr-4">
- <button
- id="nav-toggle"
- class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none"
- >
- <svg
- class="fill-current h-3 w-3"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>Menu</title>
- <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
- </svg>
- </button>
- </div>
-
- <div
- class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-100 md:bg-transparent z-20"
- id="nav-content"
- >
- <ul class="list-reset lg:flex justify-end flex-1 items-center">
- <li class="mr-3">
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
- href="page2.html"
- >page2</a
- >
- </li>
- <li class="mr-3">
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
- href="#"
- >link</a
- >
- </li>
- </ul>
- </div>
- </div>
- </nav>
-
- <!--Container-->
- <div class="container w-full md:max-w-3xl mx-auto pt-20">
- <div
- class="w-full px-4 md:px-6 text-xl text-gray-800 leading-normal"
- style="font-family: Georgia, serif;"
- >
- <div class="font-sans">
- <h1
- class="font-bold font-sans break-normal text-gray-900 pt-6 pb-2 text-3xl md:text-4xl"
- >
- <!-- TITLE -->
- </h1>
- <p class="text-sm md:text-base font-normal text-gray-600">
- <!-- PUBLISH_DATE -->
- </p>
- </div>
-
- <!-- CONTENT -->
- </div>
-
- <!--Tags -->
- <div class="text-base md:text-sm text-gray-500 px-4 py-6">
- Tags:
- <a
- href="#"
- class="text-base md:text-sm text-teal-500 no-underline hover:underline"
- >Link</a
- >
- .
- <a
- href="#"
- class="text-base md:text-sm text-teal-500 no-underline hover:underline"
- >Link</a
- >
- </div>
-
- <!--Divider-->
- <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
-
- <!--Subscribe-->
- <div class="container px-4">
- <div class="font-sans bg-white rounded-lg shadow-md p-4 text-center">
- <h2 class="font-bold break-normal text-xl md:text-3xl">
- Subscribe to my Newsletter
- </h2>
- <h3
- class="font-bold break-normal font-normal text-gray-600 text-sm md:text-base"
- >
- Get the latest posts delivered right to your inbox
- </h3>
- <div class="w-full text-center pt-4">
- <form action="#">
- <div
- class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center"
- >
- <input
- type="email"
- placeholder="youremail@example.com"
- class="flex-1 mt-4 appearance-none border border-gray-400 rounded shadow-md p-3 text-gray-600 mr-2 focus:outline-none"
- />
- <button
- type="submit"
- class="flex-1 mt-4 block md:inline-block appearance-none bg-teal-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-teal-400"
- >
- Subscribe
- </button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <!-- /Subscribe-->
-
- <!--Author-->
- <div class="flex w-full items-center font-sans px-4 py-12">
- <img
- class="w-10 h-10 rounded-full mr-4"
- src="http://i.pravatar.cc/300"
- alt="Avatar of Author"
- />
- <div class="flex-1 px-2">
- <p class="text-base font-bold text-base md:text-xl leading-none mb-2">
- Jo Bloggerson
- </p>
- <p class="text-gray-600 text-xs md:text-base">
- Minimal Blog Tailwind CSS template by
- <a
- class="text-teal-500 no-underline hover:underline"
- href="https://www.tailwindtoolbox.com"
- >TailwindToolbox.com</a
- >
- </p>
- </div>
- <div class="justify-end">
- <button
- class="bg-transparent border border-gray-500 hover:border-teal-500 text-xs text-gray-500 hover:text-teal-500 font-bold py-2 px-4 rounded-full"
- >
- Read More
- </button>
- </div>
- </div>
- <!--/Author-->
-
- <!--Divider-->
- <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
-
- <!--Next & Prev Links-->
- <div class="font-sans flex justify-between content-center px-4 pb-12">
- <div class="text-left">
- <span class="text-xs md:text-sm font-normal text-gray-600"
- >< Previous Post</span
- ><br />
- <p>
- <a
- href="#"
- class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
- >Blog title</a
- >
- </p>
- </div>
- <div class="text-right">
- <span class="text-xs md:text-sm font-normal text-gray-600"
- >Next Post ></span
- ><br />
- <p>
- <a
- href="#"
- class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
- >Blog title</a
- >
- </p>
- </div>
- </div>
-
- <!--/Next & Prev Links-->
- </div>
- <!--/container-->
-
- <footer class="bg-white border-t border-gray-400 shadow">
- <div class="container max-w-4xl mx-auto flex py-8">
- <div class="w-full mx-auto flex flex-wrap">
- <div class="flex w-full md:w-1/2">
- <div class="px-8">
- <h3 class="font-bold text-gray-900">About</h3>
- <p class="py-4 text-gray-600 text-sm">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse
- consectetur dapibus velit ut lacinia.
- </p>
- </div>
- </div>
-
- <div class="flex w-full md:w-1/2">
- <div class="px-8">
- <h3 class="font-bold text-gray-900">Social</h3>
- <ul class="list-reset items-center text-sm pt-3">
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </footer>
-
- <script>
- /* Progress bar */
- //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
- var h = document.documentElement,
- b = document.body,
- st = 'scrollTop',
- sh = 'scrollHeight',
- progress = document.querySelector('#progress'),
- scroll
- var scrollpos = window.scrollY
- var header = document.getElementById('header')
- var navcontent = document.getElementById('nav-content')
-
- document.addEventListener('scroll', function () {
- /*Refresh scroll % width*/
- scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
- progress.style.setProperty('--scroll', scroll + '%')
-
- /*Apply classes for slide in bar*/
- scrollpos = window.scrollY
-
- if (scrollpos > 10) {
- header.classList.add('bg-white')
- header.classList.add('shadow')
- navcontent.classList.remove('bg-gray-100')
- navcontent.classList.add('bg-white')
- } else {
- header.classList.remove('bg-white')
- header.classList.remove('shadow')
- navcontent.classList.remove('bg-white')
- navcontent.classList.add('bg-gray-100')
- }
- })
-
- //Javascript to toggle the menu
- document.getElementById('nav-toggle').onclick = function () {
- document.getElementById('nav-content').classList.toggle('hidden')
- }
- </script>
- </body>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
+
+ <title>wr1te</title>
+
+ <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer/">
+
+ <!-- Bootstrap core CSS -->
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+ <!-- Custom styles for this template -->
+ <link href="styles.css" rel="stylesheet">
+ </head>
+
+ <body>
+
+ <!-- Begin page content -->
+ <main role="main" class="container">
+ <h1 class="mt-5">p0st 1</h1>
+ <p class="lead">this is going to be the post content! hopefully this will scale properly on mobile as well as desktop sites. .</p>
+<p class = "lead">todo:<br/>
+<ol>
+ <li>change the font to something cool</li>
+ <li>style the background</li>
+ <li> ensure that all the code snippits are highlighted</li>
+ <li> add .md content placeholders for insertation</li>
+</ol>
+
+
+</p>
+ <p>Tags: #code #2f30 #l0bster </p>
+ </main>
+
+ <footer class="footer">
+ <div class="container">
+ <span class="text-muted">© l0bster 2020.</span>
+ </div>
+ </footer>
+ </body>
</html>
