diff --git a/res/include/style/layout.css b/res/include/style/layout.css index b155a86..8993502 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -57,6 +57,7 @@ body{ background-repeat: repeat; margin: 0; font-family: system-ui, sans-serif; + font-size: 17px; line-height: 1.8em; color: #b2b2b2; /* Fallback */ color: var(--text_color); @@ -261,16 +262,39 @@ h1, h2, h3, h4, h5, h6 { line-height: 1em; margin-left: 10px; margin-right: 10px; + font-weight: normal; } -h2, h3{ /* Differentiate it a bit, else it just looks like bold text */ + +h1 { + font-size: 2.5em; + font-family: "light", sans-serif; + text-align: center; +} +h2 { + font-size: 2em; + font-family: "light", sans-serif; + text-align: center; + border-bottom: 1px var(--layer_4_color_border) solid; +} +h3 { + font-size: 1.5em; + font-family: "light", sans-serif; border-bottom: 1px var(--layer_3_color_border) solid; } -h1{font-size: 2.25em; font-family: "light", sans-serif; font-weight: normal;} -h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;} -h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;} -h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;} -h5{font-size: 1em; font-family: sans-serif; font-weight: normal;} -h6{font-size: .75em; font-family: sans-serif; font-weight: normal;} +h4 { + font-size: 1.25em; + font-family: sans-serif; + border-bottom: 1px var(--layer_2_color_border) solid; +} +h5 { + font-size: 1em; + font-family: sans-serif; + border-bottom: 1px var(--layer_1_color_border) solid; +} +h6{ + font-size: .75em; + font-family: sans-serif; +} p, .indent { margin: 10px; diff --git a/res/template/home.html b/res/template/home.html index e4a0ad0..e682ff0 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -26,26 +26,27 @@ padding: 5px; } .big_number { - font-size: 24px; + font-size: 1.5em; font-weight: bold; line-height: 1em; text-align: center; - display: block; + display: inline-block; box-sizing: border-box; background-color: var(--highlight_color); color: var(--highlight_text_color); border-radius: 30px; - padding: 5px; - margin-right: 10px; - width: 34px; - height: 34px; - float: left; + padding: 0.15em; + margin-right: 0.4em; + width: 1.4em; + height: 1.4em; + vertical-align: middle; } .instruction_text { - margin: 5px; - font-size: 24px; - display: block; + margin: 0.1em; + font-size: 1.5em; + display: inline-block; box-sizing: border-box; + vertical-align: middle; } .social_button { margin: 5px; @@ -56,44 +57,62 @@ margin: 5px 15px; } - .features { - width: 100%; - text-align: center; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; + .feat_table { + display: flex; + flex-direction: column; } - .features > div { - display: inline-block; - margin: 12px; - width: 18em; - vertical-align: top; - text-align: left; - white-space: initial; + .feat_table > div { + display: flex; + flex-direction: row; + } + .feat_table > div > div:first-child { max-width: 14em; } + .feat_table > div > div { + flex: 1 0 0; + margin: 0.2em; + padding: 0.5em; + text-align: center; + } + .feat_table > div > .feat_label { + border-top-left-radius: 0.5em; + border-bottom-left-radius: 0.5em; + background-color: var(--layer_1_color); + } + .feat_table > div > .feat_normal { background-color: var(--layer_3_color); - box-shadow: 1px 1px 6px -2px var(--shadow_color); + box-shadow: 1px 1px 3px -1px var(--shadow_color); + text-shadow: 1px 1px 3px var(--shadow_color); } - .features > div > h3 { - text-align: center; - border-bottom: none; - margin: 10px; + .feat_table > div > .feat_pro { + background-color: var(--layer_4_color); + box-shadow: 1px 1px 3px 0 var(--shadow_color); + text-shadow: 1px 1px 6px var(--shadow_color); } - .features > div > .price { - text-align: center; - margin-bottom: 6px; + .feat_table > div > .feat_highlight { + border: 1px solid var(--highlight_color) } - .features > div > .feature { - display: block; - text-align: center; - padding: 6px; - border-bottom: 1px solid var(--layer_3_color_border); + .text_highlight { + color: var(--highlight_color); + text-shadow: 0 0 4px var(--shadow_color); + font-size: 1.1em; + font-weight: bold; } - .features > div > ul { - padding-left: 20px; + + @media (max-width: 800px) { + .feat_table > div { + flex-direction: column; + margin: 0.2em; + border-radius: 6px; + } + .feat_table > div > div { + margin: 0; + border-radius: 0; + } } - .features > div > ul > li { - margin: 8px; - text-align: center; + @media (min-width: 800px) { + .feat_table > div > div.round_tl { border-top-left-radius: 0.5em; } + .feat_table > div > div.round_tr { border-top-right-radius: 0.5em; } + .feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; } + .feat_table > div > div.round_bl { border-bottom-left-radius: 0.5em; } } {{template `modal.css`}} @@ -109,7 +128,9 @@
- 1Select files to upload + 1 + Select files to upload +
You can also drop files anywhere on this page from your file manager
@@ -203,152 +224,81 @@ For more information about pixeldrain see the about page.

-

Features

+ +

Pro

By purchasing a subscription you support pixeldrain on its mission to make content sharing easier, safer and faster for everyone.

-
-
-
-

Free

-
€0 per month
- - - - Files expire 30 days after last view - -
No account required
-
Max file size 10 GB
-
Access your files anywhere with a pixeldrain account
-
Group multiple files together in a single link with lists
-
-
-

I'm doing my part!

-
€2 per month + tax
- - - - Files expire 2 months after last view - - -
No ads when viewing files
-
No ads on files you uploaded
- - -
- {{if eq .User.Subscription.ID "patreon_1"}} - You have this plan. Thank you for supporting pixeldrain! - {{else}} - - Get Started - - {{end}} -
-
-
-

Resolve

-
€4 per month + tax
- - - - Files expire 3 months after last view - - -
No ads when viewing files
-
No ads on files you uploaded
- - -
- {{if eq .User.Subscription.ID "patreon_5"}} - You have this plan. Thank you for supporting pixeldrain! - {{else}} - - Get Started - - {{end}} -
-
-
-

Persistence

-
€8 per month + tax
- - - - Files expire 4 months after last view - - -
No ads when viewing files
-
No ads on files you uploaded
- - -
- {{if eq .User.Subscription.ID "patreon_2"}} - You have this plan. Thank you for supporting pixeldrain! - {{else}} - - Get Started - - {{end}} -
-
-
-

Tenacity

-
€16 per month + tax
- - - - Files expire 8 months after last view - - -
No ads when viewing files
-
No ads on files you uploaded
- - -
- {{if eq .User.Subscription.ID "patreon_3"}} - You have this plan. Thank you for supporting pixeldrain! - {{else}} - - Get Started - - {{end}} -
-
-
-

Eternity

-
€32 per month + tax
- - - - Files you upload never expire - - -
No ads when viewing files
-
No ads on files you uploaded
- - -
- {{if eq .User.Subscription.ID "patreon_4"}} - You have this plan. Thank you for supporting pixeldrain! - {{else}} - - Get Started - - {{end}} +
+
+
+
Free
+
Pro
+
+
+
Size limit per file
+
5 GB per file
+
15 GB per file
+
+
+ +
30 days after the last time it is viewed
+
90 days after the last time it is viewed
+
+
+
Advertisements
+
Pop-up or a banner ad on the file viewer page
+
+ No ads on files + you share, or when viewing files from other + users +
+
+
+
Privacy
+
+ No trackers, but advertisers can see your IP address + and browser fingerprint +
+
+ Completely + private. No third party scripts and no + logging +
+
+
+
Online file previews
+
View image, video, audio, PDF and text files directly in your web browser
+
+
+ +
Rate limiting mode will be enabled when a file has 3 times more downloads than views
+
+
+
+
Free
+
+ +
+ Billed annually. We accept Stripe and PayPal +
+
+

Premium

+

+ Premium is more catered toward file storage and content + delivery. This plan enables the Buckets feature which + provides a more structured way to manage your files on + pixeldrain. Buckets allow direct linking to files without + running into rate limiting. +

+

+ When you choose for Premium you will also get all the + benefits of the Pro subscription. +

@@ -361,14 +311,18 @@

Unlike most other sharing sites pixeldrain uses a postponing system for expiring files. When a file is freshly uploaded it - gets 30 days by default (this can be extended by supporting the - site on patreon). After these 30 days we will check when the - file was last viewed. Files which are regularly viewed could - still bring new users to the platform, it would be rude to show - these people a 404 Not Found page. So if the file was viewed in - the last 30 days we will simply postpone the next check a month. - If the file was not viewed however it will immediately be - removed. + gets 30 days by default (90 days if you have the pro plan). + After these 30 days we will check when the file was last viewed. + Files which are regularly viewed could still bring new users to + the platform, it would be rude to show these people a 404 Not + Found page. So if the file was viewed in the last 30 days we + will simply postpone the next check a month. If the file was not + viewed however it will immediately be removed. +

+

+ Views are only counted when someone visits the download page in + a web browser. This makes sure that users can see that the file + comes from pixeldrain.

This way we can minimize dead links, and you won't have to tell @@ -377,9 +331,9 @@