referat(WT): Shrink navbar on small screens

3 files changed, 25 insertions, 1 deletions

diff --git a/Year 4/Web technologies/referat/css/style.css b/Year 4/Web technologies/referat/css/style.css
index ef32a0d..ef037db 100644
--- a/Year 4/Web technologies/referat/css/style.css
+++ b/Year 4/Web technologies/referat/css/style.css
@@ -62,6 +62,8 @@ h1 {
 }
 
 h2 {
+  margin-top: -3em;
+  padding-top: 3em;
   color: var(--level1);
   border-bottom: 2px solid var(--level1);
 }
diff --git a/Year 4/Web technologies/referat/javascript/navbar-shrink.js b/Year 4/Web technologies/referat/javascript/navbar-shrink.js
new file mode 100644
index 0000000..62c4b04
--- /dev/null
+++ b/Year 4/Web technologies/referat/javascript/navbar-shrink.js
@@ -0,0 +1,21 @@
+const nav = document.getElementById('contents');
+
+function change_nav_names() {
+    if (window.screen.width < 700) {
+        nav.children[0].innerText = 'Във';
+        nav.children[1].innerText = 'Инст';
+        nav.children[2].innerText = 'Арх';
+        nav.children[3].innerText = 'ВХ';
+        nav.children[4].innerText = 'Конф';
+    }
+    else {
+        nav.children[0].innerText = 'Въведение';
+        nav.children[1].innerText = 'Инсталиране';
+        nav.children[2].innerText = 'Архитектура';
+        nav.children[3].innerText = 'Виртуални хостове';
+        nav.children[4].innerText = 'Конфигуриране';
+    }
+}
+
+window.addEventListener('resize', change_nav_names);
+change_nav_names();
diff --git a/Year 4/Web technologies/referat/referat.html b/Year 4/Web technologies/referat/referat.html
index 570528b..29e3854 100644
--- a/Year 4/Web technologies/referat/referat.html
+++ b/Year 4/Web technologies/referat/referat.html
@@ -24,7 +24,7 @@
 			</h1>
 			<section id="introduction">
 				<h2>Въведение</h2>
-				<figure class="right-aligned size-small">
+				<figure class="right-aligned size-large">
 					<img src="./img/9001001_01.jpg" alt="Екранна снимка на NeXT уеб браъзърът">
 					<figcaption class="centered">Фигура 1. Екранна снимка на NeXT уеб браузърът</figcaption>
 				</figure>
@@ -320,5 +320,6 @@
 		<div id="full-screen-backing" class="none"></div>
 		<script src="./javascript/figure-click.js"></script>
 		<script src="./javascript/code-copy.js"></script>
+		<script src="./javascript/navbar-shrink.js"></script>
 	</body>
 </html>