site.css in utopia-project-0.13.0

- old
+ new

@@ -31,10 +31,14 @@
 
 p code:first-child, p code:last-child {
 	padding: 0;
 }
 
+p img {
+	max-width: 100%;
+}
+
 pre {
 	/* -moz-tab-size is still required by Firefox */
 	--tab-size: 2;
 	tab-size: var(--tab-size);
 	-moz-tab-size: var(--tab-size);
@@ -78,37 +82,68 @@
 }
 
 body {
 	margin: 0;
 	padding: 0;
+}
+
+header {
+	padding: 0.5rem;
 	
+	background-color: var(--header-color);
+	border-bottom: 0.2rem solid var(--accent-color);
+}
+
+main {
+	scroll-margin-top: 2rem;
+	
 	/* Force the element to contain margins */
 	display: flow-root;
-	min-height: 100vh;
-		
-	max-width: 48rem;
+	
 	margin: 0 auto;
+	max-width: 48rem;
 }
 
-header, h1, h2, h3, h4, h5, h6, p, pre, ul, dl, ol {
+:target {
+	background-color: var(--header-color);
+}
+
+section {
+	border-radius: 1rem;
+	padding: 0.1rem 0;
+}
+
+main > section {
+	border-radius: 1rem;
+	margin: 4rem 0;
+}
+
+section > section {
+	margin: 1rem 0;
+}
+
+footer {
+	text-align: right;
+	font-size: 0.8rem;
+	
+	padding: 1rem;
+	margin-top: 5rem;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, ul, dl, ol {
 	margin: 1rem;
+	border-radius: 0.5rem;
 }
 
 h1 span {
 	display: inline-block;
 }
 
 header img {
 	max-height: 50vh;
 }
 
-nav {
-	margin: 1rem;
-	font-size: 0.8rem;
-	color: #aaa;
-}
-
 li, dt, dd {
 	margin: 0.5rem 0;
 }
 
 details dt, details dd {
@@ -127,44 +162,32 @@
 
 h1 {
 	margin-bottom: 4rem;
 }
 
-h2 {
-	margin-top: 6rem;
-}
-
-h3 {
-	margin-top: 4rem;
-}
-
-h4, h5, h6 {
-	margin-top: 2rem;
-}
-
 img {
 	border: none;
 }
 
 a {
 	color: var(--accent-color);
 	text-decoration: none;
 }
 
+a.self {
+	visibility: hidden;
+}
+
+*:hover > a.self {
+	visibility: visible;
+}
+
 a:hover {
 	color: var(--accent-hover-color);
 }
 
 pre {
 	overflow: auto;
-}
-
-footer {
-	text-align: right;
-	font-size: 0.8rem;
-	
-	margin: 1rem;
-	margin-top: 5rem;
 }
 
 details {
 	margin: 1rem;
 	border: 1px solid #aaa;