morel-theme 0.1.31 → 0.2.1

data/_sass/layout/_grid.scss

@@ -0,0 +1,394 @@
+/*general*/
+.main-container {
+  margin: auto;
+  padding: 6%;
+  background-color: var(--fondo);
+}
+
+.column {
+  flex-grow: 0;
+  flex-basis: calc(25% - 2rem);
+  line-height: 0;
+  padding: 1rem;
+}
+
+/*obra día*/
+.ficha-metadata {
+  font-family: 'Exo', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+  font-size: 0.950rem;
+  padding: 2.500rem 6% 4.500rem 15.1%;
+  line-height: 1.5em;
+}
+
+.metadata-input {
+  font-size: 0.938em;
+  font-weight: 600;
+}
+
+.actions-h {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.actions-h,
+.actions-v i {
+  font-size: 1.875rem;
+}
+
+.actions-h i {
+  padding: 0.75em;
+}
+
+.actions-v {
+  flex-grow: 0;
+  flex-basis: 8%;
+  align-self: center;
+  text-align: center;
+}
+
+.avatar,
+.portada {
+  flex: 0 0 auto;
+  align-self: center;
+  line-height: 0;
+}
+
+.sombra {
+  max-width: 1227px;
+  margin: auto;
+}
+
+.row {
+  max-width: calc(1227px + 2rem);
+  margin: auto;
+  margin-top: .688rem;
+  /*margin-bottom: 9.125rem;*/
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.obra-suerte {
+  margin-bottom: revert;
+}
+
+/*ciudades*/
+.ciudad .ficha-title {
+  padding-right: 15.1% !important;
+  padding-bottom: 4.813rem !important;
+}
+
+.ciudad {
+  background-color: var(--background);
+  margin-bottom: 3.125rem;
+  max-width: 1227px;
+  margin: auto;
+}
+
+.ciudad h2 {
+  margin-bottom: 2.250rem;
+}
+
+/*xs styling*/
+.avatar,
+.portada {
+  max-width: 68.8%;
+  margin: auto;
+  flex-basis: 100%;
+}
+
+.ficha-title {
+  flex: 0 0 auto;
+  flex-basis: 100%;
+  padding: 15.1% 6% 2.250rem 15.1%;
+}
+
+.ficha-container>div {
+  padding-right: 15.1%;
+}
+
+.ficha-extract {
+  padding-left: 15.1%;
+}
+
+.ficha-extract p {
+  margin-top: .5rem;
+}
+
+.proyecto-tienda ul {
+  line-height: 1;
+  font-size: 1em;
+  list-style-type: square;
+  list-style-position: inside;
+  margin-left: 5%;
+}
+
+.proyecto-tienda li {
+  padding-top: 1rem;
+}
+
+.obra-dia {
+  max-width: 1227px;
+  margin: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-bottom: 9.125rem;
+  margin-top: 2rem;
+  background-color: var(--background);
+}
+
+.deictico-demo:before {
+  content: "más abajo";
+}
+
+/*OBRAS MEDIA QUERIES*/
+
+/*xs*/
+@media screen and (max-width: 376px) {
+  .ficha-title {
+    word-wrap: break-word;
+  }
+}
+
+/*xs, s y m*/
+@media screen and (max-width: 797px) {
+  .actions-h {
+    padding-bottom: calc(15.1% - 0.5em);
+  }
+
+  .avatar {
+    margin-bottom: 7rem;
+  }
+}
+
+@media screen and (max-width: 1039px) {
+  .actions-h {
+    display: flex;
+  }
+
+  .actions-v {
+    display: none;
+    flex-basis: 0%;
+    max-width: 0%;
+  }
+}
+
+
+/*ml, l y xl*/
+@media screen and (min-width: 798px) {
+  .ficha-title {
+    padding: 5.750rem 6% 2.250rem 15.1% !important;
+  }
+
+  .ficha-extract {
+    padding: 0px 6% 0 15.1% !important;
+  }
+
+  .avatar,
+  .portada {
+    padding-left: 0;
+  }
+
+  .ficha-metadata {
+    padding: 2.500rem 6% 4.813rem 15.1% !important;
+  }
+}
+
+/*solo m*/
+@media screen and (min-width: 601px) and (max-width: 797px) {
+  .portada {
+    max-width: 50%;
+  }
+
+  .header {
+    height: 70vh;
+  }
+}
+
+
+/*Solo l*/
+@media screen and (min-width: 798px) and (max-width: 1039px) {
+
+  .avatar,
+  .portada {
+    flex-basis: 45%;
+    max-width: 45%;
+    padding-top: 0rem;
+  }
+
+  .ficha-container {
+    flex-basis: 55%;
+    max-width: 55%;
+  }
+
+  .img-frame {
+    padding-right: 10%;
+  }
+}
+
+
+/*solo xl*/
+@media screen and (min-width: 1040px) {
+  .actions-h {
+    display: none !important;
+  }
+
+  .actions-v {
+    display: block !important;
+  }
+
+  .avatar,
+  .portada {
+    flex-basis: 39%;
+    max-width: 39%;
+    padding-top: 0;
+  }
+
+  .ficha-container {
+    flex-basis: 53%;
+    max-width: 53%;
+  }
+}
+
+/*miscelaneas*/
+.sombra-solida {
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.16);
+}
+
+.responsive {
+  width: 100%;
+  height: auto;
+}
+
+/* MEDIA QUERIES FOR OVERLAYS */
+
+
+/*for touch devices*/
+
+.price {
+  display: block;
+  line-height: 1rem;
+  font-size: 1.05rem;
+  margin: 3%;
+}
+
+.price-obras-listas {
+  display: block;
+}
+
+.price .title {
+  font-weight: 600;
+  margin-top: 1.7rem;
+}
+
+.price .autor {
+  margin-top: 0.7rem;
+}
+
+.masobras .container .overlay {
+  right: 0;
+  width: 100%;
+}
+
+
+/*for desktop devices*/
+@media (hover: hover) and (pointer: fine) {
+  .price {
+    display: none;
+  }
+
+  .container:hover~.price {
+    display: block;
+  }
+
+  .container:hover .overlay,
+  .masobras .overlay {
+    right: 0;
+    width: 100%;
+  }
+
+  .masobras .overlay {
+    background-color: var(--background);
+  }
+
+  .container:hover {
+    cursor: pointer;
+  }
+}
+
+
+/* MEDIA QUERIES FOR FLEX GRID */
+
+.basis {
+  flex-basis: calc(100% - 2rem);
+  flex-grow: 0;
+  padding: 1rem;
+
+}
+/*xs styling*/
+@media screen and (max-width: 375px) {
+  .price .title {
+    font-size: 1.7rem;
+    line-height: 1.7rem;
+  }
+
+  .price .autor {
+    font-size: 1.7rem;
+    line-height: 1.7rem;
+  }
+
+  .masobras label {
+    font-size: 2rem;
+  }
+}
+
+
+/*s styling*/
+@media screen and (min-width: 376px) and (max-width: 599px) {
+  .basis {
+    flex-basis: calc(50% - 2rem);
+  }
+
+  .price .title {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
+  .price .autor {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+}
+
+/*ml & m styling*/
+@media screen and (min-width: 600px) and (max-width: 1039px) {
+  .basis {
+    flex-basis: calc(33% - 2rem);
+  }
+}
+
+
+/*l & xl styling*/
+@media screen and (min-width: 1040px) {
+  .basis {
+    flex-basis: calc(25% - 2rem);
+  }
+}
+
+.post {
+  height: auto !important;
+}
+
+.text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,69 @@
+/* RESPONSIVE LOGO */
+/* .header .logo {
+  width: 125px;
+  height: 184px;
+  background-image: url("../img/morel.svg");
+  background-position: center bottom;
+  padding: 0px;
+  margin: 0 auto; }
+
+.tienda .logo {
+  background-image: url("../img/morel-tienda.svg"); }
+
+.header .r-logo {
+  display: flex;
+  justify-content: center;
+  height: 65vh;
+  align-items: center;
+  text-align: center; }
+
+.logo-container input, .logo-container a {
+  display: none; }
+
+/*s*/
+/* @media only screen and (min-width: 376px) and (max-width: 599px) {
+  .header .logo {
+    background-position: center 504px;
+    width: 187px;
+    height: 275px; } }
+
+/* xl */
+/* @media only screen and (min-width: 1227px) {
+  .header .logo {
+    background-position: center top;
+    width: 560px;
+    height: 258px; } }
+/*l */
+/*@media only screen and (min-width: 1040px) and (max-width: 1226px) {
+  .header .logo {
+    background-position: center 1335px;
+    width: 520px;
+    height: 240px; } }
+/*ml*/
+/* @media only screen and (min-width: 798px) and (max-width: 1039px) {
+  .header .logo {
+    background-position: center 1050px;
+    width: 396px;
+    height: 260px; } }
+/*m*/
+/* @media only screen and (min-width: 600px) and (max-width: 797px) {
+  .header .logo {
+    background-position: center 745px;
+    width: 300px;
+    height: 197px; } }
+/*header*/
+/* .logo-container {
+  max-width: 50%;
+  margin-top: 2rem; }
+
+/*xs styling*/
+/*Desde s hasta xl*/
+/* @media screen and (min-width: 600px) {
+  .header .r-logo {
+    height: 70vh !important; }
+
+  .logo-container input, .logo-container a {
+    display: inline; }
+
+  .header.tienda {
+    height: 55vh !important; } } */

data/_sass/layout/_navigation.scss

@@ -0,0 +1,145 @@
+    .navBar {
+      background-color: var(--background);
+      position: fixed;
+      min-width: 100%;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+      z-index: 100;
+    }
+
+    nav .logo {
+      background-color: transparent;
+      border-radius: 50px;
+      display: inline-block;
+      height: 1.5rem;
+      margin: 1em 0;
+    }
+
+    nav .logo img {
+      max-width: 6.250rem;
+      height: auto;
+      margin-right: 2;
+    }
+
+
+    .navBar li:first child {
+      margin-right: auto;
+    }
+
+    .wrapper {
+      margin: 0 auto;
+      /*  max-width: 1227px;*/
+      padding: 0 2%;
+    }
+
+    nav ul {
+      display: flex;
+      list-style-type: none;
+      width: 30%;
+    }
+
+    nav ul a {
+      color: var(--color-1);
+      text-decoration: none;
+      transition: all .5s ease;
+      display: block;
+      padding: 0px 0.25em;
+    }
+
+    nav ul a:hover {
+      color: var(--color-2);
+    }
+
+    nav div {
+      display: flex;
+      justify-content: space-between;
+      list-style-type: none;
+      width: 50%;
+    }
+
+    nav div a {
+      color: var(--color-1);
+      text-decoration: none;
+      transition: all .5s ease;
+    }
+
+    nav div a:hover {
+      color: var(--background);
+    }
+
+    nav li {
+      display: inline-block;
+      flex: 1 1 100%;
+      text-align: right;
+      font-weight: 600;
+    }
+
+    nav .menu-item {
+      flex: 1 1 100%;
+    }
+
+    nav #menu-toggle {
+      display: none;
+    }
+
+    nav .label-toggle {
+      display: none;
+    }
+
+    nav .wrapper {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    /*NAV BAR MEDIA QUERRIES */
+
+    @media screen and (max-width: 912px) {
+      nav nav ul a {
+        color: var(--color-1);
+      }
+
+      nav nav ul a:hover {
+        color: var(--background);
+      }
+
+      nav ul {
+        display: block;
+        height: 0;
+        list-style-type: none;
+        opacity: 0;
+        text-align: center;
+        transition: all 1s ease;
+        width: 100%;
+        visibility: hidden;
+      }
+
+      nav li {
+        border: 0px 2px 2px 2px solid var(--color-1);
+        color: var(--color-1);
+        display: block;
+        font-size: 1.5em;
+        padding: 1em 1em;
+        background-color: var(--color-2);
+        text-align: center;
+      }
+
+      nav #menu-toggle:checked~ul {
+        opacity: 1;
+        height: .0001rem;
+        visibility: visible;
+      }
+
+      nav .label-toggle {
+        background: linear-gradient(to bottom, var(--color-1) 0%, var(--color-1) 20%, transparent 20%, transparent 40%, var(--color-1) 40%, var(--color-1) 60%, transparent 60%, transparent 80%, var(--color-1) 80%, var(--color-1) 100%);
+        cursor: pointer;
+        display: block;
+        float: right;
+        height: 1.43em;
+        margin-top: 1em;
+        width: 1.43em;
+      }
+
+      nav .wrapper {
+        display: block;
+      }
+    }

data/_sass/pages/_author.scss

@@ -0,0 +1,69 @@
+.autor-pagina {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    margin-bottom: 3.125em;
+    margin-top: 2.5em;
+    background-color: var(--background);
+}
+
+.autor-pagina .portada {
+    max-width: 80%;
+    justify-content: center;
+}
+
+.autor-pagina .responsive {
+    width: auto;
+    max-width: 100%;
+}
+
+.autor-pagina .portada .img-frame {
+    text-align: center;
+}
+
+/*xs, s & m styling*/
+@media screen and (max-width: 798px) {
+    .autor-pagina .portada .img-frame {
+        padding: 0 15.1% 0 15.1%;
+    }
+
+    .autor-pagina .portada {
+        max-width: 100%;
+    }
+
+    .autor-pagina .responsive {
+        width: 100%;
+    }
+}
+
+
+.container {
+    position: relative;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.autores .image {
+    width: calc(100% - 12px);
+    border: 1px solid #ddd;
+    padding: 5px;
+    background-color: var(--background);
+}
+
+.overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    overflow: hidden;
+    width: 0;
+    height: 100%;
+    transition: .5s ease;
+    pointer-events: none;
+}