notherbase-fs 1.2.12 → 1.2.15

package/controllers/inventory.js

@@ -29,73 +29,76 @@ router.get("/", async function(req, res) {
 router.post("/", async function(req, res) {
     if (connectionSuccess) {
         try {
-            if (req.session.currentUser) {
-                let foundInventory = await inventory.findOne({user: req.session.currentUser}).populate("items.item");
-    
-                let holding = false;
-    
-                for (let j = 0; j < foundInventory.items.length; j++) {
-                    if (foundInventory.items[j].item._id.equals(req.body.change.item)) {
-                        holding = true;
-    
-                        if (foundInventory.items[j].amount >= -Math.floor(req.body.change.amount)) {
-                            foundInventory.items[j].amount += Math.floor(req.body.change.amount);
-    
-                            if (foundInventory.items[j].amount === 0) {
-                                let itemToEmpty = foundInventory.items[j].item._id;
-    
-                                foundInventory.items.splice(j, 1);
-                                await foundInventory.save();
+            if (req.body.item && req.body.amount) {
+                if (req.session.currentUser) {
+                    let foundInventory = await inventory.findOne({user: req.session.currentUser}).populate("items.item");
         
-                                res.status(200).send({
-                                    item: {
-                                        _id: itemToEmpty
-                                    },
-                                    amount: 0
-                                });
+                    let holding = false;
+        
+                    for (let j = 0; j < foundInventory.items.length; j++) {
+                        if (foundInventory.items[j].item._id.equals(req.body.item)) {
+                            holding = true;
+        
+                            if (foundInventory.items[j].amount >= -Math.floor(req.body.amount)) {
+                                foundInventory.items[j].amount += Math.floor(req.body.amount);
+        
+                                if (foundInventory.items[j].amount === 0) {
+                                    let itemToEmpty = foundInventory.items[j].item._id;
+        
+                                    foundInventory.items.splice(j, 1);
+                                    await foundInventory.save();
+            
+                                    res.status(200).send({
+                                        item: itemToEmpty,
+                                        amount: 0
+                                    });
+                                }
+                                else {
+                                    await foundInventory.save();
+            
+                                    res.status(200).send(foundInventory.items[j]);
+                                }
                             }
                             else {
-                                await foundInventory.save();
-        
-                                res.status(200).send(foundInventory.items[j]);
+                                console.log("subtract from too few", req.change);
+                                res.status(304).send(
+                                    `Unable to remove ${req.body.amount} ${req.body.item} 
+                                    from inventory because the inventory has only ${foundInventory.items[j].amount}.`
+                                );
                             }
+        
+                            break;
+                        }
+                    }
+                    
+                    if (!holding) {
+                        if (req.body.amount > 0) {
+                            foundInventory.items.push({
+                                item: req.body.item,
+                                amount: req.body.amount
+                            });
+        
+                            await foundInventory.save();
+        
+                            await inventory.populate(foundInventory, "items.item");
+        
+                            res.status(200).send(foundInventory.items[foundInventory.items.length - 1]);
                         }
                         else {
-                            console.log("subtract from too few", req.body.change);
+                            console.log("subtract from none", req.body);
                             res.status(304).send(
-                                `Unable to remove ${req.body.change.amount} ${req.body.change.item} 
-                                from inventory because the inventory has only ${foundInventory.items[j].amount}.`
+                                `Unable to remove ${req.body.amount} ${req.body.item} 
+                                from inventory because the inventory has none.`
                             );
                         }
-    
-                        break;
-                    }
+                    };
+                }
+                else {
+                    res.status(401).send("User not logged in!");
                 }
-                
-                if (!holding) {
-                    if (req.body.change.amount > 0) {
-                        foundInventory.items.push({
-                            item: req.body.change.item,
-                            amount: req.body.change.amount
-                        });
-    
-                        await foundInventory.save();
-    
-                        await inventory.populate(foundInventory, "items.item");
-    
-                        res.status(200).send(foundInventory.items[foundInventory.items.length - 1]);
-                    }
-                    else {
-                        console.log("subtract from none", req.body.change);
-                        res.status(304).send(
-                            `Unable to remove ${req.body.change.amount} ${req.body.change.item} 
-                            from inventory because the inventory has none.`
-                        );
-                    }
-                };
             }
             else {
-                res.status(401).send("User not logged in!");
+                res.status(400).send("Check input!");
             }
         }
         catch(err) {

package/controllers/item.js

@@ -16,12 +16,11 @@ router.get("/all", async function(req, res) {
     }
 });
 
-router.get("/findOne", async function(req, res) {
+router.get("/", async function(req, res) {
     try {
-        let foundItem = await items.findOne({name: req.query.name});
+        let foundItem = await items.findOne({ name: req.query.name });
 
-        if (!foundItem) res.status(500).end();
-        else res.status(200).send({ foundItem: foundItem });
+        res.status(200).send({ foundItem: foundItem });
     }
     catch(err) {
         res.status(500).end();
@@ -29,11 +28,27 @@ router.get("/findOne", async function(req, res) {
     }
 });
 
-router.get("/", async function(req, res) {
+router.post("/", async function(req, res) {
     try {
-        let foundItems = await items.find({ name: { $regex: req.query.name } });
+        if (!req.body.id) {
+            await items.create({
+                name: req.body.name,
+                shortDescription: req.body.shortDescription,
+                fullDescription: req.body.fullDescription
+            });
+        }
+        else {
+            let foundItem = await items.findById(req.body.id);
 
-        res.status(200).send({ foundItems: foundItems });
+            if (foundItem) {
+                foundItem.name = req.body.name;
+                foundItem.shortDescription = req.body.shortDescription;
+                foundItem.fullDescription = req.body.fullDescription;
+                await foundItem.save();
+            }
+        }
+
+        res.status(200).end();
     }
     catch(err) {
         res.status(500).end();
@@ -41,13 +56,9 @@ router.get("/", async function(req, res) {
     }
 });
 
-router.post("/", async function(req, res) {
+router.post("/delete", async function(req, res) {
     try {
-        await items.create({
-            name: req.body.name,
-            shortDescription: req.body.shortDescription,
-            fullDescription: req.body.fullDescription
-        });
+        await items.findByIdAndDelete(req.body.id);
 
         res.status(200).end();
     }
@@ -57,5 +68,4 @@ router.post("/", async function(req, res) {
     }
 });
 
-
 module.exports = router;

package/controllers/pages.js

@@ -8,7 +8,6 @@ module.exports = function name(path)
 
     files.forEach(file => {
         file = file.slice(0, -4);
-        console.log(file);
 
         router.get(`/${file}`, function(req, res) {
             res.render(`${path}/${file}.ejs`);

package/controllers/the-front.js

@@ -1,4 +1,4 @@
-const { user, inventory, connectionSuccess } = require("../models");
+const { user, inventory, connectionSuccess, item } = require("../models");
 const path = require('path');
 
 let router = require("express").Router();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notherbase-fs",
-  "version": "1.2.12",
+  "version": "1.2.15",
   "description": "Functions to help make developing for NotherBase easier.",
   "main": "index.js",
   "scripts": {

package/test/coast/tall-beach/nono-cove/local-scripts/items.js

@@ -0,0 +1,162 @@
+class ItemFloor {
+    constructor() {
+        this.items = [];
+        this.$itemList = $(".floor#items ul.items");
+        this.$items = $(".floor#items ul.items li");
+
+        this.$read = $(".floor#items .editor .read");
+        this.$readName = $(".floor#items .editor .read #name");
+        this.$readShort = $(".floor#items .editor .read #short");
+        this.$readFull = $(".floor#items .editor .read #full");
+
+        this.$edit = $(".floor#items .editor .edit");
+        this.$editName = $(".floor#items .editor .edit #name");
+        this.$editShort = $(".floor#items .editor .edit #short");
+        this.$editFull = $(".floor#items .editor .edit #full");
+
+        this.selected = -1;
+        this.state = "reading";
+
+        this.updateItems();
+    }
+
+    hasValidSelection() {
+        return (this.selected > -1 && this.selected < this.items.length);
+    }
+
+    async updateItems() {
+        try {
+            await $.get(`/item/all`, (data) => {
+                this.items = data.foundItems;
+                this.renderItemList();
+            });
+        } 
+        catch(err) {
+            console.log(err);
+        }
+    };
+
+    renderItemList() {
+        this.$itemList.empty();
+
+        for (let i = 0; i < this.items.length; i++) {
+            $(".floor#items ul.items").append(`<li onClick="itemFloor.selectItem(${i})">${this.items[i].name}</li>`);
+        };
+
+        this.$items = $(".floor#items ul.items li");
+        this.selectItem(this.selected);
+    }
+    
+    createNewItem() {
+        if (this.state === "reading") {
+            this.items.push({
+                _id: null,
+                name: "New Item",
+                shortDescription: "Short Description",
+                fullDescription: "Full Description"
+            });
+
+            this.renderItemList();
+            this.selectItem(this.items.length - 1);
+            this.editSelectedItem();
+        }
+    };
+
+    selectItem(index) {
+        this.$items.removeClass("selected");
+        this.selected = index;
+
+        if (index > -1) {
+            $(this.$items[index]).addClass("selected");
+        }
+
+        this.readSelectedItem();
+    }
+
+    readSelectedItem() {
+        this.cancelEdit();
+
+        if (this.hasValidSelection()) {
+            this.$readName.text(this.items[this.selected].name);
+            this.$readShort.text(this.items[this.selected].shortDescription);
+            this.$readFull.text(this.items[this.selected].fullDescription);
+        }
+        else {
+            this.$readName.text("Please select an item from the list.");
+            this.$readShort.text("");
+            this.$readFull.text("");
+        }
+    }
+
+    editSelectedItem() {
+        if (this.hasValidSelection()) {
+            if (this.state != "editing") {
+                this.$read.addClass("invisible");
+            }
+    
+            this.state = "editing";
+            this.$edit.removeClass("invisible");
+    
+            this.$editName.val(this.items[this.selected].name);
+            this.$editShort.val(this.items[this.selected].shortDescription);
+            this.$editFull.val(this.items[this.selected].fullDescription);
+        }
+    }
+
+    async saveSelectedItem() {
+        if (this.state === "editing") {
+            try {
+                await $.post("/item", {
+                    id: this.items[this.selected]._id,
+                    name: this.$editName.val(),
+                    shortDescription: this.$editShort.val(),
+                    fullDescription: this.$editFull.val(),
+                }, () => {
+                    this.items[this.selected].name = this.$editName.val();
+                    this.items[this.selected].shortDescription = this.$editShort.val();
+                    this.items[this.selected].fullDescription = this.$editFull.val();
+                    this.cancelEdit();
+                    this.updateItems();
+                });
+            } 
+            catch(err) {
+                console.log(err);
+            }
+        }
+    }
+
+    cancelEdit() {
+        if (this.state === "editing") {
+            this.$edit.addClass("invisible");
+            this.$read.removeClass("invisible");
+            this.state = "reading";
+        }
+    }
+
+    async deleteSelectedItem() {
+        if (this.state === "reading" && this.hasValidSelection()) {
+            try {
+                await $.post("/item/delete", {
+                    id: this.items[this.selected]._id
+                }, () => {
+                    this.selectItem(-1);
+                    this.updateItems();
+                });
+            } 
+            catch(err) {
+                console.log(err);
+            }
+        }
+    }
+}
+
+let itemFloor = new ItemFloor();
+
+
+
+
+
+
+$(".floor button#toggle").on("click", function (e) {
+    $(e.target.parentElement).find(".content").toggleClass("invisible");
+});

package/test/coast/tall-beach/nono-cove/styles/items-floor.css

@@ -0,0 +1,92 @@
+:root {
+    --bgColor: rgb(37, 37, 37);
+    --bgColorBright: rgb(66, 66, 66);
+    --shadowColor: rgb(26, 26, 26);
+    --textColor: rgb(185, 135, 69);
+    --textColorBright: rgb(221, 181, 130);
+    --standardBorder: 1px solid var(--textColor);
+    --standardRadius: 5px;
+}
+
+.floor#items ul.items {
+    width: 40%;
+    height: 800px;
+    border: var(--standardBorder);
+    padding: 5px;
+    margin: 0;
+}
+
+.floor#items ul.items li {
+    list-style: none;
+    cursor: pointer;
+}
+
+.floor#items ul.items li:hover {
+    background-color: var(--bgColorBright);
+}
+
+.floor#items ul.items li.selected {
+    background-color: var(--shadowColor);
+}
+
+.floor#items .editor {
+    width: 55%;
+    height: 800px;
+    border: var(--standardBorder);
+    padding: 10px;
+}
+
+.floor#items .read h5 {
+    margin: 10px;
+}
+
+.floor#items .read #name {
+    margin: 20px;
+}
+
+.floor#items .read #short {
+    width: 100%;
+    height: 100px;
+    border: var(--standardBorder);
+    padding: 2px;
+}
+
+.floor#items .read #full {
+    width: 100%;
+    height: 250px;
+    border: var(--standardBorder);
+    padding: 2px;
+}
+
+.floor#items .edit h5 {
+    margin: 10px;
+}
+
+
+.floor {
+    width: 100%;
+    min-height: 50px;
+    border: 1px solid var(--shadowColor);
+    background-color: var(--bgColor);
+    padding: 10px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.floor h2 {
+    width: 90%;
+}
+
+.floor button {
+    margin: 0;
+}
+
+.floor .content {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+}

package/test/coast/tall-beach/nono-cove/views/index.ejs

@@ -11,6 +11,50 @@
 
 <hr>
 
+<section class="floor" id="items">
+    <h2>Items</h2>
+    <button id="toggle">Toggle</button>
+
+    <div class="content invisible">
+        <ul class="items">
+
+        </ul>
+    
+        <div class="editor">
+            <div class="edit invisible">
+                <h5>Item Name:</h5>
+                <input type="text" id="name">
+            
+                <h5>Short Item Description:</h5>
+                <textarea id="short" name="short" cols="30" rows="3"></textarea>
+            
+                <h5>Full Item Description:</h5>
+                <textarea id="full" name="full" cols="30" rows="10"></textarea>
+
+                <button id="cancel" onclick="itemFloor.cancelEdit()">Cancel</button>
+                <button id="save" onclick="itemFloor.saveSelectedItem()">Save</button>
+            </div>
+
+            <div class="read">
+                <h5 id="name">Item Name</h5>
+            
+                <h5>Short Item Description:</h5>
+                <p id="short"></p>
+            
+                <h5>Full Item Description:</h5>
+                <p id="full"></p>
+
+                <button id="new" onclick="itemFloor.createNewItem()">Create New</button>
+                <button id="edit" onclick="itemFloor.editSelectedItem()">Edit</button>
+                <button id="delete" onclick="itemFloor.deleteSelectedItem()">Delete</button>
+                <button id="refresh" onclick="itemFloor.updateItems()">Refresh List</button>
+            </div>
+        </div>
+    </div>
+</section>
+
+<hr>
+
 <a href="/the-front" class="to">
     Go to The Front
 </a>

package/test/test-index.js

@@ -26,7 +26,8 @@ const world = {
                                     {
                                         name: "",
                                         options: {
-                                            localScripts: ["game"],
+                                            localScripts: ["game", "items"],
+                                            styles: ["items-floor"],
                                             serverScripts: ["game"]
                                         }
                                     },
@@ -55,7 +56,9 @@ const world = {
         details: [
             {
                 name: "",
-                options: {}
+                options: {
+                    requiredItems: ["Gold Coin"]
+                }
             }
         ]
     }

package/test/views/index.ejs

@@ -2,6 +2,8 @@
     Welcome to The Front.
 </p>
 
+<button onclick="addGold()">Gold</button>
+
 <hr>
 
 <h3>Register Account</h3>
@@ -144,4 +146,8 @@
             }
         }
     });
+
+    let addGold = function addGold(params) {
+        playerInventory.change(itemIDs[0], 2);
+    }
 </script>

package/views/head.ejs

@@ -5,7 +5,6 @@
     <title><%= siteTitle %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <!-- 'Roboto Condensed', sans-serif; -->

package/views/inventory.ejs

@@ -38,8 +38,13 @@
             setInterval(this.update, this.updateCooldown);
         }
 
-        async change(change) {
-            await $.post("/inventory", { change: change }, (data, status) => {
+        async change(itemID, amount) {
+            let change = {
+                item: itemID,
+                amount: amount
+            }
+
+            await $.post("/inventory", change, (data, status) => {
                 if (status === "success") {
                     let holding = false;
 
@@ -52,7 +57,7 @@
                         }
                     }
                     
-                    if (!holding && data.amount > 0) {
+                    if (!holding && data.amount > 0 && data.item) {
                         this.items.push(data);
                     }
 

package/public/styles/portfolio.css

@@ -1,468 +0,0 @@
-:root {
-    --textColor: rgb(247, 247, 247);
-    --altTextColor: rgb(20, 20, 20);
-    --bgColor: rgb(31, 31, 31);
-    --bgColorLight: rgb(79, 79, 79);
-    --focusColor: rgb(222, 139, 37);
-    --shadowColor: rgb(0, 0, 0);
-    --extreme-dark: #2e2e2e;
-    --very-dark: #3e3e3e;
-    --dark: #505050;
-    --light: #F7FFE0;
-    --yellow: #D59C00;
-    --brown: #704E2E;
-    --green: #709176;
-    --blue: #00487C;
-    --game-size: 500px;
-}
-
-* {
-    color: var(--textColor);
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: 'Chakra Petch', sans-serif;
-}
-
-.invisible {
-    display: none;
-}
-
-a {
-    font-weight: bold;
-}
-
-h4 a {
-    margin-right: 20px;
-}
-
-hr {
-    border: none;
-    border-bottom: 2px solid var(--shadowColor);
-    margin: 5px 20px;
-}
-
-hr.light {
-    border-bottom: 2px solid var(--textColor);
-}
-
-body {
-    background-color: var(--bgColorLight);
-    width: 100%;
-}
-
-header {
-    height: 100vh;
-    width: 100%;
-    position: relative;
-    box-shadow: 0 10px 25px var(--shadowColor);
-    background-color: var(--bgColor);
-}
-
-.portrait {
-    height: 100%;
-    width: 70%;
-    position: absolute;
-    right: 0;
-    background-image: url("/img/fancy-me.jpg");
-    background-size: cover;
-    background-position-x: center;
-    background-repeat: no-repeat;
-    z-index: 0;
-}
-
-.portrait-fade {
-    width: 100%;
-    height: 100%;
-}
-
-header h2 {
-    position: absolute;
-    left: 100px;
-    top: 35%;
-    font-size: 50px;
-    background-color: var(--bgColor);
-    padding: 10px;
-    border-radius: 5px;
-}
-
-header h3 {
-    position: absolute;
-    left: 100px;
-    top: calc(35% + 75px);
-    font-size: 30px;
-    background-color: var(--bgColor);
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.external-links {
-    position: absolute;
-    left: 100px;
-    top: calc(35% + 125px);
-    font-size: 50px;
-    background-color: var(--bgColor);
-    width: 110px;
-    height: 65px;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 5px;
-    border-radius: 5px;
-}
-
-header a {
-    width: 50px;
-    height: 100%;
-    margin: 5px;
-}
-
-header i:hover {
-    cursor: pointer;
-    color: var(--focusColor);
-}
-
-nav {
-    height: 50px;
-    width: 100%;
-    background-color: var(--focusColor);
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: fixed;
-    left: 0;
-    top: 0;
-    transition: all .2s ease;
-    z-index: 99;
-    border-bottom: 1px solid var(--bgColorLight);
-}
-
-nav * {
-    color: var(--altTextColor);
-}
-
-nav i {
-    font-size: 30px;
-}
-
-.nav-closed {
-    top: -50px;
-    transition: all .2s ease;
-}
-
-main {
-    width: 100%;
-    overflow: hidden;
-}
-
-main img {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
-}
-
-section {
-    width: 100%;
-    padding: 100px 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-section h3 {
-    margin: 20px;
-    font-size: 25px;
-}
-
-section h4 {
-    margin: 5px 20px;
-    font-size: 18px;
-}
-
-section h4 i {
-    margin: 5px 5px;
-}
-
-section p {
-    margin: 20px;
-}
-
-section img {
-    width: 50%;
-    height: auto;
-}
-
-section iframe {
-    width: 50%;
-    height: 700px;
-    border: none;
-}
-
-.text {
-    width: 600px;
-    height: 100%;
-    padding: 5px;
-}
-
-#notherbase-fs {
-    background-color: var(--extreme-dark);
-    padding: 10px;
-    border: 5% solid var(--bgColor);
-    border-radius: 0% 0% 50px 50px;
-}
-
-#notherbase-fs img {
-    width: 20%;
-}
-
-#cpd {
-    background-color: var(--focusColor);
-    flex-direction: row-reverse;
-}
-
-#cpd * {
-    color: var(--altTextColor);
-}
-
-#tamago-watch {
-    background-color: var(--bgColor);
-}
-
-#won-ventures {
-    background-color: var(--focusColor);
-    flex-direction: row-reverse;
-}
-
-#won-ventures * {
-    color: var(--altTextColor);
-}
-
-#wayfarer {
-    background-color: var(--bgColor);
-}
-
-/* tamago watch styles */
-.watch {
-    width: var(--game-size);
-    min-height: 100;
-    image-rendering: pixelated;
-    position: relative;
-}
-
-.watch * {
-    image-rendering: pixelated;
-}
-
-.cartridge {
-    position: absolute;
-    left: 5%;
-    top: 30%;
-    background-image: url("/img/cartridge.png");
-    background-size: cover;
-    transition: ease-out .15s;
-    z-index: 0;
-    width: 90%;
-    height: 90%;
-}
-
-.cartridge:hover {
-    top: 40%;
-}
-
-.name {
-    background-color: #70917600;
-    position: absolute;
-    top: 73%;
-    left: 32%;
-    width: 280px;
-    height: 80px;
-    transform: rotate(29deg);
-    text-align: center;
-    font-size: 50px;
-    border: none;
-    cursor: pointer;
-}
-
-.console {
-    width: 100%;
-}
-
-.screen {
-    position: absolute;
-    top: 6%;
-    left: 6.25%;
-    width: 87.5%;
-    height: 55%;
-    display: initial;
-}
-
-.bloom {
-    box-shadow: 0px 0px 10px #fff6d759, inset 0px 0px 10px #fff6d759;
-}
-
-.pet {
-    position: absolute;
-    top: 0%;
-    left: 10%;
-    width: 25%;
-    display: none;
-}
-
-#p1 {
-    top: auto;
-    bottom: 10%;
-    left: 40%;
-}
-
-#p2 {
-    top: 0%;
-    left: auto;
-    right: 10%;
-}
-
-.food {
-    position: absolute;
-    right: 0;
-    bottom: 20%;
-    width: 25%;
-    display: none;
-}
-
-.music {
-    position: absolute;
-    bottom: 20%;
-    left: 2%;
-    width: 25%;
-    display: none;
-}
-
-.detached-right {
-    float: right;
-}
-
-.dark {
-    filter: brightness(.5);
-}
-
-.hud {
-    position: absolute;
-    bottom: 5%;
-    left: 5%;
-    width: 90%;
-    height: 32%;
-}
-
-.clock-hand {
-    position: absolute;
-    top: 12.5%;
-    left: 4.10%;
-    height: 80%;
-    width: 25%;
-}
-
-.status {
-    position: absolute;
-    top: 10%;
-    right: 27.75%;
-    height: 16%;
-    width: 29%;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-}
-
-#s1 {
-    top: 45%;
-}
-
-#s2 {
-    top: 78%;
-}
-
-.point {
-    border: 1px solid var(--dark);
-    background-color: var(--yellow);
-    display: none;
-}
-
-.button {
-    background-color: rgba(0, 0, 0, 0);
-    background-image: url("/img/button_brown.png");
-    background-size: 100%;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    border: none;
-    position: absolute;
-    top: 6%;
-    right: 5%;
-    height: 25%;
-    width: 20%;
-}
-
-.button:active {
-    background-image: url("/img/button_brown_down.png");
-}
-
-#b1 {
-    background-image: url("/img/button_blue.png");
-    top: 40%;
-}
-
-#b1:active {
-    background-image: url("/img/button_blue_down.png");
-}
-
-#b2 {
-    background-image: url("/img/button_green.png");
-    top: 75%;
-}
-
-#b2:active {
-    background-image: url("/img/button_green_down.png");
-}
-
-@media only screen and (max-width: 900px) {
-    .portrait {
-        width: 100%;
-        height: 100vh;
-    }
-
-    header h2 {
-        left: 35px;
-        font-size: 30px;
-        top: 65%;
-    }
-
-    header h3 {
-        left: 35px;
-        font-size: 25px;
-        top: calc(65% + 50px);
-    }
-
-    .external-links {
-        left: 35px;
-        font-size: 30px;
-        top: calc(65% + 95px);
-        height: 45px;
-        width: 75px;
-    }
-
-    section {
-        flex-wrap: wrap;
-        padding: 40px 10px;
-    }
-
-    #cpd, #won-ventures {
-        flex-direction: row;
-    }
-
-    .text, section img, section iframe {
-        width: 100%;
-        padding: 5px;
-    }
-
-    .watch {
-        width: 100%;
-    }
-}