diff --git a/web-app/src/main/kotlin/home/IconList.kt b/web-app/src/main/kotlin/home/IconList.kt index cb21ad7b..8bd17319 100644 --- a/web-app/src/main/kotlin/home/IconList.kt +++ b/web-app/src/main/kotlin/home/IconList.kt @@ -31,7 +31,7 @@ private val iconList = functionalComponent("IconList") { props -> + Styles.makeRow } for((icon,platformLink) in props.iconsAndPlatforms){ - styledA(href = platformLink){ + styledA(href = platformLink,target="_blank"){ styledImg { attrs { src = icon diff --git a/web-app/src/main/kotlin/navbar/NavBar.kt b/web-app/src/main/kotlin/navbar/NavBar.kt index 8f791c68..cc5b6a3b 100644 --- a/web-app/src/main/kotlin/navbar/NavBar.kt +++ b/web-app/src/main/kotlin/navbar/NavBar.kt @@ -47,7 +47,7 @@ private val navBar = functionalComponent("NavBar") { props -> } } } - styledA(href = "TODO Website Link") { + styledA(href = "https://shabinder.github.io/SpotiFlyer/",target="_blank") { css { display = Display.flex alignItems = Align.center diff --git a/web-app/src/main/resources/index.html b/web-app/src/main/resources/index.html index 92db7273..224f7c73 100644 --- a/web-app/src/main/resources/index.html +++ b/web-app/src/main/resources/index.html @@ -10,6 +10,15 @@ + + +
diff --git a/web-app/src/main/resources/styles.css b/web-app/src/main/resources/styles.css index afa98b23..19a2a262 100644 --- a/web-app/src/main/resources/styles.css +++ b/web-app/src/main/resources/styles.css @@ -2,16 +2,7 @@ font-family: pristine; src: url("pristine_script.ttf"); } -@media (max-width: 600px) { - /* CSS HERE ONLY ON PHONE */ - .searchBox:hover > .searchInput { - width: 150px; - padding: 0 6px; - } - .info-banners { - flex-direction: column; - } -} + html { background-image: url("header-dark.jpg"); font-family: Lora,Helvetica Neue,Helvetica,Arial,sans-serif; @@ -102,7 +93,7 @@ body, html { } .searchBox:hover > .searchInput { - width: 30vw; + width: 35vw; padding: 0 6px; } @@ -144,6 +135,8 @@ body, html { line-height: 40px; width: 0px; } + +/*Download All Button*/ #download-all-text { color: black; display: none; @@ -295,4 +288,21 @@ input.cmn-toggle-round-flat:checked + label:after { /* margin-left = border-radius from 'input.cmn-toggle-round-flat + label' */ margin-left: 20px; background-color: #8ce196; -} \ No newline at end of file +} +@media screen and (max-width: 600px) { + /* CSS HERE ONLY ON PHONE */ + .info-banners { + flex-direction: column; + } + .searchInput { + width: 35vw; + padding: 0 6px; + } + .search-icon { + filter: none; + } + .searchButton { + background: white; + color : #2f3640; + } +}