From 4a83bb1a6d5bee0892c294467618bd66b88535a7 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Sat, 5 Jun 2021 22:41:32 -0600 Subject: prettify css add support for wrap images and img/art grids --- blog/dst/a/asi_nomas_esta_quedando.html | 2 +- blog/dst/a/el_blog_ya_tiene_timestamps.html | 2 +- blog/dst/a/first_blog_post.html | 2 +- blog/dst/a/git_server_with_cgit.html | 2 +- blog/dst/a/linux_video_notes.html | 2 +- blog/dst/a/mail_server_with_postfix.html | 2 +- blog/dst/a/new_blogging_system.html | 2 +- blog/dst/a/shell_scripting_video_notes.html | 2 +- blog/dst/a/sql_video_notes.html | 6 +- blog/dst/a/website_with_nginx.html | 2 +- blog/dst/index.html | 4 +- blog/dst/rss.xml | 6 +- blog/dst/tag/@english.html | 4 +- blog/dst/tag/@notes.html | 4 +- blog/dst/tag/@server.html | 4 +- blog/dst/tag/@short.html | 4 +- blog/dst/tag/@spanish.html | 4 +- blog/dst/tag/@tools.html | 4 +- blog/dst/tag/@tutorial.html | 4 +- blog/dst/tag/@update.html | 4 +- blog/plt/base.html | 2 +- blog/plt/page_list.html | 2 +- blog/src/.files | 2 +- blog/src/a/sql_video_notes.md | 2 + luevano/404.html | 2 + luevano/contact.html | 3 +- luevano/donate.html | 13 ++-- luevano/test.html | 100 ++++++++++++++++++++++++++ static/css/dark.css | 8 ++- static/css/light.css | 8 ++- static/css/style.css | 105 +++++++++++++++++++++++++++- static/scripts/theme.js | 10 +++ 32 files changed, 278 insertions(+), 45 deletions(-) create mode 100644 luevano/test.html diff --git a/blog/dst/a/asi_nomas_esta_quedando.html b/blog/dst/a/asi_nomas_esta_quedando.html index d8cdfc0..e66162c 100644 --- a/blog/dst/a/asi_nomas_esta_quedando.html +++ b/blog/dst/a/asi_nomas_esta_quedando.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/el_blog_ya_tiene_timestamps.html b/blog/dst/a/el_blog_ya_tiene_timestamps.html index 9136a86..acb94fa 100644 --- a/blog/dst/a/el_blog_ya_tiene_timestamps.html +++ b/blog/dst/a/el_blog_ya_tiene_timestamps.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/first_blog_post.html b/blog/dst/a/first_blog_post.html index 0acb615..388d703 100644 --- a/blog/dst/a/first_blog_post.html +++ b/blog/dst/a/first_blog_post.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/git_server_with_cgit.html b/blog/dst/a/git_server_with_cgit.html index 17fe0e4..65dbb4f 100644 --- a/blog/dst/a/git_server_with_cgit.html +++ b/blog/dst/a/git_server_with_cgit.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/linux_video_notes.html b/blog/dst/a/linux_video_notes.html index 8a7ee0e..fce901a 100644 --- a/blog/dst/a/linux_video_notes.html +++ b/blog/dst/a/linux_video_notes.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/mail_server_with_postfix.html b/blog/dst/a/mail_server_with_postfix.html index 952b84b..e07e1b8 100644 --- a/blog/dst/a/mail_server_with_postfix.html +++ b/blog/dst/a/mail_server_with_postfix.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/new_blogging_system.html b/blog/dst/a/new_blogging_system.html index 216ed0c..8e517dd 100644 --- a/blog/dst/a/new_blogging_system.html +++ b/blog/dst/a/new_blogging_system.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/shell_scripting_video_notes.html b/blog/dst/a/shell_scripting_video_notes.html index d048c1d..7d7fdd2 100644 --- a/blog/dst/a/shell_scripting_video_notes.html +++ b/blog/dst/a/shell_scripting_video_notes.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/a/sql_video_notes.html b/blog/dst/a/sql_video_notes.html index 867c265..9205eb6 100644 --- a/blog/dst/a/sql_video_notes.html +++ b/blog/dst/a/sql_video_notes.html @@ -22,7 +22,7 @@ - + @@ -190,10 +190,12 @@

RIGHT (OUTER) JOIN: returns all records from the right table, and the matched records from the left table.

FULL (OUTER) JOIN: returns all records when there is a match in either left or right table.

INNER JOIN LEFT JOIN RIGHT JOIN FULL OUTER JOIN

Nested queries

A query composed of multiple select statements to get a specific piece of information. This is self explanatory, you do a SELECT query somewhere inside another one, for example SELECT ... IN (SELECT ...), where the nesting is occurring inside the parenthesis after the IN statement.

A nesting isn’t constrained to the IN statement, it can appear anywhere, for example in a WHERE statement: SELECT ... WHERE something = (SELECT ...).

@@ -222,7 +224,7 @@

By David Luévano

Created: Tue, Mar 02, 2021 @ 14:35 UTC

