init
This commit is contained in:
Luke Ogburn
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
## ignore everything
|
||||||
|
*
|
||||||
|
|
||||||
|
|
||||||
|
## allow these files
|
||||||
|
|
||||||
|
# css
|
||||||
|
!style.css
|
||||||
|
!style-dark.css
|
||||||
|
!style-light.css
|
||||||
|
|
||||||
|
#images
|
||||||
|
!walker.png
|
||||||
|
!moon.svg
|
||||||
|
|
||||||
|
# PHP pages
|
||||||
|
!index.php
|
||||||
|
!head.php
|
||||||
|
!about.php
|
||||||
|
!projects.php
|
||||||
|
!top.php
|
||||||
|
|
||||||
|
# fonts, from google fonts
|
||||||
|
!lato.ttf
|
||||||
|
!heebo.ttf
|
||||||
|
|
||||||
|
# other
|
||||||
|
!.gitignore
|
||||||
|
!508.shtml
|
||||||
|
!504.shtml
|
||||||
|
!502.shtml
|
||||||
|
!404.shtml
|
||||||
|
!403.shtml
|
||||||
3
403.shtml
Normal file
3
403.shtml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<h1 style="text-align: center; font-family: monospace;">FORBIDDEN</h1>
|
||||||
|
<p style="text-align: center; font-family: monospace;">You are forbidden from this land. Forbidden.</p>
|
||||||
|
<!--Forbidden.-->
|
||||||
54
404.shtml
Normal file
54
404.shtml
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<style>
|
||||||
|
*{
|
||||||
|
transition: all 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
color: #888;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main{
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fof{
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
top: -18%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fof h1{
|
||||||
|
font-size: 5em;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
padding-right: 12px;
|
||||||
|
animation: type .5s alternate infinite;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #889;
|
||||||
|
}
|
||||||
|
@keyframes type{
|
||||||
|
from{box-shadow: inset -3px 0px 0px #888;}
|
||||||
|
to{box-shadow: inset -3px 0px 0px transparent;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="main">
|
||||||
|
<div class="fof">
|
||||||
|
<h1>Error 404</h1>
|
||||||
|
<h3>(Page Not Found)</h3>
|
||||||
|
<h3>[<a href="http://www.theoakbaron.com/">Go Back</a>]</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
502.shtml
Normal file
20
502.shtml
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ie_8.css" />
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="block_error">
|
||||||
|
<div>
|
||||||
|
<h2>Error 502. Bad Gateway</h2>
|
||||||
|
<p>The web server is temporary overloaded and can’t process your request. Please accept our apologies for the inconveniences this might cause to you.</p>
|
||||||
|
<p>Please try to access the site later.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
504.shtml
Normal file
20
504.shtml
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ie_8.css" />
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="block_error">
|
||||||
|
<div>
|
||||||
|
<h2>Error 504. Server is unavailable</h2>
|
||||||
|
<p>The server is temporary unavailable. Please accept our apologies for the inconveniences this might cause to you.
|
||||||
|
Please try to access the site later.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
508.shtml
Normal file
23
508.shtml
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ie_8.css" />
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="block_error">
|
||||||
|
<div>
|
||||||
|
<h2>Error 508. Resource Limit Is Reached</h2>
|
||||||
|
<p>The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.
|
||||||
|
Please read more about this error in our <a href=http://www.namecheap.com/support/knowledgebase/article.aspx/1128/103/what-happens-when-my-account-reaches-lve-limits-diagnosing-and-resolving>knowledgebase</a></p>
|
||||||
|
<p>
|
||||||
|
If you are the owner of the account and you see this error not for the first time please consider upgrading your plan to the package with higher resource allocation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
about.php
Normal file
30
about.php
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!--
|
||||||
|
Yes, I code everything myself.
|
||||||
|
I know HTML, CSS, PHP, and javascript
|
||||||
|
I avoid js wherever I can, usually substituting with CSS, but I can work with it.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<?php include "head.php"; ?>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<?php include "top.php"; ?>
|
||||||
|
|
||||||
|
<h2 id="name">ABOUT</h2>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Programmer</h2>
|
||||||
|
<p>I've used this website to practice my web development skills for about three years now. I have become a full-stack developer with expertise in: HTML, CSS, JS, PHP, and SQL Database design/management. While I have some experience using C++, Java, Bash, and Python, I have not developed any full applications with them.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h2>Student</h2>
|
||||||
|
<p>I am a freshman in college, majoring in both CS and ISAT. I'm interested in the field of technology but I'm not sure exactly what I want to do with it - so I'm double majoring to keep my doors open.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h2>Animals</h2>
|
||||||
|
<p>I think that goats are the dogs of the farm and ducks are the dogs of the air. I believe that having animals in your life is essential to mental health, so naturally I am looking forward to owning my own pets: Three goats, two dogs, and a duck.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
head.php
Normal file
8
head.php
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<title>Luke Ogburn</title>
|
||||||
|
<link rel='shortcut icon' type=image/png href=/walker.png>
|
||||||
|
<link rel=stylesheet href=style-<?=(isset($_GET["theme"])&&$_GET["theme"]=="dark")?"dark":"light";?>.css>
|
||||||
|
<link rel=stylesheet href=style.css>
|
||||||
|
<meta name=viewport content="width=device-width,initial-scale=1.0">
|
||||||
|
</head>
|
||||||
35
index.php
Normal file
35
index.php
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<!--
|
||||||
|
Yes, I code everything myself.
|
||||||
|
I know HTML, CSS, PHP, and javascript
|
||||||
|
I avoid js wherever I can, usually substituting with CSS, but I can work with it.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang=en>
|
||||||
|
<?php include "head.php"; ?>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<?php include "top.php"; ?>
|
||||||
|
|
||||||
|
<div id=content>
|
||||||
|
<p>My name is Luke Ogburn, and I'm a full stack web developer. I'm going to
|
||||||
|
JMU to major in Computer Science, and I'm going to study abroad if I can.
|
||||||
|
I'm still mostly self taught, but I'm certainly learning a lot through JMU.<br>
|
||||||
|
I have recently started to use <a target=_blank href=https://github.com/logburn>github</a>,
|
||||||
|
which you should definitely check out.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class=name>CONNECT</h2>
|
||||||
|
<div class=network>
|
||||||
|
<a class=networkLink target=_blank href=mailto:lukeogburn@gmail.com>GMAIL</a>
|
||||||
|
<a class=networkLink target=_blank href=mailto:lukeogburn@protonmail.com>PROTON</a>
|
||||||
|
<a class=networkLink target=_blank href=https://github.com/logburn>GITHUB</a>
|
||||||
|
<a class=networkLink target=_blank href=https://gitlab.com/logburn>GITLAB</a>
|
||||||
|
<a class=networkLink target=_blank href=https://stackoverflow.com/users/13157956/luke-ogburn>STACKOVERFLOW</a>
|
||||||
|
<a class=networkLink target=_blank href=https://linkedin.com/in/logburn>LINKEDIN</a>
|
||||||
|
<a class=networkLink target=_blank href=https://keybase.io/logburn>KEYBASE</a>
|
||||||
|
<a class=networkLink target=_blank href=https://pixelfed.social/logburn>PIXELFED</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5
moon.svg
Normal file
5
moon.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/></svg>
|
||||||
|
<!--
|
||||||
|
Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
|
||||||
|
License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||||
|
-->
|
||||||
|
After Width: | Height: | Size: 558 B |
49
projects.php
Normal file
49
projects.php
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
Yes, I code everything myself.
|
||||||
|
I know HTML, CSS, PHP, and javascript
|
||||||
|
I avoid js wherever I can, usually substituting with CSS, but I can work with it.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang=en>
|
||||||
|
<?php include "head.php"; ?>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<?php include "top.php"; ?>
|
||||||
|
|
||||||
|
<h2 id=name>PROJECTS</h2>
|
||||||
|
<div class=content>
|
||||||
|
These are my past projects. Some of them were designed to teach me back-end, and some were designed to teach me front-end. These were all learning experiences for me, so while nothing is designed to actually be used in mass (ei, the user interface may be poor), I learned a lot and designed each project to give me practice in a certain topic. Much of what I learned is missing from my earlier sites, since I learned as I created.
|
||||||
|
|
||||||
|
<h2>Web Riddles:</h2>
|
||||||
|
This web riddle series was a lot of fun for me to create. Once I got the design down, I was able to focus on the backend code, which was converted from an insecure piece of javascript to a much more secure PHP script (which also allowed me to keep everything on a single page).
|
||||||
|
<br>Technologies used: HTML, CSS, PHP, PDO, SQL<br>
|
||||||
|
You can find it <a href=https://lukeogburn.com/rwv target=_blank>here</a> if you want to check it out.
|
||||||
|
|
||||||
|
<h2>500 Words:</h2>
|
||||||
|
This site was based off of this site. I basically wanted to only write 500 words because 750 is just outrageous. It used to store information in an unencrypted text file, but I have updated it to be both encrypted and stored in a database instead. The encryption uses the user's password as a key, but since the password is hashed in the database there is no way for me, the owner, to unlock the information. This was something of an exploration into cryptography.
|
||||||
|
<br>Technologies used: HTML, CSS, JS, PHP, PDO, SQL<br>
|
||||||
|
You can find it <a href=https://lukeogburn.com/500 target=_blank>here</a> if you want to check it out.
|
||||||
|
|
||||||
|
<h2>Blog:</h2>
|
||||||
|
This blog never really amounted to much as I never really maintained it. It was mostly thrown together because I wanted to practice my PHP, so even though the blog itself is basically a failure I still gained a lot from it in terms of experience. I plan to bring it back one day, but I currently have no real reason to do so.
|
||||||
|
<br>Technologies used: HTML, CSS, PHP, PDO, SQL<br>
|
||||||
|
This site is now down; I do not blog anymore (might be up in the future).
|
||||||
|
|
||||||
|
<h2>Rubik's Cube:</h2>
|
||||||
|
This was actually the first page I made. It teaches methods on solving various Rubik's Cubes and mostly taught me CSS techniques. The original design was done with Wix before I knew anything about web development. It got me going in this whole business.<br>
|
||||||
|
Technologies used: HTML, CSS<br>
|
||||||
|
You can find it <a href=https://lukeogburn.com/cube target=_blank>here</a> if you want to check it out.
|
||||||
|
|
||||||
|
<h2>IB Site:</h2>
|
||||||
|
This is basically a social media site. I designed it to be used for school-based things such as uploading notes or asking questions. It can, theoretically, be used for anything, but it is really designed for uploading notes that have been saved as an image file or as a document file. This site taught me a ton about the technologies I used and the interactions between them. Note that you currently need a school-assigned HCPS email account to access the website (this will be changing at some point, but has not yet). Unfortunately, this site is now broken due to my school changing the email addresses for students. It requires an email to login, so while students can log in, there are a few things that don't work (like tagging users). It isn't worth the effort to maintain, so I'm not going to edit it until I spontaneously get the energy.
|
||||||
|
<br>Technologies used: HTML, CSS, JS, PHP, PDO, SQL, Google OAuth API, Regex<br>
|
||||||
|
This site is currently not working, since it requries a Google Suite account, the domain of which has shut down recently. I plan to get it up (non-functionally) at some point.
|
||||||
|
|
||||||
|
<h2>URL Shortener:</h2>
|
||||||
|
This site was fun to make and I do use it myself. All it does is take a URL and make it into another url. For example, lukeogburn.com is shortened to lukeo.link/TvVif. If a URL is submitted again, it will use the same short URL as before. I did buy a separate domain for this site, so I won't be keeping up with it once I decide that it's not worth the price. No idea when that'll be, so for now it's only use is as a temporary URL shortener for simple convenience.
|
||||||
|
<br>Technologies used: HTML, CSS, PHP, PDO, SQL<br>
|
||||||
|
You can find it <a href=https://lukeo.link target=_blank>here</a> if you want to check it out.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
style-dark.css
Normal file
9
style-dark.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
:root{
|
||||||
|
--bg-color: #111;
|
||||||
|
--txt-color: #ddd;
|
||||||
|
--secondary-txt-color: #fff;
|
||||||
|
--green: #198c47;
|
||||||
|
}
|
||||||
|
#moonImg{
|
||||||
|
filter: invert(100%) opacity(60%);
|
||||||
|
}
|
||||||
9
style-light.css
Normal file
9
style-light.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
:root{
|
||||||
|
--bg-color: #f1f2f3;
|
||||||
|
--txt-color: #222;
|
||||||
|
--secondary-txt-color: #000;
|
||||||
|
--green: #00ab44;
|
||||||
|
}
|
||||||
|
#moonImg{
|
||||||
|
filter: opacity(60%);
|
||||||
|
}
|
||||||
151
style.css
Normal file
151
style.css
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
@font-face{
|
||||||
|
font-family: Heebo;
|
||||||
|
src: url('heebo.ttf');
|
||||||
|
}
|
||||||
|
@font-face{
|
||||||
|
font-family: Lato;
|
||||||
|
src: url('lato.ttf');
|
||||||
|
}
|
||||||
|
*{
|
||||||
|
transition: 400ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: Lato, sans-serif;
|
||||||
|
width: 60%;
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
line-height: 1.7em;
|
||||||
|
transition: 500ms;
|
||||||
|
padding-bottom: 5vh;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--txt-color);
|
||||||
|
font-size: 1.07em;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6{
|
||||||
|
font-family: Heebo, sans-serif;
|
||||||
|
color: var(--secondary-txt-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-khtml-user-select: none; /* Konqueror HTML */
|
||||||
|
-moz-user-select: none; /* Old versions of Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
user-select: none; /* Non-prefixed version, currently
|
||||||
|
supported by Chrome, Opera and Firefox */
|
||||||
|
}
|
||||||
|
.theme{
|
||||||
|
width: 1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
#moonImg{
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.mi{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
.mi:not(:last-of-type){
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.7em;
|
||||||
|
}
|
||||||
|
#me{
|
||||||
|
font-size: 2.5em;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: var(--green);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.content>h2{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.content>p{
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name:last-of-type{
|
||||||
|
margin-top: 7vh;
|
||||||
|
}
|
||||||
|
.network{
|
||||||
|
position: relative;
|
||||||
|
top: 1vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
width: 100%;
|
||||||
|
grid-column-gap: 1em;
|
||||||
|
grid-row-gap: 1em; /*used in @media*/
|
||||||
|
}
|
||||||
|
.networkLink{
|
||||||
|
font-family: Heebo, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid var(--green);
|
||||||
|
border-radius: 0.3em;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
.networkLink:hover{
|
||||||
|
background-color: var(--green);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 1000px){
|
||||||
|
body{
|
||||||
|
width: 80%;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
}
|
||||||
|
.network{
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px){
|
||||||
|
body{
|
||||||
|
width: 90%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
.mi, .mi:not(:last-of-type){
|
||||||
|
display: block;
|
||||||
|
margin: 0px;
|
||||||
|
transition: 300ms;
|
||||||
|
}
|
||||||
|
#me{
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.network{
|
||||||
|
grid-template-columns: repeat(2, 1fr) !important;
|
||||||
|
}
|
||||||
|
.theme{
|
||||||
|
top: 20px;
|
||||||
|
right: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
60
top.php
Normal file
60
top.php
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<div class=theme>
|
||||||
|
<label>
|
||||||
|
<input id=themeCheckbox onclick='changeCSS("style-<?=(isset($_GET['theme'])&&$_GET['theme']=='dark')?'light':'dark';?>.css")' type=checkbox style=display:none>
|
||||||
|
<img id=moonImg class=noselect src=moon.svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// function modified from lukeo.link/2o5e
|
||||||
|
function changeCSS(cssFile) {
|
||||||
|
var oldlink = document.getElementsByTagName("link").item(1);
|
||||||
|
|
||||||
|
var newlink = document.createElement("link");
|
||||||
|
newlink.setAttribute("rel", "stylesheet");
|
||||||
|
newlink.setAttribute("type", "text/css");
|
||||||
|
newlink.setAttribute("href", cssFile);
|
||||||
|
|
||||||
|
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
|
||||||
|
|
||||||
|
function addGet(j){
|
||||||
|
for(var i = 1; i <= j; i++){
|
||||||
|
var el = document.getElementById("js"+i);
|
||||||
|
var oldAttr = el.getAttribute("href");
|
||||||
|
el.setAttribute("href", oldAttr+"?theme=dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function removeGet(j){
|
||||||
|
for(var i = 1; i <= j; i++){
|
||||||
|
var el = document.getElementById("js"+i);
|
||||||
|
var oldAttr = el.getAttribute("href");
|
||||||
|
var replaced = oldAttr.replace("?theme=dark", "");
|
||||||
|
el.setAttribute("href", replaced);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var checkbox = document.getElementById("themeCheckbox");
|
||||||
|
switch(cssFile){
|
||||||
|
case "style-light.css":
|
||||||
|
removeGet(4);
|
||||||
|
checkbox.setAttribute("onclick", "changeCSS('style-dark.css')");
|
||||||
|
break;
|
||||||
|
case "style-dark.css":
|
||||||
|
addGet(4);
|
||||||
|
checkbox.setAttribute("onclick", "changeCSS('style-light.css')");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<?php
|
||||||
|
$addon = (isset($_GET["theme"])&&$_GET["theme"]=="dark") ? "?theme=dark" : "" ;
|
||||||
|
?>
|
||||||
|
<div id=top>
|
||||||
|
<h1 id=me>LUKE OGBURN</h1>
|
||||||
|
<div id=menu>
|
||||||
|
<h3 class=mi><a id=js1 href=/<?=$addon?>>HOME</a></h3><!--
|
||||||
|
--><h3 class=mi><a id=js2 href=about.php<?=$addon?>>ABOUT</a></h3><!--
|
||||||
|
--><h3 class=mi><a id=js3 href=projects.php<?=$addon?>>PROJECTS</a></h3><!--
|
||||||
|
--><h3 class=mi><a id=js4 href=https://lukeo.link/<?=$addon?> target=_blank>URLS</a></h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
BIN
walker.png
Normal file
BIN
walker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user