diff --git a/data/pages.json b/data/pages.json index 5b3b6c4..7c7a641 100644 --- a/data/pages.json +++ b/data/pages.json @@ -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 + } } diff --git a/index.html b/index.html deleted file mode 100644 index 9f86d93..0000000 --- a/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - CHEM216HTML - - - - - -
- - - - - -
-
- -
-
- - - - - - - - - - diff --git a/index.php b/index.php index 66e93d3..5d31ec2 100644 --- a/index.php +++ b/index.php @@ -5,9 +5,12 @@ + - + + + <?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> diff --git a/pages/404.html b/pages/404.html index 9eef5f0..f59e4e7 100644 --- a/pages/404.html +++ b/pages/404.html @@ -1,4 +1,5 @@ <h1>404 Error</h1> +<hr /> <span id="404-message"></span> <script> var query_page = $("[name='query_page']")[0].innerHTML; diff --git a/pages/about.html b/pages/about.html new file mode 100644 index 0000000..1814990 --- /dev/null +++ b/pages/about.html @@ -0,0 +1,3 @@ +<h1>About</h1> +<hr /> +real facts diff --git a/scripts/nav.php b/scripts/nav.php new file mode 100644 index 0000000..e588cc8 --- /dev/null +++ b/scripts/nav.php @@ -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. + } +} + +?> diff --git a/styles/common.css b/styles/common.css index 7d3ef6d..1fddece 100644 --- a/styles/common.css +++ b/styles/common.css @@ -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)*/ } /* diff --git a/styles/layout.css b/styles/layout.css new file mode 100644 index 0000000..7a759c2 --- /dev/null +++ b/styles/layout.css @@ -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; +} diff --git a/styles/main.css b/styles/main.css deleted file mode 100644 index 488820b..0000000 --- a/styles/main.css +++ /dev/null @@ -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; - -} diff --git a/styles/theme.css b/styles/theme.css new file mode 100644 index 0000000..1796bcc --- /dev/null +++ b/styles/theme.css @@ -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); +}