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

224
style.css
View file

@ -1,168 +1,117 @@
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;
}
body {
background-color: var(--background-color); background-color: var(--background-color);
color:var(--main-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); }
h1, h2, h3 {
font-family: 'GeistMono';
font-weight: 700;
}
.nav_butt_1, .nav_butt_2, .content_butt {
display: inline-block;
text-align: center; text-align: center;
text-decoration: none; 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 { .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;
border: solid var(--main-color) 1px;
color: var(--main-color);
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; font-weight: 500;
color: var(--accent-color); color: var(--accent-color);
text-align: center;
text-decoration: underline; 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;
text-align: center;
margin: 0 auto; margin: 0 auto;
text-align: center;
}
.main_container {
max-width: 800px;
padding-top: 200px; padding-top: 200px;
} }
.logo{ .nav_box {
max-width: 80px;
padding-bottom: 30px;
}
.links{
padding-top: 100px;
justify-content: space-between;
display: flex;
}
.page_container{
max-height: 100vh;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.nav_box{
height: 100vh; height: 100vh;
border-right: solid 1px var(--main-color);
width: 20%; width: 20%;
border-right: 1px solid var(--main-color);
position: fixed; position: fixed;
padding-top: 10vh; padding-top: 8vh;
} }
.content_wrap{ .content_wrap {
text-align: left;
width: 80%; width: 80%;
float: right; float: right;
display: block;
position: relative; position: relative;
text-align: left;
} }
.navigation{ .content_box {
padding-top: 48px;
width: 130px;
margin:0 auto;
}
.content_box{
margin: 40px; margin: 40px;
padding-bottom: 40px; padding-bottom: 40px;
} }
.content_box img{ .content_box img {
max-width: 100%; max-width: 100%;
} }
.goback{ .logo, .logo_home {
margin-bottom: 24px; max-width: 80px;
} padding-bottom: 28px;
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active {
border: none; border: none;
background-color: transparent; background-color: transparent;
} }
.contacts{ .post_box {
margin: 0 auto;
padding-top: 40vh;
width: 300px;
}
.post_box{
width: 100%; width: 100%;
padding: 10px; padding: 8px;
border: solid 1px var(--accent-color); border: 1px solid var(--accent-color);
margin-bottom: 20px; margin-bottom: 20px;
} }
.post_name{ .post_name {
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase; text-transform: uppercase;
} }
.post_description{ .post_description, .post_date {
margin-bottom: 20px; margin-bottom: 20px;
} }
.multiline{ .post_date {
float: right;
}
.multiline {
display: -webkit-box; 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;
@ -173,44 +122,52 @@ p, a, ul, li, body{
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;