From 04dca92778a92ae8f8d6fa411bc971f3a81b1438 Mon Sep 17 00:00:00 2001 From: masiv_ Date: Mon, 16 Feb 2026 21:08:36 -0300 Subject: [PATCH 1/3] Overarching changes to language changing, not definitive since I'm pondering other alternatives (separate files vs translation files, variables vs functions) --- chat.php | 2 +- components/global/navbar.php | 44 ++ .../navbar.php => global/navbarMain.php} | 8 +- components/main/articles.php | 9 - components/main/blinkies.php | 49 +-- components/main/provided.php | 32 -- components/main/updates.php | 37 -- components/main/verticalscroll.php | 6 - components/main/webrings.php | 64 --- img/ui/border-1.png | Bin 0 -> 285 bytes includes/config_session.inc.php | 13 +- includes/lang.inc.php | 383 ++++++++++++++++++ main.php | 193 +++++++++ main_en.html | 10 - main_en.php | 128 ------ main_es.html | 10 - main_es.php | 380 ----------------- pages/articles/about-host.php | 33 ++ pages/articles/about-host_en.html | 168 -------- pages/articles/about-host_es.html | 172 -------- pages/articles/about.php | 33 ++ pages/articles/about_en.html | 104 ----- pages/articles/about_es.html | 104 ----- pages/articles/article-blank.php | 33 ++ pages/articles/article-blank_en.html | 169 -------- pages/articles/article-blank_es.html | 104 ----- pages/articles/diy-calculator.php | 82 ++++ pages/articles/diy-calculator_en.html | 178 -------- pages/articles/diy-calculator_es.html | 175 -------- 29 files changed, 839 insertions(+), 1884 deletions(-) create mode 100644 components/global/navbar.php rename components/{main/navbar.php => global/navbarMain.php} (85%) delete mode 100644 components/main/articles.php delete mode 100644 components/main/provided.php delete mode 100644 components/main/updates.php delete mode 100644 components/main/verticalscroll.php delete mode 100644 components/main/webrings.php create mode 100644 img/ui/border-1.png create mode 100644 includes/lang.inc.php create mode 100644 main.php delete mode 100644 main_en.html delete mode 100644 main_en.php delete mode 100644 main_es.html delete mode 100644 main_es.php create mode 100644 pages/articles/about-host.php delete mode 100644 pages/articles/about-host_en.html delete mode 100644 pages/articles/about-host_es.html create mode 100644 pages/articles/about.php delete mode 100644 pages/articles/about_en.html delete mode 100644 pages/articles/about_es.html create mode 100644 pages/articles/article-blank.php delete mode 100644 pages/articles/article-blank_en.html delete mode 100644 pages/articles/article-blank_es.html create mode 100644 pages/articles/diy-calculator.php delete mode 100644 pages/articles/diy-calculator_en.html delete mode 100644 pages/articles/diy-calculator_es.html diff --git a/chat.php b/chat.php index 060711b..6386878 100644 --- a/chat.php +++ b/chat.php @@ -1 +1 @@ - + + masiv's lair + +
+ +
+ +
+ +
\ No newline at end of file diff --git a/components/main/navbar.php b/components/global/navbarMain.php similarity index 85% rename from components/main/navbar.php rename to components/global/navbarMain.php index 06ebaff..6ad738e 100644 --- a/components/main/navbar.php +++ b/components/global/navbarMain.php @@ -1,9 +1,9 @@
- About me +
- - - - diff --git a/main_es.html b/main_es.html deleted file mode 100644 index a565fda..0000000 --- a/main_es.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - masiv's lair - - - - diff --git a/main_es.php b/main_es.php deleted file mode 100644 index 05c55c4..0000000 --- a/main_es.php +++ /dev/null @@ -1,380 +0,0 @@ - - - - - - - - masiv's lair - - - - - - -
-
-
- apoya el cursor! - mantén presionado! -
-
-
- - - - - - - - - - -
-
-
- - - - - - - - - - -
-
-
-
-
- -
-
-
-
-
- servicios -
-
-
- -

Algunos requieren una cuenta, sólo por invitación!

-
-
-
- masivana - Peliculas - Peticiones - Libros - Videos -
-
- nube(s) - Fotos - Nube -
- -
-
-
-
-
- actualizaciones!  -
-
-
-
-
4 Feb 2026
-

