- removed nav

- moved cv to the hero section
- also changed it to collapse all at once instead of by sub titles
- and changed grid to auto flow instead of using named areas

styles/elements/cv.css

@@ -1,38 +1,34 @@
-
-#cv {
-	/*
-	place-items: center;
-	place-self: stretch;
-	*/
-	grid-template-columns: 1fr minmax(auto, 900px) 1fr;
-}
-#cv header {
-	height: 300px;
-}
-#cv article {
-	/*
+.cv {
+	width: auto;
 	max-width: 900px;
-	*/
 }
-#cv article h2 {
-	text-align: center;
-}
-#cv #cv_ascii {
-	/*
-	place-self: center;
-	*/
-}
-#cv #cv_download {
-	/*
-	place-self: center;
-	*/
-}
-#cv details {
-	margin: 0px 0px 0px 25px;
-}
-#cv summary {
-	padding: 10px 0px;
-}
-#cv .mouse {
-	margin-top: 100px;
+
+details.cv {
+	display: flex;
+	summary {
+		position: relative;
+		list-style-position: outside;
+		list-style-type: "▸ ";
+		font-size: 1.8rem;
+		margin: auto;
+		width: fit-content;
+		.open {
+			display: none;
+		}
+		.close {
+			display: inline;
+		}
+	}
+	&[open] summary {
+		list-style-type: "▾ ";
+		.open {
+			display: inline;
+		}
+		.close {
+			display: none;
+		}
+	}
+	> *:last-child {
+		margin-bottom: 100px;
+	}
 }

styles/elements/hero.css

@@ -1,16 +1,7 @@
-
 #hero {
-	grid-template-rows: 1fr auto auto;
 	min-height: 100vh;
-/*
-	grid-template-rows: 1fr 50px auto auto;
-*/
+	grid-template-rows: auto auto 1fr;
+	header {
+		padding-top: 50px;
+	}
 }
-#hero header {
-	padding-top: 50px;
-}
-#hero .mouse {
-}
-#hero .banner {
-}
-

styles/elements/sections.css

@@ -1,41 +1,34 @@
-
-section header  { grid-area: header; }
-section article { grid-area: article; }
-section .mouse  { grid-area: mouse;  }
-section .banner { grid-area: banner; }
-
 section {
 	display: grid;
 	margin: 0px;
 	width: 100vw;
-	grid:
-    ' .         header    .        ' auto
-    ' .         article   .        ' auto
-    ' .         mouse     .        ' auto
-    ' banner    banner    banner   ' auto
-	  / 1fr       auto      1fr      ;
+	grid: 1fr auto 1fr / auto;
 	grid-gap: 10px;
 	gap: 10px;
 	min-height: 100vh;
-}
+	justify-items: center;
 
-section header {
-	display: flex;
-	flex-direction: column;
-	place-content: center;
-}
-section footer {
-	display: flex;
-	flex-direction: column;
-}
-section header h1 {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-}
+	header {
+		display: flex;
+		flex-direction: column;
+		place-content: center;
 
-section .banner {
-	overflow-x: hidden;
-}
+		h1 {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+	}
 
+	> * {
+		grid-column: 2 / span 1;
+	}
+	> .full_width {
+		grid-column: 1 / span 3;
+	}
+
+	.banner {
+		overflow-x: hidden;
+	}
+}

styles/style.css

@@ -4,7 +4,7 @@
 html {
 	font-size: var(--base_font_size);
 }
-body, main {
+body {
 	overflow-x: clip;
 	margin: auto;
 	width: fit-content;

styles/text.css

@@ -34,19 +34,7 @@ li {
 li::marker {
 	font-size: 1.8rem;
 }
-details summary {
-	/*
-	list-style-position: inside;
-	*/
-	list-style-position: outside;
-}
-details summary {
-	font-size: 1.8rem;
-	list-style-type: "▸ ";
-}
-details[open] summary {
-	list-style-type: "▾ ";
-}
+
 a:empty::after {
 	content: attr(href);
 }