krz/skunky-art

Alternative privacy frontend for DeviantArt.

clone: git clone https://gitbay.org/krz/skunky-art.git

v1.3.6: static/html/index.htm · raw

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <title>SkunkyArt</title>
 5        <link rel="stylesheet" href="{{.}}stylesheet"/>
 6        <link rel="icon" type="image/x-icon" href="{{.}}favicon.ico">
 7        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.4, user-scalable=no; user-scalable=0"/>
 8
 9        <style>
10            main {
11                display: flex;
12                max-width: fit-content;
13                position: absolute;
14                top: 50%;
15                right: 50%;
16                transform: translate(50%, -50%);
17            }
18            div {
19                transform: translate(0, 50%);
20                margin-left: 4%;
21                flex-basis: 100%;
22                height: 30%;
23                display: block;
24                max-width: fit-content;
25            }     
26            div h1, form {
27                margin: 0;
28            }
29            div form {
30                font-size: 100%;
31                max-width: 100%
32            }
33            div form input {
34                width: 100%
35            }
36            img {
37                width: 30%;
38                height: 30%;
39            }
40
41            @media (orientation: portrait) {
42                main {
43                    display: block;
44                    width: 200%;
45                }
46                img {
47                    width: 100%;
48                    height: 100%;
49                }
50                form {
51                    width: 200%;
52                }
53                div {
54                    margin: -25%;
55                    margin-top: auto;
56                    width: 200%;
57                }
58                div h1 {
59                    text-align: center;
60                }
61            }
62            @media (max-width: 1155px) and (orientation: landscape) {
63                img {
64                    width: 50%;
65                }
66                div {
67                    transform: none;
68                }
69            }
70        </style>
71    </head>
72    <main>
73        <img src="{{.}}favicon.ico" title="SkunkyArt logo" draggable="false">
74        <div>
75            <h1><a href="{{.}}dd">Daily Deviations</a> | <a href="{{.}}about">About</a></h1>
76            <form method="get" action="{{.}}search">
77                <input type="text" name="q" placeholder="Search for ..." autocomplete="off" autocapitalize="none" spellcheck="false">
78                <select name="type">
79                    <option value="all">All</option>
80                    <option value="tag">Tag</option>
81                    <option value="r">Groups</option>
82                </select>
83                <button type="submit">Search!</button>
84            </form>
85            <h1 style="margin-top: 5%; font-size: 200%; text-align: center;">
86                <a href="https://github.com/zerolabsco/skunky-art" target="_blank" title="Source Code">SkunkyArt</a>
87            </h1>
88        </div>
89    </main>
90</html>