lambdapaul/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the styling consistent for all pages

Browse Source
This commit is contained in:
Paul W. 2021-08-07 21:43:23 -04:00
parent 50f8fc7412
commit 38656e9e27
9 changed files with 67 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -68,19 +68,17 @@
style="opacity:1;fill:#ffffff;fill-opacity:0.2;stroke:none;stroke-width:0.28266668;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> style="opacity:1;fill:#ffffff;fill-opacity:0.2;stroke:none;stroke-width:0.28266668;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g> </g>
</svg> </svg>
<nav> <nav>
<h1 class="title">PaulW.XYZ</h1> <h1 class="title">PaulW.XYZ</h1>
<div class="fuzzynav"> <div class="fuzzynav">
<input class="search" type="text" id="search" placeholder="Navigate to ..."> <input class="search" type="text" id="search" placeholder="Navigate to ...">
<div id="results" class="results"></div> <div id="results" class="results"></div>
</div> </div>
</nav> </nav>
<footer> <footer>
<a href="https://github.com/lambdapaul/">Hosted on GitHub</a> <a href="https://github.com/lambdapaul/www">Hosted on GitHub</a>
&copy; 2021 Paul W. &copy; 2021 Paul W.
</footer> </footer>
<script src="/scripts/fuzzynav.js"></script> <script src="/scripts/fuzzynav.js"></script>

3
pages.json
View File

@ -2,5 +2,6 @@
["Pages", "/pages/"], ["Pages", "/pages/"],
["Resources", "/pages/resources"], ["Resources", "/pages/resources"],
["Recommended", "/pages/recommended"], ["Recommended", "/pages/recommended"],
["Grade Calculator", "/pages/grade-calc/"] ["Grade Calculator", "/pages/grade-calc/"],
["GitHub", "https://github.com/lambdapaul"]
] ]

1
pages/grade-calc/gc_client.js
View File

@ -84,6 +84,7 @@ class GradeCalc {
label.innerHTML = `${conf.title} ${inputId + 1} Score: `; label.innerHTML = `${conf.title} ${inputId + 1} Score: `;
let field = document.createElement("input"); let field = document.createElement("input");
field.classList.add(`input`);
field.classList.add(`${conf.name}-score`); field.classList.add(`${conf.name}-score`);
this.fields[sectId][inputId] = field; this.fields[sectId][inputId] = field;

32
pages/grade-calc/index.html
View File

@ -5,6 +5,7 @@
<meta name="Grade Calculator" content="School grade calculation"> <meta name="Grade Calculator" content="School grade calculation">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/persia.css">
<title>Grade Calc</title> <title>Grade Calc</title>
</head> </head>
<style> <style>
@ -12,12 +13,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.about-container { .about-container {
padding: 1rem; padding: 1rem;
} }
@ -36,18 +31,9 @@
} }
.button-container button { .button-container button {
border: 1px solid black;
border-radius: 0;
font-size: 1em;
text-align: center;
margin: .5rem 0;
width: 100%; width: 100%;
padding: 0.5rem 1rem;
background-color: #90c541;
color: #FFF;
cursor: pointer;
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.json-textarea, .json-textarea,
@ -58,9 +44,8 @@
</style> </style>
<body> <body>
<h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1>
<div class="about-container"> <div class="about-container">
<h1><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1>
<hr>
<h2>About</h2> <h2>About</h2>
Check out the <a href="https://github.com/lambdapaul/www/blob/master/pages/grade-calc/README.md">README.md</a> file Check out the <a href="https://github.com/lambdapaul/www/blob/master/pages/grade-calc/README.md">README.md</a> file
to learn more about the configuration structure. to learn more about the configuration structure.
@ -74,15 +59,16 @@
</div> </div>
<div class="json-textarea"> <div class="json-textarea">
<h2>Configuration</h2> <h2>Configuration</h2>
<hr>
<h3>Load config from file</h3> <h3>Load config from file</h3>
<ul> <ul>
<li><a href="javascript:void(0)" onclick="loadConfig('./config/map2302.json')">MAP2302 - ODE I Fall 2019</a> <li><a href="javascript:void(0)" onclick="loadConfig('./config/map2302.json')">MAP2302 - ODE I Fall 2019 (map2302.json)</a></li>
</li> <li><a href="javascript:void(0)" onclick="loadConfig('./config/eee3307c.json')">EEE3307C - Electronics I Spring 2021 (eee3307c.json)</a></li>
<li><a href="javascript:void(0)" onclick="loadConfig('./config/eee3307c.json')">EEE3307C - Electronics I <li><a href="javascript:void(0)" onclick="loadConfig('./config/eel4742c.json')">EEL4742C - Embedded Systems Spring 2021 (eel4742c.json)</a></li>
Spring 2021</a></li> <li><a href="javascript:void(0)" onclick="loadConfig('./config/eel4781.json')">EEL4781 - Computer Comm. Networks Spring 2021 (eel4781.json)</a></li>
</ul> </ul>
<div class="button-container"> <div class="button-container">
<button onclick="generate()">Generate &#8594;</button> <button class="button" onclick="generate()">Generate &#8594;</button>
</div> </div>
<textarea id="json" id="" rows="30"></textarea> <textarea id="json" id="" rows="30"></textarea>

19
pages/index.html
View File

@ -4,17 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>PaulW.XYZ / Pages</title> <title>PaulW.XYZ / Pages</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/persia.css">
</head> </head>
<body> <body>
<h1><a href="/">PaulW.XYZ</a> / Pages</h1> <nav>
<ul> <h1 class="title"><a href="/">PaulW.XYZ</a> / Pages</h1>
<li><a href="/pages/grade-calc/">Grade Calculator</a></li> </nav>
</ul> <div class="nav-list">
<hr> <a href="/pages/grade-calc/">Grade Calculator</a>
<ul type="none"> <a href="/pages/recommended">Recommended</a>
<li><a href="resources">Resources</a></li> <a href="/pages/resources">Resources</a>
<li><a href="https://github.com/lambdapaul/pages">GitHub</a></li> </div>
</ul>
</body> </body>
</html> </html>

5
pages/recommended.html
View File

@ -4,10 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Pages / Recommended</title> <title>Pages / Recommended</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/persia.css">
</head> </head>
<body> <body>
<!-- This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions. --> <!-- This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions. -->
<h1><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Recommended</h1> <h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Recommended</h1>
<section>
<p>If the one you're looking for is not on this list, it is most likely I haven't had the chance to read it yet or I may have put it on the Resources page, if it is freely available.</p> <p>If the one you're looking for is not on this list, it is most likely I haven't had the chance to read it yet or I may have put it on the Resources page, if it is freely available.</p>
<hr> <hr>
<h2>Books</h2> <h2>Books</h2>
@ -93,5 +95,6 @@
<li>The Legend of Zelda: Breath of the Wild</li> <li>The Legend of Zelda: Breath of the Wild</li>
<li>Portal 2</li> <li>Portal 2</li>
</ul> </ul>
</section>
</body> </body>
</html> </html>

6
pages/resources.html
View File

@ -4,10 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Pages / Resources</title> <title>Pages / Resources</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/persia.css">
</head> </head>
<body> <body>
<h1><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Resources</h1> <h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Resources</h1>
<hr> <section>
<h2>Programming</h2> <h2>Programming</h2>
<ul> <ul>
<li><a href="http://aggregate.org/MAGIC/">The Aggregate Magic Algorithms</a></li> <li><a href="http://aggregate.org/MAGIC/">The Aggregate Magic Algorithms</a></li>
@ -37,5 +38,6 @@ The MIT License, Line by Line by Kyle E. Mitchell</a></li>
<ul> <ul>
<li><a href="https://sightreading.training/">Sight Reading Trainer</a></li> <li><a href="https://sightreading.training/">Sight Reading Trainer</a></li>
</ul> </ul>
</section>
</body> </body>
</html> </html>

2
scripts/fuzzynav.js
View File

@ -1,6 +1,6 @@
(function () { (function () {
var client = new XMLHttpRequest(); var client = new XMLHttpRequest();
client.open("GET", "pages.json"); client.open("GET", "/pages.json");
client.onreadystatechange = function () { client.onreadystatechange = function () {
initFuzzy(client.responseText); initFuzzy(client.responseText);
} }

60
stylesheets/persia.css
View File

@ -94,7 +94,7 @@ p {
} }
a { a {
color: #b0e1ff; color: #002bff;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
outline: none; outline: none;
@ -106,6 +106,10 @@ a:focus {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
section {
margin: 0.5rem;
}
.button { .button {
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
@ -121,32 +125,47 @@ a:focus {
border-radius: 0.25rem; border-radius: 0.25rem;
transition: filter 250ms ease; transition: filter 250ms ease;
color: #fff; color: #fff;
background: linear-gradient(#90c541, #388c73); background: linear-gradient(rgb(76 70 167), rgb(0 43 255));
margin: 0.25rem; margin: 0.25rem 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 3px 0 rgba(255, 255, 255, 0.1);
cursor: pointer;
} }
.button:hover { .button:hover {
filter: brightness(115%); filter: brightness(125%);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.button:focus { .button:focus {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.1), box-shadow: 0 0 0 0.1rem rgb(255, 255, 255);
0 0 0 0.2rem rgb(89, 149, 0);
border: none; border: none;
outline: none; outline: none;
} }
.title { .title {
display: none; white-space: pre-wrap;
padding: 0.25rem 0.5rem;
text-align: center;
font-size: 3rem; font-size: 3rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background: rgba(0,0,0,.3);
}
.input {
display: inline-block;
box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
padding: 0.5rem;
border: none;
outline: none;
}
.nav-list {
margin: 1rem;
padding: 0;
} }
.fuzzynav { .fuzzynav {
position: relative;
margin: 2rem; margin: 2rem;
} }
@ -162,19 +181,10 @@ a:focus {
outline: none; outline: none;
} }
.fuzzynav input.search::placeholder { .fuzzynav input.search::placeholder {
color: rgb(214, 214, 214); color: rgb(214, 214, 214);
/* font-style: italic; */ font-style: italic;
}
.fuzzynav input.search::after {
content: "";
/* padding: 0.5rem;
display: block;
position: absolute;
top:0;
left:0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDMyIDMyIgogICA+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPHBhdGgKICAgICBpZD0icGF0aDQ3NjIiCiAgICAgZD0iTSAyMCAwIEEgMTIgMTIgMCAwIDAgOCAxMiBBIDEyIDEyIDAgMCAwIDEwLjg0NTcwMyAxOS43NDAyMzQgTCAwIDMwLjU4NTkzOCBMIDEuNDE0MDYyNSAzMiBMIDEyLjI1MTk1MyAyMS4xNjIxMDkgQSAxMiAxMiAwIDAgMCAyMCAyNCBBIDEyIDEyIDAgMCAwIDMyIDEyIEEgMTIgMTIgMCAwIDAgMjAgMCB6IE0gMjAgMiBBIDEwIDEwIDAgMCAxIDMwIDEyIEEgMTAgMTAgMCAwIDEgMjAgMjIgQSAxMCAxMCAwIDAgMSAxMCAxMiBBIDEwIDEwIDAgMCAxIDIwIDIgeiAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7IiAvPgo8L3N2Zz4K); */
} }
.fuzzynav div.results { .fuzzynav div.results {
@ -182,7 +192,7 @@ a:focus {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.nav-list a,
.fuzzynav div.results .hyperlink { .fuzzynav div.results .hyperlink {
color: #009dff; color: #009dff;
background-color: rgba(34, 34, 34, 0.616); background-color: rgba(34, 34, 34, 0.616);
@ -196,7 +206,7 @@ a:focus {
text-decoration: none; text-decoration: none;
} }
.nav-list a:hover,
.fuzzynav div.results .hyperlink:hover { .fuzzynav div.results .hyperlink:hover {
text-decoration: none; text-decoration: none;
transform: scale(1.01); transform: scale(1.01);
@ -206,6 +216,7 @@ a:focus {
box-shadow: 0 0 1px 1px rgb(255, 255, 255); box-shadow: 0 0 1px 1px rgb(255, 255, 255);
} }
.nav-list a,
.fuzzynav div.results .hyperlink .name { .fuzzynav div.results .hyperlink .name {
color: #ffffff; color: #ffffff;
} }
@ -234,4 +245,5 @@ footer {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }