pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace CSS classes with semantic HTML

Browse Source
This commit is contained in:
Fornax
2022-01-11 13:28:22 +01:00
parent c6f0421ad3
commit 8719d9b0f9
37 changed files with 1215 additions and 1279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
res/include/style/layout.css
View File

@@ -46,8 +46,11 @@ a > svg { vertical-align: middle; }
*, *::before, *::after {
box-sizing: border-box;
}
html, body { overflow-x: hidden; }
body{
html, body {
/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
overflow-x: hidden;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
font-size: 17px;
@@ -56,20 +59,26 @@ body{
background-color: var(--layer_1_color);
padding: 0;
}
.checkers {
header, footer, .checkers {
background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-blend-mode: luminosity;
}
.inset {
header, footer {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 12px;
text-align: center;
overflow: hidden;
}
header > h1 {
text-shadow: 1px 1px 10px var(--shadow_color);
}
footer {
padding: 200px 8px 40px 8px;
}
/* Page layout elements */
@@ -131,7 +140,7 @@ body{
padding: 4px;
}
}
.limit_width {
section {
position: relative;
display: inline-block;
max-width: 1000px;
@@ -141,10 +150,6 @@ body{
text-align: left;
clear: both;
}
.page_body > h1 {
text-shadow: 1px 1px 25px #000000;
text-shadow: 1px 1px 25px var(--shadow_color);
}
/* Page contents */

8
res/template/404.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>This page does not exist!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
If you came here by a link from this very same website you can
tell me about it on
@@ -23,7 +23,7 @@
<p>
Bye!
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/451.html
View File

@@ -7,15 +7,15 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>451, Unavailable For Legal Reasons</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
Hello. This file has received an abuse report and has been taken
down. It cannot be shared anymore.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/500.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>You broke pixeldrain</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
Great job.
</p>
@@ -24,7 +24,7 @@
try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/appearance.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Change website appearance</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
@@ -30,7 +30,7 @@
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div>
</div>
</section>
<script>
// Style selector

8
res/template/apps.html
View File

@@ -14,10 +14,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Apps</h1>
</div>
<div class="limit_width">
</header>
<section>
<h2>ShareX</h2>
<div class="specs">
Platform: Windows 7, 8.1 and 10 |
@@ -110,7 +110,7 @@
please send them to
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

23
res/template/email_confirm.html
View File

@@ -7,27 +7,38 @@
<body>
{{template "page_top" .}}
<div class="limit_width">
{{if eq .Other "success"}}
{{if eq .Other "success"}}
<header>
<h1>Success!</h1>
</header>
<section>
<p>
Your account's e-mail address has been updated.
</p>
{{else if eq .Other "not_found"}}
</section>
{{else if eq .Other "not_found"}}
<header>
<h1>E-mail change failed</h1>
</header>
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
{{else}}
</section>
{{else}}
<header>
<h1>Error</h1>
</header>
<section>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
{{end}}
</div>
</section>
{{end}}
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

16
res/template/file_not_found.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>404, File Not Found!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
This file does not exist, or it has been removed. Possible
reasons for this are:
@@ -34,7 +34,7 @@
<p>
I'm sorry for the inconvenience.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
@@ -49,10 +49,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>404, List Not Found!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
This list does not exist, or it has been removed. Possible
reasons for this are:
@@ -70,7 +70,7 @@
<p>
I'm sorry for the inconvenience.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/file_viewer_compat.html
View File

@@ -25,10 +25,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
</header>
<section>
{{if eq .Other.Type "file"}}
Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
{{else}}
@@ -66,7 +66,7 @@
<li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li>
<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
</ul>
</div>
</section>
{{template "analytics"}}
</body>
</html>

8
res/template/fragments/form.html
View File

@@ -110,14 +110,14 @@
<body>
<div id='body' class="body">
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Form.Title}}</h1>
</div>
</header>
<br/>
<div class="limit_width">
<section>
{{template "form" .Form}}
<br/>
</div>
</section>
{{template "page_bottom" .}}
</div>

8
res/template/fragments/markdown_wrapper.html
View File

@@ -7,12 +7,12 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
</header>
<section>
{{.Other}}
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

10
res/template/fragments/page_wrap.html
View File

@@ -1,6 +1,6 @@
{{define "page_menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation">
<nav id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<hr />
{{if .Authenticated}}<a href="/user">{{.User.Username}}</a>
@@ -26,7 +26,7 @@
{{if eq .User.Subscription.ID ""}}
<a href="https://pixeldrain.com/vouchercodes">Shopping discounts</a>
{{end}}
</div>
</nav>
<script>
function toggleMenu() {
var nav = document.getElementById("page_navigation");
@@ -54,7 +54,7 @@ function resetMenu() {
{{end}}
{{define "page_bottom"}}
<div class="inset checkers" style="padding-top: 150px">
<footer>
<div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
@@ -71,8 +71,6 @@ function resetMenu() {
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
<br/>
<br/>
</div>
</footer>
</div><!-- end page_body -->
{{end}}

29
res/template/history.html
View File

@@ -5,24 +5,23 @@
{{template "user_style" .}}
</head>
<body>
<div id='body' class="body">
{{template "page_top" .}}
{{template "page_top" .}}
<div class="checkers inset">
<h1>Upload History</h1>
</div>
<header>
<h1>Upload History</h1>
</header>
<div class="limit_width">
<p>
Here are all files you have previously uploaded to pixeldrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
</p>
<br/>
<section>
<p>
Here are all files you have previously uploaded to pixeldrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
</p>
<br/>
<div id="uploaded_files" class="highlight_dark"></div>
</section>
{{template "page_bottom" .}}
<div id="uploaded_files" class="highlight_dark"></div>
</div>
{{template "page_bottom" .}}
</div>
<script>
let apiEndpoint = '{{.APIEndpoint}}';
{{template `util.js`}}

12
res/template/home.html
View File

@@ -93,21 +93,21 @@
</head>
<body>
{{template "page_top" .}}
<div class="checkers inset" style="padding-bottom: 60px;">
<header style="padding-bottom: 60px;">
<picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture>
</div>
</header>
<!-- Svelte element -->
<div id="uploader" class="page_content"></div>
<div class="checkers inset">
<header>
<h1>What is pixeldrain?</h1>
</div>
</header>
<div class="limit_width">
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
@@ -475,7 +475,7 @@
logging in head to the <a href="/user/transactions">transactions
page</a> to deposit your coins.
</p>
</div>
</section>
<template id="tpl_file_expiry">
<p>

4
res/template/user_buckets.html
View File

@@ -10,9 +10,9 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>My Buckets</h1>
</div>
</header>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}

9
res/template/user_logout.html
View File

@@ -6,15 +6,14 @@
</head>
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<br/>
</div>
</header>
<br/>
<form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<div class="limit_width">
<section>
<br/>
<h2>Why do I need to confirm my logout?</h2>
<p>
@@ -31,7 +30,7 @@
page visit we can confirm that you really want to log out.
</p>
<br/>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/widgets.html
View File

@@ -8,10 +8,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header">
<h1>Widget showcase</h1>
</div>
<div class="limit_width">
</header>
<section>
<h2>Size 2 header</h2>
<h3>Size 3 header</h3>
<h4>Size 4 header</h4>
@@ -64,7 +64,7 @@
<br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
</div>
</section>
{{template "page_bottom" .}}
</body>
</html>