Blog-with-api Pere y Paris

.gitignore

@@ -0,0 +1 @@
+.vscode

assets/css/BASE/reset.css

@@ -0,0 +1,68 @@
+/**
+ * BASE - RESET
+ */
+
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+* {
+  box-sizing: border-box;
+  /* Make sure all elements are above the background */
+  z-index: 1;
+  position: relative;
+}
+
+/* default */
+
+html {
+  font-size: 62.5%;
+  scroll-behavior: smooth;
+  color: var(--foreground);
+  transition: color var(--transition);
+  background-color: #ffffff;
+  background-blend-mode: multiply;
+}
+
+html::before {
+  content: "";
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: var(--white);
+  transform: translateX(-100%);
+  transition: transform var(--transition);
+  z-index: 0;
+}
+
+body {
+  font-family: 'Roboto Mono', monospace !important;
+  box-sizing: border-box;
+  mix-blend-mode: difference;
+}
+
+ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+/* button{
+  cursor: none !important;
+} */
+
+code{
+  display: block;
+  padding-bottom: 0.6rem;
+}
+
+/* headings */
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  letter-spacing: normal;
+}

assets/css/LAYOUT/common.css

@@ -0,0 +1,56 @@
+/**
+ * LAYOUT - COMMON
+ */
+
+.main {
+  background-color: #ffffff;
+  margin: 0 auto;
+  max-width: 992px;
+  padding: 2rem 0;
+}
+
+.section {
+  margin: 2rem;
+  background: #F8F9FA;
+}
+
+.header {
+  z-index: 2;
+  padding: 2rem 4rem;
+}
+
+.footer{
+  padding: 2rem 2rem 0;
+}
+
+.full-page{
+  height: calc(100vh - 4rem);
+  max-height: calc(100vh - 4rem);
+}
+
+.outside {
+  width: 100%;
+  padding-top: 133.33%; /* 4:3 Aspect Ratio (divide 4 by 3 = 1.3333)  */
+  position: relative; /* If you want text inside of it */
+}
+
+/* If you want text inside of the container */
+.inside {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.bg-black {
+  background-color: #121212;
+}
+
+.bi {
+  font-size: 3rem;
+}
+
+.big {
+  font-size: 6rem;
+}

assets/css/MODULE/blockquote.css

@@ -0,0 +1,28 @@
+/**
+ * MODULE - BLOCKQUOTE
+ */
+
+.blockquote {
+  margin-left: 1.5rem;
+}
+
+.blockquote__body{
+  font-size: 1.2rem;
+}
+
+.blockquote__header{
+  color: var(--darkGrey);
+}
+
+.blockquote__name{
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.blockquote__dot{
+  margin: 0 0.5rem;
+}
+
+.blockquote__company-name{
+  font-weight: 300;  
+}

assets/css/MODULE/comments.css

@@ -0,0 +1,37 @@
+/**
+ * MODULE - COMMENTS
+ */
+
+.comments{
+  padding: 3rem 0 6rem;
+}
+
+.comments__total{
+  border-top: 1px solid var(--grey);
+  border-bottom: 1px solid var(--grey);
+  padding: 2rem 0;
+  margin-bottom: 1rem;
+}
+
+.comments__item {
+  padding-top: 2rem;
+}
+
+.comments__buttons{
+  margin-left: 1rem;
+}
+
+.comments__buttons button{
+  background-color: transparent;
+}
+
+.comments__buttons button i {
+  color: var(--darkGrey);
+  height: 20px;
+  width: 20px;
+  font-size: 1.8rem;
+}
+
+.comments__buttons button:hover i {
+  color: var(--black);
+}

assets/css/MODULE/header.css

@@ -0,0 +1,16 @@
+/**
+ * MODULE - HEADER
+ */
+
+.header{
+  z-index: 2;
+  padding: 2rem 4rem;
+  mix-blend-mode: difference;
+  color: #ffffff;
+  max-width: 992px;
+}
+
+.header__title{
+  font-size: 2.4rem;
+  margin-bottom: 0;
+}

assets/css/MODULE/modal.css

@@ -0,0 +1,20 @@
+/**
+ * MODULE - MODAL
+ */
+
+.modal-header {
+  border-bottom: 0;
+}
+
+.modal-header .btn-close {
+  transform: scale(1.5);
+  z-index: 1100;
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    width: calc(100% - 3rem);
+    max-width: 992px;
+    margin: 1.75rem auto;
+  }
+}

assets/css/MODULE/post-block.css

@@ -0,0 +1,41 @@
+/**
+ * MODULE - POST BLOCK
+ */
+
+.posts-block{
+  padding: 4rem;
+}
+
+.post-block{
+  margin-bottom: 3.5rem;
+}
+
+.post-block__content{
+  background-image: url(/assets/images/svg/anim-false.svg);
+  background-repeat: repeat-x;
+  background-size: auto 0.3rem;
+  background-position-y: bottom;
+  padding-bottom: 0.8rem;
+}
+
+.post-block__name {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+}
+
+.post-block__title{
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 2.2rem;
+  margin-bottom: 1rem;
+}
+
+@media only screen and (max-width: 575px) {
+  .posts-block{
+    padding: 3rem 2rem;
+    margin-bottom: 3rem;
+  }
+  .post-block__title{
+    font-size: 2rem;
+  }
+}

assets/css/MODULE/post-card.css

@@ -0,0 +1,112 @@
+/**
+ * MODULE - POST CARD
+ */
+
+.posts {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  background-color: #ffffff;
+}
+
+.posts__swipe-label{
+  text-align: center;
+  width: 100%;
+}
+
+.post-card-cont {
+  height: 100%;
+  width: 100%;
+}
+.post-card:nth-child(1),
+.post-card:nth-child(2),
+.post-card:nth-child(3) {
+  padding-bottom: 0.75rem;
+}
+.post-card:nth-child(4),
+.post-card:nth-child(5),
+.post-card:nth-child(6) {
+  padding-top: 0.75rem;
+}
+.post-card.reset {
+  transition: transform 0.3s;
+  transform: translateX(0) !important;
+}
+.post-card.inactive {
+  transition: transform 0.3s;
+}
+.post-card.to-left {
+  transform: translateX(-30rem) rotate(-30deg) !important;
+}
+.post-card.to-right {
+  transform: translate(30rem) rotate(30deg) !important;
+}
+.post-card.below {
+  z-index: 1;
+}
+.post-card__top {
+  height: 100%;
+  padding: 2rem;
+}
+.post-card__name {
+  line-height: 1.25;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  color: #fff;
+  padding: 1rem;
+  margin: 0;
+}
+.post-card__author {
+  color: #fff;
+  text-align: center;
+  font-size: 1.4rem;
+  padding: 1rem;
+  margin: 0;
+}
+.post-card__content {
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 767px) {
+  .posts{
+    padding: 4rem 1rem;
+    background-color: transparent;
+  }
+  .post-card-cont {
+    position: relative;
+    width: 24rem;
+    min-width: 24rem;
+    height: 32rem;
+    min-height: 32rem;
+    margin: 0 auto;
+  }
+  .post-card {
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: 50% 100%;
+    padding: 0;
+  }
+  .post-card:nth-child(n) {
+    padding: 0;
+  }
+  .post-card__drag {
+    position: block;
+    z-index: 5;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+  }
+}
+
+@media only screen and (max-width: 575px) {
+  .posts__swipe-label{
+    display: none;
+  }
+}