commit 70bad91505aeb06606fd162b2970a079d209971c
parent 4640cc3e2564123a935f0a47facc84a3741f1e41
Author: jack <0x6A73@pm.me>
Date: Sun, 6 Mar 2022 02:22:30 -0700
home button & other ui improvements
Diffstat:
8 files changed, 83 insertions(+), 24 deletions(-)
diff --git a/3dp.html b/3dp.html
@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
- <link rel="stylesheet" href="style.css">
- <script src="https://kit.fontawesome.com/4cff2376d1.js" crossorigin="anonymous"></script>
- <title>waffle87</title>
- </head>
- <body>
- <img src="media/pusheen_box.png" alt="pusheen on the computer" class="mx-auto d-block" width="250" height="250">
- <div class="container-fluid c5 text-center">
- <h3>3d printing</h3>
- <p>projects, modifications, & notes</p>
- </div>
- </body>
-</html>
diff --git a/dotfiles.html b/dotfiles.html
@@ -8,6 +8,7 @@
<title>waffle87</title>
</head>
<body>
+ <button type="button" onclick="window.location.href='index.html'" class="btn btn2"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_computer.png" alt="pusheen on the computer" class="mx-auto d-block" width="250" height="250">
<div class="container-fluid c2 text-center">
<h3>dotfiles</h3>
diff --git a/index.html b/index.html
@@ -8,14 +8,15 @@
<title>waffle87</title>
</head>
<body>
+ <button type="button" onclick="window.location.href='index.html'" class="btn btn1"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_hi.png" alt="pusheen says hi" class="mx-auto d-block" width="250" height="250">
- <div class="container-fluid c1 text-center">
+ <div class="container-fluid c1 text-center border rounded">
<h3>about</h3>
<p>small keyboard enjoyer & open source enthusiast</p>
</div>
<div class="row">
<div class="col-md-6">
- <div class="container row1">
+ <div class="container row1 border rounded">
<h3 class="text-center">info</h3>
<i class="fa-brands fa-github fa-lg"></i>
<a href="https://github.com/waffle87" target="_blank">waffle87</a>
@@ -31,7 +32,7 @@
</div>
</div>
<div class="col-md-6">
- <div class="container row1">
+ <div class="container row1 border rounded">
<h3 class="text-center">pages</h3>
<i class="fa-solid fa-angle-right"></i>
<a href="dotfiles.html">dotfiles</a>
@@ -43,7 +44,7 @@
<a href="kbdconfig.html" style="text-indent: 13px;">configuration</a>
<br>
<i class="fa-solid fa-angle-right"></i>
- <a href="3dp.html">3d printing</a>
+ <a href="other.html">other</a>
<br>
</div>
</div>
diff --git a/kbdconfig.html b/kbdconfig.html
@@ -8,6 +8,7 @@
<title>waffle87</title>
</head>
<body>
+ <button type="button" onclick="window.location.href='index.html'" class="btn btn4"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_keyboard.webp" alt="pusheen on the computer" class="mx-auto d-block" width="350" height="250">
<div class="container-fluid c4 text-center">
<h3>keyboard configurations</h3>
diff --git a/keyboards.html b/keyboards.html
@@ -8,6 +8,7 @@
<title>waffle87</title>
</head>
<body>
+<button type="button" onclick="window.location.href='index.html'" class="btn btn3"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_keyboard.webp" alt="pusheen on the computer" class="mx-auto d-block" width="350" height="250">
<div class="container-fluid c3 text-center">
<h3>keyboards</h3>
diff --git a/other.html b/other.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+ <link rel="stylesheet" href="style.css">
+ <script src="https://kit.fontawesome.com/4cff2376d1.js" crossorigin="anonymous"></script>
+ <title>waffle87</title>
+ </head>
+ <body>
+ <button type="button" onclick="window.location.href='index.html'" class="btn btn5"><i class="fa-solid fa-house"></i>home</button>
+ <img src="media/pusheen_box.png" alt="pusheen on the computer" class="mx-auto d-block" width="250" height="250">
+ <div class="container-fluid c5 text-center">
+ <h3>other</h3>
+ <p>audio, 3d printing, & anything else</p>
+ </div>
+ </body>
+</html>
diff --git a/photos.html b/photos.html
diff --git a/style.css b/style.css
@@ -15,6 +15,7 @@
--pink: #f5c2e7;
--maroon: #e8a2af;
--gray: #988ba2;
+ --mauve: #ddb6f2;
}
body {
@@ -24,15 +25,68 @@ body {
font-size: 18px;
}
+.btn {
+ border: none;
+ margin: 5px 0 0 5px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.btn1 { /*home*/
+ color: var(--lavender);
+}
+
+.btn1:hover {
+ background-color: var(--lavender);
+ color: var(--dark);
+}
+
+.btn2 { /*dotfiles*/
+ color: var(--peach);
+}
+
+.btn2:hover {
+ background-color: var(--peach);
+ color: var(--dark);
+}
+
+.btn3 { /*keyboards*/
+ color: var(--yellow);
+}
+
+.btn3:hover {
+ background-color: var(--yellow);
+ color: var(--dark);
+}
+
+.btn4 { /*configuration*/
+ color: var(--blue);
+}
+
+.btn4:hover {
+ background-color: var(--blue);
+ color: var(--dark);
+}
+
+.btn5 { /*other*/
+ color: var(--maroon);
+}
+
+.btn5:hover {
+ background-color: var(--maroon);
+ color: var(--dark);
+}
+
.c1 { /*home*/
background-color: var(--lavender);
+ margin-bottom: 15px;
}
.c2 { /*dotfiles*/
background-color: var(--peach);
}
-.c3 {
+.c3 { /*keyboards*/
background-color: var(--yellow);
}
@@ -53,12 +107,12 @@ body {
::-moz-selection {
color: var(--dark);
- background: var(--yellow);
+ background: var(--mauve);
}
::selection {
color: var(--dark);
- background: var(--yellow);
+ background: var(--mauve);
}
i {
