Tweak the style

This commit is contained in:
Andrey Golovizin 2020-01-19 16:54:43 +01:00
parent 02ad5fed3d
commit ee3f27f7c2
2 changed files with 30 additions and 10 deletions

View file

@ -1,16 +1,30 @@
/* [ON BIG SCREEN] */ /* [ON BIG SCREEN] */
/* Wrapper */ /* Wrapper */
.container {
max-width: 940px;
margin: 3rem auto
}
.content {
float: left;
width: 80%;
}
.sidebar {
float: left;
width: 20%;
}
#page-nav { #page-nav {
/* width: 100%; */ /* width: 100%; */
background: #ff0; background: #276749;
padding: 3px;
border-radius: 10px;
border: 1px solid #ee0;
display: block; display: block;
/* If you want the navigation bar to stick on top /* If you want the navigation bar to stick on top
position: sticky; position: sticky;
top: 0; top: 0;
*/ */
padding-left: 0;
margin: 2rem 0;
} }
/* Hide Hamburger */ /* Hide Hamburger */
@ -26,12 +40,17 @@
} }
#page-nav ul li { #page-nav ul li {
display: inline-block; display: inline-block;
padding: 10px; padding: 16px;
font-size: 18px;
box-sizing: border-box; box-sizing: border-box;
} }
#page-nav ul li a { #page-nav ul li a {
/* color: #fff; */ /* color: #fff; */
text-decoration: none; text-decoration: none;
color: white;
}
#page-nav ul li.selected {
background: #38A169;
} }
/* [ON SMALL SCREENS] */ /* [ON SMALL SCREENS] */
@ -51,7 +70,7 @@
display: block; display: block;
} }
#page-nav ul li { #page-nav ul li {
border-top: 1px solid #333; border-top: 1px solid #22543D;
} }
/* Toggle show/hide menu on checkbox click */ /* Toggle show/hide menu on checkbox click */

View file

@ -6,17 +6,18 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
<style type="text/css"> <style type="text/css">
.nav { #page-nav {
padding-left: 0; padding-left: 0;
margin: 2rem 0;
} }
.nav li { #page-nav li {
display: inline; display: inline;
list-style-type: none; list-style-type: none;
padding-right: 20px; padding-right: 20px;
} }
.container { .container {
max-width: 940px; max-width: 940px;
margin: 0 auto margin: 3rem auto
} }
.content { .content {
float: left; float: left;
@ -32,7 +33,7 @@
<body> <body>
{% cms_toolbar %} {% cms_toolbar %}
<div class="container"> <div class="container">
<h1>{% page_attribute "page_title" %}</h1> <h1>Инженер-строитель В.&#8239Н.&#8239Головизин</h1>
<nav id="page-nav"> <nav id="page-nav">
<label for="hamburger">&#9776;</label> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"/> <input type="checkbox" id="hamburger"/>