Reorganize project. Page builder. Support for EN

site/styles/404.css

@@ -0,0 +1,12 @@
+main {
+    max-width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin: 0 auto;
+}
+
+main img {
+    width: min(70vw, 15rem);
+}

site/styles/account.css

@@ -0,0 +1,4 @@
+h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+}

site/styles/blog.css

@@ -0,0 +1,3 @@
+#mesh {
+  display: none;
+}

site/styles/contact.css

@@ -0,0 +1,4 @@
+h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+}

site/styles/events.css

@@ -0,0 +1,30 @@
+table {
+  table-layout: fixed;
+  border-spacing: 0;
+}
+
+th,
+td {
+  padding: 0 1rem 0 1rem;
+  text-align: left;
+  border-left: 2px solid var(--border);
+}
+
+th {
+  padding: 1rem 1rem 0 1rem;
+  border-bottom: 2px solid var(--border);
+}
+
+td:nth-child(odd) {
+  white-space: nowrap;
+}
+
+td {
+  padding: 0 1rem 1rem 1rem;
+  vertical-align: top;
+}
+
+h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+}

site/styles/home.css

@@ -0,0 +1,16 @@
+h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+}
+
+dl {
+  padding: 1rem 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0 0 1rem 1rem;
+}

site/styles/poster.css

@@ -0,0 +1,76 @@
+
+html {
+    
+}
+
+@font-face {
+    font-family: Facade;
+    src: url(../font/Facade-Sud.woff);
+}
+  
+  
+@font-face {
+    font-family: jetbrains-mono;
+    src: url(../font/JetBrainsMono-Regular.ttf);
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    max-width: 1200px;
+    margin: auto;
+    font-family: 'jetbrains-mono';
+    padding: 2.3rem;
+}
+
+h1 {
+    font-family: 'Facade';
+    text-align: center;
+    font-size: 5rem;
+    margin: 0rem;
+}
+
+h2 {
+    text-align: center;
+    margin-top: 0.0rem;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+}
+
+p {
+    font-size: 1.5rem;
+}
+
+table {
+    margin: 4rem 0;
+}
+
+td {
+    font-size: 1.8rem;
+    padding-top: 0.5rem;
+}
+
+td:first-child {
+    width: 3.5rem;
+}
+
+td:nth-child(2) {
+    padding-right: 1rem;
+}
+
+#link {
+    margin-top: 4rem;
+    font-size: 3rem;
+    width: fit-content;
+    float: right;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#link img {
+    width: 4rem;
+}

site/styles/reset.css

@@ -0,0 +1,149 @@
+/* Copyright (c) 2023 Luka Ivanovic */
+/* https://github.com/luka-hash/css-reset */
+/* This code is licensed under MIT licence */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+a,
+article,
+audio,
+blockquote,
+body,
+canvas,
+caption,
+code,
+dd,
+del,
+details,
+div,
+dl,
+dt,
+em,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+ol,
+output,
+p,
+pre,
+s,
+section,
+small,
+span,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+ul,
+video {
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}

site/styles/services.css

@@ -0,0 +1,27 @@
+table {
+  table-layout: fixed;
+  border-spacing: 0;
+  margin-bottom: 3rem;
+}
+
+th,
+td {
+  padding: 0 1rem 0 1rem;
+  text-align: left;
+  border-left: 2px solid var(--border);
+}
+
+th {
+  padding: 1rem 1rem 0 1rem;
+  border-bottom: 2px solid var(--border);
+}
+
+td {
+  padding: 0 1rem 1rem 1rem;
+  vertical-align: top;
+}
+
+h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+}

site/styles/style.css

@@ -0,0 +1,218 @@
+:root {
+  --light-text: #181715;
+  --light-bg: #ffffff;
+  --light-border: #181715;
+  --dark-text: #ffffff;
+  --dark-bg: #181715;
+  --dark-border: #ffffff;
+  --hightlight: #72dec2;
+  --border: var(--light-border);
+  --text: var(--light-text);
+  --bg: var(--light-bg);
+}
+
+@font-face {
+  font-family: "Iosevka";
+  src: url('/font/iosevka-regular.woff') format('woff');
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  color: var(--text);
+  background: var(--bg);
+}
+
+body {
+  display: grid;
+  grid-template:
+    "header" 4rem
+    "main" 1fr
+    "footer" 4rem
+    / 1fr;
+  gap: 0;
+  font-family: 'Iosevka';
+}
+
+header,
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 3rem;
+}
+
+header {
+  grid-area: header;
+  border-bottom: 2px solid var(--border);
+}
+
+footer {
+  grid-area: footer;
+  border-top: 2px solid var(--border);
+}
+
+main {
+  grid-area: main;
+  padding: 3rem;
+  font-size: 1.3rem;
+  line-height: 2rem;
+  max-width: 120ch;
+  overflow: auto;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+  color: var(--text);
+}
+
+main a {
+  position: relative;
+  top: 0.2rem;
+}
+
+a:hover,
+a:focus {
+  background-color: var(--hightlight);
+  text-decoration: line-through var(--text);
+}
+
+#logo {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  font-size: 2.5rem;
+  font-weight: bold;
+  font-variant: small-caps;
+}
+
+#logo img {
+  width: 3rem;
+}
+
+#theme-switcher {
+  border: 3px solid var(--border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 3rem;
+  margin-left: auto;
+  background: linear-gradient(90deg, var(--border) 0%, var(--border) 50%, var(--bg) 51%, var(--bg) 100%);
+}
+
+#theme-switcher:hover {
+  border-color: var(--hightlight);
+  background: linear-gradient(90deg, var(--hightlight) 0%, var(--hightlight) 50%, var(--bg) 51%, var(--bg) 100%);
+}
+
+.account {
+  font-size: 2rem;
+}
+
+#mesh {
+  position: absolute;
+  bottom: 4rem;
+  right: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.links {
+  display: flex;
+  gap: 2rem;
+}
+
+.links > a {
+  border-radius: 100%;
+}
+
+.links > a > img {
+  display: block;
+}
+
+#sections-button {
+  display: none;
+}
+
+nav {
+  font-variant: small-caps;
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  font-size: 2rem;
+}
+
+button {
+  font-style: italic;
+  font-weight: lighter;
+  border: none;
+  background: var(--bg);
+  color: var(--text);
+  margin: 0 2rem 0 0;
+  cursor: pointer;
+}
+
+@media screen and (max-height: 860px),
+screen and (max-width: 1500px) {
+  #mesh {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1160px) {
+  nav {
+    flex-direction: column;
+    border: 2px solid var(--border);
+    border-bottom: 0;
+    border-left: 0;
+    background-color: var(--bg);
+    position: absolute;
+    bottom: calc(4rem);
+    left: 0;
+    align-items: center;
+    padding: 2rem 3rem;
+    display: none;
+  }
+
+  #sections-button {
+    display: block !important;
+  }
+}
+
+@media screen and (max-width: 540px) {
+  #logo {
+    font-size: 2.2rem;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  .links {
+    gap: 1.2rem;
+  }
+
+  .links a {
+    width: 1.5rem;
+  }
+
+  header,
+  footer {
+    padding: 0 1rem;
+  }
+
+  #theme-switcher {
+    margin-right: 1rem;
+  }
+
+  .account {
+    font-size: 1rem;
+  }
+}