From f99a3f50886f0112d0660b698424be580ce88e14 Mon Sep 17 00:00:00 2001 From: Jeremy Plsek Date: Wed, 15 Jan 2020 20:30:07 -0500 Subject: [PATCH] Set options and help page to use html5 - Fix css when using html5 - Add encoding scheme to html - Remove font-size change on title on hover. It's jarring seeing the whole page move when trying to move your mouse to the options. - Remove center tags - Remove unnecessary styles - Fix some minor grammar --- _locales/en/messages.json | 2 +- _locales/pl_PL/messages.json | 2 +- help/index_en.html | 13 +++++--- help/styles.css | 65 ++++++++++++++++-------------------- options/options.css | 59 ++++++++++++-------------------- options/options.html | 3 ++ 6 files changed, 64 insertions(+), 80 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index eab70b4e..51017402 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -349,7 +349,7 @@ "message": "Support Invidious" }, "supportInvidiousDescription": { - "message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on chrome and other chromium variants." + "message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on Chrome and other Chromium variants." }, "optionsInfo": { "message": "Enable Invidious support, disable autoskip, hide buttons and more." diff --git a/_locales/pl_PL/messages.json b/_locales/pl_PL/messages.json index 454eacc8..59638945 100644 --- a/_locales/pl_PL/messages.json +++ b/_locales/pl_PL/messages.json @@ -349,7 +349,7 @@ "message": "Wesprzyj Invidious" }, "supportInvidiousDescription": { - "message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach chromium." + "message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach Chromium." }, "optionsInfo": { "message": "Wesprzyj Invidious, wyłącz auto przewijanie, ukryj guziki i więcej." diff --git a/help/index_en.html b/help/index_en.html index abeff075..ec7cd521 100644 --- a/help/index_en.html +++ b/help/index_en.html @@ -1,5 +1,8 @@ + + SponsorBlock + @@ -11,7 +14,7 @@ SponsorBlock -
+

Created By Ajay Ramachandran

@@ -48,7 +51,7 @@ Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary (this can be disabled in the options).

-
+

Submitting

@@ -106,7 +109,7 @@ Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.

-

Where can I get the source code

+

Where can I get the source code?

Client:

@@ -116,7 +119,7 @@ -

Credit

+

Credits

The awesome Invidious API is used to grab the time the video was published.

@@ -124,6 +127,6 @@

Some icons made by Freepik from www.flaticon.com and are licensed by CC 3.0 BY