Modified: Sun, Jun 06, 2021 @ 00:22 UTC

Modified: Sun, Jun 06, 2021 @ 03:41 UTC

Tags: english, notes

diff --git a/blog/dst/a/website_with_nginx.html b/blog/dst/a/website_with_nginx.html index 7834b31..5cb1875 100644 --- a/blog/dst/a/website_with_nginx.html +++ b/blog/dst/a/website_with_nginx.html @@ -22,7 +22,7 @@ - + diff --git a/blog/dst/index.html b/blog/dst/index.html index 2a9b624..2d30138 100644 --- a/blog/dst/index.html +++ b/blog/dst/index.html @@ -22,7 +22,7 @@ - + @@ -96,7 +96,7 @@

Articles

June 2021

Jun 04 - Así nomás está quedando el página

May 2021

david@luevano.xyz (David Luévano Alvarado)

Sun, 06 Jun 2021 00:30:52 GMT

Sun, 06 Jun 2021 04:16:37 GMT

pyssg v0.5.5

https://validator.w3.org/feed/docs/rss2.html

RIGHT (OUTER) JOIN: returns all records from the right table, and the matched records from the left table.
FULL (OUTER) JOIN: returns all records when there is a match in either left or right table.

INNER JOIN LEFT JOIN RIGHT JOIN FULL OUTER JOIN

Nested queries

A nesting isn’t constrained to the IN statement, it can appear anywhere, for example in a WHERE statement: SELECT ... WHERE something = (SELECT ...).

Posts filtered by english

Articles

May 2021

May 28 - I'm using a new blogging system

March 2021

Posts filtered by notes

Articles

March 2021

Mar 14 - Shell scripting tutorial video notes
Mar 14 - Linux tutorial video notes

Posts filtered by server

Articles

March 2021

Mar 21 - Create a git server and setup cgit web app (on Nginx)
Mar 21 - Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM

Posts filtered by short

Articles

June 2021

Jun 04 - Así nomás está quedando el página

May 2021

Posts filtered by spanish

Articles

June 2021

Jun 04 - Así nomás está quedando el página

March 2021

Posts filtered by tools

Articles

May 2021

May 28 - I'm using a new blogging system

March 2021

Posts filtered by tutorial

Articles

March 2021

Mar 21 - Create a git server and setup cgit web app (on Nginx)
Mar 21 - Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM

Posts filtered by update

Articles

June 2021

Jun 04 - Así nomás está quedando el página

May 2021

Articles

![INNER JOIN](images/b/notes/sql/img_innerjoin.gif) ![LEFT JOIN](images/b/notes/sql/img_leftjoin.gif) ![RIGHT JOIN](images/b/notes/sql/img_rightjoin.gif) ![FULL OUTER JOIN](images/b/notes/sql/img_fulljoin.gif) +

404 Not found -- Luévano's Site

You can contact me through: @@ -97,7 +97,6 @@
-
diff --git a/luevano/donate.html b/luevano/donate.html index fa4468a..a241802 100644 --- a/luevano/donate.html +++ b/luevano/donate.html @@ -79,14 +79,14 @@ Donate - Donate + Donate

- I don't really do much on the internet nor do I provide any type of service, but still, if for some reason you want to donate, you can do it via my Paypal, either by its link or using my email david@luevano.xyz. + I don't really do much on the internet nor do I provide any type of service, but still, if for some reason you want to donate, you can do it via my Paypal, either by its link or using my email david@luevano.xyz.

- I wanted to add more *fiat* options but I don't have access to them *down here*. So, instead you could use some of my referral links or donate crypto. + I wanted to add more fiat options but I don't have access to them down here. So, instead you could use some of my referral links or donate crypto.

@@ -100,6 +100,7 @@

Monero: (XMR QR) `83CoxLgBTzb8muMAHtqR4fYmwA6gcvahzRWgA6nWY3x3BCpde9cE4d8G2fFYufb7qTgo8Cc4M8qnNHdDfrXn7bKhAQmXhAq` +

@@ -116,15 +117,15 @@

- Vultr: Reliable server hosting, I host `luevano.xyz` here. You get $100 USD in credit for a month and if you continue using the service I get $25 after you spend $25 yourself. + Vultr: Reliable server hosting, I host `luevano.xyz` here. You get $100 USD in credit for a month and if you continue using the service I get $25 after you spend $25 yourself.

- Hostodo: Cheaper server hosting, I host `ezclap.xyz` here, which is being used only for some game servers and "bigger" stuff. I get 12% for every sale and renewal. + Hostodo: Cheaper server hosting, I host `ezclap.xyz` here, which is being used only for some game servers and "bigger" stuff. I get 12% for every sale and renewal.

- Epik: Domain registrar, where I buy my domains. I get 20% of the initial sale. + Epik: Domain registrar, where I buy my domains. I get 20% of the initial sale.

