Initial commit

2024-03-01 17:47:03 +03:00
commit 10722da013
227 changed files with 13356 additions and 0 deletions
--- a/frontend/src/styles/components/article-item.css
+++ b/frontend/src/styles/components/article-item.css
@@ -0,0 +1,172 @@
+.article-item {
+  padding: 1.2rem 1.25rem 0;
+  box-sizing: border-box;
+  background: var(--bg);
+  width: 50%;
+  border-bottom: 1px solid var(--gray);
+  border-left: 1px solid var(--gray);
+  margin-left: -1px;
+}
+
+@media (max-width: 1024px) {
+  .article-item {
+    width: 100%;
+  }
+}
+
+.article-item__image-container {
+  position: relative;
+}
+
+.article-item__image-container img {
+  width: 100%;
+  height: 21rem;
+  object-fit: cover;
+}
+
+.article-item__text {
+  margin-top: 0.5rem;
+  padding: 1.5rem 1.25rem;
+}
+
+.article-item__link {
+  user-select: none;
+  transition: 0.3s;
+}
+
+.article-item__link:hover {
+  color: var(--primary);
+}
+
+.article-item__tag {
+  position: absolute;
+  right: 1.3rem;
+  bottom: 2.1rem;
+}
+
+.article-item__title {
+  margin-top: 0.5rem;
+}
+
+.article-item--lg {
+  width: 100%;
+  padding: 0;
+}
+
+.article-item--lg .article-item__image-container img {
+  height: 41.5rem;
+}
+
+.article-item--lg .article-item__text {
+  margin-top: 0;
+  padding: 2rem 2.5rem 2.5rem 2.5rem;
+}
+
+.article-item__descr {
+  margin-top: 1.5rem;
+}
+
+.article-item--no-image {
+  padding: 0;
+  background: #fff;
+  min-height: 22.6rem;
+}
+
+.article-item--no-image .article-item__text {
+  padding: 1.5rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.article-item--no-image .article-item__tag {
+  border-color: #7c7c7c;
+  color: #000;
+  position: relative;
+  right: unset;
+  bottom: unset;
+  margin-bottom: 0.5rem;
+}
+
+.article-item--no-image .article-item__descr {
+  margin-top: 1rem;
+}
+
+.article-item--horizontal {
+  width: 100%;
+  padding: 1.2rem;
+  display: flex;
+}
+
+.article-item--horizontal .article-item__image-container {
+  width: 33rem;
+  min-width: 33rem;
+}
+
+.article-item--horizontal .article-item__text {
+  margin-top: 0;
+  padding: 1.5rem 2.5rem;
+}
+
+.article-item--inline {
+  width: 100%;
+  padding: 1.2rem;
+}
+
+.article-item--inline .article-item__text {
+  margin-top: 0;
+  padding: 1.5rem 2.5rem;
+}
+
+@media (max-width: 767px) {
+  .articles-preview {
+    margin: 0 -2rem;
+  }
+
+  .article-item {
+    padding: 1.2rem 2rem 2.7rem 2rem;
+    border: 0;
+    border-bottom: 1px solid var(--gray);
+  }
+
+  .article-item__text {
+    padding: 1rem 0.7rem 0 0.7rem;
+  }
+
+  .article-item--lg {
+    padding: 0;
+    border-top: 1px solid var(--gray);
+  }
+
+  .article-item--lg .article-item__image-container img {
+    height: 26rem;
+  }
+
+  .article-item--lg .article-item__text {
+    padding: 2.7rem;
+  }
+
+  .article-item__descr {
+    margin-top: 0.5rem;
+  }
+
+  .article-item--horizontal {
+    padding: 1.2rem 2rem;
+    flex-direction: column;
+  }
+
+  .article-item--horizontal .article-item__image-container {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .article-item--horizontal .article-item__text {
+    margin-top: 0;
+    padding: 1.5rem 0.7rem;
+  }
+
+  .article-item--inline .article-item__text {
+    margin-top: 0;
+    padding: 0.3rem 0.7rem;
+  }
+}