PROGRESS OR SLOPPY COPYPASTA? YOU DECIDE! (Aug 3, 2020)
+
More Kirby.
+
+
I copied most of the html and CSS from
+ here.
+ Even so, I am reasonably proud of myself for putting it together, even if it started out as a
+ big copypasta. I "hacked" on a bunch of it to make it my own and turn it into something that is
+ a bit more likeable than it was when I started.
+
It's not great, but it's a nice start. After all, I've got a couple pictures
+ of Kirbs to show for it. It's enough to warrant a `git push`
+ I think.
+
+
+
MAKING PROGRESS (Aug 2, 2020)
+
CSS + html = I have a fancy, responsive website.
+
+
I created a website to sell my book. Buy my new book. On sale now.
+
That is completely true, except for the part about there being a book (i.e.,
+ that was false, and there is no book).
+
+
+
+
+
+
+
+
+
+
-
+
+
\ No newline at end of file
diff --git a/scoobs.xyz/style.css b/scoobs.xyz/style.css
new file mode 100644
index 0000000..589f86e
--- /dev/null
+++ b/scoobs.xyz/style.css
@@ -0,0 +1,120 @@
+* {
+ box-sizing: border-box;
+}
+
+/* Style the body */
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 0;
+}
+
+/* Header/logo Title */
+.header-border {
+ padding: 30px;
+ text-align: center;
+ background: #526e8d;
+ color: rgb(189, 182, 182);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/* Increase the font size of the heading */
+.header-border h1 {
+ font-size: 40px;
+}
+
+/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
+.navbar {
+ overflow: hidden;
+ background-color: #333;
+ position: sticky;
+ position: -webkit-sticky;
+ top: 0;
+}
+
+/* Style the navigation bar links */
+.navbar a {
+ float: left;
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 20px;
+ text-decoration: none;
+}
+
+
+/* Right-aligned link */
+.navbar a.right {
+ float: right;
+}
+
+/* Change color on hover */
+.navbar a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+/* Active/current link */
+.navbar a.active {
+ background-color: #666;
+ color: white;
+}
+
+/* Column container */
+.row {
+ display: -ms-flexbox;
+ /* IE10 */
+ display: flex;
+ -ms-flex-wrap: wrap;
+ /* IE10 */
+ flex-wrap: wrap;
+}
+
+/* Create two unequal columns that sits next to each other */
+/* Sidebar/left column */
+.side {
+ -ms-flex: 30%;
+ /* IE10 */
+ flex: 30%;
+ background-color: #dad8d8;
+ padding: 20px;
+ color: rgb(116, 111, 111);
+}
+
+/* Main column */
+.main {
+ -ms-flex: 70%;
+ /* IE10 */
+ flex: 70%;
+ background-color: rgb(87, 84, 84);
+ padding: 20px;
+ color: #e9e7e7;
+}
+
+/* Fake image, just for this example */
+.first_row_img {
+ background-color: rgb(194, 191, 191);
+ width: 100%;
+ padding: 20px;
+}
+
+/* Footer */
+.footer {
+ padding: 20px;
+ text-align: center;
+ background: rgb(190, 189, 189);
+}
+
+/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+ .row {
+ flex-direction: column;
+ }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
+@media screen and (max-width: 300px) {
+ .navbar a {
+ float: none;
+ width: 100%;
+ }
+}
\ No newline at end of file
