Merge pull request #8 from gico-net/feat/homepage

Homepage

5 files changed, 123 insertions, 2 deletions

diff --git a/src/sass/_bootstrap.sass b/src/sass/_bootstrap.sass
index 755ffb1..c83c1eb 100644
--- a/src/sass/_bootstrap.sass
+++ b/src/sass/_bootstrap.sass
@@ -1,8 +1,14 @@
 @import "_variables.sass";
 
-h1
+h1, h2, h3
   font-family: $font-family-big
 
+h1
+  font-size: 3em
+
+h2
+  font-size: 2em
+
 @mixin breakpoint($point)
   @if $point == desktop
     @media (min-width: 70em)
diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
new file mode 100644
index 0000000..d59afa0
--- /dev/null
+++ b/src/sass/_commit.sass
@@ -0,0 +1,106 @@
+@import "_bootstrap.sass";
+
+.commit
+  border-bottom: #ccc 1px solid
+  padding: 20px 10px
+  margin: 0
+  &:hover
+    background-color: darken(#fbfcfc, 3%)
+  .head
+    > div
+      span
+        color: #9f9ca5
+        @include breakpoint(phablet)
+          margin-right: 8px
+      h6 a
+        color: $secondary
+        font-weight: 100
+    span
+      float: left
+  .author_committer
+    display: grid
+    grid-template-columns: 50% 50%
+    align-items: center
+    justify-items: center
+    @include breakpoint(phablet)
+      grid-template-columns: 100%
+    div
+      width: 100%
+      @include breakpoint(phablet)
+        &:first-child
+          padding-bottom: 10px
+    .avatar
+      width: 30px
+      float: left
+      margin-right: 5px
+    p
+      margin: 0
+      line-height: 30px
+      overflow: hidden
+      height: 30px
+      text-overflow: ellipsis
+      white-space: nowrap
+      padding-right: 5px
+  h5, h6
+    font-weight: bold
+    font-family: $font-family-mono
+    font-size: 2em
+    a
+      color: $primary
+      text-decoration: underline
+      @include breakpoint(phablet)
+        overflow: hidden
+        width: 111px
+        display: block
+
+  h6
+    font-size: 1em
+    a
+      line-height: 24px
+      margin-left: 5px
+      @include breakpoint(phablet)
+        width: 56px
+
+
+  .text
+    p
+      margin: 5px 0 0
+      span.middot
+        margin: 0 10px
+        color: #ccc
+      span.date
+        color: $secondary
+        white-space: pre
+        display: inline-block
+
+  .repo a
+    color: #fff
+    text-decoration: none !important
+    background: $primary
+    padding: 3px
+    float: right
+    max-width: 200px
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    border-radius: 2px
+    @include breakpoint(phablet)
+      max-width: 180px
+
+.top-author
+  display: grid
+  grid-template-columns: 80% 20%
+  .user
+    display: flex
+    img
+      width: 30px
+      height: 30px
+      margin-right: 5px
+    strong
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+
+  .number
+    justify-self: end
+    color: $secondary
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index 33f9271..e64a031 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -5,6 +5,7 @@ header
   color: $color-w
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
+  margin-bottom: 30px
   h1
     font-size: 3em
     margin: 0
diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass
index e716c3c..b13c03e 100644
--- a/src/sass/_variables.sass
+++ b/src/sass/_variables.sass
@@ -2,9 +2,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
 
 $font-family: "Ubuntu", sans-serif
+$font-family-mono: "Ubuntu Mono", "Ubuntu", sans-serif
 $font-family-big: "Bebas Neue", corsive
 
 $primary: #34495e
-$secondary: #e8a83c
+$secondary: #d35400
 
 $color-w: #fafafa
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 18b025a..deab05d 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -1,6 +1,13 @@
 @import "_header.sass";
+@import "_commit.sass";
 
 body
   color: #2c3e50
   font-family: $font-family
   background-color: #fbfcfc 
+
+#home
+  @include breakpoint(phablet)
+    flex-direction: column-reverse
+    > div
+      margin-bottom: 42px