core: make nav bar actually a nav bar and side by side with content
This commit is contained in:
parent
8ca2fa1dc0
commit
262246e8f0
24
default.css
24
default.css
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
color: #06CDFF;
|
color: #06CDFF;
|
||||||
background: #03001C;
|
background: #03001C;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -14,14 +15,33 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.inside {
|
.inside {
|
||||||
max-width: 80rem;
|
max-width: 45rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem 1.5rem;
|
padding: 2rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation {
|
nav {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
width: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap {
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 36rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.column {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.gap {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trianta {
|
.trianta {
|
||||||
|
20
index.html
20
index.html
@ -11,13 +11,19 @@
|
|||||||
<a href="/" class="trianta">TRIANTA</a>
|
<a href="/" class="trianta">TRIANTA</a>
|
||||||
<p>Function over form by design</p>
|
<p>Function over form by design</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="navigation">
|
<nav class="column">
|
||||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
<ul>
|
||||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
<li><a href="https://www.github.com/trimutex">GitHub</a></li>
|
||||||
<a href="/completed">Completed</a>
|
<li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
|
||||||
<a href="/current">Current</a>
|
<li><a href="/completed">Completed</a></li>
|
||||||
<a href="/other">Other</a>
|
<li><a href="/current">Current</a></li>
|
||||||
<a href="/contact">Contact</a>
|
<li><a href="/other">Other</a></li>
|
||||||
|
<li><a href="/contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="column gap">
|
||||||
|
</div>
|
||||||
|
<div class="column content">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
Loading…
Reference in New Issue
Block a user