From 5150b2ca24b92cb3534e531104cdf760e2b47574 Mon Sep 17 00:00:00 2001 From: kennethcheo Date: Sun, 26 Sep 2021 02:16:49 +0800 Subject: Switched from flex to grid CSS --- README.md | 7 +++-- index.html | 81 +++++++++++++++++++++++++----------------------- screenshot.JPG | Bin 83430 -> 74177 bytes style.css | 96 +++++++++++++++++++++++++++++---------------------------- 4 files changed, 97 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 4ac30e5..294198d 100644 --- a/README.md +++ b/README.md @@ -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 ![screenshot](screenshot.JPG) +cat diff --git a/index.html b/index.html index 253275f..885f58d 100644 --- a/index.html +++ b/index.html @@ -9,60 +9,65 @@
-
- -
-
-

> cd ~/_

+
+
+ +
- + -
+
-
-
-
  • work
    • -
  • gmail
    • -
  • outlook
    • -
  • linkedin
    • +
    +
    +
  • work
    • +
  • gmail
    • +
  • outlook
    • +
  • linkedin
    • +
    -
    -
    -
    -
  • dev
    • -
  • github
    • -
  • lobste.rs
    • -
  • mankier
    • -
  • devdocs
    • +
    +
    +
  • dev
    • +
  • github
    • +
  • lobste.rs
    • +
  • mankier
    • +
  • devdocs
    • +
    -
    -
    -
    -
  • reddit
    • -
  • programming
    • -
  • selfhosted
    • -
  • unixporn
    • -
  • mk
    • +
    +
    +
  • reddit
    • +
  • programming
    • +
  • selfhosted
    • +
  • unixporn
    • +
  • mk
    • +
    -
    -
    -
    -
  • play
    • -
  • monkeytype
    • -
  • youtube
    • -
  • twitch
    • -
  • netflix
    • +
    +
    +
  • play
    • +
  • monkeytype
    • +
  • youtube
    • +
  • twitch
    • +
  • netflix
    • +
    -
    diff --git a/screenshot.JPG b/screenshot.JPG index 597cbfa..c67a43f 100644 Binary files a/screenshot.JPG and b/screenshot.JPG differ diff --git a/style.css b/style.css index cd70df2..2f1cba0 100644 --- a/style.css +++ b/style.css @@ -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; +} */ -- cgit v1.2.3