website/static/custom.css

202 lines
3 KiB
CSS
Raw Normal View History

2023-10-21 12:46:00 +03:00
@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; */
}
2024-01-22 12:01:17 +03:00
img {
2024-01-22 20:10:36 +03:00
max-inline-size: 80%;
2024-01-22 12:24:11 +03:00
block-size: auto;
2024-01-22 13:07:13 +03:00
display: block;
margin-left: auto;
margin-right: auto;
2024-01-22 12:01:17 +03:00
}
2023-10-21 12:46:00 +03:00
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;
2024-03-13 20:35:24 +03:00
overflow-x: auto;
2023-10-21 12:46:00 +03:00
}
/* РАЗМЕТКА */
.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;
}
2023-12-27 12:17:31 +03:00
.mc pre {
background-color: #0d0e13;
}
2023-10-21 12:46:00 +03:00
.mc table {
display: block;
2024-03-13 20:35:24 +03:00
overflow-x: auto;
2023-10-21 12:46:00 +03:00
width: 100%;
flex-direction: column;
2024-03-13 19:57:11 +03:00
text-align: center;
2023-10-21 12:46:00 +03:00
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;
}
}