narayana/anotherim-website
3
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

variables for colors

Browse source
This commit is contained in:
Nikita 2024-11-19 18:31:01 +02:00
parent 4922152e69
commit bf7566d09c
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
style.css
View file

@ -11,7 +11,6 @@ html {
font-family: 'GeistMono'; font-family: 'GeistMono';
src: url('font/geistmono.ttf') format('truetype'); src: url('font/geistmono.ttf') format('truetype');
} }
h1{ h1{
font-family: "GeistMono"; font-family: "GeistMono";
font-size: 2.5rem; font-size: 2.5rem;
@ -32,12 +31,18 @@ p, a, ul, li, body{
font-weight: 200; font-weight: 200;
font-size: 1rem; font-size: 1rem;
} }
/*ЦВЕТ МЕНЯТЬ ТУТА*/
:root {
--main-color: #eee; /* Это цвет текста и всяких обводок*/
--accent-color: #989898; /* акцент */
--background-color: #000; /* цвет фона */
}
/*КНОПКИ НА ГЛАВНОЙ СТРАНИЦЕ*/ /*КНОПКИ НА ГЛАВНОЙ СТРАНИЦЕ*/
.nav_butt_1:link, .nav_butt_1:visited { .nav_butt_1:link, .nav_butt_1:visited {
box-sizing: content-box; box-sizing: content-box;
border: solid #eee 1px; /*Цвет рамки кнопки*/ border: solid var(--main-color) 1px; /*Цвет рамки кнопки*/
color: #eee; /*Цвет текста кнопки*/ color: var(--main-color); /*Цвет текста кнопки*/
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -47,15 +52,15 @@ p, a, ul, li, body{
margin-top: 10px; margin-top: 10px;
} }
.nav_butt_1:hover, .nav_butt_1:active { .nav_butt_1:hover, .nav_butt_1:active {
background-color: #eee;/*цвет кнопки при наведении*/ background-color: var(--main-color);/*цвет кнопки при наведении*/
color: #000; /*цвет текста кнопки при наведении*/ color: var(--background-color); /*цвет текста кнопки при наведении*/
} }
/*КНОПКИ НА СТРАНИЦАХ С БОКОВЫМ НАВИГАТОРОМ*/ /*КНОПКИ НА СТРАНИЦАХ С БОКОВЫМ НАВИГАТОРОМ*/
.nav_butt_2:link, .nav_butt_2:visited { .nav_butt_2:link, .nav_butt_2:visited {
box-sizing: content-box; box-sizing: content-box;
border: solid #eee 1px; /*Цвет рамки кнопки*/ border: solid var(--main-color) 1px; /*Цвет рамки кнопки*/
color: #eee; /*Цвет текста кнопки*/ color: var(--main-color); /*Цвет текста кнопки*/
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -66,21 +71,21 @@ p, a, ul, li, body{
margin-top: 10px; margin-top: 10px;
} }
.nav_butt_2:hover, .nav_butt_2:active { .nav_butt_2:hover, .nav_butt_2:active {
background-color: #eee;/*цвет кнопки при наведении*/ background-color: var(--main-color);/*цвет кнопки при наведении*/
color: #000; /*цвет текста кнопки при наведении*/ color: var(--background-color); /*цвет текста кнопки при наведении*/
} }
/*КНОПКИ КОНТЕНТА*/ /*КНОПКИ КОНТЕНТА*/
.content_butt:link, .content_butt:visited { .content_butt:link, .content_butt:visited {
font-weight: 500; font-weight: 500;
color: #989898; /*Цвет текста кнопки*/ color: var(--accent-color); /*Цвет текста кнопки*/
text-align: center; text-align: center;
text-decoration: underline; text-decoration: underline;
display: inline-block; display: inline-block;
} }
.content_butt:hover, .content_butt:active { .content_butt:hover, .content_butt:active {
background-color: #eee;/*цвет кнопки при наведении*/ background-color: var(--main-color);/*цвет кнопки при наведении*/
color: #000; /*цвет текста кнопки при наведении*/ color: var(--background-color); /*цвет текста кнопки при наведении*/
} }
/*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/ /*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/
@ -110,7 +115,7 @@ p, a, ul, li, body{
} }
.nav_box{ .nav_box{
height: 100vh; height: 100vh;
border-right: solid 1px #eee; border-right: solid 1px var(--main-color);
width: 20%; width: 20%;
position: fixed; position: fixed;
padding-top: 10vh; padding-top: 10vh;
@ -147,7 +152,7 @@ p, a, ul, li, body{
.post_box{ .post_box{
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: solid 1px rgba(238, 238, 238, 0.2); /*обводка новостного дропа*/ border: solid 1px var(--accent-color); /*обводка новостного дропа*/
margin-bottom: 20px; margin-bottom: 20px;
} }
.post_name{ .post_name{
@ -185,7 +190,7 @@ p, a, ul, li, body{
.burger .line { .burger .line {
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: #eee; background-color: var(--main-color);
margin: 5px 0; margin: 5px 0;
} }
/*Для девайсов с шириной до 768пиксов*/ /*Для девайсов с шириной до 768пиксов*/
@ -239,7 +244,7 @@ p, a, ul, li, body{
.nav_box { .nav_box {
width: 100%; width: 100%;
border-right: none; border-right: none;
border-bottom: solid 1px #eee; border-bottom: solid 1px var(--main-color);
position: relative; position: relative;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -262,7 +267,7 @@ p, a, ul, li, body{
.burger .line { .burger .line {
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: #eee; background-color: var(--main-color);
margin: 5px 0; margin: 5px 0;
transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease; transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease;
} }
@ -290,9 +295,9 @@ p, a, ul, li, body{
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: #000; background-color: var(--background-color);
flex-direction: column; flex-direction: column;
border-bottom: solid 1px #eee; border-bottom: solid 1px var(--main-color);
align-items: center; align-items: center;
transform: translateY(-20px); /* Начальная позиция меню */ transform: translateY(-20px); /* Начальная позиция меню */
opacity: 0; /* Меню скрыто */ opacity: 0; /* Меню скрыто */