working but hacky

This commit is contained in:
Arthur Lu 2023-04-06 02:56:37 +00:00
parent 4e11110c95
commit 9469de72fe
5 changed files with 88 additions and 22 deletions

View File

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

View File

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

View File

@ -18,10 +18,11 @@
body { body {
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-rows: auto 1fr auto; grid-template-rows: auto auto 1fr auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: grid-template-areas:
"logo title" "logo title"
"hr1 hr2"
"nav main" "nav main"
"footer main" "footer main"
; ;
@ -34,17 +35,57 @@ header {
#logo { #logo {
grid-area: 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 { #nav {
grid-area: nav; grid-area: nav;
padding: 20px;
} }
#title { #title {
grid-area: 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); background-color: var(--accent-bkg-color);
color: var(--accent-txt-color); color: var(--accent-txt-color);
} }
@ -53,6 +94,8 @@ main {
grid-area: main; grid-area: main;
background-color: var(--content-bkg-color); background-color: var(--content-bkg-color);
color: var(--content-txt-color); color: var(--content-txt-color);
padding-left: 20px;
padding-right: 20px;
} }
footer { footer {
@ -95,16 +138,12 @@ nav a:hover:before {
width: 100%; width: 100%;
} }
h1, h2, h3, p {
font-family: monospace;
}
h1 { h1 {
font-size: xxx-large; font-size: xxx-large;
} }
h2 { h2 {
font-size: xx-large; font-size: xxx-large;
} }
h3 { h3 {

View File

@ -26,13 +26,19 @@
</head> </head>
<body> <body>
<header> <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"> <nav id="nav">
<a href="index.html" aria-current="true">Instances</a> <a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a> <a href="account.html">Account</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>
</nav> </nav>
<h1 id="title">Instances</h1>
</header> </header>
<main> <main>
<div id="instance-container"> <div id="instance-container">

View File

@ -12,11 +12,19 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1> <div id="logo">
<hr> <p style="font-size: xxx-large; margin: 0px;">tronnet</p>
<nav> </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> <a href="login.html" aria-current="true">Login</a>
</nav> </nav>
</header> </header>
<main> <main>
<form style="margin-left: auto; margin-right: auto;"> <form style="margin-left: auto; margin-right: auto;">