Cambios técnicos

-

Estuve probando, y tras configurar - lo necesario, configuré mi propio servidor git, y de - allí un workflow para que se publique automaticamente, - también estoy empezando a implementar php, por el momento - solo estoy probando pero se puede testear en el chat, o - viendo el código fuente en - https://git.ethernal.win/masiv/website. - Es mi primera - vez usando git, php, y todo, así que probablemente no esté - siguiendo todas las buenas prácticas, pero iré aprendiendo :p -

-
-
-
-
2 Feb 2026
-

Rediseño del sitio!

-

Después de un tiempo decidí darle una - nueva cara al sitio ya que el diseño anterior dejaba - bastante que desear, espero que sea de su agrado! - (Optimizado para todo tipo de dispositivos) Para más - información - Rediseño de la página - Archived version -

-
-
-
-
17 Ene 2026
-

Nuevo sitio web!

-

Nuevo sitio web! Espero les guste, desde ya hacía - tiempo que quería tener mi propio sitio web, pero programado desde - cero, estuve unas horitas re-aprendiendo html y css, sinceramente - prefiero un internet sin bloat, por lo que a-priori no habrá javascript - en este sitio.

-
-
-
-
-
-
-
-
- chat -
-
- - - - - - - -
- -
- -
- - - -
-
-
-
-
-
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
- the top of a fuzzy, 
-                                black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly, 
-                                uneven letters and next to those words is a small question mark -
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - -
-
-
- - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-
-

hola terrícolas, este es un mensaje para todxs aquellxs que pasan el día preguntándose si existe la vida extra-terrestre, o si por el contrario ustedes están solxs. Supongo que nunca lo sabrán...

-

hola terrícolas, este es un mensaje para todxs aquellxs que pasan el día preguntándose si existe la vida extra-terrestre, o si por el contrario ustedes están solxs. Supongo que nunca lo sabrán...

-
-
-
-
-
-
- try sliding down! -
-
-
- - - - - - diff --git a/pages/articles/about-host.php b/pages/articles/about-host.php new file mode 100644 index 0000000..f213d61 --- /dev/null +++ b/pages/articles/about-host.php @@ -0,0 +1,33 @@ + + + + + + + + masiv's lair | <?php echo $tr[$lang]["about-host.title"]; ?> + + + + + + +
+
+
+ +
+
+
+ + + + + diff --git a/pages/articles/about-host_en.html b/pages/articles/about-host_en.html deleted file mode 100644 index b36630a..0000000 --- a/pages/articles/about-host_en.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - - masiv's lair | About this hosting - - - - - - -
-
-
-

- Hello,

- - You clicking this article means you have an interest on how this - website is structured, and what infrastructure it runs in. - I've gotta say this will probably change over time, but there is one - aspect I will adhere to, mantaining custody over my own data, in practice - that means everything I host will be hosted on-site on my own infrastructure, - just below a little about the homelab's history and some details.
-

-

Specs

-
-

- CPU: AMD Ryzen 5 4600G
- RAM: 32GB DDR4 3200MHZ
- Motherboard: ASRock A320M-HDV 4.0
- PSU: EVGA 450W 80plus
- Storage:
- x1 1TB SSD NVME Samsung 970 Plus - x2 3TB HDD WD Green (RAID 1) - Case: No-name brand, - quite square-ish.
-

-
-

History

-

- Each one of the components has a different origin, the case, psu and motherboard - have always been the same since the begining, part of the original PC I got as - a birthday present a while back, it was equiped with 8gb of ram, a modest HDD, - together with an AMD Ryzen 3 3200G, it was enough back then, but just as it came, - I got myself a brand new laptop, somewhat comparable (or even better) to the pc, - I ended up using it way more, thanks to it being portable. -

-

- After some time, can't quite remember the reason, I took the decision to move it to its - current location, a secure place with a good broadband connection, this was all the way - back at the start of 2022, when I installed Ubuntu Server 22.04 LTS. -

-

