diff --git a/README.md b/README.md index 91e67b63..192fabdf 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,10 @@ _Know when web pages change! Stay ontop of new information!_ Live your data-life *pro-actively* instead of *re-actively*. -Open source web page monitoring, notification and change detection. +Free, Open-source web page monitoring, notification and change detection. Don't have time? [Try our $6.99/month plan - unlimited checks and watches!](https://lemonade.changedetection.io/start) -Self-hosted web page change monitoring +[Self-hosted web page change monitoring](https://lemonade.changedetection.io/start) **Get your own private instance now! Let us host it for you!** diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index c1698382..cdcd2487 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -244,7 +244,7 @@ footer { .sticky-tab { position: absolute; top: 60px; - font-size: 8px; + font-size: 65%; background: #fff; padding: 10px; } .sticky-tab#left-sticky { @@ -310,14 +310,23 @@ footer { #nav-menu { overflow-x: scroll; } } -/* +@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { + div.sticky-tab#hosted-sticky { + top: 60px; + left: 0px; + right: auto; } + section.content { + padding-top: 110px; } + div.tabs ul li { + display: block; + border-radius: 0px; } + input[type='text'] { + width: 100%; } + /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { - input[type='text'] { - width: 100%; } .watch-table { /* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */ diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss index 9a956f7f..5ca7eb31 100644 --- a/changedetectionio/static/styles/styles.scss +++ b/changedetectionio/static/styles/styles.scss @@ -322,7 +322,7 @@ footer { .sticky-tab { position: absolute; top: 60px; - font-size: 8px; + font-size: 65%; background: #fff; padding: 10px; &#left-sticky { @@ -422,18 +422,35 @@ footer { } } -/* -Max width before this PARTICULAR table gets nasty -This query will take effect for any screen smaller than 760px -and also iPads specifically. -*/ -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { + +@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { + + div.sticky-tab#hosted-sticky { + top: 60px; + left: 0px; + right: auto; + } + + section.content { + padding-top: 110px; + } + + // Make the tabs easier to hit, they will be all nice and horizontal + div.tabs ul li { + display: block; + border-radius: 0px; + } input[type='text'] { width: 100%; } - + +/* +Max width before this PARTICULAR table gets nasty +This query will take effect for any screen smaller than 760px +and also iPads specifically. +*/ .watch-table { /* Force table to not be like tables anymore */ thead, tbody, th, td, tr {