diff --git a/src/404.html b/src/404.html index 446f2a2..3bfe86f 100644 --- a/src/404.html +++ b/src/404.html @@ -22,7 +22,7 @@ diff --git a/src/about-us.html b/src/about-us.html index 058d2f8..4903127 100644 --- a/src/about-us.html +++ b/src/about-us.html @@ -49,7 +49,7 @@ diff --git a/src/about.html b/src/about.html index 115f459..e5147f1 100644 --- a/src/about.html +++ b/src/about.html @@ -49,7 +49,7 @@ diff --git a/src/contact.html b/src/contact.html index 5ef08c1..58bb529 100644 --- a/src/contact.html +++ b/src/contact.html @@ -49,7 +49,7 @@ diff --git a/src/detail.html b/src/detail.html index 058eca3..f92f3a4 100644 --- a/src/detail.html +++ b/src/detail.html @@ -50,7 +50,7 @@ diff --git a/src/index.html b/src/index.html index 97e7f54..f320470 100644 --- a/src/index.html +++ b/src/index.html @@ -49,7 +49,7 @@ @@ -170,7 +170,7 @@

- Author + Author Triton Maxwell
@@ -292,7 +292,13 @@

Code Tip

-

Cartoon For Fun

+
+

+ Cartoon For Fun + + +

+

Purus euismod id, vehicula etiam, nunc auctor habitasse nullam arcu. Ultricies pellentesque consequat, cursus odio hac nam. Ante non lectus mattis, risus sollicitudin hac, tincidunt turpis sit elit class sodales ultrices faucibus.

@@ -301,7 +307,12 @@

Cartoon For Fun

