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