Update CSS

t2bot · Feb 9, 2024 · d41c4ae · d41c4ae
1 parent ab31ae8
commit d41c4ae
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 20 deletions.
diff --git a/assets/css/_vars.css b/assets/css/_vars.css
@@ -5,6 +5,7 @@
   --accent-color: #a254f5;
   --accent-border-color: rgb(105, 105, 105, 0.9);
   --fg-link-color: rgba(255, 255, 255, 0.75);
-  --fg-link-hover-color: rgba(255, 255, 255, 1);
+  --fg-link-hover-color: #a254f5;
   --fg-footer-color: rgba(255, 255, 255, 0.75);
+  --container-bg-color: #19191c;
 }
diff --git a/assets/css/desktop.css b/assets/css/desktop.css
@@ -6,56 +6,64 @@ body {
 	margin: 0;
 	-ms-text-size-adjust: 100%;
 	-webkit-text-size-adjust: 100%;
-	line-height: 1.1;
-	font-family: 'Lato', sans-serif;
+	line-height: 1.5;
+	font-family: 'Roboto', sans-serif;
 	color: var(--fg-color);
 
 	display: grid;
 	min-height: 100%;
 	grid-template-rows: 1fr auto;
 }
 
+h1, h2, h3, h4, h5, h6 {
+	font-family: 'Archivo Black', 'Roboto', sans-serif;
+	line-height: 1.4;
+}
+
 html,body {
 	background-color: var(--bg-color);
-	background: radial-gradient(84.9% 52.16% at 31.56% 3.43%, var(--bg-start-color) 0%, var(--bg-color) 100%);
+	/* background: radial-gradient(84.9% 52.16% at 31.56% 3.43%, var(--bg-start-color) 0%, var(--bg-color) 100%); */
 }
 
 main {
   width: 80%;
 	max-width: 1200px;
 	min-width: 300px;
-  margin-left: 192px;
+  margin-left: 32px;
 	margin-top: 32px;
 	margin-bottom: 64px;
-  font-weight: 300;
-}
-
-main h1, main h2 {
-  font-weight: 800;
 }
 
 header {
+	display: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
 	padding: 32px 40px;
+	background: linear-gradient(135deg, var(--bg-start-color), transparent);
+}
+
+header .header-int {
 	display: flex;
 	flex-direction: row;
 }
 
-header > p {
+.header-int > p {
 	padding: 0;
 	margin: 0;
 }
 
-header > p:first-child {
+.header-int > p:first-child {
 	width: 203px; /* logo width */
 }
 
-header > p:nth-child(2) {
+.header-int > p:nth-child(2) {
 	width: 100%;
 	align-self: center;
 	text-align: right;
 }
 
-header > p:nth-child(2) > a {
+.header-int > p:nth-child(2) > a {
 	margin-left: 24px;
 }
 
@@ -76,3 +84,13 @@ footer {
 	text-align: center;
 	opacity: 0.5;
 }
+
+pre {
+	white-space: pre-wrap;
+  word-wrap: break-word;
+	display: inline-block;
+}
+
+pre, code {
+	font-family: 'Inconsolata', monospace;
+}
diff --git a/assets/css/docs_page_desktop.css b/assets/css/docs_page_desktop.css
@@ -1,7 +1,6 @@
 .docs-page {
   display: flex;
   flex-direction: row;
-  width: 95%;
 }
 
 .docs-page .toc {

diff --git a/assets/css/docs_page_mobile.css b/assets/css/docs_page_mobile.css
@@ -0,0 +1,18 @@
+@media (max-width: 800px) {
+  .docs-page {
+    flex-direction: column;
+  }
+
+  .docs-page .toc {
+    width: 100%;
+    border-bottom: 1px solid var(--accent-border-color);
+    border-right: none;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-bottom: 16px;
+  }
+
+  .docs-page .content {
+    padding: 0;
+  }
+}
diff --git a/assets/css/mobile.css b/assets/css/mobile.css
@@ -1,15 +1,15 @@
 @media (max-width: 800px) {
-  header {
+  header .header-int {
     flex-direction: column;
   }
 
-	header > p:nth-child(2) {
+	.header-int > p:nth-child(2) {
 		display: flex;
 		flex-direction: column;
     margin-top: 8px;
 	}
 
-	header > p:nth-child(2) > a {
+	.header-int > p:nth-child(2) > a {
 		display: flex;
 		flex-direction: column;
 		text-align: left;
@@ -19,5 +19,6 @@
   main {
     margin-left: 40px;
     margin-right: 40px;
+    margin-top: 0;
   }
 }
diff --git a/assets/css/site.css b/assets/css/site.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inconsolata:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet');
 
 @import url("_vars.css");
 

diff --git a/code/page.js b/code/page.js
@@ -23,7 +23,9 @@ const Page = ({ title, stylesheet, header, main, footer, script, _relativeURL, _
 	<body>
 		<div className="top">
 			<header role="banner">
-				{ header }
+				<div className="header-int">
+					{ header }
+				</div>
 			</header>
 
 			<main>