Initial commit

frontend/src/styles/components/article-single.css

@@ -0,0 +1,216 @@
+.article-single {
+  padding: 2rem 2.5rem 0 2.5rem;
+}
+
+.article-time.article-single__time {
+  margin-bottom: 1.5rem;
+}
+
+.article-single__tag {
+  font-size: 1.1rem;
+  line-height: 1.6rem;
+  color: #000;
+  padding: 0.1rem 1.2rem;
+  border: 1px solid #7c7c7c;
+  border-radius: 5rem;
+  display: inline-block;
+  margin-bottom: 1.5rem;
+}
+
+.article-single__title {
+  margin-bottom: 1.5rem;
+}
+
+.article-author {
+  display: flex;
+  align-items: center;
+  gap: 1.4rem;
+  margin-bottom: 1.5rem;
+}
+
+.article-author__img {
+  width: 5rem;
+  height: 5rem;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+}
+
+.article-author__img img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.article-author__name {
+  font-weight: 700;
+  font-size: 1.3rem;
+  line-height: 2rem;
+  color: #2f2f2f;
+}
+
+.article-single__content p {
+  font-weight: 500;
+  font-size: 1.3rem;
+  line-height: 2rem;
+  margin-bottom: 2.5rem;
+}
+
+.article-single__content a {
+  color: var(--secondary);
+}
+
+.article-single-img,
+.wp-block-image {
+  margin: 0 -2.5rem;
+  position: relative;
+  margin-bottom: 2rem;
+  height: 41.5rem;
+  display: flex;
+}
+
+.event-single .article-single-img,
+.event-single .wp-block-image {
+  margin: 0;
+}
+
+.article-single-img>img,
+.wp-block-image>img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+}
+
+.article-single-img__text,
+.wp-element-caption {
+  position: absolute;
+  z-index: 1;
+  left: 2.5rem;
+  bottom: 2.5rem;
+  font-size: 1.1rem;
+  line-height: 1.6rem;
+  color: #ffffff;
+}
+
+.article-single-img__video {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  position: absolute;
+  left: 3.9rem;
+  bottom: 2.3rem;
+  font-size: 1.1rem;
+  line-height: 1.6rem;
+  color: #ffffff;
+}
+
+.article-single-gal,
+.wp-block-gallery.is-layout-flex.wp-block-gallery-is-layout-flex {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.1rem;
+  margin: 0 -2.5rem;
+  margin-bottom: 2rem;
+}
+
+.event-single .article-single-gal,
+.event-single .wp-block-gallery.is-layout-flex.wp-block-gallery-is-layout-flex {
+  margin: 0;
+}
+
+.wp-block-gallery.is-layout-flex.wp-block-gallery-is-layout-flex .wp-block-image {
+  margin: 0;
+  margin-bottom: 0;
+  height: 20.8rem;
+  display: flex;
+}
+
+.article-single-gal .article-single-img,
+.wp-block-gallery .article-single-img {
+  margin: 0;
+  height: 20.8rem;
+}
+
+.article-section__title {
+  box-sizing: border-box;
+  padding: 2.5rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+  border-top: 1px solid var(--gray);
+  border-bottom: 1px solid var(--gray);
+}
+
+@media (max-width: 767px) {
+  .article-single {
+    border-top: 1px solid var(--gray);
+    margin: 0 -2rem;
+    padding: 1.5rem 2.4rem 0.5rem 2.4rem;
+  }
+
+  .article-time.article-single__time {
+    margin-bottom: 1rem;
+  }
+
+  .article-single__tag {
+    margin-bottom: 1rem;
+  }
+
+  .article-single__title {
+    margin-bottom: 1rem;
+  }
+
+  .article-author {
+    margin-bottom: 1rem;
+  }
+
+  .article-single__content p {
+    margin-bottom: 1.5rem;
+  }
+
+  .article-single-img,
+  .wp-block-image {
+    margin: 0 -2.4rem;
+    margin-bottom: 2rem;
+    height: 26rem;
+  }
+
+  .article-single-img__text {
+    bottom: 2rem;
+  }
+
+  .article-single-img__video {
+    left: 2.1rem;
+    bottom: 2.1rem;
+  }
+
+  .article-single-gal,
+  .wp-block-gallery.is-layout-flex.wp-block-gallery-is-layout-flex {
+    grid-template-columns: 1fr;
+    gap: 0;
+    margin: 0 -2.4rem;
+    margin-bottom: 2rem;
+  }
+
+  .wp-block-gallery.is-layout-flex.wp-block-gallery-is-layout-flex .wp-block-image {
+    height: 26rem;
+  }
+
+  .article-single-gal .article-single-img {
+    height: 26rem;
+  }
+
+  .article-section__title {
+    width: calc(100% + 4rem);
+    margin: 0 -2rem;
+  }
+
+  .article-item--no-image {
+    padding: 0;
+    min-height: unset;
+  }
+}