use bulma.io template

RodionfromHSE · Nov 19, 2023 · b5d216d · b5d216d
1 parent 01ee72e
commit b5d216d
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 4 deletions.
diff --git a/web/index.html b/web/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/jpg" href="/translator.jpg" />
+    <link rel="icon" type="image/png" href="/translator.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>En2Ru Scientific Translator</title>
+    <title>En2Ru: Scientific Translator</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/web/src/App.css b/web/src/App.css
@@ -0,0 +1,177 @@
+@import url('https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro');
+
+.public-DraftEditor-content {
+  min-height: 12em;
+}
+
+.link-block a {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.dnerf {
+  font-variant: small-caps;
+}
+
+
+.teaser .hero-body {
+  padding-top: 0;
+  padding-bottom: 3rem;
+}
+
+.publication-title {
+}
+
+.publication-title {
+    font-family: 'Google Sans', sans-serif;
+    font-weight: 600;
+    font-size: 3em;
+}
+
+.publication-authors {
+    font-family: 'Google Sans', sans-serif;
+}
+
+.publication-venue {
+    color: #555;
+    width: fit-content;
+    font-weight: bold;
+}
+
+.publication-awards {
+    color: #ff3860;
+    width: fit-content;
+    font-weight: bolder;
+}
+
+.publication-authors {
+}
+
+.publication-authors a:hover {
+    text-decoration: underline;
+}
+
+.author-block {
+  display: inline-block;
+}
+
+
+.publication-video {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+
+    overflow: hidden;
+    border-radius: 10px !important;
+}
+
+.publication-video iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.publication-body img {
+}
+
+.results-carousel {
+  overflow: hidden;
+}
+
+.results-carousel .item {
+  margin: 5px;
+  overflow: hidden;
+  border: 1px solid #bbb;
+  border-radius: 10px;
+  padding: 0;
+  font-size: 0;
+}
+
+.results-carousel video {
+  margin: 0;
+}
+
+
+.interpolation-panel {
+  background: #f5f5f5;
+  border-radius: 10px;
+}
+
+.interpolation-panel .interpolation-image {
+  width: 100%;
+  border-radius: 5px;
+}
+
+.interpolation-video-column {
+}
+
+.interpolation-panel .slider {
+  margin: 0 !important;
+}
+
+.interpolation-panel .slider {
+  margin: 0 !important;
+}
+
+#interpolation-image-wrapper {
+  width: 100%;
+}
+#interpolation-image-wrapper img {
+  border-radius: 5px;
+}
+
+/* CSS for the examples */
+
+.message {
+  background-color: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 1rem;
+  border-radius: 4px;
+}
+
+.message-header {
+  background-color: #f5f5f5;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #333333; /* or any other darker shade you prefer */
+}
+
+
+.has-text-left pre {
+  background-color: #f5f5f5;
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+.title.is-5 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600; /* Increased font weight for better visibility */
+}
+
+#acronym_content {
+  padding: 1.5rem;
+}
+
+.block:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+
+code.python {
+  display: block;
+  background-color: #f4f4f4;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+  padding: 20px;
+}
+
+code.python {
+  color: #008000;
+}
diff --git a/web/src/components/TranslationModule.tsx b/web/src/components/TranslationModule.tsx
@@ -46,7 +46,7 @@ export default function TranslationModule() {
       {/* Content */}
       <div className="container mx-auto p-4 md:flex">
         {/* Left Column */}
-        <div className="w-full md:w-1/2 md:pr-4">
+        <div className="w-full md:w-1/2 md:pr-4 mb-3">
           <Label>Text to Translate</Label>
           <TranslationTextarea
             highlight={inputHighlight}

diff --git a/web/src/components/highlights.css b/web/src/components/highlights.css
@@ -34,4 +34,3 @@ mark.my-invisible {
 mark.my-invisible:hover {
   background-color: #98b7f8e0;
 }
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,4 +34,3 @@ mark.my-invisible {
		mark.my-invisible:hover {
		background-color: #98b7f8e0;
		}