diff options
| author | moderndevslulw <moderndevslulw@alright.party> | 2025-07-04 18:15:17 +0500 |
|---|---|---|
| committer | moderndevslulw <moderndevslulw@alright.party> | 2025-07-04 18:15:17 +0500 |
| commit | 3efe04aa1a50a9b3227eb3b060ce73e16ea3334b (patch) | |
| tree | 96a5159fe4e2b598bc571c339349adafb83cc36d | |
| parent | 0ea64157c85156c4a3404fd11c6fb687f5eb613d (diff) | |
feat: header and footer
| -rw-r--r-- | lib/partials.php | 31 | ||||
| -rw-r--r-- | public/index.php | 11 | ||||
| -rw-r--r-- | public/static/style.css | 78 |
3 files changed, 119 insertions, 1 deletions
diff --git a/lib/partials.php b/lib/partials.php new file mode 100644 index 0000000..8dcc915 --- /dev/null +++ b/lib/partials.php @@ -0,0 +1,31 @@ +<?php +function html_navigation_bar() +{ + echo '' ?> + <header class="gap-32"> + <section class="row"> + <a href="/"> + <h1><img src="/static/img/brand/big.webp" alt="The Tinybot Project"></h1> + </a> + </section> + <section class="row gap-16"> + <a href="/">home</a> + </section> + </header> + <?php ; +} + +function html_big_footer() +{ + echo '' ?> + <footer class="big"> + <div class="w-50 column gap-8"> + <section class="row gap-8 align-center"> + <img src="/static/img/brand/icon.webp" alt=""> + <h1>The Tinybot Project</h1> + </section> + <p>Maintained by someone</p> + </div> + </footer> + <?php ; +}
\ No newline at end of file diff --git a/public/index.php b/public/index.php index ca7f117..b0fa818 100644 --- a/public/index.php +++ b/public/index.php @@ -1,3 +1,6 @@ +<?php +include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php'; +?> <html> <head> @@ -9,8 +12,14 @@ <body> <main> - <h1>test</h1> + <?php html_navigation_bar() ?> + + <content> + <h1>test</h1> + </content> </main> + + <?php html_big_footer() ?> </body> </html>
\ No newline at end of file diff --git a/public/static/style.css b/public/static/style.css index a068d89..6f39084 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -1,4 +1,82 @@ * { padding: 0; margin: 0; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + width: 100%; + min-height: 100vh; +} + +main { + display: flex; + flex-direction: column; + width: 50%; + flex-grow: 1; +} + +header { + display: flex; + flex-direction: row; + align-items: end; + + padding: 32px 0; +} + +content { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +footer { + background: #cacaca; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 8px 0; +} + +footer.big { + padding: 32px 0; +} + + +/** +--- SHORTCUTS +*/ + +.w-50 { + width: 50%; +} + +.row { + display: flex; + flex-direction: row; +} + +.align-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.gap-32 { + gap: 32px; +} + +.gap-16 { + gap: 16px; +} + +.gap-8 { + gap: 8px; }
\ No newline at end of file |