mirror of
https://github.com/grey-cat-1908/website.git
synced 2024-11-11 18:57:26 +03:00
layout update
This commit is contained in:
grey-cat-1908
parent
37933e7db2
commit
ae5680d95c
3 changed files with 20 additions and 141 deletions
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"title": "Arbuz?",
|
||||
"tags": {
|
||||
"description": "The personal internet portal of Marakarka",
|
||||
"author": "Viktor K. (Marakarka)",
|
||||
"keywords": "Marakarka, Arbuz, Programming, Journal, Science, Blog, Experiments, Маракарка, Арбуз, Программирование, Журнал, Наука, Блог, Эксперименты"
|
||||
"description": "The personal internet portal of mrkrk",
|
||||
"author": "Viktor K. (mrkrk)",
|
||||
"keywords": "Marakarka, Arbuz, Programming, Journal, Science, Blog, Experiments, mrkrk, Маракарка, Арбуз, Программирование, Журнал, Наука, Блог, Эксперименты"
|
||||
},
|
||||
"og": {
|
||||
"title": "Arbuz?",
|
||||
"description": "The personal internet portal of Marakarka"
|
||||
"description": "The personal internet portal of mrkrk"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;400;600&display=swap');
|
||||
:root {
|
||||
--font: 'Onest', sans-serif;
|
||||
--bg-color: #15171f;
|
||||
--font-color: #dadada;
|
||||
--font-size: 17px;
|
||||
--nav-font-color: white;
|
||||
--font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -26,13 +26,15 @@
|
|||
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: 1rem auto;
|
||||
background-color: var(--bg-color);
|
||||
font-family: var(--font);
|
||||
color: var(--font-color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: 200;
|
||||
line-height: 1.8;
|
||||
max-width: 64rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
button, a {
|
||||
|
|
@ -45,10 +47,9 @@ button, a {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
nav {
|
||||
/* ground-color: #0d0e13; */
|
||||
|
||||
|
||||
nav * {
|
||||
margin-right: 1rem;
|
||||
color: var(--nav-font-color);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -59,58 +60,9 @@ img {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #9f9f9f;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.nav-avatar img {
|
||||
width: 60px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-toggle-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 10px 40px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
transition: .12s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.mc {
|
||||
margin-top: 50px;
|
||||
overflow-x: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
/* РАЗМЕТКА */
|
||||
.mc h1, .mc h2, .mc h3, .mc h4, .mc h5 {
|
||||
|
|
@ -151,54 +103,10 @@ nav .container {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mc table td, table th {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.nav-toggle-button {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height .5s;
|
||||
}
|
||||
|
||||
.nav-toggle.active {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
nav .container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-toggle .nav-list {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
gap: 15px 0;
|
||||
}
|
||||
.nav-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.nav-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
img[alt=play_button_exp] { width: 120px; }
|
||||
|
|
|
|||
|
|
@ -15,23 +15,6 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
|
||||
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(97207042, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/97207042" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
|
||||
<script src="/javascript/navbar.js" async=""></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
|
||||
|
|
@ -41,25 +24,13 @@
|
|||
<body>
|
||||
<div class="layout">
|
||||
<main>
|
||||
<nav class="">
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="nav-avatar">
|
||||
<div class="nav-name">Marakarka</div>
|
||||
</div>
|
||||
<button onclick="getNavbar()" class="nav-toggle-button"><i class="fa-solid fa-bars"></i></button>
|
||||
|
||||
</div>
|
||||
<div class="nav-toggle" id="nav-toggle">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="/" class="nav-button">Home</a></li>
|
||||
<li class="nav-item"><a href="/projects" class="nav-button">Projects</a></li>
|
||||
<li class="nav-item"><a href="/blog" class="nav-button">Journal</a></li>
|
||||
<nav>
|
||||
<b>mrkrk</b>
|
||||
<a href="/">Home</a>
|
||||
<a href="/projects">Projects</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container mc">
|
||||
<div class="mc">
|
||||
{{%CONTENT%}}
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue