Dhaverd/ Site
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Глобальная переработка дизайна

This commit is contained in:
Dhaverd 2022-10-18 11:11:42 +08:00
parent dd6301015b
commit fe243d94d3
6 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -15,22 +15,22 @@
</header> </header>
<main> <main>
<section class="side-bar"> <section class="side-bar">
<p><a href="index.html">Главная</a></p> <p class="mainp"><a href="index.html">Главная</a></p>
<p><a href="http:\\176.114.129.4:3000">Gitea</a></p> <p class="gitea"><a href="http:\\176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p> <p class="servers"><a href="servers.html">Сервера</a></p>
<p><a href="mychat.html">MyChat</a></p> <p class="mychat"><a href="mychat.html">MyChat</a></p>
<p><a href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="clay"> </section> <section class="main-content" id="main-content">
<section class="main-content">
<h1 class="page-title">Приветствую!</h1> <h1 class="page-title">Приветствую!</h1>
<p>Данный сайт разработан для личного использования. Здесь можно найти репозиторий Git. Также тут можно найти мои сервера Minecraft, Project Zomboid и иногда других игр. Еще у нас есть свой мессенджер MyChat</p> <p>Данный сайт разработан для личного использования. Здесь можно найти репозиторий Git. Также тут можно найти мои сервера Minecraft, Project Zomboid и иногда других игр. Еще у нас есть свой мессенджер MyChat</p>
</section> </section>
</main> </main>
<footer> <footer>
<section> <section>
<p>© Dhaverd 2022</p> <p>® Dhaverd 2022</p>
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

16
mychat.html
View File

@ -15,14 +15,13 @@
</header> </header>
<main> <main>
<section class="side-bar"> <section class="side-bar">
<p><a href="index.html">Главная</a></p> <p class="mainp"><a href="index.html">Главная</a></p>
<p><a href="http:\\176.114.129.4:3000">Gitea</a></p> <p class="gitea"><a href="http:\\176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p> <p class="servers"><a href="servers.html">Сервера</a></p>
<p><a href="mychat.html">MyChat</a></p> <p class="mychat"><a href="mychat.html">MyChat</a></p>
<p><a href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="clay"> </section> <section class="main-content" id="main-content">
<section class="main-content">
<h1 class="page-title">MyChat</h1> <h1 class="page-title">MyChat</h1>
<p>Скачать MyChat Client можно здесь: <a class="text-link" target="_blank" href="https://nsoft-s.com/downloadmychat.html">ТыК</a></p> <p>Скачать MyChat Client можно здесь: <a class="text-link" target="_blank" href="https://nsoft-s.com/downloadmychat.html">ТыК</a></p>
<p>Также можно открыть Web-версию: <a class="text-link" target="_blank" href="http://176.114.129.4:800/chat">ТыК</a> </p> <p>Также можно открыть Web-версию: <a class="text-link" target="_blank" href="http://176.114.129.4:800/chat">ТыК</a> </p>
@ -35,8 +34,9 @@
</main> </main>
<footer> <footer>
<section> <section>
<p>© Dhaverd 2022</p> <p>® Dhaverd 2022</p>
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

18
servers.html
View File

@ -15,14 +15,13 @@
</header> </header>
<main id="#main"> <main id="#main">
<section class="side-bar"> <section class="side-bar">
<p><a href="index.html">Главная</a></p> <p class="mainp"><a href="index.html">Главная</a></p>
<p><a href="http://176.114.129.4:3000">Gitea</a></p> <p class="gitea"><a href="http:\\176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p> <p class="servers"><a href="servers.html">Сервера</a></p>
<p><a href="mychat.html">MyChat</a></p> <p class="mychat"><a href="mychat.html">MyChat</a></p>
<p><a href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="clay"> </section> <section class="main-content" id="main-content">
<section class="main-content">
<h1 class="page-title">У нас имеются следующие сервера:</h1> <h1 class="page-title">У нас имеются следующие сервера:</h1>
<br> <br>
<h2>Minecraft 1.16.1 Vanilla</h2> <h2>Minecraft 1.16.1 Vanilla</h2>
@ -41,8 +40,9 @@
</main> </main>
<footer> <footer>
<section> <section>
<p>© Dhaverd 2022</p> <p>® Dhaverd 2022</p>
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

