From 08e263fbd2f8196beb0a08be50fc93dc52dcc4d1 Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Sun, 1 Jan 2023 18:17:24 +0000
Subject: [PATCH] fix mobile search icon

---
 css/app.main.css | 523 +++++++++++++++++++++++++++++------------------
 1 file changed, 327 insertions(+), 196 deletions(-)

diff --git a/css/app.main.css b/css/app.main.css
index f959c0c..7a2ada4 100644
--- a/css/app.main.css
+++ b/css/app.main.css
@@ -1,391 +1,520 @@
 ::-webkit-scrollbar {
-    width: 8.5px;
-    background-color: #36363E
+  width: 8.5px;
+  background-color: #36363e;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: #7C7C84;
-    border-radius: 8.75px
+  background-color: #7c7c84;
+  border-radius: 8.75px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background-color: #909098
+  background-color: #909098;
 }
 
 p {
-    color: #fff
+  color: #fff;
 }
 
 h1 {
-    font-size: 50px;
-    margin: 0;
-    color: #fff
+  font-size: 50px;
+  margin: 0;
+  color: #fff;
 }
 
 h5 {
-    display: block;
-    font-size: 0.83em;
-    margin: 1.67em 0;
-    font-weight: 700;
-    color: #fff
+  display: block;
+  font-size: 0.83em;
+  margin: 1.67em 0;
+  font-weight: 700;
+  color: #fff;
 }
 
 a {
-    color: #007bff;
-    text-decoration: none;
-    background-color: transparent
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
 }
 
 a:hover {
-    color: #0056b3;
-    text-decoration: underline
+  color: #0056b3;
+  text-decoration: underline;
 }
 
 a:not([href]) {
-    color: inherit;
-    text-decoration: none
+  color: inherit;
+  text-decoration: none;
 }
 
 a:not([href]):hover {
-    color: inherit;
-    text-decoration: none
+  color: inherit;
+  text-decoration: none;
 }
 
