userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style changed for better look

Browse Source
This commit is contained in:
Bogdan Pilyugin 2022-08-30 23:12:23 +02:00
parent fd36bb2764
commit 6cdede8e4b
2 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
HTML/info.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="iconsfont.css">
<script src="main.js"></script>
<script src="res.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<div class="ml">
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">Info</div>
</div>
</div>
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">Help</div>
</div>
</div>
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">About</div>
</div>
</div>
</div>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>

24
HTML/styles.css
View File

@ -1,7 +1,7 @@
/*========== VARIABLES CSS ==========*/ /*========== VARIABLES CSS ==========*/
:root { :root {
--header-height: 4.0rem; --header-height: 3.0rem;
--nav-width: 220px; --nav-width: 200px;
/*========== Colors ==========*/ /*========== Colors ==========*/
--first-color: #FFFFFF; --first-color: #FFFFFF;
@ -200,14 +200,14 @@ img {
.nav__dropdown-content { .nav__dropdown-content {
display: grid; display: grid;
row-gap: .5rem; row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem; padding: .75rem 2.5rem .75rem 2.5rem;
} }
.nav__dropdown-item { .nav__dropdown-item {
font-size: var(--smaller-font-size); font-size: var(--small-font-size);
font-weight: var(--font-medium); font-weight: var(--font-medium);
color: var(--text-color); color: var(--text-color);
margin: 5px 3px; margin: 3px 3px;
} }
.nav__dropdown-item:hover { .nav__dropdown-item:hover {
@ -249,10 +249,10 @@ img {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
body { body {
padding: 0 0 0 5rem; padding: 0 0 0 4rem;
} }
.header { .header {
padding: 0 3rem 0 5rem; padding: 0 3rem 0 4rem;
} }
.header__container { .header__container {
height: calc(var(--header-height) + .5rem); height: calc(var(--header-height) + .5rem);
@ -268,17 +268,17 @@ img {
display: block; display: block;
} }
.header__img { .header__img {
width: 40px; width: 30px;
height: 40px; height: 30px;
order: 1; order: 1;
} }
.nav { .nav {
left: 0; left: 0;
padding: 1.2rem 1.5rem 0; padding: 1.2rem 1.2rem 0;
width: 5.0rem; /* Reduced navbar */ width: 4.0rem; /* Reduced navbar */
} }
.nav__items { .nav__items {
row-gap: 1.7rem; row-gap: 2.0rem;
} }
.nav__icon { .nav__icon {
font-size: 1.0rem; font-size: 1.0rem;