up style

html-websites/cipherbliss_blog/style.css

@@ -55,22 +55,39 @@ body {
 }
 
 /*  Improve media defaults */
-img,
-picture,
-video,
-canvas,
-svg {
+.content img,
+.content picture,
+.content video,
+.content canvas,
+.content svg {
   display: block;
   margin-top: 1rem;
   margin-bottom: 1rem;
   max-width: 100%;
+  width: 100%;
 }
 
 pre, .sourceCode {
   overflow: auto;
 }
 
-/* Inherit fonts for form controls */
+a {
+  display: inline-block;
+  border-radius: 1rem;
+  color: rgb(0, 123, 255);
+  text-decoration: none;
+}
+main a:hover {
+  background: #303030;
+  color: #dedede;
+}
+.nav a, .page__index a {
+  padding: 0.55rem 2rem;
+  display: block;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
 input,
 button,
 textarea,
@@ -78,18 +95,8 @@ select {
   font: inherit;
 }
 
-/* Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
 p {
+  overflow-wrap: break-word;
   text-wrap: pretty;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
@@ -114,6 +121,7 @@ h3,
 h4,
 h5,
 h6 {
+  overflow-wrap: break-word;
   text-wrap: balance;
   line-height: 1.3em;
 }
@@ -169,6 +177,17 @@ li {
   margin: 1rem;
 }
 
+#page {
+  background: #CCC;
+}
+
+.body-wrap {
+  background: #FFF;
+  padding: 5% 6%;
+  margin-bottom: 5%;
+  margin-top: 1rem;
+}
+
 .content {
   min-height: 50rem;
 }
@@ -178,20 +197,6 @@ li {
   padding: 2rem;
 }
 
-a {
-  display: inline-block;
-  padding: 0.55rem 2rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  border-radius: 1rem;
-  color: rgb(0, 123, 255);
-  text-decoration: none;
-}
-main a:hover {
-  background: #303030;
-  color: #dedede;
-}
-
 @media (max-width: 75ch) {
   body {
     padding: 0;