From 3723d772c7dc5fc95ef785d134848cc88de3137a Mon Sep 17 00:00:00 2001 From: nj2237 Date: Mon, 19 Mar 2018 22:51:49 +0530 Subject: [PATCH] code: added fluid design 1. added bootstrap fixed navbar which collapses menu for smaller screen resolutions 2. added container-fluid classes to scale with viewport and made some color and CSS changes 3. cleaned up code and alignment for HTML tags 4. added comments for HTML tags, replaced huge share URL links with Google shortened URLs for better readability Signed-off-by: nj2237 --- code/css/popup.css | 101 +++++++++++++++++--------- code/popup.html | 176 ++++++++++++++++++++++++--------------------- 2 files changed, 163 insertions(+), 114 deletions(-) diff --git a/code/css/popup.css b/code/css/popup.css index 8ceed5c..410e35b 100644 --- a/code/css/popup.css +++ b/code/css/popup.css @@ -1,5 +1,4 @@ -html,body -{ +html,body { width: 100%; height: 100%; margin: 0px; @@ -8,10 +7,63 @@ html,body position:absolute; } + body { font-family: 'Roboto Mono', monospace; } + +#theNavBar { + background-color: white; + border-bottom: 1px solid gray; +} + +.navbar-brand>img { + height: 5%; + width: auto; +} + +.navbar-expand-md .navbar-toggler { + background-color: #FEF200; + margin-right: 2%; +} + +.nav-item { + text-align: center; +} + +#topNavBar > li > a { + color: gray; + font-weight: bold; +} + +#topNavBar > li > a:hover { + color: #333; + border: 0.75px solid #555; + border-radius: 3.7px; + background-color: #FEF200; +} + +.dropdown_button { + background-color: transparent; + background-repeat:no-repeat; + border: none; + cursor:pointer; + overflow: hidden; + outline:none; + color: gray; +} + +#pop-tags { + text-align: center; +} + +#jumbo { + background-color: #ffffaa; + width: 95%; + margin: auto; +} + article { display: block; text-align: left; @@ -37,13 +89,12 @@ footer { text-align: center; } -.sortbythis:hover -{ +.sortbythis:hover { cursor: pointer; background-color: #ffc10757; } -#sortfavby{ +#sortfavby { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E5E5E5; border-radius: 5px 5px 5px 5px; @@ -54,21 +105,12 @@ padding: 10px; min-width: 120px; } -#favSearchInputBox -{ +#favSearchInputBox { text-align: center; float:center; } -.navbar-brand { - padding: 0px; -} -.navbar-brand>img { - height: 10%; - padding: 15px; - width: auto; -} -.btn-xs{ +.btn-xs { margin-top: 7px; height: 24px; font-size: 12px; @@ -152,6 +194,10 @@ form { background-color:#fff } +h1 { + text-align: center; +} + h2 { background-color:#fcee45; padding:20px 35px; @@ -165,25 +211,14 @@ h4 { } hr { - margin:10px -50px; - border:0; - border-top:1px solid #ccc + margin: 10px -50px; + border: 0; + border-top: 1px solid #ccc } -.dropdown_button -{ - background-color: Transparent; - background-repeat:no-repeat; - border: none; - cursor:pointer; - overflow: hidden; - outline:none; - color: #077bff; -} - -ul.share-buttons{ +ul.share-buttons { list-style: none; - padding: 0; + padding-top: 5px; } ul.share-buttons li{ @@ -226,7 +261,7 @@ ul.share-buttons .sr-only{ padding: 5px; } -#share-footer{ +#share-footer { background-color:#FFFA79; margin:-2px -50px 0 -50px; text-align:center; diff --git a/code/popup.html b/code/popup.html index 1c4e12b..295c304 100644 --- a/code/popup.html +++ b/code/popup.html @@ -1,6 +1,7 @@ + @@ -12,137 +13,150 @@ + + - + - - - + + + OpenGenus: World's first Offline Search Engine - - - -
-
-
+ -
- -
+ + + +
+
- -
- -

+
  • Time Zone Converter
    • -

    + +
    - +
    +
    +
    + + +
    + +
    + + +
    +
    + + +
    + +
    + +
    + + +
    + +
    -

    World's first Offline Search Engine

    +

    World's first Offline Search Engine

    - + Enjoy our daily code fact
    -
    +
    -
    -
    - + +
    + - -