improve css and html

pavel-demin · Nov 6, 2024 · 72a37d2 · 72a37d2
1 parent 2743bda
commit 72a37d2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 44 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,17 +10,17 @@
 <title>{% if title %}{{ title }}{% else %}{{ site.title }}{% endif %}</title>
 </head>
 <body>
-<div class="header">
-<div class="menu">
+<header>
+<div>
 <a href="/">{{ site.title }}</a>
 </div>
-<div class="menu">
+<div>
 <a href="{{ site.source }}">Source</a>
 <a href="{{ site.issues }}">Issues</a>
 </div>
-</div>
-<div class="content">
+</header>
+<article>
 {{ content -}}
-</div>
+</article>
 </body>
 </html>
diff --git a/css/main.css b/css/main.css
@@ -33,56 +33,51 @@ body {
   padding-bottom: 2em;
 }
 
+article {
+  background-color: #fff;
+  border-radius: 0.5em;
+  padding: 2em 1em;
+}
+
+article > * + * {
+  margin-top: 1em;
+}
+
 h1,
 h2 {
   font-weight: normal;
   line-height: 1.2;
 }
 
 h1 {
-  font-size: 200%;
+  font-size: 225%;
 }
 
 h2 {
   font-size: 150%;
 }
 
-h1,
-h2,
 ol,
-p,
-pre,
-table,
 ul {
-  margin-top: 1em;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin-top: 0;
-}
-
-ol,
-ul {
-  list-style-position: outside;
   padding-left: 2em;
 }
 
 ol {
-  list-style-type: decimal;
+  list-style: decimal outside;
 }
 
 ul {
-  list-style-type: disc;
+  list-style: disc outside;
 }
 
-ol > li,
-ul > li {
+li {
   padding-left: 0.25em;
 }
 
+li > p {
+  margin-top: 1em;
+}
+
 ol > li::marker {
   color: #808080;
 }
@@ -123,7 +118,6 @@ pre {
 }
 
 pre code {
-  background-color: transparent;
   padding: 0;
   white-space: pre;
 }
@@ -144,30 +138,20 @@ img {
   max-width: 100%;
 }
 
-.content {
-  background-color: #fff;
-  border-radius: 0.5em;
-  padding: 2em 1em;
-}
-
-.content > :first-child {
-  margin-top: 0;
-}
-
-.header {
+header {
   justify-content: space-between;
   padding: 0.5em 1em;
 }
 
-.header,
-.menu {
+header,
+header div {
   column-gap: 1em;
   display: flex;
   flex-wrap: wrap;
 }
 
 @media print {
-  .header {
+  header {
     display: none;
   }
 }