diff --git a/luevano/test.html b/luevano/test.html new file mode 100644 index 0000000..028877c --- /dev/null +++ b/luevano/test.html @@ -0,0 +1,100 @@ + + + + + + + Test page -- Luévano's Site + + + + + + + + + + + + + + + + +
+
+
+
+ Home +
+ +
+ Blog +
+ +
+ Art +
+ +
Git +
+
+ +
+ +
+
+
+ +
Stuff +
+
Gameboy
+
+
+
+
+ +
+ + + + + + +
+
+ +
+
+ Test page +
+ +
+ + + + + + +
+ +
+ +
+ + + Contact + + + + + Donate + + +
+ + Copyright 2021 David Luévano Alvarado + +
+ + diff --git a/static/css/dark.css b/static/css/dark.css index 1cb3028..31b025a 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -26,6 +26,8 @@ --switch-ol: var(--color4); --switch-moon: var(--color3); --switch-sun: var(--color13); + + --code-border: var(--fg); } /* general / @@ -66,6 +68,11 @@ main { background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em)); } +pre, code { + border-radius: 5px; + border: 1px solid var(--code-border); +} + / nav bar / body > header { background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em)); @@ -129,4 +136,3 @@ div.gallery:hover { .switch input:focus + .slider { box-shadow: 0 0 0.1em var(--switch-ol); } - diff --git a/static/css/light.css b/static/css/light.css index 27df3c4..0b1456c 100644 --- a/static/css/light.css +++ b/static/css/light.css @@ -26,6 +26,8 @@ --switch-ol: var(--color0); --switch-moon: var(--color3); --switch-sun: var(--color13); + + --code-border: var(--fg); } / general / @@ -62,6 +64,11 @@ body { color: var(--fg); } +pre, code { + border-radius: 5px; + border: 1px solid var(--code-border); +} + main { background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em)); } @@ -129,4 +136,3 @@ div.gallery:hover { .switch input:focus + .slider { box-shadow: 0 0 0.1em var(--switch-ol); } - diff --git a/static/css/style.css b/static/css/style.css index 0ba4e05..9be32e0 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -3,6 +3,20 @@ font-size: larger; } +h1 { + text-align: center; +} + +ul { + margin-left: 2em; + margin-right: 2em; +} + +ul.page-list { + margin-left: 0; + margin-right: 0; +} + body, html { margin: 0; padding: 0; @@ -42,12 +56,23 @@ a{ body > header, body > footer, main { justify-self: center; - width: clamp(45ch, 50%, 75ch); + width: clamp(30ch, calc(100% - 1em), 75ch); padding-left: 0.5em; padding-right: 0.5em; } +/ article elements / +div.article-info { + line-height: 0.3; + font-size: smaller; +} + +div.article-info > div.article-tags { + font-size: larger; +} + + / nav bar / header / body > header { display: flex; @@ -103,6 +128,10 @@ body > footer { text-align: center; } +body > footer > span { + font-size: smaller; +} + / theme swticher / .switch { @@ -154,3 +183,77 @@ body > footer { .slider.round:before { border-radius: 1em; } + + +/ code blocks / +code.crypto { + font-size: smaller; + overflow-wrap: anywhere; +} + + +/ images / +img { + border-radius: 5px; + max-width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + vertical-align: middle; +} + +img.wrap-right { + float: right; +} + +img.wrap-left { + float: left; +} + +img.qr { + max-width: 200px; + padding: 1em; +} + +/ img grid / +div.img-grid, div.img-grid > p { + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +div.img-grid img { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; +} + + +/ art grid / +div.art-grid, div.art-grid > p { + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-auto-rows: minmax(250px, auto); +} + +div.art-grid img { + border: 1px solid white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; +} + +@media screen and (min-width: 600px) { + div.art-grid img.wide { + grid-column: span 2 / auto; + } + + div.art-grid img.tall { + grid-row: span 2 / auto; + } +} diff --git a/static/scripts/theme.js b/static/scripts/theme.js index 489060f..1a425d5 100644 --- a/static/scripts/theme.js +++ b/static/scripts/theme.js @@ -21,6 +21,7 @@ window.onload = () => { href = href.replace('dark.css', 'light.css'); theme.setAttribute('href', href); + / let code_theme = document.getElementById('code-theme-css'); let code_href; @@ -29,6 +30,7 @@ window.onload = () => { code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css'); code_theme.setAttribute('href', code_href); } + / } } @@ -50,31 +52,39 @@ function toggleTheme(){ let theme = document.getElementById('theme-css'); let href = theme.getAttribute('href'); + / let code_theme = document.getElementById('code-theme-css'); let code_href; if (code_theme !== null){ code_href = code_theme.getAttribute('href'); } + / if(href.endsWith('dark.css')){ href = href.replace('dark.css', 'light.css'); + / if (code_theme !== null){ code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css'); } + / } else if (href.endsWith('light.css')){ href = href.replace('light.css', 'dark.css'); + / if (code_theme !== null){ code_href = code_href.replace('solarized-light.min.css', 'solarized-dark.min.css'); } + / } else{ console.log('Wrong replacement.'); } theme.setAttribute('href', href); + / if (code_theme !== null){ code_theme.setAttribute('href', code_href); } + */ setTheme(); } -- cgit v1.2.3-70-g09d2