pie + sass

.gitignore

@@ -1,3 +1,4 @@
 .bundle/
 vendor/
 node_modules/
+.sass-cache/

Gemfile

@@ -4,6 +4,7 @@ gem 'email_address'
 gem 'haml'
 gem 'jekyll'
 gem 'rack-flash3'
+gem 'sass'
 gem 'sinatra'
 gem 'sinatra_warden'
 

Gemfile.lock

@@ -99,6 +99,7 @@ DEPENDENCIES
   pry
   rack-flash3
   rubocop
+  sass
   sinatra
   sinatra_warden
 

config.ru

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
+require 'sass/plugin/rack'
 # require 'rack/protection'
 require_relative 'sutty'
 
 # use Rack::Protection
+
+Sass::Plugin.options[:style] = :compressed
+use Sass::Plugin::Rack
+
 run Sutty::App

public/assets/css/sutty.css

@@ -1,11 +0,0 @@
-.background-cover {
-  background: url(/assets/img/background.jpg) no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.full-height {
-  height: 100vh;
-}

public/stylesheets/sass/sutty.scss

@@ -0,0 +1,31 @@
+$footer-height: 60px;
+
+.background-cover {
+  background: url(/assets/img/background.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.full-height {
+  height: calc(100vh - #{$footer-height});
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: $footer-height;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: $footer-height;
+  line-height: $footer-height;
+  text-align: center;
+}

public/stylesheets/sutty.css

@@ -0,0 +1,2 @@
+.background-cover{background:url(/assets/img/background.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.full-height{height:calc(100vh - 60px)}html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;text-align:center}
+/*# sourceMappingURL=sutty.css.map */

public/stylesheets/sutty.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEA,iBAAkB,CAChB,UAAU,CAAE,6DAA6D,CACzE,uBAAuB,CAAE,KAAK,CAC9B,oBAAoB,CAAE,KAAK,CAC3B,kBAAkB,CAAE,KAAK,CACzB,eAAe,CAAE,KAAK,CAGxB,YAAa,CACX,MAAM,CAAE,kBAA+B,CAGzC,IAAK,CACH,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,IAAI,CAGlB,IAAK,CACH,aAAa,CApBC,IAAI,CAuBpB,OAAQ,CACN,QAAQ,CAAE,QAAQ,CAClB,MAAM,CAAE,CAAC,CACT,KAAK,CAAE,IAAI,CACX,MAAM,CA3BQ,IAAI,CA4BlB,WAAW,CA5BG,IAAI,CA6BlB,UAAU,CAAE,MAAM",
+"sources": ["sass/sutty.scss"],
+"names": [],
+"file": "sutty.css"
+}

views/layout.haml

@@ -4,7 +4,12 @@
     %meta{content: "text/html; charset=UTF-8", 'http-equiv': "Content-Type"}/
     %title Sutty
     %link{rel: 'stylesheet', type: 'text/css', href: '/assets/css/bootstrap.min.css'}
-    %link{rel: 'stylesheet', type: 'text/css', href: '/assets/css/sutty.css'}
+    %link{rel: 'stylesheet', type: 'text/css', href: '/stylesheets/sutty.css'}
   %body{class: @has_cover ? 'background-cover' : ''}
     .container
       = yield
+    %footer.footer
+      %p{style: @has_cover ? 'color: white' : ''}
+        %a{href: 'https://0xacab.org/itacate-kefir/sutty'} Sutty
+        es desarrollada por
+        %a{href: 'https://kefir.red'} Kéfir