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 @@
By purchasing a subscription you support pixeldrain on its mission to make content sharing easier, safer and faster for everyone.
-+ 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. +
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 @@
- Normally when viewing a file on pixeldrain it has to go through
- the file viewer. Files which are directly downloaded without
- visiting the file viewer are blocked after a while.
+ When viewing a file on pixeldrain it has to go through the file
+ viewer. Files which are directly downloaded without visiting the
+ file viewer are blocked after a while.
Direct linking allows you to share files without going through
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go
index 05924e8..6fb02be 100644
--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -51,8 +51,10 @@ type pixeldrainStyleSheet struct {
Layer1Shadow int // Deep layers have little shadow
Layer2Color hsl
Layer2Shadow int
- Layer3Color hsl // Highest and brightest layer
- Layer3Shadow int // High layers have lots of shadow
+ Layer3Color hsl
+ Layer3Shadow int
+ Layer4Color hsl // Highest and brightest layer
+ Layer4Shadow int // High layers have lots of shadow
ShadowColor hsl
}
@@ -82,6 +84,9 @@ func (s pixeldrainStyleSheet) String() string {
--layer_3_color: #%s;
--layer_3_color_border: #%s;
--layer_3_shadow: %s;
+ --layer_4_color: #%s;
+ --layer_4_color_border: #%s;
+ --layer_4_shadow: %s;
--shadow_color: #%s;
}`,
@@ -106,6 +111,9 @@ func (s pixeldrainStyleSheet) String() string {
s.Layer3Color.RGB(),
s.Layer3Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer3Shadow),
+ s.Layer4Color.RGB(),
+ s.Layer4Color.add(0, 0, .05).RGB(),
+ fmt.Sprintf("%dpx", s.Layer4Shadow),
s.ShadowColor.RGB(),
)
}
@@ -213,6 +221,8 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5,
Layer3Color: hsl{0, 0, .15},
Layer3Shadow: 7,
+ Layer4Color: hsl{0, 0, .18},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}
@@ -255,6 +265,8 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
Layer2Shadow: 5,
Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 7,
+ Layer4Color: hsl{192, .99, .19},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}
@@ -270,12 +282,14 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{0, .75, .4},
ScrollbarBackgroundColor: hsl{0, 0, 0},
- Layer1Color: hsl{0, .5, .07},
+ Layer1Color: hsl{0, .5, .05},
Layer1Shadow: 3,
- Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
+ Layer2Color: hsl{0, .6, .08}, // hsl{0, .8, .15},
Layer2Shadow: 5,
- Layer3Color: hsl{0, .9, .2},
+ Layer3Color: hsl{0, .9, .14},
Layer3Shadow: 7,
+ Layer4Color: hsl{0, .9, .20},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}
@@ -297,6 +311,8 @@ var hackerStyle = pixeldrainStyleSheet{
Layer2Shadow: 5,
Layer3Color: hsl{120, .3, .08},
Layer3Shadow: 7,
+ Layer4Color: hsl{120, .5, .12},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}
@@ -318,6 +334,8 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5,
Layer3Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
Layer3Shadow: 6,
+ Layer4Color: hsl{172, .07, .30}, // hsl(172, 6%, 25%)
+ Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0},
}
@@ -339,6 +357,8 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5,
Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 7,
+ Layer4Color: hsl{223, .10, .32},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}
@@ -354,12 +374,14 @@ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%)
- Layer1Color: hsl{160, .27, .07},
+ Layer1Color: hsl{160, .27, .05},
Layer1Shadow: 3,
- Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%)
+ Layer2Color: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
Layer2Shadow: 5,
- Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
+ Layer3Color: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
Layer3Shadow: 7,
+ Layer4Color: hsl{161, .32, .15},
+ Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
}