William/stafett-for-livet
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tiny HTML and CSS refactor

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
style/main.css
View File

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

6
template/_footer.php
View File

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

28
template/_header.php
View File

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