From 17cb5f30750d44b1d74668de5ea8d18450148a58 Mon Sep 17 00:00:00 2001
From: Thomas G <62822072+Thomasluigi07@users.noreply.github.com>
Date: Sat, 23 Jul 2022 00:58:20 +1000
Subject: [PATCH] Update styleguide.blade.php

---
 resources/views/pages/styleguide.blade.php | 126 ++++++++++++++-------
 1 file changed, 85 insertions(+), 41 deletions(-)

diff --git a/resources/views/pages/styleguide.blade.php b/resources/views/pages/styleguide.blade.php
index 74fba8a..4dfa3c8 100644
--- a/resources/views/pages/styleguide.blade.php
+++ b/resources/views/pages/styleguide.blade.php
@@ -1,51 +1,95 @@
 @extends('layouts.app')
 @section('title')
-    <title>StyleGuide - {{ env('APP_NAME') }}</title>
+<title>StyleGuide - {{ env('APP_NAME') }}</title>
 @endsection
 
 @section('content')
-    <h1 id="usernameframe">StyleGuide</h1>
-    <p>This is a page explaining and showing how (most) of the CSS works for this site.</p>
-    <br>
-    <h4>Buttons</h4>
-    <p>Buttons.. Don't you like them? They're used for most things that you need to click that aren't links. These look similar to tabs, but buttons are round and have more variants.</p>
-    <br>
-    <button class="greenbutton">.greenbutton</button>
-    <button class="bluebutton">.bluebutton</button>
-    <button class="redbutton">.redbutton</button>
-    <button class="greybutton">.greybutton</button>
-    <br>
-    <br>
-    <h4>Tabs</h4>
-    <p>These are used on pages that have sub-pages. These look similar to buttons, but tabs are not round.</p>
-    <br>
-    <a href="#" class="tab_selected">.tab_selected</a>
-    <a href="#" class="tab">.tab</a>
-    <br>
-    <br>
-    <h4>content_special</h4>
-    <p>A div that is used for organising contents using display: inline-flex.</p>
-    <br>
-    <div class="content_special">
+<h1 id="usernameframe">StyleGuide</h1>
+<p>This is a page explaining and showing how (most) of the CSS works for this site.</p>
+<br>
+<h4>Buttons</h4>
+<p>Buttons.. Don't you like them? They're used for most things that you need to click that aren't links. These look
+    similar to tabs, but buttons are round and have more variants.</p>
+<br>
+<button class="greenbutton">.greenbutton</button>
+<button class="bluebutton">.bluebutton</button>
+<button class="redbutton">.redbutton</button>
+<button class="greybutton">.greybutton</button>
+<textarea style="resize: none" readonly>
+<pre>
+<button class="greenbutton">.greenbutton</button>
+<button class="bluebutton">.bluebutton</button>
+<button class="redbutton">.redbutton</button>
+<button class="greybutton">.greybutton</button>
+</pre>
+</textarea>
+<br>
+<br>
+<h4>Tabs</h4>
+<p>These are used on pages that have sub-pages. These look similar to buttons, but tabs are not round.</p>
+<br>
+<a href="#" class="tab_selected">.tab_selected</a>
+<a href="#" class="tab">.tab</a>
+<textarea style="resize: none" readonly>
+<pre>
+<a href="#" class="tab_selected">.tab_selected</a>
+<a href="#" class="tab">.tab</a>
+</pre>
+</textarea>
+<br>
+<br>
+<h4>content_special</h4>
+<p>A div that is used for organising contents using display: inline-flex.</p>
+<br>
+<div class="content_special">
+    <p>Hello i'm some text in the .content_special/#content_special div</p>
+</div>
+<textarea style="resize: none" readonly>
+<pre>
+<div class="content_special">
         <p>Hello i'm some text in the .content_special/#content_special div</p>
     </div>
-    <br>
-    <br>
-    <h4>Feed, FeedContainer, FeedContainerBox, FeedContainerBoxImageContainer, FeedContainerBoxTextContainer, FeedContainerBox1Username, FeedContainerBox1Text, FeedContainerBox1Timestamp</h4>
-    <p>The boxes containing the content of My Feed.</p>
-    <div id="Feed">
-        <p>#Feed</p>
-        <div id="FeedContainer">
-            <div class="FeedContainerBox">
-                <div class="FeedContainerBoxImageContainer">
-                    <a href="#"><img alt="Profile Image" src="{{ asset('img/defaultrender.png') }}" width="60px" height="100%"></a>
-                </div> 
-                <div class="FeedContainerBoxTextContainer">
-                    <a id="FeedContainerBox1Username">#FeedContainerBox1Username</a>
-                    <p id="FeedContainerBox1Text" style="word-wrap:break-word;max-width:400px">#FeedContainerBox1Text</p>
-                    <p id="FeedContainerBox1Timestamp">#FeedContainerBox1Timestamp</p>
-                </div> 
+</pre>
+</textarea>
+<br>
+<br>
+<h4>Feed, FeedContainer, FeedContainerBox, FeedContainerBoxImageContainer, FeedContainerBoxTextContainer,
+    FeedContainerBox1Username, FeedContainerBox1Text, FeedContainerBox1Timestamp</h4>
+<p>The boxes containing the content of My Feed.</p>
+<div id="Feed">
+    <p>#Feed</p>
+    <div id="FeedContainer">
+        <div class="FeedContainerBox">
+            <div class="FeedContainerBoxImageContainer">
+                <a href="#"><img alt="Profile Image" src="{{ asset('img/defaultrender.png') }}" width="60px"
+                        height="100%"></a>
+            </div>
+            <div class="FeedContainerBoxTextContainer">
+                <a id="FeedContainerBox1Username">#FeedContainerBox1Username</a>
+                <p id="FeedContainerBox1Text" style="word-wrap:break-word;max-width:400px">#FeedContainerBox1Text</p>
+                <p id="FeedContainerBox1Timestamp">#FeedContainerBox1Timestamp</p>
             </div>
         </div>
     </div>
-@endsection
+</div>
+<textarea style="resize: none" readonly>
+<pre>
+<div id="Feed">
+    <p>#Feed</p>
+    <div id="FeedContainer">
+        <div class="FeedContainerBox">
+            <div class="FeedContainerBoxImageContainer">
+                <a href="#"><img alt="Profile Image" src="{{ asset('img/defaultrender.png') }}" width="60px"
+                        height="100%"></a>
+            </div>
+            <div class="FeedContainerBoxTextContainer">
+                <a id="FeedContainerBox1Username">#FeedContainerBox1Username</a>
+                <p id="FeedContainerBox1Text" style="word-wrap:break-word;max-width:400px">#FeedContainerBox1Text</p>
+                <p id="FeedContainerBox1Timestamp">#FeedContainerBox1Timestamp</p>
+            </div>
+        </div>
+    </div>
+</div>
+</pre>
+</textarea>
+@endsection
\ No newline at end of file