Added basic structure of the html template

2022-05-15 11:13:48 +02:00 · 2022-05-15 11:13:48 +02:00 · 16009fe39e
parent f00704fc99
commit 16009fe39e
3 changed files with 102 additions and 3 deletions
--- a/source/_assets/css/main.css
+++ b/source/_assets/css/main.css
@ -1,3 +1,86 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@font-face {
+    font-family: 'Custom';
+    src: url("JetBrainsMono[wght].ttf");
+}
+
+* {
+    font-family: 'Custom', monospace;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    border-bottom: thin solid;
+}
+
+header h1 {
+    max-width: 950px;
+    font-weight: 650;
+    padding: 1rem;
+    margin: 0 auto;
+    text-align: right;
+}
+
+nav {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 950px;
+}
+
+nav ul li {
+    display: inline-block;
+}
+
+nav ul li a {
+    display: inline-block;
+    padding: 1rem;
+    text-decoration: none;
+}
+
+nav ul li[aria-current] a {
+    padding-bottom: .8rem;
+    border-bottom: .2rem solid;
+}
+
+main {
+    max-width: 950px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+article section {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+article section h2 {
+    margin: 0;
+}
+
+article section:first-of-type {
+    margin-top: 4rem;
+}
+
+article section p {
+    margin: 2rem 0;
+}
+
+main hr {
+    width: 75%;
+}
+
+main hr:last-of-type {
+    display: none;
+}
--- a/source/_layouts/main.blade.php
+++ b/source/_layouts/main.blade.php
@ -5,10 +5,26 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="canonical" href="{{ $page->getUrl() }}">
        <meta name="description" content="{{ $page->description }}">
+        <meta name="color-scheme" content="dark light">
        <title>{{ $page->title }}</title>
        <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
    </head>
    <body>
+    <header>
+        <h1>Nikus Blog</h1>
+        <nav>
+            <ul>
+                <li aria-current="page"><a href="#">Home</a></li>
+                <li><a href="#">Projects</a></li>
+                <li><a href="#">About</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
        @yield('body')
+    </main>
+    <footer>
+        <p>Hello World</p>
+    </footer>
    </body>
 </html>
--- a/source/assets/fonts/JetBrainsMono[wght].ttf
+++ b/source/assets/fonts/JetBrainsMono[wght].ttf