-
+
+
+ + Author + +

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt diff --git a/src/no-results.html b/src/no-results.html index 44a775f..4fb4f6b 100644 --- a/src/no-results.html +++ b/src/no-results.html @@ -22,7 +22,7 @@ diff --git a/src/posts.html b/src/posts.html index 9685268..62b3cca 100644 --- a/src/posts.html +++ b/src/posts.html @@ -49,7 +49,7 @@ diff --git a/src/scss/base/_card.scss b/src/scss/base/_card.scss index 71cafc4..575ac3b 100644 --- a/src/scss/base/_card.scss +++ b/src/scss/base/_card.scss @@ -48,7 +48,7 @@ h5 { margin: 0; height: 100%; - @include fibMixins.flex_init($center: true); + @include fibMixins.flex_init($ver: true); font: { family: fibVars.$card-title-font-family; size: fibVars.$card-title-font-size; diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss index 6738cdb..66cad37 100644 --- a/src/scss/base/_mixins.scss +++ b/src/scss/base/_mixins.scss @@ -526,6 +526,7 @@ } } +// Creates film strip like corners. @mixin film_strip($bg-color) { position: relative; padding: { @@ -555,4 +556,23 @@ -webkit-linear-gradient(left, $bg-color 10px, rgba(0, 0, 0, 0) 10px) repeat-x; background-size: 20px 100%; } +} + +// Creates folded corner. +// https://nicolasgallagher.com/pure-css-folded-corner-effect/demo/. +@mixin folded_corner($bg-color, $size) { + position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + border-width: 0 $size $size 0; + border-style: solid; + border-color: #fff #fff $bg-color $bg-color; + background: $bg-color; + display: block; + width: 0; + } } \ No newline at end of file diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index ff7e1d4..489724f 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -21,7 +21,6 @@ $black: rgb(0, 0, 0) !default; $brand-color: rgb(240, 72, 117) !default; $brand-bg: rgb(75, 85, 94) !default; $brand-gray: rgb(201, 195, 198) !default; -$brand-cool: rgba(212, 55, 98) !default; $brand-light: color.adjust($brand-color, $lightness: 15%) !default; $brand-dark: color.adjust($brand-color, $lightness: -15%) !default; @@ -223,7 +222,7 @@ $card-header-bg: $dark-gray !default; $card-title-font-family: $small-text-font-family !default; $card-title-font-size: $xs-size !default; $card-title-color: $dim-gray !default; -$card-title-bg-color: $brand-cool !default; +$card-title-bg-color: $medium-gray !default; $card-footer-font-family: $small-text-font-family !default; $card-footer-font-size: $sm-size !default; $card-footer-color: $gray !default; diff --git a/src/scss/site/_common.scss b/src/scss/site/_common.scss index 948cc0e..913c538 100644 --- a/src/scss/site/_common.scss +++ b/src/scss/site/_common.scss @@ -30,7 +30,7 @@ border-bottom: none; // Author Photo. - .cmp__article-author-pic { + img { border-radius: 50%; opacity: fibSiteVars.$article-author-pic-opacity; width: fibSiteVars.$author-pic-large-screen-width; @@ -73,6 +73,7 @@ img { border-radius: 50%; margin-right: fibFuncs.size(-14); + width: fibSiteVars.$author-pic-default-width; } } } diff --git a/src/scss/site/_header.scss b/src/scss/site/_header.scss index 425ae9e..61fe00a 100644 --- a/src/scss/site/_header.scss +++ b/src/scss/site/_header.scss @@ -39,6 +39,11 @@ a.cmp__blog-logo { } } + // Logo Image. + .cmp__blog-logo-pic { + width: fibFuncs.size(7); + } + // Logo Name. .cmp__blog-name { position: relative; diff --git a/src/scss/site/_variables.scss b/src/scss/site/_variables.scss index 989a795..9f8b40f 100644 --- a/src/scss/site/_variables.scss +++ b/src/scss/site/_variables.scss @@ -48,9 +48,9 @@ $article-author-role-font-color: fibVars.$dim-gray !default; $article-author-left-offset: fibFuncs.size(21, true) !default; $article-author-admin-badge-color: fibVars.$yellow-green !default; $article-author-guest-badge-color: fibVars.$gray !default; -$author-pic-default-width: 30px !default; +$author-pic-default-width: 30px !default; // TODO: Replace to rem. $author-pic-large-screen-width: fibFuncs.size(15) !default; -$comment-textarea-minheight: 75px !default; +$comment-textarea-minheight: 75px !default; // TODO: Replace to rem. // Table Of Contents. $toc-bg-color: fibVars.$widget-bg-color !default; diff --git a/src/scss/site/pages/_home.scss b/src/scss/site/pages/_home.scss index 06831ed..4304eea 100644 --- a/src/scss/site/pages/_home.scss +++ b/src/scss/site/pages/_home.scss @@ -143,31 +143,75 @@ } } + // TODO: Need to investigate why x-scrollbar not appears like in other pages. + .cmp__tip { + pre { + code { + white-space: pre-wrap; + } + } + } + .cmp__cartoon { @include fibMixins.film_strip(rgba(230, 230, 230)); margin-top: calc(#{fibVars.$xl-size} + 20px); - h4 { + .cmp__cartoon-title { text-align: center; margin-bottom: fibVars.$xl-size; + position: relative; + + h4 { + @include fibMixins.create_double_side_arrowed_ribbon(fibVars.$xxl-size, fibVars.$white); + display: inline-flex; + padding: { + left: fibVars.$md-size; + right: fibVars.$md-size; + }; + + .cmp__nail { + position: absolute; + width: 5px; + height: 5px; + background-color: fibVars.$gray; + border-radius: 50%; + box-shadow: fibVars.$box-shadow; + z-index: 1; + left: -5px; + } + + .cmp__nail:nth-child(2) { + left: auto; + right: -5px; + } + } } p { - max-width: fibVars.$container-width; - margin-left: auto; - margin-right: auto; + margin-left: fibVars.$lg-size; + margin-right: fibVars.$lg-size; color: fibVars.$gray; } } - .cmp__todo { + .cmp__admin-statement { + position: relative; margin-top: fibFuncs.size(18); - margin-left: auto; - margin-right: auto; - width: 75%; padding: fibVars.$xl-size; color: fibVars.$medium-gray; - @include fibMixins.noisy_bg(fibVars.$success); + background: url('#{fibVars.$assets-path}/background.png'), linear-gradient(45deg, fibVars.$success, darken(rgb(241, 247, 234, 0.7), 5%)); + + .cmp__author { + position: absolute; + top: calc(-1 * #{fibVars.$lg-size}); + left: fibVars.$md-size; + border-radius: 50%; + border: solid 4px fibVars.$white; + + img { + width: fibFuncs.size(10); + } + } p { font: { @@ -196,6 +240,25 @@ display: block; } } + + .cmp__admin-statement { + margin-left: auto; + margin-right: auto; + width: 75%; border-radius: fibVars.$border-radius; + @include fibMixins.folded_corner(rgb(177, 191, 159), fibVars.$xl-size); + } + } +} + +@media only screen and (min-width: fibVars.$breakpoint1) { + + #cmp__blog-home { + .cmp__cartoon { + p { + max-width: fibVars.$container-width; + @include fibMixins.horizontal-center; + } + } } } diff --git a/src/search-results.html b/src/search-results.html index 1b0cb56..d7b618c 100644 --- a/src/search-results.html +++ b/src/search-results.html @@ -22,7 +22,7 @@