diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Makefile | 7 | ||||
| -rw-r--r-- | src/css/base.css (renamed from static/style.css) | 69 | ||||
| -rw-r--r-- | src/css/navbar.css | 32 | ||||
| -rw-r--r-- | src/css/scanlines.css | 20 | ||||
| -rw-r--r-- | src/css/style.css | 3 | ||||
| -rw-r--r-- | static/buttons/best_viewed_with_eyes.gif | bin | 0 -> 5493 bytes | |||
| -rw-r--r-- | static/buttons/dumbass_webmaster_ahead.gif | bin | 0 -> 3456 bytes | |||
| -rw-r--r-- | static/buttons/freespeech.gif | bin | 0 -> 10832 bytes | |||
| -rw-r--r-- | static/buttons/gnu-linux.gif | bin | 0 -> 550 bytes | |||
| -rw-r--r-- | static/buttons/insanity.gif | bin | 0 -> 52691 bytes | |||
| -rw-r--r-- | static/buttons/wwwbutton.gif | bin | 0 -> 1531 bytes | |||
| -rw-r--r-- | static/chip.png | bin | 0 -> 7748 bytes | |||
| -rw-r--r-- | static/leila.png | bin | 0 -> 520728 bytes | |||
| -rw-r--r-- | templates/base.m4 | 43 |
15 files changed, 122 insertions, 53 deletions
@@ -1 +1,2 @@ *.html +static/style.css @@ -15,10 +15,10 @@ RSS = blog/index.rss URL ?= http://localhost:8000 -all: $(PAGES) blog/index.rss +all: $(PAGES) blog/index.rss static/style.css clean: - rm -f $(PAGES) $(RSS) dist.tar.gz + rm -f $(PAGES) $(RSS) dist.tar.gz static/style.css dist: all tar -cv static $(RSS) $(PAGES) | gzip > dist.tar.gz @@ -30,6 +30,9 @@ blog/index.rss: blog/posts.csv blog/index.html: blog/posts.csv templates/base.m4 m4 -DPAGECONTENT="$$(./csv2index.sh /blog < $<)" templates/base.m4 > $@ +static/style.css: src/css/style.css src/css/style.css src/css/base.css src/css/navbar.css src/css/scanlines.css + esbuild src/css/style.css --external:'/static/*' --bundle --minify --outfile=static/style.css + %.html: %.md templates/base.m4 m4 -DPAGECONTENT="$$(./genpage.sh < $<)" templates/base.m4 > $@ diff --git a/static/style.css b/src/css/base.css index 9f114ef..16526f3 100644 --- a/static/style.css +++ b/src/css/base.css @@ -2,16 +2,26 @@ box-sizing: border-box; } +html { + background-image: url('/static/chip.png'); +} + body { color: #999; - background-color: #000; + background-color: rgba(0, 0, 0, 0.75); width: 90%; max-width: 1000px; - margin: 20px auto; + padding: 20px; + margin: 0px auto; font-size: 16px; } +body > main, header { + border: 1px solid #999; + padding: 5px; +} + header { margin: auto; } @@ -62,6 +72,11 @@ pre { flex-direction: column; } +.esquizo { + width: 100px; + display: inline; +} + .content { padding: 5px; flex-grow: 1; @@ -70,44 +85,12 @@ pre { background: #050505; } -.navbar { -} - -.navbar ul { - list-style-type: none; - margin: 0px; - padding: 0px; - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.navbar li a { - display: block; - color: #999; - text-decoration: none; - border: dashed 1px; - text-align: center; - padding: 5px 10px; -} - -.navbar li a:hover { - display: block; - color: #000; - background-color: #999; -} - .bottom-align { display: flex; - flex-direction: column; + flex-direction: column; justify-content: flex-end; } -.esquizo { - width: 100px; - display: inline; -} - .image-container { text-align: center; } @@ -117,20 +100,22 @@ pre { max-width: 100%; } +.buttons { + margin: 5px 0px; +} + +.buttons ul li { + margin: 2px 0px; +} + @media (min-width: 1000px) { .header-container { justify-content: center; flex-direction: row; } - .navbar ul { - display: flex; - flex-direction: column; - gap: 0px; - width: 125px; - } - main { flex-direction: row; } } + diff --git a/src/css/navbar.css b/src/css/navbar.css new file mode 100644 index 0000000..2b70356 --- /dev/null +++ b/src/css/navbar.css @@ -0,0 +1,32 @@ +.navbar ul { + list-style-type: none; + margin: 0px; + padding: 0px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.navbar li a { + display: block; + color: #999; + text-decoration: none; + border: dashed 1px; + text-align: center; + padding: 5px 10px; +} + +.navbar li a:hover { + display: block; + color: #000; + background-color: #999; +} + +@media (min-width: 1000px) { + .navbar ul { + display: flex; + flex-direction: column; + gap: 0px; + width: 125px; + } +} diff --git a/src/css/scanlines.css b/src/css/scanlines.css new file mode 100644 index 0000000..e48074b --- /dev/null +++ b/src/css/scanlines.css @@ -0,0 +1,20 @@ + +.scanlines::before { + content: " "; + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: repeating-linear-gradient( + rgba(18, 16, 16, 0) 0px, + rgba(18, 16, 16, 0) 1px, + rgba(0, 0, 0, 0.25) 1px, + rgba(0, 0, 0, 0.25) 2px + ); + background-size: 100% 100%; + z-index: 10; + pointer-events: none; /* Allows users to click elements underneath */ +} + diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..f083657 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,3 @@ +@import 'base.css'; +@import 'navbar.css'; +@import 'scanlines.css'; diff --git a/static/buttons/best_viewed_with_eyes.gif b/static/buttons/best_viewed_with_eyes.gif Binary files differnew file mode 100644 index 0000000..6dfeb64 --- /dev/null +++ b/static/buttons/best_viewed_with_eyes.gif diff --git a/static/buttons/dumbass_webmaster_ahead.gif b/static/buttons/dumbass_webmaster_ahead.gif Binary files differnew file mode 100644 index 0000000..52fb8ab --- /dev/null +++ b/static/buttons/dumbass_webmaster_ahead.gif diff --git a/static/buttons/freespeech.gif b/static/buttons/freespeech.gif Binary files differnew file mode 100644 index 0000000..f1fa905 --- /dev/null +++ b/static/buttons/freespeech.gif diff --git a/static/buttons/gnu-linux.gif b/static/buttons/gnu-linux.gif Binary files differnew file mode 100644 index 0000000..89e3562 --- /dev/null +++ b/static/buttons/gnu-linux.gif diff --git a/static/buttons/insanity.gif b/static/buttons/insanity.gif Binary files differnew file mode 100644 index 0000000..3c3b94b --- /dev/null +++ b/static/buttons/insanity.gif diff --git a/static/buttons/wwwbutton.gif b/static/buttons/wwwbutton.gif Binary files differnew file mode 100644 index 0000000..48fbd13 --- /dev/null +++ b/static/buttons/wwwbutton.gif diff --git a/static/chip.png b/static/chip.png Binary files differnew file mode 100644 index 0000000..7adcd7a --- /dev/null +++ b/static/chip.png diff --git a/static/leila.png b/static/leila.png Binary files differnew file mode 100644 index 0000000..9060a5a --- /dev/null +++ b/static/leila.png diff --git a/templates/base.m4 b/templates/base.m4 index 9940303..75c3e84 100644 --- a/templates/base.m4 +++ b/templates/base.m4 @@ -1,3 +1,23 @@ +define(`BUTTON', ` + <li> + <div class="image-container"> + <img src="/static/buttons/$1" width="88" height="31"/> + </div> + </li> +') + +define(`BUTTON_LIST', ` + <div class="buttons"> + <ul> + BUTTON(`insanity.gif') + BUTTON(`gnu-linux.gif') + BUTTON(`wwwbutton.gif') + BUTTON(`dumbass_webmaster_ahead.gif') + BUTTON(`best_viewed_with_eyes.gif') + </ul> + </div> +') + <html> <head> <title>Esquizo</title> @@ -9,7 +29,7 @@ <body> <header> <div class="header-container"> - <img class="esquizo" src="/static/esquizo.png"></img> + <img class="esquizo" src="/static/leila.png"></img> <div class="bottom-align"> <h1>esquizo.net</h1> <h2><i>Centro das verdades reveladas pelas vozes da minha cabeça</i></h2> @@ -18,13 +38,16 @@ </header> <main> - <div class="navbar"> - <ul> - <li><a href="/">Home</a></li> - <li><a href="/about.html">Quem eu sou?</a></li> - <li><a href="/blog">Blog</a></li> - <li><a href="https://git.esquizo.net/">Git</a></li> - </ul> + <div class="navbar"> + <nav> + <ul> + <li><a href="/">Home</a></li> + <li><a href="/about.html">Quem eu sou?</a></li> + <li><a href="/blog">Blog</a></li> + <li><a href="https://git.esquizo.net/">Git</a></li> + </ul> + </nav> + BUTTON_LIST </div> <div class="content"> @@ -33,7 +56,9 @@ </main> <footer> - Toda ofensa foi inteiramente proposital. + Somente um idiota levaria qualquer coisa aqui a sério.<br/> </footer> + + <div class="scanlines"></div> </body> </html> |
