From 16a1fe41fd4d95021c5fa49b8314e063d9dd7a62 Mon Sep 17 00:00:00 2001 From: Daniel Tomlinson Date: Sun, 31 May 2020 05:21:26 +0100 Subject: [PATCH] Adding css --- src/.DS_Store | Bin 6148 -> 8196 bytes src/scss/_variables.scss | 26 +-------- src/scss/panaetius-theme.scss | 101 ++++++++++++++++++++++++++++++++++ src/scss/search.scss | 43 +++++++++++++++ src/scss/sticky-footer.scss | 16 ++++++ src/scss/styles.scss | 5 ++ 6 files changed, 168 insertions(+), 23 deletions(-) create mode 100644 src/scss/panaetius-theme.scss create mode 100644 src/scss/search.scss create mode 100644 src/scss/sticky-footer.scss diff --git a/src/.DS_Store b/src/.DS_Store index 3820acba89010a5a31cc47e787eb6b7b6d06e7c9..22ae84e65d7d25926a6ec83a30f5a2f1bfce70c1 100644 GIT binary patch delta 426 zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aKKEC!MX@);P4J#+GtlXCKtHVbly zv20f0=x1Kc&cQLUfh7{8h?OCYA)g_Sp#-52WDZbwE0EUs4+cOMipr$&;sTJ7K+zLP z1v#0;B?bo98JU<_SlQS)I5{~dbF*b|b8^NDh*wwZ8t5oYu4hwVoH2O;n|%FDRFiVj z4TF>Oa|=KgKmn4Aa`RnWp!RTl6@R#Rwc{a2pehsEZ^J$^2jDkYpAZ-lA49P%ToSW}5d83HzgDfk1#8NVtNG c-&pvac{0C@C&)4eCWyr#w=isu=b6I{00|Bn#sB~S diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index fbf730e..10333e5 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -17,12 +17,12 @@ $light: $white; $dark: $gray-900; $headings-color: $gray-900; // $headings-font-family: 'Open Sans', sans-serif; -$headings-font-family: "Jost", sans-serif; +$headings-font-family: "RNSSanz", sans-serif; $headings-font-weight: 400; // $font-family-sans-serif: 'Roboto', sans-serif; -$font-family-sans-serif: "Jost", sans-serif; -$font-family-monospace: "Roboto Mono", monospace; +$font-family-sans-serif: "RNSSanz", sans-serif; +$font-family-monospace: "BergenMono", monospace; $font-family-serif: "Roboto Slab", serif; $link-color: $gray-800; @@ -76,23 +76,3 @@ $navbar-padding-y: 0.4rem; $body-bg: #f9f9f9; -.navbar { - border-bottom: 1px solid rgb(210, 210, 214); -} - -.rotate-a-20 { - transform: rotate(-20deg); - -webkit-transform: rotate(-20deg); - -moz-transform: rotate(-20deg); - -o-transform: rotate(-20deg); - -ms-transform: rotate(-20deg); -} - -img.front-background{ - opacity: 5% !important; - display: block; - width: 100%; - height: 100%; - object-fit: cover; - position: fixed; -} diff --git a/src/scss/panaetius-theme.scss b/src/scss/panaetius-theme.scss new file mode 100644 index 0000000..709af77 --- /dev/null +++ b/src/scss/panaetius-theme.scss @@ -0,0 +1,101 @@ +.homepage-image { + @include media-breakpoint-up(lg) { + position: absolute; + width: 400px; + right: 100px; + top: 50px; + } +} + +.author .name a, +.author .social a { + color: $gray-900; + text-decoration: none; +} + +blockquote { + color: $gray-400; + border-left: 6px solid $gray-400; + padding-left: $spacer; +} + +code { + background-color: $gray-100; + border-radius: $border-radius-sm; + padding: .125rem .2rem; +} + +code[class*=language-], pre[class*=language-] { + font-family: "BergenMono" !important; + color: red; + @include font-size($code-font-size); +} + +figure.highlight pre:not([class*=language-]) { + padding: 1em; + margin: .5em 0; + overflow: auto; + background-color: $gray-100; +} + +pre code { + padding: 0; + background-color: transparent; +} + +.latest h2 a, +.navbar a, +.card>a, +a.badge { + text-decoration: none; +} + +figure.highlight { + margin-left: -($grid-gutter-width / 2); + margin-right: -($grid-gutter-width / 2); + + @include media-breakpoint-up(md) { + margin-left: 0; + margin-right: 0; + } +} + +#navbar-main-menu { + transition: top 0.2s ease; + + .nav-item .nav-link { + font-size: $navbar-brand-font-size; + } +} + +ul.share.nav { + .nav-link { + padding: $nav-link-padding-y 0.2rem; + text-align: center; + } +} + +footer a:not(.icons) { + color: $gray-200; +} + +.navbar { + border-bottom: 1px solid rgb(210, 210, 214); +} + +.rotate-a-20 { + transform: rotate(-20deg); + -webkit-transform: rotate(-20deg); + -moz-transform: rotate(-20deg); + -o-transform: rotate(-20deg); + -ms-transform: rotate(-20deg); +} + +img.front-background { + opacity: 5% !important; + display: block; + width: 100%; + height: 100%; + object-fit: cover; + position: fixed; +} diff --git a/src/scss/search.scss b/src/scss/search.scss new file mode 100644 index 0000000..c7ad7ea --- /dev/null +++ b/src/scss/search.scss @@ -0,0 +1,43 @@ +.searchbar { + margin-bottom: auto; + margin-top: auto; + height: 60px; + background-color: #353b48; + border-radius: 30px; + padding: 10px; +} + +.search_input { + color: white; + border: 0; + outline: 0; + background: none; + width: 0; + caret-color: transparent; + line-height: 40px; + transition: width 0.4s linear; +} + +.searchbar:hover>.search_input { + padding: 0 10px; + width: 450px; + caret-color: red; + transition: width 0.4s linear; +} + +.searchbar:hover>.search_icon { + background: white; + color: #e74c3c; +} + +.search_icon { + height: 40px; + width: 40px; + float: right; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + color: white; + text-decoration: none; +} diff --git a/src/scss/sticky-footer.scss b/src/scss/sticky-footer.scss new file mode 100644 index 0000000..3defd07 --- /dev/null +++ b/src/scss/sticky-footer.scss @@ -0,0 +1,16 @@ +html, body { + height: 100%; +} + +body { + display: flex; + flex-direction: column; +} + +header, footer { + flex-shrink: 0; +} + +main { + flex: 1 0 auto; +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 19b0ca9..93147c4 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1 +1,6 @@ +@import "_variables"; @import "~bootstrap/scss/bootstrap"; +@import "panaetius-theme"; +@import "sticky-footer"; +@import "search"; +@import "fonts";