Navigation & Theme/Layout template
This commit is contained in:
Jim Shepich III
parent
898e6fd836
commit
e34bbdf165
@ -1,12 +1,29 @@
|
||||
{
|
||||
"home" : {
|
||||
"name" : "Home",
|
||||
"file" : "home.html"
|
||||
"query_value" : "home",
|
||||
"file" : "home.html",
|
||||
"index" : 0
|
||||
},
|
||||
|
||||
"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>
|
||||
<script src="scripts/jquery-3.6.0.min.js"></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/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';?>
|
||||
<title><?php
|
||||
echo $page->name." | Jim Shepich";
|
||||
@ -15,8 +18,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="main-header">
|
||||
Jim Shepich Homepage
|
||||
<span class="silver-text">Jim Shepich III</span>
|
||||
</header>
|
||||
<nav id="main-navbar">
|
||||
<?php include 'scripts/nav.php';?>
|
||||
</nav>
|
||||
<main>
|
||||
<?php
|
||||
//echo "<iframe id='content' src='pages/".$page->file."'></iframe>";
|
||||
@ -24,7 +30,7 @@
|
||||
?>
|
||||
</main>
|
||||
<footer>
|
||||
<div id="socials"><?php include 'scripts/footer.php';?></div>
|
||||
<div id="socials" class="silver-text"><?php include 'scripts/footer.php';?></div>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="scripts/resize.js"></script>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<h1>404 Error</h1>
|
||||
<hr />
|
||||
<span id="404-message"></span>
|
||||
<script>
|
||||
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 {
|
||||
--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