diff --git a/style.css b/style.css index 1fd881d..c6d87c6 100644 --- a/style.css +++ b/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;