Avanze del proyecto3

Author: juanfalconcodigo

images/f.ico

@@ -0,0 +1,3 @@
+'use strict'
+let anio = document.querySelector("#anio");
+anio.innerText = new Date().getFullYear();

index.html

@@ -0,0 +1,42 @@
+* {
+    box-sizing: $box;
+}
+
+html {
+    font-size: $base;
+}
+
+body {
+    font-family: $fuente-principal;
+    font-size: $fuente-size;
+    color: $color-principal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: $h-fuente-principal;
+}
+
+h2 {
+    font-size: $h2-particular-fuente;
+    font-weight: $h2-particular-weight;
+}
+
+h3 {
+    font-size: $h3-particular-fuente;
+}
+
+a {
+    text-decoration: $a-decoration;
+    color: $a-color;
+}
+
+.container {
+    max-width: $container-max-width;
+    width: $container-width;
+    margin: $container-margin;
+}

scripts/main.js

@@ -0,0 +1,17 @@
+$box:border-box;
+$base:62.5%;
+$fuente-principal:Arial,
+Helvetica,
+sans-serif;
+$fuente-size:1.3rem;
+$color-principal:white;
+$h-fuente-principal:'Lato',
+sans-serif;
+$h2-particular-fuente: 3.2rem;
+$h2-particular-weight: bold;
+$h3-particular-fuente: 2.6rem;
+$a-color: inherit;
+$a-decoration:none;
+$container-max-width: 960px;
+$container-width:100%;
+$container-margin: auto;

styles/_general.scss

@@ -0,0 +1,35 @@
+.btn-social {
+    width: 2.6rem;
+    height: 2.6rem;
+    border: 2px solid #000;
+    display: inline-block;
+    text-align: center;
+    line-height: 2.4rem;
+    border-radius: 100%;
+}
+
+.btn-social-fb:hover {
+    border-color: #4267b2;
+    color: #4267b2;
+}
+
+.btn-social-tw:hover {
+    border-color: #1ca1f2;
+    color: #1ca1f2;
+}
+
+.btn-detail {
+    /*background: blue;*/
+    display: flex;
+    justify-content: center;
+    & .a-detail {
+        /*background: red;*/
+        border-radius: 16px;
+        border: solid 3px #7b3fb6;
+        color: #7b3fb6;
+        font-size: 1.8rem;
+        font-weight: bold;
+        font-family: Lato;
+        padding: 0.6rem 3rem;
+    }
+}

styles/_variables.scss

@@ -0,0 +1,9 @@
+.label {
+    font-size: 1.2rem;
+    color: black;
+    background: white;
+    display: inline-block;
+    align-self: flex-end;
+    padding: 0.5rem;
+    border-radius: 8px;
+}

styles/atoms/_buttons.scss

@@ -0,0 +1,29 @@
+.post-detail {
+    /*background: red;*/
+    position: relative;
+    margin-bottom: 2rem;
+    & figure {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        & img {
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+        }
+    }
+    & .text {
+        display: flex;
+        position: absolute;
+        background: blue;
+        bottom: 0.2rem;
+        right: 0;
+        left: 0;
+        background: rgba(0, 0, 0, .5);
+        & p {
+            margin: 1rem 1.6rem 1rem 1rem;
+            line-height: 1.38;
+            color: #ffffff;
+        }
+    }
+}