summaryrefslogtreecommitdiff
path: root/src/sass
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2021-03-19 15:05:25 +0100
committerGitHub <noreply@github.com>2021-03-19 15:05:25 +0100
commit85fa83918294eb11f7bea7c4b821bcc15b44d5cb (patch)
tree1fc12bfe371720d8cfc66ae9b72a3528010432ae /src/sass
parent24f06a5589bf440df492eb58237b749ebb8f884f (diff)
parent76f1866b9ba0d4fa90395f7f39586367092f15d2 (diff)
Merge pull request #7 from gico-net/feat/header
Header
Diffstat (limited to 'src/sass')
-rw-r--r--src/sass/_bootstrap.sass21
-rw-r--r--src/sass/_header.sass14
-rw-r--r--src/sass/_variables.sass5
-rw-r--r--src/sass/main.sass7
4 files changed, 43 insertions, 4 deletions
diff --git a/src/sass/_bootstrap.sass b/src/sass/_bootstrap.sass
index 46309ba..755ffb1 100644
--- a/src/sass/_bootstrap.sass
+++ b/src/sass/_bootstrap.sass
@@ -1,7 +1,22 @@
@import "_variables.sass";
-body
- font-family: $font-family
-
h1
font-family: $font-family-big
+
+@mixin breakpoint($point)
+ @if $point == desktop
+ @media (min-width: 70em)
+ @content
+ @else if $point == laptop
+ @media (min-width: 64em)
+ @content
+ @else if $point == tablet
+ @media (max-width: 1280px)
+ @content
+ @else if $point == phablet
+ @media (max-width: 1000px)
+ @content
+ @else if $point == mobileonly
+ @media (max-width: 768px)
+ @content
+
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
new file mode 100644
index 0000000..33f9271
--- /dev/null
+++ b/src/sass/_header.sass
@@ -0,0 +1,14 @@
+@import "_bootstrap.sass"
+
+header
+ background-color: $primary
+ color: $color-w
+ padding: 10px 0
+ box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
+ h1
+ font-size: 3em
+ margin: 0
+ a
+ color: $color-w !important
+ @include breakpoint(phablet)
+ text-align: center
diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass
index da6e948..e716c3c 100644
--- a/src/sass/_variables.sass
+++ b/src/sass/_variables.sass
@@ -3,3 +3,8 @@
$font-family: "Ubuntu", sans-serif
$font-family-big: "Bebas Neue", corsive
+
+$primary: #34495e
+$secondary: #e8a83c
+
+$color-w: #fafafa
diff --git a/src/sass/main.sass b/src/sass/main.sass
index eb29317..18b025a 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -1 +1,6 @@
-@import "_bootstrap.sass"
+@import "_header.sass";
+
+body
+ color: #2c3e50
+ font-family: $font-family
+ background-color: #fbfcfc