diff options
| -rw-r--r-- | README.md | 7 | ||||
| -rw-r--r-- | index.html | 81 | ||||
| -rw-r--r-- | screenshot.JPG | bin | 83430 -> 74177 bytes | |||
| -rw-r--r-- | style.css | 96 |
4 files changed, 97 insertions, 87 deletions
@@ -1,7 +1,10 @@ # Startpage -Custom minimalist browser startpage. Heavily borrowed from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night). +Custom browser startpage. Template tweaked from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night). -Feel free to fork. +Font: Fira Code Nerd Font + +Colorscheme: Gruvbox Dark  +cat @@ -9,60 +9,65 @@ <body> <div class="container"> - <div class="gif"> - <img src="cat.gif" /> - </div> - <div class="head"> - <p>> cd ~/<span class="blinking">_</span></p> + <div class="left-container"> + <div class="gif"> + <img src="cat.gif" /> + </div> </div> - <!-- <div class="search_box"> + <div class="right-container"> + <div class="head"> + <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="bookmark"> - <div class="category"> - <div class="bookmarks"> - <li class="title">work</li> - <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">gmail</a></li> - <li><a href="https://outlook.office.com">outlook</a></li> - <li><a href="https://linkedin.com">linkedin</a></li> + <div class="category"> + <div class="bookmarks"> + <li class="title">work</li> + <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">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> - <div class="category"> - <div class="bookmarks"> - <li class="title">dev</li> - <li><a href="https://github.com/">github</a></li> - <li><a href="https://github.com/">lobste.rs</a></li> - <li><a href="https://mankier.com/">mankier</a></li> - <li><a href="https://devdocs.io/">devdocs</a></li> + <div class="category"> + <div class="bookmarks"> + <li class="title">dev</li> + <li><a href="https://github.com/">github</a></li> + <li><a href="https://github.com/">lobste.rs</a></li> + <li><a href="https://mankier.com/">mankier</a></li> + <li><a href="https://devdocs.io/">devdocs</a></li> + </div> </div> - </div> - <div class="category"> - <div class="bookmarks"> - <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> - <li><a href="https://reddit.com/r/unixporn/">unixporn</a></li> - <li><a href="https://reddit.com/r/mechanicalkeyboards/">mk</a></li> + <div class="category"> + <div class="bookmarks"> + <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> + <li><a href="https://reddit.com/r/unixporn/">unixporn</a></li> + <li><a href="https://reddit.com/r/mechanicalkeyboards/">mk</a></li> + </div> </div> - </div> - <div class="category"> - <div class="bookmarks"> - <li class="title">play</li> - <li><a href="https://monkeytype.com/">monkeytype</a></li> - <li><a href="https://youtube.com/">youtube</a></li> - <li><a href="https://twitch.tv/">twitch</a></li> - <li><a href="https://netflix.com/">netflix</a></li> + <div class="category"> + <div class="bookmarks"> + <li class="title">play</li> + <li><a href="https://monkeytype.com/">monkeytype</a></li> + <li><a href="https://youtube.com/">youtube</a></li> + <li><a href="https://twitch.tv/">twitch</a></li> + <li><a href="https://netflix.com/">netflix</a></li> + </div> </div> </div> - </div> </div> </body> diff --git a/screenshot.JPG b/screenshot.JPG Binary files differindex 597cbfa..c67a43f 100644 --- a/screenshot.JPG +++ b/screenshot.JPG @@ -1,16 +1,11 @@ html{ - display: flex; - flex-flow: row nowrap; - justify-content: center; - align-content: center; - align-items: center; + background:#282828; + font-family: "Fira Code"; height: 100%; width: 100%; margin: 0; padding: 0; - background:#282828; - font-family: "Fira Code"; - } +} body { background: #282828; @@ -22,20 +17,26 @@ body { } .container { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: + ". left right ."; + justify-items: center; + align-items: center; height: 100%; width: 100%; - justify-content: center; - align-items: center; } -.gif { - display: flex; - flex-direction: column; - align-items: center; - height: 500px; - width: 500px; +.left-container { + grid-area: left; + height: 400px; + width: 400px; +} + +.right-container { + grid-area: right; + height: 50%; + width: 80%; } .gif img { @@ -48,37 +49,9 @@ body { flex-direction: column; align-items: center; font-size: 40px; + padding-top: 60px; } -/* 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; -} */ - .category { display: flex; flex-direction: column; @@ -139,3 +112,32 @@ 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; +} */ |
