Added basic structure of the html template

This commit is contained in:
Nikurasu 2022-05-15 11:13:48 +02:00
parent f00704fc99
commit 16009fe39e
3 changed files with 102 additions and 3 deletions

View file

@ -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;
}

View file

@ -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>

Binary file not shown.