-
+ diff --git a/help/styles.css b/help/styles.css index b71059d3..14003266 100644 --- a/help/styles.css +++ b/help/styles.css @@ -4,6 +4,16 @@ body { background-color: #333333; + font-family: sans-serif; +} + +.center { + text-align: center; +} + +.container { + max-width: 60%; + margin: auto; } .projectPreview { @@ -12,24 +22,24 @@ body { .projectPreviewImage { position: absolute; - left: -90; - width: 80; + left: -90px; + width: 80px; top: 50%; transform: translateY(-50%); } .projectPreviewImageLarge { position: absolute; - left: -210; - width: 200; + left: -210px; + width: 200px; top: 50%; transform: translateY(-20%); } .projectPreviewImageLargeRight { position: absolute; - right: -210; - width: 200; + right: -210px; + width: 200px; top: 50%; transform: translateY(-50%); } @@ -47,37 +57,27 @@ body { text-align: center; vertical-align: middle; - font-family: sans-serif; - font-size: 50; + font-size: 50px; color: #212121; - /* height: 100; */ - - padding: 20; + padding: 20px; text-decoration: none; transition: font-size 1s; } -#title:hover { - font-size: 60; - - transition: font-size 1s; -} - .subtitle { - font-family: sans-serif; - font-size: 40; + font-size: 40px; color: #dad8d8; - padding-top: 10; + padding-top: 10px; transition: font-size 0.4s; } .subtitle:hover { - font-size: 45; + font-size: 45px; transition: font-size 0.4s; } @@ -99,7 +99,7 @@ a { } .link { - padding: 20; + padding: 20px; height: 80px; @@ -113,13 +113,12 @@ a { } #contact,.smalllink { - font-family: sans-serif; - font-size: 25; + font-size: 25px; color: #e8e8e8; text-align: center; - padding: 10; + padding: 10px; } #contact { @@ -127,15 +126,11 @@ a { } p,li,a { - font-family: sans-serif; - font-size: 20; + font-size: 20px; color: #c4c4c4; - - padding: 10; } p,li,code,a { - max-width: 60%; text-align: left; overflow-wrap: break-word; } @@ -147,7 +142,7 @@ p,li,code,a { .projectPreviewImage { position: unset; - width: 130; + width: 130px; display: block; margin: auto; transform: none; @@ -165,20 +160,18 @@ img { } #recentPostTitle { - font-family: sans-serif; - font-size: 30; + font-size: 30px; color: #dad8d8; } #recentPostDate { - font-family: sans-serif; - font-size: 15; + font-size: 15px; color: #dad8d8; } h1,h2,h3,h4,h5,h6 { - font-family: sans-serif; color: #dad8d8; + text-align: center; } svg { diff --git a/options/options.css b/options/options.css index e746484a..7cfa094e 100644 --- a/options/options.css +++ b/options/options.css @@ -1,6 +1,6 @@ /* Options page CSS */ body { - font-family: Sans-Serif; + font-family: sans-serif; } .center { @@ -25,12 +25,12 @@ body { .small-description { color: white; - font-size: 13; + font-size: 13px; } .medium-description { color: white; - font-size: 15; + font-size: 15px; } .option-text-box { @@ -151,24 +151,24 @@ body { .projectPreviewImage { position: absolute; - left: -90; - width: 80; + left: -90px; + width: 80px; top: 50%; transform: translateY(-50%); } .projectPreviewImageLarge { position: absolute; - left: -210; - width: 200; + left: -210px; + width: 200px; top: 50%; transform: translateY(-20%); } .projectPreviewImageLargeRight { position: absolute; - right: -210; - width: 200; + right: -210px; + width: 200px; top: 50%; transform: translateY(-50%); } @@ -188,37 +188,27 @@ body { text-align: center; vertical-align: middle; - font-family: sans-serif; - font-size: 50; + font-size: 50px; color: #212121; - /* height: 100; */ - - padding: 20; + padding: 20px; text-decoration: none; transition: font-size 1s; } -#title:hover { - font-size: 60; - - transition: font-size 1s; -} - .subtitle { - font-family: sans-serif; - font-size: 40; + font-size: 40px; color: #dad8d8; - padding-top: 10; + padding-top: 10px; transition: font-size 0.4s; } .subtitle:hover { - font-size: 45; + font-size: 45px; transition: font-size 0.4s; } @@ -240,7 +230,7 @@ a { } .link { - padding: 20; + padding: 20px; height: 80px; @@ -254,13 +244,12 @@ a { } #contact,.smalllink { - font-family: sans-serif; - font-size: 25; + font-size: 25px; color: #e8e8e8; text-align: center; - padding: 10; + padding: 10px; } #contact { @@ -268,11 +257,10 @@ a { } p,li { - font-family: sans-serif; - font-size: 20; + font-size: 20px; color: #c4c4c4; - padding: 10; + padding: 10px; } p,li,code,a { @@ -288,7 +276,7 @@ p,li,code,a { .projectPreviewImage { position: unset; - width: 130; + width: 130px; display: block; margin: auto; transform: none; @@ -306,19 +294,16 @@ img { } #recentPostTitle { - font-family: sans-serif; - font-size: 30; + font-size: 30px; color: #dad8d8; } #recentPostDate { - font-family: sans-serif; - font-size: 15; + font-size: 15px; color: #dad8d8; } h1,h2,h3,h4,h5,h6 { - font-family: sans-serif; color: #dad8d8; } diff --git a/options/options.html b/options/options.html index 2278e4d3..19354139 100644 --- a/options/options.html +++ b/options/options.html @@ -1,5 +1,8 @@ + + Options - SponsorBlock +