From 1a220035bd519a7cea8fb526274c58dc3679bbbb Mon Sep 17 00:00:00 2001 From: esquizo Date: Tue, 31 Mar 2026 23:58:53 -0300 Subject: melhorado o design do site --- static/style.css | 121 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 104 insertions(+), 17 deletions(-) (limited to 'static') 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; + } } -- cgit v1.2.3