working but hacky

This commit is contained in:
Arthur Lu 2023-04-06 02:56:37 +00:00
parent e244255cc1
commit 64af15898d
5 changed files with 88 additions and 22 deletions

View File

@ -11,13 +11,19 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<div id="logo">
<p style="font-size: xxx-large; margin: 0px;">tronnet</p>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav">
<a href="index.html">Instances</a>
<a href="account.html" aria-current="true">Account</a>
<a href="login.html">Logout</a>
</nav>
<div id="title">
<h1>Account</h1>
</div>
</header>
<main>
<table id="resource-table">

View File

@ -12,16 +12,23 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<div id="logo">
<p style="font-size: xxx-large; margin: 0px;">tronnet</p>
</div>
<div id="title">
<h1>Instances</h1>
<p style="font-size: xxx-large;">/</p>
<h2 id="name"></h2>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav">
<a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a>
<a href="login.html">Logout</a>
</nav>
</header>
<main>
<h3 id="name"></h3>
<div class="center-div">
<form>
<fieldset>

View File

@ -18,10 +18,11 @@
body {
display: grid;
min-height: 100vh;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: auto 1fr;
grid-template-areas:
"logo title"
"hr1 hr2"
"nav main"
"footer main"
;
@ -34,17 +35,57 @@ header {
#logo {
grid-area: logo;
padding: 20px;
padding-bottom: 0px;
}
#hr1 {
grid-area: hr1;
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
}
#hr1 hr {
height: 1px;
}
#hr2 {
grid-area: hr2;
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
}
#hr2 hr {
height: 1px;
}
#nav {
grid-area: nav;
padding: 20px;
}
#title {
grid-area: title;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: end;
}
#logo, #nav, footer {
#title * {
margin: 0px;
}
#logo, #nav, #hr1, footer {
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
}
@ -53,6 +94,8 @@ main {
grid-area: main;
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
padding-left: 20px;
padding-right: 20px;
}
footer {
@ -95,16 +138,12 @@ nav a:hover:before {
width: 100%;
}
h1, h2, h3, p {
font-family: monospace;
}
h1 {
font-size: xxx-large;
}
h2 {
font-size: xx-large;
font-size: xxx-large;
}
h3 {

View File

@ -26,13 +26,19 @@
</head>
<body>
<header>
<img id="logo" src="logo.webp">
<div id="logo">
<p style="font-size: xxx-large; margin: 0px;">tronnet</p>
</div>
<div id="title">
<h1>Instances</h1>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav">
<a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a>
<a href="login.html">Logout</a>
</nav>
<h1 id="title">Instances</h1>
</header>
<main>
<div id="instance-container">

View File

@ -12,9 +12,17 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<div id="logo">
<p style="font-size: xxx-large; margin: 0px;">tronnet</p>
</div>
<div id="title">
<h1>Instances</h1>
<p style="font-size: xxx-large;">/</p>
<h2 id="name"></h2>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav">
<a href="login.html" aria-current="true">Login</a>
</nav>
</header>