-.page-footer-section a,.page-footer-section p {
-    color: #B2B4BF
+.page-footer-section a,
+.page-footer-section p {
+  color: #b2b4bf;
 }
 
 p {
-    margin-top: 0;
-    margin-bottom: 1rem
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 p {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0;
-    margin-inline-end: 0
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
-.mb-3,.my-3 {
-    margin-bottom: 1rem!important
+.mb-3,
+.my-3 {
+  margin-bottom: 1rem !important;
 }
 
-.h5,h5 {
-    font-size: 1.3125rem
+.h5,
+h5 {
+  font-size: 1.3125rem;
 }
 
-.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
-    line-height: 1.25
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.25;
 }
 
-.h5,h5 {
-    font-size: 1.25rem
+.h5,
+h5 {
+  font-size: 1.25rem;
 }
 
-.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    line-height: 1.2;
-    color: #fff
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: #fff;
 }
 
 .page-footer-section {
-    position: relative;
-    padding-top: 100px;
-    padding-bottom: 20px;
-    background-color: #F0EEF5
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 20px;
+  background-color: #f0eef5;
 }
 
 .page-footer-section.bg-dark .caption {
-    color: rgba(255,255,255,.6)
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .page-footer-section.bg-dark hr {
-    border-color: #4d4853
+  border-color: #4d4853;
 }
 
 .menu-link {
-    position: relative;
-    padding-left: 0;
-    list-style: none
+  position: relative;
+  padding-left: 0;
+  list-style: none;
 }
 
 .menu-link li {
-    display: block;
-    margin: 10px 0
+  display: block;
+  margin: 10px 0;
 }
 
 .mea:hover {
-    color: #526bf5;
-    text-decoration: none
+  color: #526bf5;
+  text-decoration: none;
 }
 
-.page-footer-section a,.page-footer-section p {
-    color: #B2B4BF
+.page-footer-section a,
+.page-footer-section p {
+  color: #b2b4bf;
 }
 
 .page-footer-section a:hover {
-    color: #526bf5;
-    text-decoration: none
+  color: #526bf5;
+  text-decoration: none;
 }
 
 .client-img > img {
-    width: auto;
-    max-width: 100%;
-    height: auto;
-    max-height: 100px
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100px;
 }
 
 .row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
 }
 
-.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
-    position: relative;
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px
+.col,
+.col-1,
+.col-10,
+.col-11,
+.col-12,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-auto,
+.col-lg,
+.col-lg-1,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-auto,
+.col-md,
+.col-md-1,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-auto,
+.col-sm,
+.col-sm-1,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-auto,
+.col-xl,
+.col-xl-1,
+.col-xl-10,
+.col-xl-11,
+.col-xl-12,
+.col-xl-2,
+.col-xl-3,
+.col-xl-4,
+.col-xl-5,
+.col-xl-6,
+.col-xl-7,
+.col-xl-8,
+.col-xl-9,
+.col-xl-auto {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
 }
 
 .fa-icon {
-    align-items: center;
-    background-color: transparent;
-    border: 0;
-    display: inline-flex;
-    justify-content: center;
-    margin: 0;
-    padding: 0 0.1em;
-    position: relative;
-    user-select: none;
-    vertical-align: text-bottom;
-    -webkit-user-select: none
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0 0.1em;
+  position: relative;
+  user-select: none;
+  vertical-align: text-bottom;
+  -webkit-user-select: none;
 }
 
 .fa-icon > * {
-    pointer-events: none
+  pointer-events: none;
 }
 
-.fa-icon.disabled,.fa-icon[disabled] {
-    color: var(--button-disabled-ink);
-    fill: var(--button-disabled-ink);
-    filter: var(--button-disabled-filter);
-    stroke: var(--button-disabled-ink);
-    pointer-events: none
+.fa-icon.disabled,
+.fa-icon[disabled] {
+  color: var(--button-disabled-ink);
+  fill: var(--button-disabled-ink);
+  filter: var(--button-disabled-filter);
+  stroke: var(--button-disabled-ink);
+  pointer-events: none;
 }
 
-.fa-icon > .fa-icon-badge,.fa-icon.disabled > .fa-icon-badge {
-    visibility: hidden
+.fa-icon > .fa-icon-badge,
+.fa-icon.disabled > .fa-icon-badge {
+  visibility: hidden;
 }
 
 .fa-icon.fa-icon-badged > .fa-icon-badge {
-    bottom: -20%;
-    display: inline-block;
-    font: 60% sans-serif;
-    left: calc(100% - 0.2em);
-    position: absolute;
-    visibility: visible
+  bottom: -20%;
+  display: inline-block;
+  font: 60% sans-serif;
+  left: calc(100% - 0.2em);
+  position: absolute;
+  visibility: visible;
 }
 
 .fa-icon.fa-icon-hflipped > svg {
-    transform: scale(-1, 1)
+  transform: scale(-1, 1);
 }
 
 .fa-icon.fa-icon-vflipped > svg {
-    transform: scale(1, -1)
+  transform: scale(1, -1);
 }
 
 .fa-icon > svg {
-    height: 1em;
-    overflow: visible;
-    width: 1em
+  height: 1em;
+  overflow: visible;
+  width: 1em;
 }
 
 .fa-icon > .fa-icon_bar-chart {
-    width: calc(1em * 2048 / 1792)
+  width: calc(1em * 2048 / 1792);
 }
 
-.fa-icon > .fa-icon_cloud-download,.fa-icon > .fa-icon_cloud-upload,.fa-icon > .fa-icon_cogs,.fa-icon > .fa-icon_eraser,.fa-icon > .fa-icon_film {
-    width: calc(1em * 1920 / 1792)
+.fa-icon > .fa-icon_cloud-download,
+.fa-icon > .fa-icon_cloud-upload,
+.fa-icon > .fa-icon_cogs,
+.fa-icon > .fa-icon_eraser,
+.fa-icon > .fa-icon_film {
+  width: calc(1em * 1920 / 1792);
 }
 
 .fa-icon > .fa-icon_code {
-    width: calc(1em * 1830 / 1792)
+  width: calc(1em * 1830 / 1792);
 }
 
 .fa-icon > .fa-icon_exclamation-triangle {
-    width: calc(1em * 1794 / 1792)
+  width: calc(1em * 1794 / 1792);
 }
 
-.fa-icon > .fa-icon_clipboard,.fa-icon > .fa-icon_comment-alt,.fa-icon > .fa-icon_external-link,.fa-icon > .fa-icon_eye-dropper,.fa-icon > .fa-icon_eye-open,.fa-icon > .fa-icon_eye-slash,.fa-icon > .fa-icon_files-o,.fa-icon > .fa-icon_list-alt {
-    width: calc(1em * 1792 / 1792)
+.fa-icon > .fa-icon_clipboard,
+.fa-icon > .fa-icon_comment-alt,
+.fa-icon > .fa-icon_external-link,
+.fa-icon > .fa-icon_eye-dropper,
+.fa-icon > .fa-icon_eye-open,
+.fa-icon > .fa-icon_eye-slash,
+.fa-icon > .fa-icon_files-o,
+.fa-icon > .fa-icon_list-alt {
+  width: calc(1em * 1792 / 1792);
 }
 
-.fa-icon > .fa-icon_download-alt,.fa-icon > .fa-icon_font,.fa-icon > .fa-icon_search,.fa-icon > .fa-icon_spinner,.fa-icon > .fa-icon_unlink,.fa-icon > .fa-icon_upload-alt,.fa-icon > .fa-icon_zoom-in,.fa-icon > .fa-icon_zoom-out {
-    width: calc(1em * 1664 / 1792)
+.fa-icon > .fa-icon_download-alt,
+.fa-icon > .fa-icon_font,
+.fa-icon > .fa-icon_search,
+.fa-icon > .fa-icon_spinner,
+.fa-icon > .fa-icon_unlink,
+.fa-icon > .fa-icon_upload-alt,
+.fa-icon > .fa-icon_zoom-in,
+.fa-icon > .fa-icon_zoom-out {
+  width: calc(1em * 1664 / 1792);
 }
 
 .fa-icon > .fa-icon_home {
-    width: calc(1em * 1612 / 1792)
+  width: calc(1em * 1612 / 1792);
 }
 
 .fa-icon > .fa-icon_check {
-    width: calc(1em * 1550 / 1792)
+  width: calc(1em * 1550 / 1792);
 }
 
-.fa-icon > .fa-icon_clock-o,.fa-icon > .fa-icon_cog,.fa-icon > .fa-icon_floppy-o,.fa-icon > .fa-icon_info-circle,.fa-icon > .fa-icon_pause-circle-o,.fa-icon > .fa-icon_play-circle-o,.fa-icon > .fa-icon_power-off,.fa-icon > .fa-icon_question-circle,.fa-icon > .fa-icon_refresh,.fa-icon > .fa-icon_save,.fa-icon > .fa-icon_sliders,.fa-icon > .fa-icon_undo {
-    width: calc(1em * 1536 / 1792)
+.fa-icon > .fa-icon_clock-o,
+.fa-icon > .fa-icon_cog,
+.fa-icon > .fa-icon_floppy-o,
+.fa-icon > .fa-icon_info-circle,
+.fa-icon > .fa-icon_pause-circle-o,
+.fa-icon > .fa-icon_play-circle-o,
+.fa-icon > .fa-icon_power-off,
+.fa-icon > .fa-icon_question-circle,
+.fa-icon > .fa-icon_refresh,
+.fa-icon > .fa-icon_save,
+.fa-icon > .fa-icon_sliders,
+.fa-icon > .fa-icon_undo {
+  width: calc(1em * 1536 / 1792);
 }
 
 .fa-icon > .fa-icon_arrow-right {
-    width: calc(1em * 1472 / 1792)
+  width: calc(1em * 1472 / 1792);
 }
 
 .fa-icon > .fa-icon_filter {
-    width: calc(1em * 1410 / 1792)
+  width: calc(1em * 1410 / 1792);
 }
 
-.fa-icon > .fa-icon_plus,.fa-icon > .fa-icon_trash-o {
-    width: calc(1em * 1408 / 1792)
+.fa-icon > .fa-icon_plus,
+.fa-icon > .fa-icon_trash-o {
+  width: calc(1em * 1408 / 1792);
 }
 
 .fa-icon > .fa-icon_times {
-    width: calc(1em * 1188 / 1792)
+  width: calc(1em * 1188 / 1792);
 }
 
-.fa-icon > .fa-icon_angle-up,.fa-icon > .fa-icon_double-angle-up,.fa-icon > .fa-icon_lock,.fa-icon > .fa-icon_unlock-alt {
-    width: calc(1em * 1152 / 1792)
+.fa-icon > .fa-icon_angle-up,
+.fa-icon > .fa-icon_double-angle-up,
+.fa-icon > .fa-icon_lock,
+.fa-icon > .fa-icon_unlock-alt {
+  width: calc(1em * 1152 / 1792);
 }
 
 .fa-icon > .fa-icon_double-angle-left {
-    width: calc(1em * 966 / 1792)
+  width: calc(1em * 966 / 1792);
 }
 
 .fa-icon > .fa-icon_bolt {
-    width: calc(1em * 896 / 1792)
+  width: calc(1em * 896 / 1792);
 }
 
 body {
-    background: #000
+  background: #000;
 }
 
 nav {
-    font-family: Roboto;
-    display: flex;
-    justify-content: space-between;
-    height: 4em;
+  font-family: Roboto;
+  display: flex;
+  justify-content: space-between;
+  height: 4em;
 }
 
 nav a {
-    color: #fff;
-    text-decoration: none;
-    font-weight: 700
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
 }
 
 nav a span {
-    color: red
+  color: red;
 }
 
 nav .left {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding-left: 1em
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1em;
 }
 
 nav .left a {
-    margin-left: 30px
+  margin-left: 30px;
 }
 
 nav .left a i {
-    padding-right: 4px
+  padding-right: 4px;
 }
 
 nav .middle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 nav .middle .search-bar {
-    display: flex;
-    transform: translateY(1em);
-    background: #222;
-    border: 1px solid #444;
-    width: 320px;
-    height: 30px
+  display: flex;
+  transform: translateY(1em);
+  background: #222;
+  border: 1px solid #444;
+  width: 320px;
+  height: 30px;
 }
 
 nav .middle button {
-    display: flex;
-    transform: translate(22em, -1.25em);
-    background: #454545;
-    color: #999;
-    padding: 10px 10px;
-    border: 1px;
-    border-radius: 50%;
+  display: flex;
+  transform: translate(22em, -1.25em);
+  background: #454545;
+  color: #999;
+  padding: 10px 10px;
+  border: 1px;
+  border-radius: 50%;
 }
 
 nav .middle input {
-    background:#454545;
-    color:#999;
-    padding:2px 25px
+  background: #454545;
+  color: #999;
+  padding: 2px 25px;
 }
 
 .search {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 
 .search .search-bar {
-    display: flex;
-    transform: translateY(1.5em);
-    background: #222;
-    border: 1px solid #444;
-    width: 320px;
-    height: 30px
-    
+  display: flex;
+  transform: translateY(1.5em);
+  background: #222;
+  border: 1px solid #444;
+  width: 320px;
+  height: 30px;
 }
 
 .search button {
-    display: flex;
-    transform: translate(11.5em, -0.75em);
-    background: #454545;
-    color: #999;
-    padding: 10px 10px;
-    border: 1px;
-    border-radius: 50%;
+  display: flex;
+  transform: translate(11.5em, -0.75em);
+  background: #454545;
+  color: #999;
+  padding: 10px 10px;
+  border: 1px;
+  border-radius: 50%;
 }
 
 .search input {
-    background: #454545;
-    color: #999;
-    padding: 2px 25px
+  background: #454545;
+  color: #999;
+  padding: 2px 25px;
 }
 
 nav .right {
-    display: flex;
-    align-items: center;
-    padding-right: 1.5em;
+  display: flex;
+  align-items: center;
+  padding-right: 1.5em;
 }
 
 nav .right a {
-    padding-left: 1.5em
+  padding-left: 1.5em;
 }
 
 nav .right img {
-    height: 30px;
-    width: 30px;
-    border-radius: 50%
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
 }
 
-
 @font-face {
   font-family: "PokeTube Flex";
   src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
@@ -406,10 +535,12 @@ nav .right img {
   font-weight: 600;
 }
 
-.btn.btn-success {
-  transform: translate(21em, -1.25em) !important;
+@media screen and (min-width: 1000px) {
+  .btn.btn-success {
+    transform: translate(21em, -1.25em) !important;
+  }
 }
 
-nav .middle .search-bar { 
-border-radius: 2em !important;
-}
\ No newline at end of file
+nav .middle .search-bar {
+  border-radius: 2em !important;
+}