commit 5be4f8018d5117dd5e4e4dd3e7bd062a415c7b89
parent e27b98f48edf60cdb60f5cc83e7aa4c380b89361
Author: underd0g1 <hide4@comcast.net>
Date: Thu, 8 Oct 2020 00:58:55 -0400
scaling support
Diffstat:
4 files changed, 212 insertions(+), 6 deletions(-)
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,125 @@
+@font-face {
+ font-family: "Roboto Mono";
+ src: url("../fonts/roboto-mono-medium.ttf");
+}
+
+:root {
+ --font: "Roboto Mono";
+ --background: #0f0e17;
+ --foreground: #fffffe;
+ --pink: #e53170;
+ --red: #f25f4c;
+ --orange: #ff8906;
+ --branch: 1px solid #a7a9be;
+}
+
+html {
+ font-size: 18px;
+ overflow: hidden;
+}
+
+body {
+ background: var(--background);
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.prompt {
+ font-family: var(--font);
+ color: var(--foreground);
+}
+
+.prompt~.prompt {
+ padding: 1.5rem 0 0.3125rem;
+}
+
+span {
+ color: var(--pink);
+}
+
+h1 {
+ display: inline;
+ font-family: var(--font);
+ font-size: 1rem;
+ font-weight: normal;
+ color: var(--red);
+ cursor: pointer;
+}
+
+.tree>ul {
+ margin: 0;
+ padding-left: 1rem;
+}
+
+ul {
+ list-style: none;
+ padding-left: 2.5rem;
+}
+
+li {
+ position: relative;
+}
+
+li.hideChildren>ul {
+ display: none;
+}
+
+li::before,
+li::after {
+ content: "";
+ position: absolute;
+ left: -0.75rem;
+}
+
+li::before {
+ border-top: var(--branch);
+ top: 0.75rem;
+ width: 0.5rem;
+}
+
+li::after {
+ border-left: var(--branch);
+ height: 100%;
+ top: 0.25rem;
+}
+
+li:last-child::after {
+ height: 0.5rem;
+}
+
+a {
+ font-family: var(--font);
+ font-size: 1rem;
+ color: var(--foreground);
+ text-decoration: none;
+ outline: none;
+}
+
+a:hover,
+a:focus {
+ color: var(--background);
+ background: var(--orange);
+}
+
+form h1 {
+ padding-left: 0.125rem;
+}
+
+/* you can fill the texarea above/below? the Viewport */
+#search {
+ font-family: var(--font);
+ font-size: 1rem;
+ color: var(--foreground);
+ background-color: var(--background);
+ border: none;
+ outline: none;
+ position: absolute;
+ width: 50vw;
+ height: 50vh;
+ word-break: break-all;
+ resize: none;
+}+
\ No newline at end of file
diff --git a/d34.html b/d34.html
@@ -94,20 +94,28 @@ input::placeholder {
</style>
- <div class="container"><center>
+<div class="container"><center>
<form id="form-search" action="https://duckduckgo.com/" method="get" autocomplete="off">
<input id="search" placeholder="" type="text" name="q" autofocus="">
</form>
</center>
- <div class="row" align='center'>
+ <div class="row" align='center'>
<div class="col-xsm-12" id = "col">
-
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
- //Constants for the SVG
- var width = 350,
- height = 300;
+ //setup for the d3 SVG
+
+
+// testing a resize method using the browser measurements
+
+ var width = window.innerWidth,
+ height = window.innerHeight;
+
+
+
+
+
//Set up the colour scale
var color = d3.scale.category20c()
diff --git a/fonts/roboto-mono-medium.ttf b/fonts/roboto-mono-medium.ttf
Binary files differ.
diff --git a/script/script.js b/script/script.js
@@ -0,0 +1,72 @@
+const Config = {
+ name: "user",
+ scale: 1,
+ Links: [
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ]
+ ]
+}
+
+const Main = (() => {
+ const list = document.getElementById("list");
+ const names = document.querySelectorAll("[data-Name]");
+ const search = document.getElementById("search");
+ const form = document.forms[0];
+
+ const init = () => {
+ list.innerHTML = Config.Links.map(([gName, Links]) => `
+ <li>
+ <h1 onclick="this.parentNode.classList.toggle('hideChildren')">${gName}</h1>
+ <ul>
+ ${Links.map(([lName, url]) => `
+ <li>
+ <a href="${url}">${lName}</a>
+ </li>`
+ ).join("")}
+ </ul>
+ </li>`
+ ).join("")
+
+ names.forEach(el => {
+ el.innerText = Config.name;
+ });
+
+ document.addEventListener("keydown", e => e.key.length === 1 && search.focus());
+ search.addEventListener("keydown", () => (window.event ? event.keyCode : e.which) == 13 && form.submit());
+ };
+
+ return {
+ init,
+ };
+})();
+
+Main.init()
