Simplified CSS

4 files changed, 19 insertions, 64 deletions

diff --git a/README.md b/README.md
index 294198d..2bd75c1 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # Startpage
 
-Custom browser startpage. Template tweaked from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night).
+Custom browser startpage.
 
-Font: Fira Code Nerd Font
+Font: Fira Code
 
 Colorscheme: Gruvbox Dark
 
-![screenshot](screenshot.JPG)
-cat
+![startpage](startpage.gif)
+<p style="text-align: center;">cat</p>
diff --git a/index.html b/index.html
index 885f58d..9c9e2c7 100644
--- a/index.html
+++ b/index.html
@@ -20,26 +20,18 @@
                 <p>> cd ~/<span class="blinking">_</span></p>
             </div>
 
-            <!-- search bar -->
-            <!-- <div class="search_box">
-            <form action="https://duckduckgo.com/" method="get">
-                <input class="input_box" type="text" placeholder="ddg" autocomplete="off">
-            </form>
-        </div> -->
-
-            <div class="bookmark">
-
+            <div class="bookmarks">
                 <div class="category">
-                    <div class="bookmarks">
+                    <div class="links">
                         <li class="title">work</li>
-                        <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">gmail</a></li>
+                        <li><a href="https://gmail.com">gmail</a></li>
                         <li><a href="https://outlook.office.com">outlook</a></li>
                         <li><a href="https://linkedin.com">linkedin</a></li>
                     </div>
                 </div>
 
                 <div class="category">
-                    <div class="bookmarks">
+                    <div class="links">
                         <li class="title">dev</li>
                         <li><a href="https://github.com/">github</a></li>
                         <li><a href="https://github.com/">lobste.rs</a></li>
@@ -49,7 +41,7 @@
                 </div>
 
                 <div class="category">
-                    <div class="bookmarks">
+                    <div class="links">
                         <li class="title"><a style="color: #EADBB2" href="https://reddit.com">reddit</a></li>
                         <li><a href="https://reddit.com/r/programming/">programming</a></li>
                         <li><a href="https://reddit.com/r/selfhosted/">selfhosted</a></li>
@@ -59,7 +51,7 @@
                 </div>
 
                 <div class="category">
-                    <div class="bookmarks">
+                    <div class="links">
                         <li class="title">play</li>
                         <li><a href="https://monkeytype.com/">monkeytype</a></li>
                         <li><a href="https://youtube.com/">youtube</a></li>
diff --git a/startpage.gif b/startpage.gif
new file mode 100644
index 0000000..571ccc5
--- /dev/null
+++ b/startpage.gif
diff --git a/style.css b/style.css
index 2f1cba0..bbf506a 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,6 @@
-html{
+html, body {
   background:#282828;
   font-family: "Fira Code";
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background: #282828;
   color: #EADBB2;
   height: 100%;
   width: 100%;
@@ -18,25 +10,25 @@ body {
 
 .container {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 460px 600px 1fr;
   grid-template-areas:
     ". left right .";
+  column-gap: 80px;
   justify-items: center;
   align-items: center;
-  height: 100%;
-  width: 100%;
+  min-height: 100%;
 }
 
 .left-container {
   grid-area: left;
-  height: 400px;
-  width: 400px;
+  aspect-ratio: 1/1;
 }
 
 .right-container {
   grid-area: right;
   height: 50%;
-  width: 80%;
+  width: 100%;
+  /* border: 1px solid white; */
 }
 
 .gif img {
@@ -58,12 +50,12 @@ body {
   width: 180px;
 }
 
-.bookmark {
+.bookmarks {
   display: flex;
   justify-content: center;
 }
 
-.bookmarks {
+.links {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -112,32 +104,3 @@ a:hover {
     opacity: 1;
   }
 }
-
-/* form {
-  margin: 0px;
-  padding: 0px;
-}
-
-.search_box {
-  display: flex;
-  align-self: center;
-  border: 4px solid;
-  border-color: rgba(234, 219, 178,0.6);
-  border-radius: 10px;
-  width: 400px;
-  height: 48px;
-  margin-bottom: 40px;
-}
-
-.input_box {
-  border: none;
-  outline: none;
-  background: none;
-  width: 380px;
-  padding-top: 12px;
-
-  text-align:center;
-  font-family: "Fira Code";
-  font-size: 20px;
-  color: #EADBB2;
-} */