initial commit

src/css/banner.css

@@ -0,0 +1,47 @@
+div#fixed-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 10%;
+  width: 100%;
+  background-color: white;
+  border-top: 0.8rem solid grey;
+  border-bottom: 0.8rem solid grey;
+  z-index: 1;
+}
+div.banner.container {
+  flex-flow: row nowrap;
+  width: 100%;
+  height: 100%; 
+}
+div.banner.element {
+  height: 100%;
+}
+div.banner.element.left {
+  width: 10%;
+  min-width: 5rem;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+div.banner.element.right {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+div.left-banner.container {
+  flex-flow: row nowrap;
+  width: 100%;
+  height: 100%;
+}
+img.left-banner.element {
+  max-height: 80%;
+  max-width: 80%;
+  margin: 0 10px;
+}
+div.right-banner.container {
+  flex-flow: row-reverse nowrap;
+  width: 100%;
+  height: 100%;
+}
+div.right-banner.element {
+  width: 100%;
+}

src/css/content.css

@@ -0,0 +1,60 @@
+div#image-col {
+  position: absolute;
+  top: calc(10% + 1.6rem);
+  left: min(15vw, 70px);
+  width: calc(100% - min(15vw, 70px));
+  height: calc(90% - 1.6rem);  
+}
+div.image-row.container {
+  flex-flow: column nowrap;
+  align-items: start;
+  width: calc(100% - 1rem);
+  margin: 0.5rem;
+  border: 0.1rem solid #cccccc;
+  border-radius: 1rem;
+}
+span.anchor {
+  position: absolute;
+  margin-top: calc(-10% - 2rem);
+}
+div.image-row.container:nth-child(odd) {
+  background-color: #fefefe;
+}
+div.image-row.container:nth-child(even) {
+  background-color: #f0f0f0;
+}
+div.image-row.element {
+  height: 100%;
+}
+h3.image-row.element {
+  font-size: max(min(3vw, 1.2rem), 10px);
+  margin: 0.5rem 1rem;
+}
+div.image.container {
+  flex-flow: row wrap;
+  height: 100%;
+}
+img.image.element {
+  height: min(25vw, 7rem);
+  max-width: 16rem;
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+div.navigate.container {
+  justify-content: space-around;
+  width: 100%;
+}
+button.navigate.element {
+  height: 2rem;
+  min-width: 15vw;
+  font-size: 1rem;
+  padding: 0 12px;
+  border: 1px solid grey;
+  border-radius: 5px;
+  margin: 5px 10px;
+  background-color: #eeeeee;
+}
+button.navigate.element:hover {
+  background-color: #cccccc;
+  border: 1px solid grey; 
+}

src/css/general.css

@@ -0,0 +1,26 @@
+html {
+  font-size: 16px;
+}
+body {
+  background-color: white;
+  font-family: Arial, Helvetica, sans-serif;
+  color: black;
+}
+code {
+  font-family: consolas, monospace;
+}
+div.container {
+  display: flex;
+  align-items: center;
+}
+div.leftright.container {
+  height: 100%;
+  width: 100%;
+}
+div.leftright.element {
+  height: 100%;
+}
+div#image-col {
+  flex-grow: 1; 
+}
+

src/css/search-bar.css

@@ -0,0 +1,49 @@
+.search-bar.container {
+  flex-flow: row nowrap;
+  align-items: center;
+  width: calc(100% - 2 * min(4vw, 20px));
+  padding: 5px min(4vw, 20px);
+  height: 30px;
+}
+.search-bar.element {
+  height: 100%;
+}
+.search-bar.element:has(input) {
+  flex-grow: 1;
+}
+div#search-bar {
+  position: relative;
+  width: 65%;
+  height: 30px;
+  border: none;
+  outline: 0;
+}
+input[type="text"] {
+  border: 0.5px solid grey;
+  border-radius: 25px;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  text-rendering: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 12px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: start;
+  appearance: auto;
+}
+
+input[type="text"]:focus {
+  border: 1px solid grey;
+}
+
+div.search-bar > img {
+  position: relative;
+  left: -30px;
+  height: 60%;
+  padding: 25% 0 15% 0;
+}
+

src/css/sidebar.css

@@ -0,0 +1,59 @@
+div.fixed-sidebar {
+  position: fixed;
+  top: calc(10% + 1.6rem);
+  left: 0;
+  height: calc(90% - 1.6rem);
+  width: min(15vw, 70px);
+  background-color: #eeeeee;
+  z-index: 1;
+}
+div.fixed-sidebar:hover {
+  width: auto;
+}
+div.sidebar.container {
+  flex-flow: column nowrap;
+  align-items: start;
+  height: 100%;
+}
+div.sidebar.element {
+  width: 100%;
+}
+div.alias.container {
+  flex-flow: column nowrap;
+  width: 100%;
+  align-items: start;
+}
+div.sidebar.element:has(h2#alias-title) {
+  height: 2.5rem;
+  border-bottom: 0.5px solid black;
+}
+h2#alias-title {
+  margin: min(2vw, 10px);
+  font-size: min(5vw, 18px);
+}
+div.sidebar.element:has(div.alias.container) {
+  height: calc(100% - 2.5rem - 1px);
+}
+div.alias.container {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+button.alias.element {
+  display: block;
+  width: 100%;
+  color: black;
+  white-space: nowrap;
+  font-size: min(4vw, 16px);
+  text-decoration: none;
+  text-align: start;
+  padding: min(1.5vw, 7.5px) min(2vw, 10px);
+  border: 0;
+}
+button.alias.element:hover {
+  color: white;
+  background-color: #333333;
+}
+button.alias.element.highlight {
+  background-color: #cccccc;
+}