neon_arch
commited on
Commit
•
0d271a0
1
Parent(s):
3c31354
docs: move docs from wiki to docs folder & add an image for docs
Browse files- docs/README.md +17 -0
- docs/configuration.md +42 -0
- docs/faq.md +15 -0
- docs/installation.md +85 -0
- docs/introduction.md +13 -0
- docs/theming.md +324 -0
- images/websurfx_docs_image.png +0 -0
docs/README.md
ADDED
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<h1 align="center"><img src="../images/websurfx_docs_image.png" alt="Websurfx Docs" align="center"></h1>
|
2 |
+
|
3 |
+
# General
|
4 |
+
|
5 |
+
- [Introduction](./introduction.md)
|
6 |
+
- [**FAQ**](./faq.md)
|
7 |
+
|
8 |
+
# Users
|
9 |
+
|
10 |
+
- [Installation](./installation.md)
|
11 |
+
- [Configuration](./configuration.md)
|
12 |
+
- [Theming](./theming.md)
|
13 |
+
|
14 |
+
# Developers
|
15 |
+
|
16 |
+
- [**Contribute**](https://github.com/neon-mmd/websurfx/blob/master/CONTRIBUTING.md)
|
17 |
+
- [**Coding style**](https://rust-lang.github.io/api-guidelines/naming.html)
|
docs/configuration.md
ADDED
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Configuration
|
2 |
+
|
3 |
+
Everything in websurfx can be configured through the config file located at `websurfx/config.lua`.
|
4 |
+
|
5 |
+
Some of the configuration options provided in the file are stated below. These are subdivided into three categories:
|
6 |
+
|
7 |
+
- Server
|
8 |
+
- Website
|
9 |
+
- Cache
|
10 |
+
|
11 |
+
## Server
|
12 |
+
|
13 |
+
- **port:** Port number on which server should be launched.
|
14 |
+
- **binding_ip_addr:** IP address on the which server should be launched.
|
15 |
+
|
16 |
+
## Website
|
17 |
+
|
18 |
+
- **colorscheme:** The colorscheme name which should be used for the website theme (the name should be in accordance to the colorscheme file name present in `public/static/colorschemes` folder).
|
19 |
+
|
20 |
+
> By Default we provide 9 colorschemes to choose from these are:
|
21 |
+
>
|
22 |
+
> 1. catppuccin-mocha
|
23 |
+
> 2. dracula
|
24 |
+
> 3. monokai
|
25 |
+
> 4. nord
|
26 |
+
> 5. oceanic-next
|
27 |
+
> 6. solarized-dark
|
28 |
+
> 7. solarized-light
|
29 |
+
> 8. tomorrow-night
|
30 |
+
> 9. gruvbox-dark
|
31 |
+
|
32 |
+
- **theme:** The theme name which should be used for the website (again, the name should be in accordance to the theme file name present in `public/static/themes` folder).
|
33 |
+
|
34 |
+
> By Default we provide 1 theme to choose from these are:
|
35 |
+
>
|
36 |
+
> 1. simple
|
37 |
+
|
38 |
+
## Cache
|
39 |
+
|
40 |
+
- **redis_connection_url:** Redis connection url address on which the client should connect on.
|
41 |
+
|
42 |
+
[⬅️ Go back to Home](https://github.com/neon-mmd/websurfx/wiki).
|
docs/faq.md
ADDED
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# General Questions
|
2 |
+
|
3 |
+
## Why Websurfx?
|
4 |
+
|
5 |
+
The main goal of the Websurfx project is to provide a fast, secure, and privacy-focused [meta search engine](https://en.wikipedia.org/wiki/Metasearch_engine). While there are many meta search engines available, they do not always guarantee the security of their search engine, which is essential for ensuring privacy. For example, memory vulnerabilities can leak private or sensitive information, which is never good. Websurfx is written in Rust, which guarantees memory safety and eliminates such problems. Many meta search engines also lack key features such as advanced image search, which is required by many graphic designers, content creators, and others. Websurfx aims to provide these features and others, such as proper NSFW blocking, to improve the user experience.
|
6 |
+
|
7 |
+
## Why AGPLv3?
|
8 |
+
|
9 |
+
Websurfx is released under the AGPLv3 license to ensure that the source code remains open and transparent. This helps to prevent the inclusion of spyware, telemetry, or other malicious code in the project. AGPLv3 is a strong copyleft license that ensures the source code of the software remains open and available to everyone, including any modifications or improvements made to the code.
|
10 |
+
|
11 |
+
## Why Rust?
|
12 |
+
|
13 |
+
Rust was chosen as the programming language for Websurfx due to its memory safety features, which can help prevent vulnerabilities and make the codebase more secure. Rust is also faster than C++, which helps to make Websurfx fast and responsive. In addition, Rust's ownership and borrowing system allows for safe concurrency and thread safety in the codebase.
|
14 |
+
|
15 |
+
[⬅️ Go back to Home](https://github.com/neon-mmd/websurfx/wiki).
|
docs/installation.md
ADDED
@@ -0,0 +1,85 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Stable
|
2 |
+
|
3 |
+
To get started with Websurfx, clone the repository, edit the config file which is located in the `websurfx` directory and install redis server by following the instructions located [here](https://redis.io/docs/getting-started/) and then run the websurfx server and redis server using the following commands:
|
4 |
+
|
5 |
+
```shell
|
6 |
+
git clone https://github.com/neon-mmd/websurfx.git
|
7 |
+
cd websurfx
|
8 |
+
cargo build
|
9 |
+
redis-server --port 8082 &
|
10 |
+
./target/debug/websurfx
|
11 |
+
```
|
12 |
+
|
13 |
+
# Rolling/Edge/Unstable
|
14 |
+
|
15 |
+
If you want to use the rolling/edge branch, run the following commands instead:
|
16 |
+
|
17 |
+
```shell
|
18 |
+
git clone https://github.com/neon-mmd/websurfx.git
|
19 |
+
cd websurfx
|
20 |
+
git checkout rolling
|
21 |
+
cargo build
|
22 |
+
redis-server --port 8082 &
|
23 |
+
./target/debug/websurfx
|
24 |
+
```
|
25 |
+
|
26 |
+
Once you have started the server, open your preferred web browser and navigate to http://127.0.0.1:8080/ to start using Websurfx.
|
27 |
+
|
28 |
+
# Docker Deployment
|
29 |
+
|
30 |
+
Before you start, you will need [Docker](https://docs.docker.com/get-docker/) installed on your system first.
|
31 |
+
|
32 |
+
## Stable
|
33 |
+
|
34 |
+
First clone the the repository by running the following command:
|
35 |
+
|
36 |
+
```bash
|
37 |
+
git clone https://github.com/neon-mmd/websurfx.git
|
38 |
+
cd websurfx
|
39 |
+
```
|
40 |
+
|
41 |
+
After that edit the config.lua file located under `websurfx` directory. In the config file you will specifically need to change to values which is `binding_ip_addr` and `redis_connection_url` which should make the config look something like this:
|
42 |
+
|
43 |
+
```lua
|
44 |
+
-- Server
|
45 |
+
port = "8080" -- port on which server should be launched
|
46 |
+
binding_ip_addr = "0.0.0.0" --ip address on the which server should be launched.
|
47 |
+
|
48 |
+
-- Website
|
49 |
+
-- The different colorschemes provided are:
|
50 |
+
-- {{
|
51 |
+
-- catppuccin-mocha
|
52 |
+
-- dracula
|
53 |
+
-- monokai
|
54 |
+
-- nord
|
55 |
+
-- oceanic-next
|
56 |
+
-- solarized-dark
|
57 |
+
-- solarized-light
|
58 |
+
-- tomorrow-night
|
59 |
+
-- }}
|
60 |
+
colorscheme = "catppuccin-mocha" -- the colorscheme name which should be used for the website theme
|
61 |
+
theme = "simple" -- the theme name which should be used for the website
|
62 |
+
|
63 |
+
-- Caching
|
64 |
+
redis_connection_url = "redis://redis:6379" -- redis connection url address on which the client should connect on.
|
65 |
+
```
|
66 |
+
|
67 |
+
After this run the following command to deploy the app:
|
68 |
+
|
69 |
+
```bash
|
70 |
+
docker compose up -d --build
|
71 |
+
```
|
72 |
+
|
73 |
+
This will take around 5-10 mins for first deployment, afterwards the docker build stages will be cached so it will be faster to be build from next time onwards. After the above step finishes launch your preferred browser and then navigate to `http://<ip_address_of_the_device>:<whatever_port_you_provided_in_the_config>`.
|
74 |
+
|
75 |
+
## Unstable/Edge/Rolling
|
76 |
+
|
77 |
+
For the unstable/rolling/edge version, follow the same steps as above with an addition of one command for cloning the repository which makes the cloning step as follows:
|
78 |
+
|
79 |
+
```bash
|
80 |
+
git clone https://github.com/neon-mmd/websurfx.git
|
81 |
+
cd websurfx
|
82 |
+
git checkout rolling
|
83 |
+
```
|
84 |
+
|
85 |
+
[⬅️ Go back to Home](https://github.com/neon-mmd/websurfx/wiki).
|
docs/introduction.md
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Introduction
|
2 |
+
|
3 |
+
A modern-looking, lightning-fast, privacy-respecting, secure [meta search engine](https://en.wikipedia.org/wiki/Metasearch_engine) (pronounced as websurface or web-surface /wɛbˈsɜːrfəs/.) written in Rust. It provides a fast and secure search experience while respecting user privacy.
|
4 |
+
|
5 |
+
# Motivation
|
6 |
+
|
7 |
+
Most meta search engines tend to be slow, lack high level of customization and missing many features and all of them like security as they are written in unsafe languages like python, javascript, etc which tend to open a wide variety of vulnerabilities which can also sometimes pose a threat to privacy as sometimes this can be exploited and can be used to leveraged to leak out sensitive information which is never good.
|
8 |
+
|
9 |
+
# Solution
|
10 |
+
|
11 |
+
Websurfx is a project which seeks to provide privacy, security, speed and all the features which the user wants.
|
12 |
+
|
13 |
+
[⬅️ Go back to Home](https://github.com/neon-mmd/websurfx/wiki).
|
docs/theming.md
ADDED
@@ -0,0 +1,324 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Colorschemes
|
2 |
+
|
3 |
+
## Built-in
|
4 |
+
|
5 |
+
By default `websurfx` comes with 9 colorschemes to choose from which can be easily chosen using the config file. To how to change colorschemes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
6 |
+
|
7 |
+
## Custom
|
8 |
+
|
9 |
+
Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a `-` (dash) and it should end with a `.css` file extension. After creating the file you need to add the following code with the `colors` you want:
|
10 |
+
|
11 |
+
``` css
|
12 |
+
:root{
|
13 |
+
--bg: <background color>;
|
14 |
+
--fg: <foreground color (text color)>;
|
15 |
+
--1: <color 1>;
|
16 |
+
--2: <color 2>;
|
17 |
+
--3: <color 3>;
|
18 |
+
--4: <color 4>;
|
19 |
+
--5: <color 5>;
|
20 |
+
--6: <color 6>;
|
21 |
+
--7: <color 7>;
|
22 |
+
}
|
23 |
+
```
|
24 |
+
|
25 |
+
> **Note**
|
26 |
+
> Please infer the theme file located under `public/static/themes` to better understand where each color is being used.
|
27 |
+
|
28 |
+
**Example of `catppuccin-mocha` colorscheme:**
|
29 |
+
|
30 |
+
``` css
|
31 |
+
:root {
|
32 |
+
--bg: #1e1e2e;
|
33 |
+
--fg: #cdd6f4;
|
34 |
+
--1: #45475a;
|
35 |
+
--2: #f38ba8;
|
36 |
+
--3: #a6e3a1;
|
37 |
+
--4: #f9e2af;
|
38 |
+
--5: #89b4fa;
|
39 |
+
--6: #f5c2e7;
|
40 |
+
--7: #ffffff;
|
41 |
+
}
|
42 |
+
```
|
43 |
+
|
44 |
+
# Themes
|
45 |
+
|
46 |
+
## Built-in
|
47 |
+
|
48 |
+
By default `websurfx` comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
49 |
+
|
50 |
+
## Custom
|
51 |
+
|
52 |
+
To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`.
|
53 |
+
|
54 |
+
**Here is an example of `simple theme` (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:**
|
55 |
+
|
56 |
+
### General
|
57 |
+
``` css
|
58 |
+
* {
|
59 |
+
padding: 0;
|
60 |
+
margin: 0;
|
61 |
+
box-sizing: border-box;
|
62 |
+
}
|
63 |
+
|
64 |
+
html {
|
65 |
+
font-size: 62.5%;
|
66 |
+
}
|
67 |
+
|
68 |
+
body {
|
69 |
+
display: flex;
|
70 |
+
flex-direction: column;
|
71 |
+
justify-content: space-between;
|
72 |
+
align-items: center;
|
73 |
+
height: 100vh;
|
74 |
+
background: var(--1);
|
75 |
+
}
|
76 |
+
```
|
77 |
+
### Styles for the index page
|
78 |
+
``` css
|
79 |
+
.search-container {
|
80 |
+
display: flex;
|
81 |
+
flex-direction: column;
|
82 |
+
gap: 5rem;
|
83 |
+
justify-content: center;
|
84 |
+
align-items: center;
|
85 |
+
}
|
86 |
+
|
87 |
+
.search-container div {
|
88 |
+
display: flex;
|
89 |
+
}
|
90 |
+
```
|
91 |
+
### Styles for the search box and search button
|
92 |
+
``` css
|
93 |
+
.search_bar {
|
94 |
+
display: flex;
|
95 |
+
}
|
96 |
+
|
97 |
+
.search_bar input {
|
98 |
+
padding: 1rem;
|
99 |
+
width: 50rem;
|
100 |
+
height: 3rem;
|
101 |
+
outline: none;
|
102 |
+
border: none;
|
103 |
+
box-shadow: rgba(0, 0, 0, 1);
|
104 |
+
background: var(--fg);
|
105 |
+
}
|
106 |
+
|
107 |
+
.search_bar button {
|
108 |
+
padding: 1rem;
|
109 |
+
border-radius: 0;
|
110 |
+
height: 3rem;
|
111 |
+
display: flex;
|
112 |
+
justify-content: center;
|
113 |
+
align-items: center;
|
114 |
+
outline: none;
|
115 |
+
border: none;
|
116 |
+
gap: 0;
|
117 |
+
background: var(--bg);
|
118 |
+
color: var(--3);
|
119 |
+
font-weight: 600;
|
120 |
+
letter-spacing: 0.1rem;
|
121 |
+
}
|
122 |
+
|
123 |
+
.search_bar button:active,
|
124 |
+
.search_bar button:hover {
|
125 |
+
filter: brightness(1.2);
|
126 |
+
}
|
127 |
+
```
|
128 |
+
### Styles for the footer and header
|
129 |
+
``` css
|
130 |
+
header {
|
131 |
+
background: var(--bg);
|
132 |
+
width: 100%;
|
133 |
+
display: flex;
|
134 |
+
justify-content: right;
|
135 |
+
align-items: center;
|
136 |
+
padding: 1rem;
|
137 |
+
}
|
138 |
+
|
139 |
+
header ul,
|
140 |
+
footer ul {
|
141 |
+
list-style: none;
|
142 |
+
display: flex;
|
143 |
+
justify-content: space-around;
|
144 |
+
align-items: center;
|
145 |
+
font-size: 1.5rem;
|
146 |
+
gap: 2rem;
|
147 |
+
}
|
148 |
+
|
149 |
+
header ul li a,
|
150 |
+
footer ul li a,
|
151 |
+
header ul li a:visited,
|
152 |
+
footer ul li a:visited {
|
153 |
+
text-decoration: none;
|
154 |
+
color: var(--2);
|
155 |
+
text-transform: capitalize;
|
156 |
+
letter-spacing: 0.1rem;
|
157 |
+
}
|
158 |
+
|
159 |
+
header ul li a {
|
160 |
+
font-weight: 600;
|
161 |
+
}
|
162 |
+
|
163 |
+
header ul li a:hover,
|
164 |
+
footer ul li a:hover {
|
165 |
+
color: var(--5);
|
166 |
+
}
|
167 |
+
|
168 |
+
footer div span {
|
169 |
+
font-size: 1.5rem;
|
170 |
+
color: var(--4);
|
171 |
+
}
|
172 |
+
|
173 |
+
footer div {
|
174 |
+
display: flex;
|
175 |
+
gap: 1rem;
|
176 |
+
}
|
177 |
+
|
178 |
+
footer {
|
179 |
+
background: var(--bg);
|
180 |
+
width: 100%;
|
181 |
+
padding: 1rem;
|
182 |
+
display: flex;
|
183 |
+
flex-direction: column;
|
184 |
+
justify-content: center;
|
185 |
+
align-items: center;
|
186 |
+
}
|
187 |
+
```
|
188 |
+
### Styles for the search page
|
189 |
+
``` css
|
190 |
+
.results {
|
191 |
+
width: 90%;
|
192 |
+
display: flex;
|
193 |
+
flex-direction: column;
|
194 |
+
justify-content: space-around;
|
195 |
+
}
|
196 |
+
|
197 |
+
.results .search_bar {
|
198 |
+
margin: 1rem 0;
|
199 |
+
}
|
200 |
+
|
201 |
+
.results_aggregated {
|
202 |
+
display: flex;
|
203 |
+
flex-direction: column;
|
204 |
+
justify-content: space-between;
|
205 |
+
margin: 2rem 0;
|
206 |
+
}
|
207 |
+
|
208 |
+
.results_aggregated .result {
|
209 |
+
display: flex;
|
210 |
+
flex-direction: column;
|
211 |
+
margin-top: 1rem;
|
212 |
+
}
|
213 |
+
|
214 |
+
.results_aggregated .result h1 a {
|
215 |
+
font-size: 1.5rem;
|
216 |
+
color: var(--2);
|
217 |
+
text-decoration: none;
|
218 |
+
letter-spacing: 0.1rem;
|
219 |
+
}
|
220 |
+
|
221 |
+
.results_aggregated .result h1 a:hover {
|
222 |
+
color: var(--5);
|
223 |
+
}
|
224 |
+
|
225 |
+
.results_aggregated .result h1 a:visited {
|
226 |
+
color: var(--bg);
|
227 |
+
}
|
228 |
+
|
229 |
+
.results_aggregated .result small {
|
230 |
+
color: var(--3);
|
231 |
+
font-size: 1.1rem;
|
232 |
+
word-wrap: break-word;
|
233 |
+
line-break: anywhere;
|
234 |
+
}
|
235 |
+
|
236 |
+
.results_aggregated .result p {
|
237 |
+
color: var(--fg);
|
238 |
+
font-size: 1.2rem;
|
239 |
+
margin-top: 0.3rem;
|
240 |
+
word-wrap: break-word;
|
241 |
+
line-break: anywhere;
|
242 |
+
}
|
243 |
+
|
244 |
+
.results_aggregated .result .upstream_engines {
|
245 |
+
text-align: right;
|
246 |
+
font-size: 1.2rem;
|
247 |
+
padding: 1rem;
|
248 |
+
color: var(--5);
|
249 |
+
}
|
250 |
+
```
|
251 |
+
|
252 |
+
### Styles for the 404 page
|
253 |
+
|
254 |
+
``` css
|
255 |
+
.error_container {
|
256 |
+
display: flex;
|
257 |
+
justify-content: center;
|
258 |
+
align-items: center;
|
259 |
+
width: 100%;
|
260 |
+
gap: 5rem;
|
261 |
+
}
|
262 |
+
|
263 |
+
.error_container img {
|
264 |
+
width: 30%;
|
265 |
+
}
|
266 |
+
|
267 |
+
.error_content {
|
268 |
+
display: flex;
|
269 |
+
flex-direction: column;
|
270 |
+
justify-content: center;
|
271 |
+
gap: 1rem;
|
272 |
+
}
|
273 |
+
|
274 |
+
.error_content h1,
|
275 |
+
.error_content h2 {
|
276 |
+
letter-spacing: 0.1rem;
|
277 |
+
}
|
278 |
+
|
279 |
+
.error_content h1 {
|
280 |
+
font-size: 3rem;
|
281 |
+
}
|
282 |
+
|
283 |
+
.error_content h2 {
|
284 |
+
font-size: 2rem;
|
285 |
+
}
|
286 |
+
|
287 |
+
.error_content p {
|
288 |
+
font-size: 1.2rem;
|
289 |
+
}
|
290 |
+
|
291 |
+
.error_content p a,
|
292 |
+
.error_content p a:visited {
|
293 |
+
color: var(--2);
|
294 |
+
text-decoration: none;
|
295 |
+
}
|
296 |
+
|
297 |
+
.error_content p a:hover {
|
298 |
+
color: var(--5);
|
299 |
+
}
|
300 |
+
```
|
301 |
+
### Styles for the previous and next button on the search page
|
302 |
+
``` css
|
303 |
+
.page_navigation {
|
304 |
+
padding: 0 0 2rem 0;
|
305 |
+
display: flex;
|
306 |
+
justify-content: space-between;
|
307 |
+
align-items: center;
|
308 |
+
}
|
309 |
+
|
310 |
+
.page_navigation button {
|
311 |
+
background: var(--bg);
|
312 |
+
color: var(--fg);
|
313 |
+
padding: 1rem;
|
314 |
+
border-radius: 0.5rem;
|
315 |
+
outline: none;
|
316 |
+
border: none;
|
317 |
+
}
|
318 |
+
|
319 |
+
.page_navigation button:active {
|
320 |
+
filter: brightness(1.2);
|
321 |
+
}
|
322 |
+
```
|
323 |
+
|
324 |
+
[⬅️ Go back to Home](https://github.com/neon-mmd/websurfx/wiki).
|
images/websurfx_docs_image.png
ADDED
![]() |