mirror of
https://github.com/grey-cat-1908/website.git
synced 2024-09-22 19:22:02 +03:00
hihi-haha
This commit is contained in:
grey-cat-1908
parent
5a33320482
commit
8f0c07fe89
6 changed files with 229 additions and 3 deletions
|
|
@ -0,0 +1,187 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./fonts/Onest-Bold.ttf");
|
||||
font-family: "Onest";
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./fonts/Onest-Medium.ttf");
|
||||
font-family: "Onest";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./fonts/Onest-Regular.ttf");
|
||||
font-family: "Onest";
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
font-family: var(--font);
|
||||
color: var(--font-color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
button, a {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
background: 0;
|
||||
font-family: var(--font);
|
||||
color: var(--font-color);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
nav {
|
||||
/* ground-color: #0d0e13; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
/* РАЗМЕТКА */
|
||||
.mc h1, .mc h2, .mc h3, .mc h4, .mc h5 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mc a {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mc a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mc code {
|
||||
color: #fff;
|
||||
background-color: #0d0e13;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
.mc table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mc table * {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
static/fonts/Onest-Bold.ttf
Normal file
BIN
static/fonts/Onest-Bold.ttf
Normal file
Binary file not shown.
BIN
static/fonts/Onest-Medium.ttf
Normal file
BIN
static/fonts/Onest-Medium.ttf
Normal file
Binary file not shown.
BIN
static/fonts/Onest-Regular.ttf
Normal file
BIN
static/fonts/Onest-Regular.ttf
Normal file
Binary file not shown.
15
static/javascript/navbar.js
Normal file
15
static/javascript/navbar.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
let navOpen = false
|
||||
function getNavbar() {
|
||||
let navbar = document.getElementById("nav-toggle")
|
||||
|
||||
switch (navOpen) {
|
||||
case false:
|
||||
navbar.classList.add("active")
|
||||
navOpen = true;
|
||||
break;
|
||||
case true:
|
||||
navbar.classList.remove("active")
|
||||
navOpen = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,13 +5,37 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/custom.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
|
||||
<script src="/javascript/navbar.js" async=""></script>
|
||||
<title>Arbuz?</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
{{%CONTENT%}}
|
||||
</main>
|
||||
<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="" class="nav-button">Projects</a></li>
|
||||
<li class="nav-item"><a href="" class="nav-button">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container mc">
|
||||
{{%CONTENT%}}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue