Navigation & Theme/Layout template
This commit is contained in:
Jim Shepich III
parent
898e6fd836
commit
e34bbdf165
@ -1,12 +1,29 @@
|
|||||||
{
|
{
|
||||||
"home" : {
|
"home" : {
|
||||||
"name" : "Home",
|
"name" : "Home",
|
||||||
"file" : "home.html"
|
"query_value" : "home",
|
||||||
|
"file" : "home.html",
|
||||||
|
"index" : 0
|
||||||
},
|
},
|
||||||
|
|
||||||
"404" : {
|
"404" : {
|
||||||
"name" : "404",
|
"name" : "404",
|
||||||
"file" : "404.html"
|
"query_value" : "404",
|
||||||
|
"file" : "404.html",
|
||||||
|
"index" : -1
|
||||||
},
|
},
|
||||||
"test":"schwifty"
|
|
||||||
|
"about" : {
|
||||||
|
"name" : "About",
|
||||||
|
"query_value" : "about",
|
||||||
|
"file" : "about.html",
|
||||||
|
"index" : 1
|
||||||
|
},
|
||||||
|
|
||||||
|
"epics" : {
|
||||||
|
"name" : "Epics & Emprises",
|
||||||
|
"query_value" : "epics",
|
||||||
|
"link" : "https://shepich.com/epics",
|
||||||
|
"index" : -1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
44
index.html
44
index.html
@ -1,44 +0,0 @@
|
|||||||
<html>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" type="text/css" href="main.css">
|
|
||||||
<link id ="stylesheet" rel="stylesheet" type="text/css" href="">
|
|
||||||
<!--<link rel="stylesheet" type="text/css" href="css/home.css">-->
|
|
||||||
<title>CHEM216HTML</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="logo" onload="logoloader()"><p id="logop" align="center" onload="logoloader()">Total Synthesis of (−)-Nahuoic Acid C<sub>i</sub> (B<sub>ii</sub>)</p></div>
|
|
||||||
<div class="container" id="container">
|
|
||||||
<!--********************************************Navigation Sidebar*******************************************************************-->
|
|
||||||
<div id="navibar">
|
|
||||||
<table id="navibartable">
|
|
||||||
<tr class="navibar" title="Pilot" target="home" style="font-weight:bold;"><td><a href="" class="navibarlink"><div class="gradient"><p class="padded"><br />HOME</p></div></a></td></tr>
|
|
||||||
<tr class="navibar" title="Get Schwifty" target="question"><td><a href="" class="navibarlink"><div class="gradient"><p class="padded"><br />LEADING QUESTION</p></div></a></td></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--************************************************Title of Page********************************************************************-->
|
|
||||||
<div id="title"></div>
|
|
||||||
<div id="contentarea">
|
|
||||||
<iframe id="frame"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
<!--******************************************************SCRIPT*********************************************************************-->
|
|
||||||
<script src="main.js"></script>
|
|
||||||
|
|
||||||
<script src="navigation.js"></script>
|
|
||||||
<script src="resize.js"></script>
|
|
||||||
<script>
|
|
||||||
if(window.self!==window.top/*&&window.location.toLocaleString().indexOf("deeper")>=0*/){
|
|
||||||
document.body.style.backgroundImage="url('images/backgrounds/miniverse"+Math.round(Math.random()*4+1)+".png')";
|
|
||||||
} else if(document.getElementById("frame").src.indexOf("index.html")>=0){
|
|
||||||
document.body.style.backgroundImage="url('images/backgrounds/microverse.png')";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script src="cheats.js"></script>
|
|
||||||
</html>
|
|
||||||
12
index.php
12
index.php
@ -5,9 +5,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<script src="scripts/jquery-3.6.0.min.js"></script>
|
<script src="scripts/jquery-3.6.0.min.js"></script>
|
||||||
<script src="https://kit.fontawesome.com/09beb7ae4a.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/09beb7ae4a.js" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="styles/reset.css">
|
<link rel="stylesheet" type="text/css" href="styles/reset.css">
|
||||||
<link rel="stylesheet" type="text/css" href="styles/common.css">
|
<link rel="stylesheet" type="text/css" href="styles/common.css">
|
||||||
<link rel="stylesheet" type="text/css" href="styles/main.css">
|
<link rel="stylesheet" type="text/css" href="styles/layout.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles/theme.css">
|
||||||
|
|
||||||
<?php include 'scripts/query_handler.php';?>
|
<?php include 'scripts/query_handler.php';?>
|
||||||
<title><?php
|
<title><?php
|
||||||
echo $page->name." | Jim Shepich";
|
echo $page->name." | Jim Shepich";
|
||||||
@ -15,8 +18,11 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header id="main-header">
|
<header id="main-header">
|
||||||
Jim Shepich Homepage
|
<span class="silver-text">Jim Shepich III</span>
|
||||||
</header>
|
</header>
|
||||||
|
<nav id="main-navbar">
|
||||||
|
<?php include 'scripts/nav.php';?>
|
||||||
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<?php
|
<?php
|
||||||
//echo "<iframe id='content' src='pages/".$page->file."'></iframe>";
|
//echo "<iframe id='content' src='pages/".$page->file."'></iframe>";
|
||||||
@ -24,7 +30,7 @@
|
|||||||
?>
|
?>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div id="socials"><?php include 'scripts/footer.php';?></div>
|
<div id="socials" class="silver-text"><?php include 'scripts/footer.php';?></div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
<script src="scripts/resize.js"></script>
|
<script src="scripts/resize.js"></script>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
<h1>404 Error</h1>
|
<h1>404 Error</h1>
|
||||||
|
<hr />
|
||||||
<span id="404-message"></span>
|
<span id="404-message"></span>
|
||||||
<script>
|
<script>
|
||||||
var query_page = $("[name='query_page']")[0].innerHTML;
|
var query_page = $("[name='query_page']")[0].innerHTML;
|
||||||
|
|||||||
3
pages/about.html
Normal file
3
pages/about.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<h1>About</h1>
|
||||||
|
<hr />
|
||||||
|
real facts
|
||||||
36
scripts/nav.php
Normal file
36
scripts/nav.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function page_comparator($a,$b){
|
||||||
|
//This function is the sorting criterion for the later call of usort, which will sort the page objects
|
||||||
|
//from pages.json in increasing order of their "index" value.
|
||||||
|
return $a->index > $b->index;
|
||||||
|
}
|
||||||
|
|
||||||
|
function gen_nav_element($page){
|
||||||
|
if(isset($page->file)){
|
||||||
|
$href = "/index.php?page=".$page->query_value;
|
||||||
|
$target = "_self";
|
||||||
|
//If the page is associated with a file, then point the navibar href to the file's query value.
|
||||||
|
} elseif(isset($page->link)) {
|
||||||
|
$href = $page->link;
|
||||||
|
$target = "_blank";
|
||||||
|
//If instead the page is associated with an external link, then point the navibar href there and make it open in a new window.
|
||||||
|
}
|
||||||
|
echo "<a href='".$href."' target='".$target."'><div class='nav-tab'>".$page->name."</div></a>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$page_array = get_object_vars($pages);
|
||||||
|
//Convert $pages from object to an associative array of [key=>val, key=>val]
|
||||||
|
//where the keys are the names of the page objects from the JSON file and the
|
||||||
|
//vals are the page objects themselves.
|
||||||
|
usort($page_array,"page_comparator");
|
||||||
|
//Sort the pages in order of increasing "index" value.
|
||||||
|
|
||||||
|
foreach($page_array as $key=>$p){
|
||||||
|
if($p->index>-1){
|
||||||
|
gen_nav_element($p);
|
||||||
|
//Pages with indices less than 0 are hidden from the navibar.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
@ -1,5 +1,10 @@
|
|||||||
:root {
|
:root {
|
||||||
--truest-blue:#0000FF;
|
--truest-blue:#44539c;
|
||||||
|
--shadow-gradient:linear-gradient(to bottom , rgba(0,0,0,0.6) , rgba(0,0,0,0.1));
|
||||||
|
--darker-gradient:linear-gradient(to bottom , rgba(0,0,0,0.8) , rgba(0,0,0,0.3));
|
||||||
|
--lighter-gradient:linear-gradient(to bottom , rgba(0,0,0,0.4) , rgba(0,0,0,0));
|
||||||
|
--silver: linear-gradient(45deg, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3);
|
||||||
|
/*https://www.schemecolor.com/light-silver-gradient.php)*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
56
styles/layout.css
Normal file
56
styles/layout.css
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
:root{
|
||||||
|
--hf-padding: 1%;
|
||||||
|
--main-height: 66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow-y:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
min-height:10%;
|
||||||
|
text-align:center;
|
||||||
|
padding: var(--hf-padding);
|
||||||
|
margin-bottom:1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav{
|
||||||
|
/*min-width:10%;
|
||||||
|
max-width:10%;*/
|
||||||
|
width:100px;
|
||||||
|
min-height:var(--main-height);
|
||||||
|
max-width:10%;
|
||||||
|
padding:5px;
|
||||||
|
padding-top:0%;
|
||||||
|
display:inline-block;
|
||||||
|
vertical-align:top;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
width: 80%;
|
||||||
|
max-width:80%;
|
||||||
|
background-color:white;
|
||||||
|
min-height: var(--main-height);
|
||||||
|
display:inline-block;
|
||||||
|
margin:1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
padding: var(--hf-padding);
|
||||||
|
margin-bottom:0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab{
|
||||||
|
width:100%;
|
||||||
|
display:block;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
@ -1,57 +0,0 @@
|
|||||||
:root{
|
|
||||||
--hf-padding: 1%;
|
|
||||||
--header-height: 10%;
|
|
||||||
--footer-height: 10%;
|
|
||||||
--main-height: 78%;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow-y:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
header{
|
|
||||||
height: var(--header-height);
|
|
||||||
font-size: 250%;
|
|
||||||
font-family: Beleren;
|
|
||||||
text-align:center;
|
|
||||||
padding: var(--hf-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
main{
|
|
||||||
font-family: fira;
|
|
||||||
width: 90%;
|
|
||||||
/*height: */
|
|
||||||
min-height: var(--main-height);
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
text-align: justify;
|
|
||||||
text-justify: inter-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer{
|
|
||||||
text-align:center;
|
|
||||||
padding: var(--hf-padding);
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color:inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
#socials{
|
|
||||||
}
|
|
||||||
|
|
||||||
#content{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-x:hidden;
|
|
||||||
overflow-y:auto;
|
|
||||||
|
|
||||||
}
|
|
||||||
144
styles/theme.css
Normal file
144
styles/theme.css
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
:root{
|
||||||
|
--body-bg: linear-gradient(to bottom, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3);
|
||||||
|
--body-bg-color: rgba(0,0,0,0);
|
||||||
|
--body-font: Fira;
|
||||||
|
|
||||||
|
--header-bg: default/*linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.2))*/;
|
||||||
|
--header-bg-color: #44539C;
|
||||||
|
--header-color: #D8D8D8;
|
||||||
|
--header-fontsize:250%;
|
||||||
|
--header-font: Beleren;
|
||||||
|
|
||||||
|
--footer-bg:inherit;
|
||||||
|
--footer-bg-color: #333333;
|
||||||
|
--footer-color:white;
|
||||||
|
--footer-fontsize:150%;
|
||||||
|
--footer-font: inherit;
|
||||||
|
|
||||||
|
--nav-bg:inherit;
|
||||||
|
--nav-bg-color: inherit;
|
||||||
|
--nav-color: white;
|
||||||
|
--nav-fontsize:125%;
|
||||||
|
--nav-font: inherit;
|
||||||
|
|
||||||
|
--navtab-default-bg: inherit;
|
||||||
|
--navtab-default-bg-color: var(--shadow-gradient);
|
||||||
|
--navtab-default-color: inherit;
|
||||||
|
--navtab-hover-bg: inherit;
|
||||||
|
--navtab-hover-bg-color: var(--darker-gradient);
|
||||||
|
--navtab-hover-color: inherit;
|
||||||
|
--navtab-active-bg: inherit;
|
||||||
|
--navtab-active-bg-color: var(--lighter-gradient);
|
||||||
|
--navtab-active-color: inherit;
|
||||||
|
|
||||||
|
|
||||||
|
--main-bg: inherit;
|
||||||
|
--main-bg-color: white;
|
||||||
|
--main-color: black;
|
||||||
|
--main-fontsize:100%;
|
||||||
|
--main-font: inherit;
|
||||||
|
|
||||||
|
--hr-border: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: var(--body-bg);
|
||||||
|
background-color: var(--body-bg-color);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
font-family: var(--body-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
background: var(--header-bg);
|
||||||
|
background-color: var(--header-bg-color);
|
||||||
|
color: var(--header-color);
|
||||||
|
font-size: var(--header-fontsize);
|
||||||
|
font-family: var(--header-font);
|
||||||
|
|
||||||
|
|
||||||
|
/*text-shadow: 1px 0 2px black, -1px 0 2px black, 0 1px 2px black, 0 -1px 2px black;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.silver-text{
|
||||||
|
background: var(--silver);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-moz-background-clip: text;
|
||||||
|
-moz-text-fill-color: transparent;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav{
|
||||||
|
background-color: var(--nav-bg-color);
|
||||||
|
background: var(--nav-bg);
|
||||||
|
color: var(--nav-color);
|
||||||
|
font-size: var(--nav-fontsize);
|
||||||
|
font-family: var(--nav-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
background: var(--main-bg);
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
|
color: var(--main-color);
|
||||||
|
font-size: var(--main-fontsize);
|
||||||
|
font-family: var(--main-font);
|
||||||
|
text-align: justify;
|
||||||
|
text-justify: inter-word;
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
background: var(--footer-bg);
|
||||||
|
background-color: var(--footer-bg-color);
|
||||||
|
color: var(--footer-color);
|
||||||
|
font-size: var(--footer-fontsize);
|
||||||
|
font-family: var(--footer-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color:inherit;
|
||||||
|
text-decoration:inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab{
|
||||||
|
|
||||||
|
background: var(--navtab-default-bg);
|
||||||
|
background-color: var(--navtab-default-bg-color);
|
||||||
|
color: var(--navtab-default-color);
|
||||||
|
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
border-left: 1px solid #000;
|
||||||
|
border-right: 1px solid #000;
|
||||||
|
border-top: 1px solid #000;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
/*border-spacing:2px;
|
||||||
|
border-radius: 10px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab:hover{
|
||||||
|
background: var(--navtab-hover-bg);
|
||||||
|
background-color: var(--navtab-hover-bg-color);
|
||||||
|
color: var(--navtab-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab:active{
|
||||||
|
background: var(--navtab-active-bg);
|
||||||
|
background-color: var(--navtab-active-bg-color);
|
||||||
|
color: var(--navtab-active-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-align:left;
|
||||||
|
/*margin-left:auto;
|
||||||
|
margin-right:auto;*/
|
||||||
|
font-size:150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr{
|
||||||
|
border: none;
|
||||||
|
border-top: var(--hr-border);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user