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

css rebuild

Browse source
This commit is contained in:
Nikita 2024-11-20 11:02:07 +02:00
parent d2d29a0e90
commit 230c03da48
1 changed files with 128 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

296
style.css
View file

@ -1,216 +1,173 @@
body, a, p, h1, h2, h3, h5, ul, li {
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0} margin: 0;
body{ padding: 0;
background-color: var(--background-color); }
color:var(--main-color); body {
background-color: var(--background-color);
color: var(--main-color);
font-family: 'GeistMono', sans-serif;
font-weight: 200;
font-size: 1rem;
} }
html { html {
font-size: 100%; font-size: 100%;
} }
@font-face {
font-family: 'GeistMono';
src: url('font/GeistMono.ttf') format('truetype');
}
h1{
font-family: 'GeistMono';
font-size: 2.5rem;
font-weight: 700;
}
h2{
font-family: 'GeistMono';
font-size: 2rem;
font-weight: 700;
}
h3{
font-family: 'GeistMono';
font-size: 1.5rem;
font-weight: 700;
}
p, a, ul, li, body{
font-family: 'GeistMono';
font-weight: 200;
font-size: 1rem;
}
:root { :root {
--main-color: #eee; --main-color: #eee;
--accent-color: #989898; --accent-color: #989898;
--background-color: #000; --background-color: #000;
} }
.nav_butt_1:link, .nav_butt_1:visited { @font-face {
box-sizing: content-box; font-family: 'GeistMono';
border: solid var(--main-color) 1px; src: url('font/GeistMono.ttf') format('truetype');
color: var(--main-color);
text-align: center;
text-decoration: none;
display: inline-block;
width: 120px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
} }
.nav_butt_1:hover, .nav_butt_1:active { h1, h2, h3 {
font-family: 'GeistMono';
font-weight: 700;
}
.nav_butt_1, .nav_butt_2, .content_butt {
display: inline-block;
text-align: center;
text-decoration: none;
}
.nav_butt_1, .nav_butt_2 {
box-sizing: content-box;
border: 1px solid var(--main-color);
color: var(--main-color);
width: 140px;
padding: 12px 12px;
margin-top: 12px;
}
.nav_butt_1:hover, .nav_butt_2:hover,
.nav_butt_1:active, .nav_butt_2:active {
background-color: var(--main-color); background-color: var(--main-color);
color: var(--background-color); color: var(--background-color);
} }
.nav_butt_2:link, .nav_butt_2:visited { .content_butt {
box-sizing: content-box; font-weight: 500;
border: solid var(--main-color) 1px; color: var(--accent-color);
color: var(--main-color); text-decoration: underline;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
width: 120px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.nav_butt_2:hover, .nav_butt_2:active {
background-color: var(--main-color);
color: var(--background-color);
}
.content_butt:link, .content_butt:visited {
font-weight: 500;
color: var(--accent-color);
text-align: center;
text-decoration: underline;
display: inline-block;
} }
.content_butt:hover, .content_butt:active { .content_butt:hover, .content_butt:active {
background-color: var(--main-color); background-color: var(--main-color);
color: var(--background-color); color: var(--background-color);
} }
.main_container{ .page_container, .main_container {
max-width: 800px; max-height: 100vh;
max-height: 100vh; margin: 0 auto;
text-align: center; text-align: center;
margin: 0 auto;
padding-top: 200px;
} }
.logo{ .main_container {
max-width: 80px; max-width: 800px;
padding-bottom: 30px; padding-top: 200px;
} }
.links{ .nav_box {
padding-top: 100px; height: 100vh;
justify-content: space-between; width: 20%;
display: flex; border-right: 1px solid var(--main-color);
position: fixed;
padding-top: 8vh;
} }
.page_container{ .content_wrap {
max-height: 100vh; width: 80%;
text-align: center; float: right;
margin-left: auto; position: relative;
margin-right: auto; text-align: left;
} }
.nav_box{ .content_box {
height: 100vh; margin: 40px;
border-right: solid 1px var(--main-color); padding-bottom: 40px;
width: 20%;
position: fixed;
padding-top: 10vh;
} }
.content_wrap{ .content_box img {
text-align: left; max-width: 100%;
width: 80%;
float: right;
display: block;
position: relative;
} }
.navigation{ .logo, .logo_home {
padding-top: 48px; max-width: 80px;
width: 130px; padding-bottom: 28px;
margin:0 auto; border: none;
background-color: transparent;
} }
.content_box{ .post_box {
margin: 40px; width: 100%;
padding-bottom: 40px; padding: 8px;
border: 1px solid var(--accent-color);
margin-bottom: 20px;
} }
.content_box img{ .post_name {
max-width: 100%; margin-bottom: 20px;
text-transform: uppercase;
} }
.goback{ .post_description, .post_date {
margin-bottom: 24px; margin-bottom: 20px;
} }
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active { .post_date {
border: none; float: right;
background-color: transparent;
} }
.contacts{ .multiline {
margin: 0 auto; display: -webkit-box;
padding-top: 40vh;
width: 300px;
}
.post_box{
width: 100%;
padding: 10px;
border: solid 1px var(--accent-color);
margin-bottom: 20px;
}
.post_name{
margin-bottom: 20px;
text-transform: uppercase;
}
.post_description{
margin-bottom: 20px;
}
.multiline{
display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.post_date{ .links {
float: right; padding-top: 100px;
} margin: 0 auto;
.readmore{
} }
.burger-toggle { .burger-toggle {
display: none; display: none;
} }
.burger { .burger {
display: none; display: none;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
width: 30px; width: 32px;
z-index: 2; z-index: 2;
} }
.burger .line { .burger .line {
width: 100%; width: 100%;
height: 3px; height: 4px;
background-color: var(--main-color); background-color: var(--main-color);
margin: 5px 0; margin: 4px 0;
}
.contacts {
margin: 0 auto;
padding-top: 40vh;
width: 300px;
}
.navigation {
padding-top: 48px;
margin: 0 auto;
}
.goback {
margin-bottom: 24px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
html { html {
font-size: 85%; font-size: 85%;
} }
.logo, .logo_home{
max-width: 28px;
padding: 0;
}
.main_container{ .main_container{
max-width: 90%; max-width: 95%;
max-height: 100vh; max-height: 100vh;
text-align: center; text-align: center;
padding-top: 25vh; padding-top: 24vh;
}
.logo{
max-width: 80px;
padding-bottom: 30px;
} }
.links{ .links{
padding-top: 50px; padding-top:48px;
justify-content: space-between; justify-content: space-between;
display: block; display: block;
} }
.content_wrap{ .content_wrap{
text-align: left;
width: 100%; width: 100%;
float: left;
display: block;
position: relative;
margin-top: 12px; margin-top: 12px;
} }
.content_box{ .content_box{
width: 90%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
.post_box{ .post_box{
@ -219,8 +176,6 @@ p, a, ul, li, body{
margin-bottom: 20px; margin-bottom: 20px;
} }
.logo{ .logo{
padding: 0;
margin: 0;
width: 40px; width: 40px;
} }
.nav_box { .nav_box {
@ -228,20 +183,23 @@ p, a, ul, li, body{
border-right: none; border-right: none;
border-bottom: solid 1px var(--main-color); border-bottom: solid 1px var(--main-color);
position: relative; position: relative;
padding-top: 10px; padding-top: 8px;
padding-bottom: 10px; padding-bottom: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: auto; height: auto;
grid-gap:20px; grid-gap:20px;
} }
.nav_butt_1, .nav_butt_2 {
width: 120px;
}
.burger { .burger {
display: block; display: block;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 20px; top: 8px;
right: 20px; right: 20px;
width: 30px; width: 28px;
height: 24px; height: 24px;
z-index: 2; z-index: 2;
} }
@ -255,11 +213,9 @@ p, a, ul, li, body{
.burger-toggle:checked + .burger .line:nth-child(1) { .burger-toggle:checked + .burger .line:nth-child(1) {
transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);
} }
.burger-toggle:checked + .burger .line:nth-child(2) { .burger-toggle:checked + .burger .line:nth-child(2) {
opacity: 0; opacity: 0;
} }
.burger-toggle:checked + .burger .line:nth-child(3) { .burger-toggle:checked + .burger .line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);
} }
@ -292,10 +248,8 @@ p, a, ul, li, body{
display: block; display: block;
} }
.navigation a { .navigation a {
width: ; padding: 16px;
border: none; text-align: center;
padding: 15px;
text-align: left;
} }
.burger-toggle:checked ~ .navigation { .burger-toggle:checked ~ .navigation {
display: block; display: block;