14
src/scripts/index.js
View File

@ -0,0 +1,14 @@
$(document).ready(function() {
resetContentSize()
});
function resetContentSize() {
console.log("Fixing main-content height:");
let mainContent = document.getElementById('main-content');
var offsetHeight = Number(mainContent.offsetHeight);
console.log("\tHeight was: " + offsetHeight);
var newHeight = offsetHeight + 30;
console.log("\tSetting css: " + 'height:'+newHeight+'px');
mainContent.setAttribute('style', 'height:'+newHeight+'px');
console.log("\tHeight become: " + mainContent.offsetHeight);
}

67
src/styles/style.css
View File

@ -5,21 +5,50 @@
body { body {
padding-left: 100px;
padding-right: 100px;
/* Или процентами? */
background-color: #575757; background-color: #575757;
} }
.side-bar { .side-bar {
grid-area: side; align-items: center;
width: 100%;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-areas: "mainp gitea servers mychat workout-area";
background-color: #424242; background-color: #424242;
height: 250px; height: auto;
}
.mainp {
grid-area: mainp;
}
.gitea {
grid-area: gitea;
}
.servers {
grid-area: servers;
}
.mychat {
grid-area: mychat;
}
.workout-area {
grid-area: workout-area;
} }
.side-bar p { .side-bar p {
color: #E0E0E0; color: #E0E0E0;
text-align: left; text-align: center;
padding-left:25px; padding-left:25px;
font-family: Arial; font-family: Arial;
font-size: 20px; font-size: 6px;
padding-top: 2px;
padding-bottom: 2px;
} }
.page-title{ .page-title{
@ -27,10 +56,10 @@ body {
} }
.main-content { .main-content {
padding-left:5px; padding-left:10px;
grid-area: main-content;
text-align: left; text-align: left;
background-color: #424242; background-color: #424242;
height: auto;
} }
.main-content p { .main-content p {
@ -59,38 +88,36 @@ body {
color: rgb(215, 77, 0); color: rgb(215, 77, 0);
} }
.clay {
grid-area: clay;
}
main { main {
padding-top: 10px; padding-top: 10px;
/*
display: grid; display: grid;
grid-template-columns: 15% 1% 84%; grid-template-columns: 15% 1% 84%;
grid-template-areas: "side clay main-content"; grid-template-areas: "side clay main-content";
*/
height: auto; height: auto;
margin-bottom: 50px; margin-bottom: 10px;
} }
footer { footer {
text-align: right;
padding-left: 100px;
padding-right: 100px;
background-color: #424242; background-color: #424242;
position: fixed;
bottom: 0;
left: 0;
width:100%;
height: 7%; height: 7%;
} }
footer p { footer p {
padding-left: 15px; padding-left: 15px;
padding-top: 10px; padding-top: 20px;
padding-bottom: 10px; padding-bottom: 20px;
color: #E0E0E0; color: #E0E0E0;
font-family: Arial; font-family: Arial;
font-size: 15px; font-size: 18px;
} }
h1 { h1 {
padding-top: 10px;
text-align: center; text-align: center;
color: #609A21; color: #609A21;
font-family: Arial; font-family: Arial;

17
workout.html
View File

@ -15,14 +15,13 @@
</header> </header>
<main> <main>
<section class="side-bar"> <section class="side-bar">
<p><a href="index.html">Главная</a></p> <p class="mainp"><a href="index.html">Главная</a></p>
<p><a href="http:\\176.114.129.4:3000">Gitea</a></p> <p class="gitea"><a href="http:\\176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p> <p class="servers"><a href="servers.html">Сервера</a></p>
<p><a href="mychat.html">MyChat</a></p> <p class="mychat"><a href="mychat.html">MyChat</a></p>
<p><a href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="clay"> </section> <section class="main-content" id="main-content">
<section class="main-content">
<h1 class="page-title">Программа тренировок</h1> <h1 class="page-title">Программа тренировок</h1>
<table class="workout-table"> <table class="workout-table">
<tr> <tr>
@ -155,13 +154,13 @@
<td class="count">3x10</td> <td class="count">3x10</td>
</tr> </tr>
</table> </table>
<br>
</section> </section>
</main> </main>
<footer> <footer>
<section> <section>
<p>© Dhaverd 2022</p> <p>® Dhaverd 2022</p>
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>