diff options
| -rw-r--r-- | static/style.css | 121 | ||||
| -rw-r--r-- | templates/base.m4 | 33 |
2 files changed, 126 insertions, 28 deletions
diff --git a/static/style.css b/static/style.css index e4b74bf..5dfce6d 100644 --- a/static/style.css +++ b/static/style.css @@ -1,40 +1,127 @@ +* { + box-sizing: border-box; +} + body { - color: white; - background-color: black; + color: #999; + background-color: #000; - width: 80%; + width: 90%; max-width: 1000px; margin: 20px auto; font-size: 16px; } -.bottom-align { - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.title { - display: flex; - flex-direction: column; +header { + margin: auto; } -.title h1 { +header h1 { display: inline; margin: 1px; } -.title h2 { +header h2 { margin: 1px; } +main { + display: flex; + flex-direction: column; + line-height: 1.6; +} + +main > div { + margin: 5px; +} + +footer { + font-size: 0.8rem; + text-align: center; + opacity: 0.7; +} + +a, a:visited { + color: #0077aa; +} + +a:hover { + color: #00aaee; +} + +pre { + max-width: 100%; + overflow: auto; + background: #050505; + padding: 10px; + border: 1px dashed #999; +} + +.header-container { + display: flex; + flex-direction: column; +} + +.content { + padding: 5px; + flex-grow: 1; + overflow: auto; + border: dashed 1px #999; + 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; + justify-content: flex-end; +} + .esquizo { width: 100px; display: inline; } -@media (min-width: 768px) { - .title { - flex-direction: row; /* Volta a ficar lado a lado */ +@media (min-width: 640px) { + .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/templates/base.m4 b/templates/base.m4 index e30d541..bb95bf6 100644 --- a/templates/base.m4 +++ b/templates/base.m4 @@ -3,25 +3,36 @@ <title>Esquizo</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="/static/style.css" rel="stylesheet"/> </head> - <link href="/static/style.css" rel="stylesheet"/> <body> - <div class="title"> + <header> + <div class="header-container"> <img class="esquizo" src="/static/esquizo.png"></img> <div class="bottom-align"> <h1>esquizo.net</h1> <h2><i>Centro das verdades reveladas pelas vozes da minha cabeça</i></h2> </div> - </div> - <div class="navbar"> - <a href="/">Home</a> - <a href="/blog">Blog</a> - <a href="https://git.esquizo.net/">Git</a> - </div> + </div> + </header> + + <main> + <div class="navbar"> + <ul> + <li><a href="/">Home</a></li> + <li><a href="/blog">Blog</a></li> + <li><a href="https://git.esquizo.net/">Git</a></li> + </ul> + </div> + + <div class="content"> + PAGECONTENT + </div> + </main> - <div class="content"> - PAGECONTENT - </div> + <footer> + Toda ofensa foi inteiramente proposital. + </footer> </body> </html> |