Style tweaks

static/css/articles.css

@@ -1,11 +1,13 @@
 .page-container {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 
 .main-content {
   flex: 1;
+  display: flex;
+  justify-content: center;
 }
 
 .author-row {
@@ -26,23 +28,14 @@
 }
 
 .article-container {
+  width: 100%;
   display: flex;
   justify-content: center;
 }
 
-.page-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
 .page-content {
   color: var(--text-color);
-  padding-top: var(--content-padding);
   padding: var(--content-padding);
-  padding-left: var(--content-padding);
-  padding-right: var(--content-padding);
-  max-width: 1000px;
   line-height: var(--line-height);
   text-align: left;
 }
@@ -63,11 +56,17 @@
   margin-bottom: 120px;
 }
 
+.home-page-content h2 {
+  font-weight: normal;
+  font-size: 28px;
+  text-align: center;
+  margin-bottom: 60px !important;
+}
+
 .home-page-content h3 {
   font-weight: normal;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 60px;
 }
 
 .home-page-content h4 {
@@ -108,8 +107,8 @@ figcaption h4 {
 }
 
 .main-article {
+  width: 70%;
   padding: var(--content-padding);
-  width: var(--article-max-width);
   line-height: 1.5;
   text-align: left;
   border-left: var(--border-width) var(--border-style) var(--border-color);
@@ -142,65 +141,118 @@ ol {
   max-width: 100%;
 }
 
-.article-card-flex-container {
+/* article cards */
-  margin-left: var(--content-margin);
+.list-content-container {
-  margin-right: var(--content-margin);
-  margin-bottom: var(--content-margin);
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  justify-content: left;
+  min-width: 100%;
-  line-height: var(--line-height);
+  justify-content: center;
-  text-align: left;
+  padding: var(--content-padding);
-}
-
-.article-card {
-  margin: var(--element-margin);
-  background-color: var(--article-card-bg-color);
-  width: 200px;
-  min-height: 100%;
-  border-radius: var(--radius);
-  transition: background-color 0.3s ease;
-  text-decoration: none; /* Remove underline */
-  position: relative;
-}
-
-.article-card-text p,
-.article-text a {
-  color: var(--subtext-color);
-  margin-bottom: var(--element-margin);
-}
-
-.article-card-summary h3 {
-  color: var(--heading3-color);
-  margin: var(--article-margin);
-  font-size: 16px;
 }
 
 .article-card-summary p {
-  color: var(--subtext-color);
+  color: var(--text-color);
-  margin: var(--article-margin);
+  text-align: left;
+  margin: 0px;
+  border: none;
+}
+
+.article-card-container a:hover {
+  text-decoration: underline;
+  color: var(--text-color) !important;
 }
 
 .article-card-info {
   display: flex;
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.article-card-info img {
+  width: 300px;
+  height: auto;
+  padding: 30px;
+}
+
+@media (max-width: 600px) {
+  .article-card {
+    display: flex;
+    justify-content: center;
+  }
+
+  .article-card-info {
+    display: flex;
+    justify-content: center;
     flex-direction: column;
-  align-items: flex-start;
+    border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  }
+
+  .article-card-info img {
+    width: 80vw;
+    padding: 10px;
+  }
+
+  .article-card-summary {
+    margin-bottom: 30px;
+    padding: 10px;
+  }
+
+  .article-card-summary h3 {
+    margin-top: 0px;
+  }
 }
 
-.article-card-thumbnail {
+/* horizontal list*/
-  max-width: 100%;
+.content-list-container {
-  border-top-left-radius: var(--radius);
+  display: flex;
-  border-top-right-radius: var(--radius);
+  flex-direction: column;
+  min-width: 100%;
+  justify-content: left;
 }
 
-.article-card-author-row {
+.content-list-item {
-  font-size: 10px;
-  position: absolute;
-  bottom: 0;
   width: 100%;
-  margin: var(--element-margin);
 }
 
-.article-card:hover {
+.content-list-container a:hover {
-  background-color: var(--summary-container-hover-bg);
+  text-decoration: underline;
+  color: var(--text-color) !important;
+}
+
+.content-list-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.content-list-info img {
+  padding: 10px;
+  height: 100%;
+  width: 200px;
+}
+
+.content-list-summary {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+}
+
+.content-list-summary p {
+  color: var(--text-color);
+  text-align: left;
+  margin: 0px;
+  border: none;
+}
+
+.content-list-description p {
+  margin: 0px;
+  font-size: 16px;
+  line-height: 1.2;
+  width: 100%;
+}
+
+.content-list-title p {
+  margin-bottom: 1rem;
+  font-size: 22px;
 }

static/css/codeblock.css

@@ -1,4 +1,3 @@
-/* Code block */
 pre {
   overflow-x: auto;
 }
@@ -19,7 +18,6 @@ pre {
   font-size: var(--code-block-font-size);
 }
 
-/* Code block language label */
 .codeblock::before {
   font-family: var(--code-font-family);
   content: attr(data-lang);
@@ -34,7 +32,6 @@ code {
   font-family: var(--code-font-family);
 }
 
-/* Styles for inline <code> */
 :not(pre) > code {
   color: var(--inline-code-color);
   background-color: var(--inline-code-bg-color);

static/css/navbar.css

@@ -13,18 +13,40 @@
 
 .navbar a {
   color: var(--navbar-text-color);
-  padding: 10px;
-  margin: 5px;
   text-decoration: none;
+  padding: 10px 10px 5px 5px;
   transition: background-color 0.3s ease;
-  border-radius: var(--radius);
+  border-bottom: 3px var(--border-style) transparent;
 }
 
 .navbar a:hover {
-  padding: 10px;
-  background-color: var(--navbar-hover);
-  border-radius: var(--radius);
   color: var(--text-color);
+  border-bottom: 3px var(--border-style) var(--hover-color);
+}
+
+.navbar-link-dropdown-content {
+  display: none;
+  position: absolute;
+  flex-direction: column;
+  right: 20px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  background-color: var(--navbar-background-color);
+  border-radius: 5px;
+  border: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.navbar_link_dropdown:hover .navbar-link-dropdown-content {
+  display: flex;
+  border: none;
+}
+
+.navbar-link-dropdown-content a {
+  border: none;
+}
+
+.navbar-link-dropdown-content a:hover {
+  border: none;
+  background-color: var(--navbar-hover);
 }
 
 .navbar__left a {
@@ -38,6 +60,11 @@
   align-items: center;
 }
 
+.navbar__right {
+  display: flex;
+  align-items: center;
+}
+
 .navbar-links ul {
   list-style-type: none;
   margin: 0;
@@ -52,16 +79,3 @@
 .navbar-links ul li a {
   display: inline-block;
 }
-
-.navbar-link-dropdown-content {
-  display: none;
-  position: absolute;
-  flex-direction: column;
-  right: 20px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  background-color: var(--navbar-background-color);
-}
-
-.navbar_link_dropdown:hover .navbar-link-dropdown-content {
-  display: flex;
-}

static/css/style.css

@@ -7,26 +7,30 @@
 :root {
   /* root */
   --font-family: "Montserrat", sans-serif;
-  --code-font-family: "IBM Plex Mono", monospace;
   --font-size: 10;
-  --background-color: #181a1b;
+  --background-color: #f9f9f9;
-  --text-color: #e0ddd9;
+  --text-color: #373841;
   --subtext-color: #6c757d;
-  --link-color: #60b2f1;
+  --link-color: #438bb1;
-  --hover-color: #0056b3;
+  --hover-color: #fc8452;
-  --border-color: #363a3d;
+  --border-color: #c4c9d9;
-  --border-width: 2px;
+  --border-width: 1px;
   --border-style: solid;
 
+  /* navbar/footer */
+  --navbar-background-color: #f9f9f9;
+  --navbar-text-color: #373841;
+  --navbar-hover: #e7e7f5;
+  --footer-background-color: #f9f9f9;
+
   /* headings */
   --heading1-color: #fc8452;
-  --heading2-color: #e0ddd9;
+  --heading2-color: #373841;
-  --heading3-color: #e0ddd9;
+  --heading3-color: #373841;
   --heading1-font-size: 25px;
 
   /* content */
   --author-row-font-size: 12px;
-  --article-max-width: 70%;
   --content-padding: 40px;
   --content-margin: 40px;
   --element-padding: 20px;
@@ -35,20 +39,13 @@
   --heading-margin: 30px;
   --radius: 5px;
   --line-height: 1.5;
-  --summary-container-hover-bg: #343a40;
-  --article-card-bg-color: white;
 
   /* code */
   --code-block-font-size: 10px;
-  --inline-code-color: #aaa4a0;
+  --codeblock-bg-color: #edeeee;
-  --codeblock-bg-color: #1b1d1e;
+  --inline-code-color: #373841;
-  --inline-code-bg-color: #353535;
+  --inline-code-bg-color: #edeeee;
-
+  --code-font-family: "Fira Mono", monospace;
-  /* navbar/footer */
-  --navbar-background-color: #181a1b;
-  --navbar-text-color: #e0ddd9;
-  --navbar-hover: #333;
-  --footer-background-color: #333;
 
   /* table */
   --table-even-row-bg-color: #343a40;
@@ -88,11 +85,18 @@
   background: #454445; /* Background color on hover */
 }
 
+html {
+  height: 100%;
+  display: flex;
+}
+
 body {
   font-family: var(--font-family);
   background-color: var(--background-color);
   font-size: var(--font-size);
   color: var(--text-color);
+  display: flex;
+  width: 100%;
 }
 
 a {
@@ -117,9 +121,5 @@ footer {
   height: 10vh;
   display: flex;
   justify-content: space-between;
-}
+  border-top: var(--border-width) var(--border-style) var(--border-color);
-
-footer a:hover {
-  background-color: #ddd;
-  color: black;
 }