reset padding and margins to be fixed later

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-06 02:05:57 +00:00
parent 3f3918d0ac
commit e244255cc1
2 changed files with 24 additions and 25 deletions

View File

@ -18,35 +18,41 @@
body { body {
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-rows: 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: grid-template-areas:
"header main" "logo title"
"nav main"
"footer main" "footer main"
; ;
margin: 0px; margin: 0px;
} }
header, footer { header {
display: contents;
}
#logo {
grid-area: logo;
}
#nav {
grid-area: nav;
}
#title {
grid-area: title;
}
#logo, #nav, footer {
background-color: var(--accent-bkg-color); background-color: var(--accent-bkg-color);
color: var(--accent-txt-color); color: var(--accent-txt-color);
padding: 20px;
}
header {
grid-area: header;
}
header hr {
margin-top: 20px;
margin-bottom: 20px;
} }
main { 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: 20px;
} }
footer { footer {
@ -67,8 +73,6 @@ nav a {
font-size: x-large; font-size: x-large;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
padding: 10px;
padding-left: 20px;
} }
nav a:before { nav a:before {
@ -96,24 +100,19 @@ h1, h2, h3, p {
} }
h1 { h1 {
font-size: xxx-large; font-size: xxx-large;
text-align: center;
margin: 0px;
} }
h2 { h2 {
font-size: xx-large; font-size: xx-large;
text-align: center;
} }
h3 { h3 {
font-size: x-large; font-size: x-large;
text-align: center;
} }
p { p {
font-size: large; font-size: large;
text-align: left;
} }
.hidden { .hidden {

View File

@ -26,13 +26,13 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1> <img id="logo" src="logo.webp">
<hr> <nav id="nav">
<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">