Tiny HTML and CSS refactor

This commit is contained in:
William 2021-10-09 21:11:59 +02:00
parent 7eee4a5a5e
commit e9ece025d0
3 changed files with 38 additions and 42 deletions

View File

@ -12,21 +12,19 @@ body {
}
h1, h2, h3, h4 {
display: inline;
margin: 0;
}
.navbar-top-head {
.navbar-top {
padding: 12px;
background: #472886;
background: linear-gradient(0deg, rgba(71,40,134,1) 0%, rgba(81,24,195,1) 100%);
}
.navbar-top-inner {
.navbar-top .inner {
max-width: 900px;
margin: 0 auto;
}
.navbar-top-inner a {
.navbar-top .inner a {
color: #f8f8f8;
text-decoration: none;
}
@ -36,8 +34,7 @@ h1, h2, h3, h4 {
background: rgb(54,148,37);
background: linear-gradient(0deg, rgba(54,148,37,1) 0%, rgba(62,162,34,1) 50%, rgba(63,177,43,1) 100%);
}
.login-statusbar-inner {
.login-statusbar .inner {
max-width: 900px;
margin: 0 auto;
color: #fff;
@ -49,11 +46,20 @@ h1, h2, h3, h4 {
padding-bottom: 4px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.login-statusbar-inner > a {
.login-statusbar .inner > a {
color: #fff;
}
.footer {
background: #ddd;
border-top: 1px solid #aaa;
padding: 12px;
}
.footer .inner {
max-width: 900px;
margin: 0 auto;
}
.grid-container {
display: grid;
grid-template-columns: max-content auto;
@ -64,20 +70,19 @@ h1, h2, h3, h4 {
padding: 12px;
}
main img {
.grid-container main img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid #aaa;
}
nav {
background: #eee;
.grid-container .nav-links {
background: #e8e8e8;
border: 1px solid #aaa;
padding: 12px;
}
nav > ul {
.grid-container .nav-links ul {
margin: 0;
padding-left: 12px;
}
@ -86,17 +91,6 @@ a {
color: rgb(0, 0, 255);
}
footer {
background: #ddd;
border-top: 1px solid #aaa;
padding: 12px;
}
.footer-inner {
max-width: 900px;
margin: 0 auto;
}
@media only screen and (max-width: 600px) {
.grid-container {
grid-template-columns: auto;

View File

@ -10,9 +10,11 @@ if ($templateParameters["render"] === FALSE) {
</div>
<footer>
<div class="footer-inner">
<div class="footer">
<div class="inner">
<small>Kopieringsrettigheter © 2021-2022 <a target="_blank" href="http://willy.club">WillySoft Solutions</a></small>
</div>
</div>
</footer>
</body>

View File

@ -17,8 +17,9 @@ if ($templateParameters["render"] === FALSE) {
<link rel="icon" href="<?=$templateUrlPrefix;?>img/cropped-kf-propell-ikon-32x32.png" sizes="32x32">
<body>
<div class="navbar-top-head">
<div class="navbar-top-inner">
<header>
<div class="navbar-top">
<div class="inner">
<a href="<?=$templateUrlPrefix;?>" style="display: block; max-width: max-content;">
<img style="display: block; height: 32px;" src="<?=$templateUrlPrefix;?>img/cropped-kf-propell-ikon-32x32.png" alt="">
<div style="margin-left: 44px;">
@ -28,22 +29,21 @@ if ($templateParameters["render"] === FALSE) {
</a>
</div>
</div>
</header>
<?php if ((isset($_SESSION['logged_in'])) && ($_SESSION['logged_in'] === TRUE)) : ?>
<div class="login-statusbar">
<div class="login-statusbar-inner">
<div class="inner">
<a href="<?=$templateUrlPrefix;?>logout.php" style="float: right;">Logg ut</a>
<div>Inlogget som: <?=htmlspecialchars($_SESSION['username'])?></div>
</div>
</div>
<?php endif; ?>
<div class="grid-container">
<div>
<nav>
<nav class="nav-links">
<ul>
<li><a href="<?=$templateUrlPrefix;?>">Forside</a></li>
<li><a href="<?=$templateUrlPrefix;?>login.php">Logg inn</a></li>