- I graudually updated it, I got the current proccesor over on amazon, then the ram - (attempted to purchase it from Aliexpress, but once it arrived I discovered it - wasn't compatible, had to re-sell it, and buy my current 2x16gb kit), and last but - not least, two 3tb disks which I thought was plenty for my usecase (foreshadowing). -

-

- I currently still have the same Ubuntu Server install on bare hardware, and almost - every single service I host is using a docker container, managed using Portainer. -

-

Networking

-

Domain name

-

- I've used several domain names over time, starting with No-IP to ssh remotely, rapidely migrating - to DuckDNS, that setup endured quite a while but after having some problems with DNS resolution, and - limitations on their DNS capabilities (they used AWS) thanks to my sub-domain repertoire I - decided to finally make the leap and purchase my own domain on some of the internet's registrars, - ended up with this domain on Porkbun, for a measly 5 dollars and a half, a lot /s. -

-

Proxy & DDNS

-

- I use NginxProxyManager to manage all my domains and redirects, I don't plan on migrating to - Traefik for now because NPM does the job, and increasing my infrastructure's complexity isn't my - number one priority, maybe in the future. For Dynamic DNS I use DDClient, my ISP (Antel) doesn't - provide static IPs to residential addresses, so I'm stuck having to update my registers once or - twice a day in-leiu of having a fixed one. -

-
-
-
- - - - - diff --git a/pages/articles/about-host_es.html b/pages/articles/about-host_es.html deleted file mode 100644 index 95c6678..0000000 --- a/pages/articles/about-host_es.html +++ /dev/null @@ -1,172 +0,0 @@ - - - - - - masiv's lair | About this hosting - - - - - - -
-
-
-

- Buenas,

- - Si estás leyendo esto es que te interesa saber un poco sobre la estructura - en la que están hosteados mis servicios, y esta página. - He de decir que esto irá cambiando, pero si hay algo que no creo cambie - será el hecho de que quiero mantener la custodia de mis datos, por lo que - todos lo que hostee será hosteado en mi propio homelab, debajo detalles e historia.
-

-

Especificaciones

-
-

- Procesador: AMD Ryzen 5 4600G
- RAM: 32GB DDR4 3200MHZ
- Placa: ASRock A320M-HDV 4.0
- PSU: EVGA 450W 80plus
- Almacenamiento:
- x1 1TB SSD NVME Samsung 970 Plus - x2 3TB HDD WD Green (RAID 1) - Gabinete: Marca genérica,
- es bastante cuadrado. -

-
-

Historia

-

- Cada componente tiene una historia un poquito diferente, el gabinete, - fuente y placa madre han sido la misma, y fueron un regalo de cumpleaños - de hace tiempo, en su momento con 8gb de ram, un disco HDD modesto, y - un AMD Ryzen 3 3200G, en su momento era algo, mas justo coincidió que - en esa ocasión, había recibido una laptop, a la cual le terminé dando - muchísimo más uso que a la torre, sumado al hecho de poderla transportarla - que personalmente me fue un gran plus. -

-

- Tiempo después, ya no recuerdo bien en qué contexto, decido llevarla al - lugar dónde ahora se encuentra, dónde estaba segura y con una buena conexión - de fibra óptica, esto fue por 2022, cuándo le instalé Ubuntu Server 22.04 LTS. -

-

- Gradualmente la fui mejorando, le compré su procesador actual por internet, luego - la memoria ram (intenté comprarla por Aliexpress, pero resultaba era incompatible, - por lo que tuve que revenderla, y comprarme los dos sticks de 16gb que tengo ahora), - y por último la decisión de comprar dos discos de 3tb para tener almacenamiento de - sobra (que resulta no lo fue) para lo que quisiese. -

-

- Actualmente sigo teniendo instalado el Ubuntu directo sobre el hardware, y casi todo - lo que tengo instalado allí lo manejo usando Docker a través de Portainer. -

-

Red

-

Dominio

-

- He usado varios dominios, al principio llegué a usar No-IP para conectarme remotamente, - para luego rápidamente migrar a DuckDNS, que me supo proveer de dominios gratuitos por varios años, - sin embargo, luego de toparme con las limitaciones de su servicio (por la cantidad de sub-dominios, - y debido a su dependendencia en servidores de no tan buena calidad de AWS) decidí invertir y - comprarme el dominio que estoy usando actualmente, con el registrante de Porkbun, que - debo decir fue muy económico, actualmente pago unos 5 dólares y medios al año, básicamente nada. -

-

Proxy y DDNS

-

- Para manejar los dominios y redirecciones he usado y seguiré usando NginxProxyManager, por ahora - no tengo planeado migrar a Traefik puesto que no está dentro de mis prioridades añadir - esa complejidad a mi setup (aunque quizás en un futuro lo haga). Uso DDClient para el DNS dinámico - puesto que mi ISP (Antel) no provee IP fijas a planes residenciales, y necesito actualizar los - registros con mi IP cada vez que esta cambia. -

- - -
-
-
- - - - - diff --git a/pages/articles/about.php b/pages/articles/about.php new file mode 100644 index 0000000..fdd2d15 --- /dev/null +++ b/pages/articles/about.php @@ -0,0 +1,33 @@ + + + + + + + + masiv's lair | About me + + + + + + +
+
+
+ +
+
+
+ + + + + diff --git a/pages/articles/about_en.html b/pages/articles/about_en.html deleted file mode 100644 index 82a0e84..0000000 --- a/pages/articles/about_en.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - masiv's lair | About me - - - - - - -
-
-
- Still under construction. -
-
-
- - - - - diff --git a/pages/articles/about_es.html b/pages/articles/about_es.html deleted file mode 100644 index e7b3224..0000000 --- a/pages/articles/about_es.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - masiv's lair | Sobre mí - - - - - - -
-
-
- Todavía en progreso. -
-
-
- - - - - diff --git a/pages/articles/article-blank.php b/pages/articles/article-blank.php new file mode 100644 index 0000000..e6af2aa --- /dev/null +++ b/pages/articles/article-blank.php @@ -0,0 +1,33 @@ + + + + + + + + masiv's lair | [REPLACE] + + + + + + +
+
+
+ +
+
+
+ + + + + diff --git a/pages/articles/article-blank_en.html b/pages/articles/article-blank_en.html deleted file mode 100644 index 059975d..0000000 --- a/pages/articles/article-blank_en.html +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - masiv's lair | [REPLACE] - - - - - - -
-
-
-

- Hello,

- - You clicking this article means you have an interest on how this - website is structured, and what infrastructure it runs in. - I've gotta say this will probably change over time, but there is one - aspect I will adhere to, mantaining custody over my own data, in practice - that means everything I host will be hosted on-site on my own infrastructure, - just below a little about the homelab's history and some details.
-

-

Specs

-
-

- CPU: AMD Ryzen 5 4600G
- RAM: 32GB DDR4 3200MHZ
- Motherboard: ASRock A320M-HDV 4.0
- PSU: EVGA 450W 80plus
- Storage:
- x1 1TB SSD NVME Samsung 970 Plus - x2 3TB HDD WD Green (RAID 1) - Case: No-name brand, - quite square-ish.
-

-
-

History

-

- Each one of the components has a different origin, the case, psu and motherboard - have always been the same since the begining, part of the original PC I got as - a birthday present a while back, it was equiped with 8gb of ram, a modest HDD, - together with an AMD Ryzen 3 3200G, it was enough back then, but just as it came, - I got myself a brand new laptop, somewhat comparable (or even better) to the pc, - I ended up using it way more, thanks to it being portable. -

-

- After some time, can't quite remember the reason, I took the decision to move it to its - current location, a secure place with a good broadband connection, this was all the way - back at the start of 2022, when I installed Ubuntu Server 22.04 LTS. -

-

- I graudually updated it, I got the current proccesor over on amazon, then the ram - (attempted to purchase it from Aliexpress, but once it arrived I discovered it - wasn't compatible, had to re-sell it, and buy my current 2x16gb kit), and last but - not least, two 3tb disks which I thought was plenty for my usecase (foreshadowing). -

-

- I currently still have the same Ubuntu Server install on bare hardware, and almost - every single service I host is using a docker container, managed using Portainer. -

-

Networking

-

Domain name

-

- I've used several domain names over time, starting with No-IP to ssh remotely, rapidely migrating - to DuckDNS, that setup endured quite a while but after having some problems with DNS resolution, and - limitations on their DNS capabilities (they used AWS) thanks to my sub-domain repertoire I - decided to finally make the leap and purchase my own domain on some of the internet's registrars, - ended up with this domain on Porkbun, for a measly 5 dollars and a half, a lot /s. -

-

Proxy & DDNS

-

- I use NginxProxyManager to manage all my domains and redirects, I don't plan on migrating to - Traefik for now because NPM does the job, and increasing my infrastructure's complexity isn't my - number one priority, maybe in the future. For Dynamic DNS I use DDClient, my ISP (Antel) doesn't - provide static IPs to residential addresses, so I'm stuck having to update my registers once or - twice a day in-leiu of having a fixed one. -

- -
-
-
- - - - - diff --git a/pages/articles/article-blank_es.html b/pages/articles/article-blank_es.html deleted file mode 100644 index 69b1b74..0000000 --- a/pages/articles/article-blank_es.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - masiv's lair | [REPLACE] - - - - - - -
-
-
- -
-
-
- - - - - diff --git a/pages/articles/diy-calculator.php b/pages/articles/diy-calculator.php new file mode 100644 index 0000000..4e7f181 --- /dev/null +++ b/pages/articles/diy-calculator.php @@ -0,0 +1,82 @@ + + + + + + + + masiv's lair | Calculadora + + + + + + + +
+
+
+
+

+
+ +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+

+

+ +

+

+ +

+

+ +

+

+ + + + + +

+

+
+ +

+
+
+
+
+ + + + diff --git a/pages/articles/diy-calculator_en.html b/pages/articles/diy-calculator_en.html deleted file mode 100644 index ed0b0cf..0000000 --- a/pages/articles/diy-calculator_en.html +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - masiv's lair | Calculator - - - - - - - -
-
-
-
-

Calculator

-
- -
-
- - - - - - - - - - - - - - - - - - - -
-
-
-

About this project

-

- It has certainly been a while since I've touched Javascript, - and I wanted to regain some of the know-how I had about it, - that's why decided to code this calculator from scratch - without using any external libraries, nor chatbots, only - wikis like w3 school about the language itself even if - that required more time. -

-

- So it began my learning journey, coding this entire calculator - has been quite a joy I must say, and even if the final product - is lacking some funcionality like parenthesis parsing it still - works completely fine for most things, as it process inputs using - PEMDAS. -

-

- Were I to make it all over again, I would probably go about - things differently, researching about more efficient algorithms - and methods and not reinventing the wheel, but the thing is, - that's the entire point of this excersice, wasn't for that - self-impossed limitation, I could make use of tons of more - efficient libraries. -

-

- Now about the inner workings of the script, I implemented a - simple array that stores every character typed, and once the - equal key is pressed, it sends the array to be processed in - the following steps: - Concatenate the digits, from [1,1,'+',2,3] to [11,'+',23]. - Search for term separators, and create multidimensional arrays with - each level representing one type of operation. - - Undo all this array but backwards, processing the output as it goes. - - It looks easy on paper, but I spent an entire day and a half coding and dealing with - each aspect of programming, things I didn't quite remember, others I didn't know from - the get-go, etc. (I must add a personal rant about how difficult is dealing with - multidimensional arrays, it's not a trivial task for sure). -

-

- Update 23/01/2026
- I showed my calculator to a friend of mine and they - pointed out I was lacking a 0 button, how could I miss - that, seriously XD. -

-
-
-
-
- - - - diff --git a/pages/articles/diy-calculator_es.html b/pages/articles/diy-calculator_es.html deleted file mode 100644 index 327f998..0000000 --- a/pages/articles/diy-calculator_es.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - masiv's lair | Calculadora - - - - - - - -
-
-
-
-

Calculadora

-
- -
-
- - - - - - - - - - - - - - - - - - - -
-
-
-

Sobre este projecto

-

- Hace tiempo que no programaba en Javascript, y quería - nuevamente agarrarle la mano, por lo que decidí hacer esta - calculadora sin hacer uso de absolutamente nada más que - w3 school y algunas búsquedas sobre javascript, nada de - preguntar mis dudas a ninguna IA (aunque sea más lento). -

-

- Así que me puse manos a la obra re-aprendiendo algunas cosas, - he de decir que fue un ejercicio divertido, y aunque el - resultado carece de algunas características (cómo el uso - de paréntesis), sigue el orden de las operaciones, y eso - es bastante. -

-

- En un futuro si la hiciese nuevamente, podría implementar - algoritmos más eficientes, puesto que realmente lo hice de - la manera que se me fue ocurriendo, y realmente debe ser muy - ineficiente, si quisiese eficiencia tendría mil maneras y - librerías, pero el objetivo de este ejercicio es aprender. -

-

- Yendo un poco más a lo técnico, mi idea principal fue almacenar - cada caracter escrito en un array, y luego procesarlo de la - siguiente manera: - Unir los números, de [1,1,'+',2,3] a [11,'+',23]. - Buscar dónde están los separa términos, e ir creando arrays - multidimensionales, cada nivel tiene un tipo de operación (on orden). - - Deshacer ese array multidimensional, e ir procesando - todas las operaciones. - - Dicho así parece sencillo, pero esutve un día y medio programando y lidiando - con cosas que, o no sabía, o no recordaba. (He de decir que trabajar con tanta iteración - en los arrays multidimensionales es un trabajo no trivial). -

-

- Actualización 23/01/2026
- Le mostré la calcualdora a unx amigx, y me hizo darme - cuenta de que no había implementado el botón del 0, - la verdad no tengo ni idea cómo no me di cuenta XD. -

-
-
-
-
- - - - From f88db6a83b7d53c9a8138e2705bd75b30c943cd9 Mon Sep 17 00:00:00 2001 From: masiv_ Date: Mon, 16 Feb 2026 21:11:07 -0300 Subject: [PATCH 2/3] Uneeded separate file for nabvar, ../ don't make a difference when no directory is available upstream --- components/global/navbarMain.php | 44 -------------------------------- 1 file changed, 44 deletions(-) delete mode 100644 components/global/navbarMain.php diff --git a/components/global/navbarMain.php b/components/global/navbarMain.php deleted file mode 100644 index 6ad738e..0000000 --- a/components/global/navbarMain.php +++ /dev/null @@ -1,44 +0,0 @@ - -
- -
- -
- -
\ No newline at end of file From d6d1d60b0e250395617188322c453f11fddf6185 Mon Sep 17 00:00:00 2001 From: masiv_ Date: Mon, 16 Feb 2026 23:39:53 -0300 Subject: [PATCH 3/3] Tweaks to styling, navbar image-border, and fixes to inconsistent responsive layout across pages other than main.php --- css/global/layout/global-layout.css | 39 +++++++++++++++----------- css/global/styling/global-styling.css | 21 ++++++++++---- css/main/layouts/desktop-slim.css | 2 +- css/main/layouts/mobile.css | 4 +-- img/ui/border-1.png | Bin 285 -> 285 bytes pages/articles/diy-calculator.php | 2 +- 6 files changed, 42 insertions(+), 26 deletions(-) diff --git a/css/global/layout/global-layout.css b/css/global/layout/global-layout.css index 8790d67..75d59f5 100644 --- a/css/global/layout/global-layout.css +++ b/css/global/layout/global-layout.css @@ -31,30 +31,28 @@ body { display: flex; flex-direction: row; height: 100%; - overflow: hidden; -} + overflow: hidden;} .navbar { position: fixed; z-index: 999; display: flex; gap: var(--gap); - padding: var(--gap); -} - - .navbar.blank { - position: relative; - flex-shrink: 0; - opacity: 0;} + padding: calc(var(--gap) / 2);} .navbar.top { flex-direction: column; justify-content: space-around; align-items: center; width: var(--side-bar-width); - height: 100%; - --max-width: var(--max-percentage-width-navar); - } + height: calc(100% - 20px); + --max-width: var(--max-percentage-width-navar);} + + .navbar.blank { + position: relative; + flex-shrink: 0; + opacity: 0; + height: calc(100% - (10px * 2) - 5px);} .links { flex-grow: 1; @@ -102,6 +100,10 @@ body { @media only all and (max-width:700px) { + /* -- Display -- */ + + .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; } + /* -- Ordering -- */ .about { order: 1; } .logo { order: 2; } @@ -123,13 +125,19 @@ body { overflow: auto; position: relative;} + .navbar.bot.blank, .navbar.top.blank { height: calc(var(--mobile-topnavbar-height) - 5px); } /* Adjustment, shrink divs for main navbar to overlay*/ + + .navbar.top, .navbar.bot { + width: calc(100% - (10px * 2)); + padding-top: 0px; + padding-bottom: 0px;} + .navbar.top { flex-direction: row; justify-content: space-around; align-items: center; height: var(--mobile-topnavbar-height); gap: var(--gap); - width: 100%; --max-width: 80%;} .navbar.top > .links { display: none; } @@ -147,8 +155,7 @@ body { height: var(--mobile-botnavbar-height); flex-direction: column; justify-content: center; - align-content: center; - width: 100%;} + align-content: center;} .navbar.bot > div { flex-direction: row; } @@ -162,7 +169,7 @@ body { /* Ordering */ justify-content: flex-start; clip-path: content-box; - align-items: flex-start; + align-items: center; flex-direction: column;} .links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */ diff --git a/css/global/styling/global-styling.css b/css/global/styling/global-styling.css index c5a0d87..cc9e131 100644 --- a/css/global/styling/global-styling.css +++ b/css/global/styling/global-styling.css @@ -15,7 +15,7 @@ html { --input-background-hover: rgb(216, 222, 227); --input-highlight: rgb(86, 176, 255); --navvar-background: rgb(179, 200, 218); - --navbar-buttons-bg: var(--accent-color-light); + --navbar-buttons-bg: white; --navbar-buttons-hover: var(--input-background-hover); --input-border-radius: var(--border-radius); --link-color: var(--accent-color-dark); @@ -27,7 +27,7 @@ html { body { background-image: url('graphgreen.gif'); } -/* ----------------- Others -------------------- */ +/* ----------------- Others -------------------- */ * { scrollbar-width: thin;} @@ -76,7 +76,6 @@ img { image-rendering: pixelated;} body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; } /* ----------------- Color -------------------- */ -.navbar { background-color: var(--navvar-background); } .panel { position: relative; @@ -99,12 +98,19 @@ body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-ser /* ------------- Navbars stiling ------------------- */ .about, .links > div, .lang-picker { border: 5px groove rgb(214, 236, 255); - background: var(--navbar-buttons-bg);} + background-color: var(--navbar-buttons-bg);} .about:hover, .links > div:hover, .lang-picker:hover { background-color: var(--navbar-buttons-hover); transition: background-color 0.1s;} +.navbar { + border-style: solid; + border-width: 20px; + border-image: url('../../../img/ui/border-1.png') 9 10 fill round; + margin: 10px; + image-rendering: pixelated;} + /* ------------- Inputs & links ----------------- */ button, .button { font-family: 'special elite'; @@ -171,4 +177,9 @@ a:hover { .logo a { color: white; text-decoration: none; - } \ No newline at end of file + } + +@media only all and (max-width:700px) { + .navbar.bot { margin-top: 0px; } + .navbar.top { margin-bottom: 0px; } +} \ No newline at end of file diff --git a/css/main/layouts/desktop-slim.css b/css/main/layouts/desktop-slim.css index 3370b23..9a51adb 100644 --- a/css/main/layouts/desktop-slim.css +++ b/css/main/layouts/desktop-slim.css @@ -1,6 +1,6 @@ /* RESPONSIVE DESIGN, LAPTOP SLIM */ -@media only all and (max-width:1175px){ +@media only all and (max-width:1225px){ /* ------------- Order ------------- */ .blinkies.one { order: 1; } .articles { order: 4; } diff --git a/css/main/layouts/mobile.css b/css/main/layouts/mobile.css index e1a03ca..eb822eb 100644 --- a/css/main/layouts/mobile.css +++ b/css/main/layouts/mobile.css @@ -13,8 +13,6 @@ .verticalscroll { display: flex; } .scroll_below-clip-box { display: block; } - .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; } - /* Decoration */ #try_hovering--blinkie { display: none; } @@ -41,7 +39,7 @@ right: 0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */ margin: var(--gap); justify-content: center; - height: calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2); + height: calc(100% - (var(--mobile-botnavbar-height) + 5px) - (var(--mobile-topnavbar-height) + 5px) - var(--gap) * 2); width: var(--scrolls-height); overflow: hidden;} diff --git a/img/ui/border-1.png b/img/ui/border-1.png index f8624d5004e253fba5c202bdfab08503850e142e..bc6fe048df4c69aa98e12511a1d84b8c21e788ba 100644 GIT binary patch delta 235 zcmVdMh;gZAH3M50e;NFKYqVNTXk?Bimc@Z1{6OyFeiP9l z%oW8OC_e*))dkfBf7?L$AtbCetTrqa`nKHd8GC`JL8p=$QB|L$PxOeH&GbBwuvJqJL z6oI916?(_#PUwDd3g37
-

+