diff --git a/style-rtl.css b/style-rtl.css index 71b40ae..939bd33 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -5,7 +5,7 @@ Author: Pixelgrade Author URI: https://pixelgrade.com Description: Noto is a notebook inspired blogging theme, designed for your creative ambitions. From the variety of colors, the use of subtle motion effects and visual cues, this is the perfect solution to explore the rhythm and dynamics of your text‐based content. Tags: blog, entertainment, translation-ready, theme-options, featured-images, custom-colors, custom-menu, custom-logo, one-column, two-columns, three-columns, editor-style, sticky-post, footer-widgets, threaded-comments, rtl-language-support -Version: 1.1.3 +Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: noto @@ -7484,7 +7484,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { font-size: 25.14286px; } } @media not screen and (min-width: 42.5em) { .site-title { - white-space: inherit; } } + white-space: initial; + word-break: initial; } } @media only screen and (min-width: 62.5em) { body.blog .header { @@ -7580,7 +7581,12 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { grid-row: 5 / 6; } .c-profile-photo { grid-column: 1; - grid-row: 1 / 6; } + grid-row: 1 / 6; } } + @media not screen and (min-width: 62.5em) and (min-width: 30em) { + .c-profile-photo { + display: none; } } + +@media not screen and (min-width: 62.5em) { .c-logo { grid-column: 2; grid-row: 2 / 3; } @@ -8031,22 +8037,22 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { -webkit-transform: scale(1, 0) rotate(0); transform: scale(1, 0) rotate(0); } .c-navbar__zone--left .menu > li:nth-child(1):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-3deg); - transform: scale(1, 1) rotate(-3deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(2):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(-3deg); + transform: scale(1, 1) rotate(-3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(3):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8059,8 +8065,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(5):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8073,15 +8079,15 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(7):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(8):hover > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8094,22 +8100,22 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(10):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(11):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(12):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-3deg); - transform: scale(1, 1) rotate(-3deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8122,8 +8128,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(14):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8136,8 +8142,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(16):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8150,15 +8156,15 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(18):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(19):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(-3deg); + transform: scale(1, 1) rotate(-3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8171,43 +8177,43 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(1) > a:before { - -webkit-transform: scale(1, 1) rotate(-3deg); - transform: scale(1, 1) rotate(-3deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(2) > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(3) > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(4) > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(5) > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(-3deg); + transform: scale(1, 1) rotate(-3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(6) > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8220,22 +8226,22 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(8) > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(9) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(10) > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8248,57 +8254,57 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(12) > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(13) > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(14) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(15) > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(16) > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(17) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(18) > a:before { - -webkit-transform: scale(1, 1) rotate(-3deg); - transform: scale(1, 1) rotate(-3deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(19) > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -10268,84 +10274,84 @@ body:not(.blog) .c-noto__item--post-it { transition: all .3s ease-out; } .c-noto__item:nth-child(20n + 1).has-focus .c-card__frame { - -webkit-transform: rotate(1deg) translateX(-20px) translateY(-20px); - transform: rotate(1deg) translateX(-20px) translateY(-20px); } + -webkit-transform: rotate(2deg) translateX(20px) translateY(-20px); + transform: rotate(2deg) translateX(20px) translateY(-20px); } .c-noto__item:nth-child(20n + 2).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(10px) translateY(-20px); - transform: rotate(2deg) translateX(10px) translateY(-20px); } + -webkit-transform: rotate(1deg) translateX(10px) translateY(-10px); + transform: rotate(1deg) translateX(10px) translateY(-10px); } .c-noto__item:nth-child(20n + 3).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(0px) translateY(20px); - transform: rotate(2deg) translateX(0px) translateY(20px); } + -webkit-transform: rotate(1deg) translateX(-10px) translateY(0px); + transform: rotate(1deg) translateX(-10px) translateY(0px); } .c-noto__item:nth-child(20n + 4).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(-10px) translateY(20px); - transform: rotate(2deg) translateX(-10px) translateY(20px); } + -webkit-transform: rotate(-2deg) translateX(10px) translateY(-20px); + transform: rotate(-2deg) translateX(10px) translateY(-20px); } .c-noto__item:nth-child(20n + 5).has-focus .c-card__frame { - -webkit-transform: rotate(1deg) translateX(-10px) translateY(-20px); - transform: rotate(1deg) translateX(-10px) translateY(-20px); } + -webkit-transform: rotate(2deg) translateX(-10px) translateY(-20px); + transform: rotate(2deg) translateX(-10px) translateY(-20px); } .c-noto__item:nth-child(20n + 6).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(20px) translateY(20px); - transform: rotate(2deg) translateX(20px) translateY(20px); } + -webkit-transform: rotate(1deg) translateX(-10px) translateY(-10px); + transform: rotate(1deg) translateX(-10px) translateY(-10px); } .c-noto__item:nth-child(20n + 7).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(-10px) translateY(-10px); - transform: rotate(-1deg) translateX(-10px) translateY(-10px); } + -webkit-transform: rotate(-1deg) translateX(20px) translateY(0px); + transform: rotate(-1deg) translateX(20px) translateY(0px); } .c-noto__item:nth-child(20n + 8).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(0px) translateY(-10px); - transform: rotate(-1deg) translateX(0px) translateY(-10px); } + -webkit-transform: rotate(2deg) translateX(-20px) translateY(-10px); + transform: rotate(2deg) translateX(-20px) translateY(-10px); } .c-noto__item:nth-child(20n + 9).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(20px) translateY(0px); - transform: rotate(-1deg) translateX(20px) translateY(0px); } + -webkit-transform: rotate(2deg) translateX(-10px) translateY(10px); + transform: rotate(2deg) translateX(-10px) translateY(10px); } .c-noto__item:nth-child(20n + 10).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(-10px) translateY(20px); - transform: rotate(-1deg) translateX(-10px) translateY(20px); } + -webkit-transform: rotate(-1deg) translateX(0px) translateY(10px); + transform: rotate(-1deg) translateX(0px) translateY(10px); } .c-noto__item:nth-child(20n + 11).has-focus .c-card__frame { - -webkit-transform: rotate(1deg) translateX(0px) translateY(-10px); - transform: rotate(1deg) translateX(0px) translateY(-10px); } + -webkit-transform: rotate(-1deg) translateX(10px) translateY(-20px); + transform: rotate(-1deg) translateX(10px) translateY(-20px); } .c-noto__item:nth-child(20n + 12).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(-10px) translateY(-10px); - transform: rotate(-1deg) translateX(-10px) translateY(-10px); } + -webkit-transform: rotate(-2deg) translateX(-10px) translateY(-20px); + transform: rotate(-2deg) translateX(-10px) translateY(-20px); } .c-noto__item:nth-child(20n + 13).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(0px) translateY(0px); - transform: rotate(-1deg) translateX(0px) translateY(0px); } + -webkit-transform: rotate(1deg) translateX(20px) translateY(-10px); + transform: rotate(1deg) translateX(20px) translateY(-10px); } .c-noto__item:nth-child(20n + 14).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(10px) translateY(-20px); - transform: rotate(-2deg) translateX(10px) translateY(-20px); } + -webkit-transform: rotate(1deg) translateX(-10px) translateY(-10px); + transform: rotate(1deg) translateX(-10px) translateY(-10px); } .c-noto__item:nth-child(20n + 15).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(10px) translateY(0px); - transform: rotate(2deg) translateX(10px) translateY(0px); } + -webkit-transform: rotate(2deg) translateX(10px) translateY(-20px); + transform: rotate(2deg) translateX(10px) translateY(-20px); } .c-noto__item:nth-child(20n + 16).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(-10px) translateY(-10px); - transform: rotate(2deg) translateX(-10px) translateY(-10px); } + -webkit-transform: rotate(-2deg) translateX(20px) translateY(-10px); + transform: rotate(-2deg) translateX(20px) translateY(-10px); } .c-noto__item:nth-child(20n + 17).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(-10px) translateY(10px); - transform: rotate(-2deg) translateX(-10px) translateY(10px); } + -webkit-transform: rotate(-1deg) translateX(0px) translateY(10px); + transform: rotate(-1deg) translateX(0px) translateY(10px); } .c-noto__item:nth-child(20n + 18).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(0px) translateY(10px); - transform: rotate(2deg) translateX(0px) translateY(10px); } + -webkit-transform: rotate(-1deg) translateX(20px) translateY(-20px); + transform: rotate(-1deg) translateX(20px) translateY(-20px); } .c-noto__item:nth-child(20n + 19).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(-20px) translateY(-20px); - transform: rotate(-2deg) translateX(-20px) translateY(-20px); } + -webkit-transform: rotate(1deg) translateX(-20px) translateY(0px); + transform: rotate(1deg) translateX(-20px) translateY(0px); } .c-noto__item:nth-child(20n + 20).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(-10px) translateY(0px); - transform: rotate(2deg) translateX(-10px) translateY(0px); } + -webkit-transform: rotate(2deg) translateX(-10px) translateY(20px); + transform: rotate(2deg) translateX(-10px) translateY(20px); } .c-burger { position: relative; diff --git a/style.css b/style.css index cced320..28a722e 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,7 @@ Author: Pixelgrade Author URI: https://pixelgrade.com Description: Noto is a notebook inspired blogging theme, designed for your creative ambitions. From the variety of colors, the use of subtle motion effects and visual cues, this is the perfect solution to explore the rhythm and dynamics of your text‐based content. Tags: blog, entertainment, translation-ready, theme-options, featured-images, custom-colors, custom-menu, custom-logo, one-column, two-columns, three-columns, editor-style, sticky-post, footer-widgets, threaded-comments, rtl-language-support -Version: 1.1.3 +Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: noto @@ -8037,50 +8037,50 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { -webkit-transform: scale(1, 0) rotate(0); transform: scale(1, 0) rotate(0); } .c-navbar__zone--left .menu > li:nth-child(1):hover > a:before { - -webkit-transform: scale(1, 1) rotate(3deg); - transform: scale(1, 1) rotate(3deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(2):hover > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(3deg); + transform: scale(1, 1) rotate(3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(3):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(4):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(5):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(6):hover > a:before { - -webkit-transform: scale(1, 1) rotate(2deg); - transform: scale(1, 1) rotate(2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(7):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8093,15 +8093,15 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(9):hover > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(10):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8114,22 +8114,22 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(12):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(13):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(14):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8142,43 +8142,43 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(16):hover > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(17):hover > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(18):hover > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(19):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(3deg); + transform: scale(1, 1) rotate(3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:nth-child(20):hover > a:before { - -webkit-transform: scale(1, 1) rotate(-1deg); - transform: scale(1, 1) rotate(-1deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(1) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8191,15 +8191,15 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(3) > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(4) > a:before { - -webkit-transform: scale(1, 1) rotate(3deg); - transform: scale(1, 1) rotate(3deg); + -webkit-transform: scale(1, 1) rotate(0deg); + transform: scale(1, 1) rotate(0deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8212,8 +8212,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(6) > a:before { - -webkit-transform: scale(1, 1) rotate(3deg); - transform: scale(1, 1) rotate(3deg); + -webkit-transform: scale(1, 1) rotate(-1deg); + transform: scale(1, 1) rotate(-1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8233,29 +8233,29 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(9) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(10) > a:before { - -webkit-transform: scale(1, 1) rotate(-2deg); - transform: scale(1, 1) rotate(-2deg); + -webkit-transform: scale(1, 1) rotate(1deg); + transform: scale(1, 1) rotate(1deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(11) > a:before { - -webkit-transform: scale(1, 1) rotate(1deg); - transform: scale(1, 1) rotate(1deg); + -webkit-transform: scale(1, 1) rotate(3deg); + transform: scale(1, 1) rotate(3deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(12) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8268,8 +8268,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(14) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8282,8 +8282,8 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(16) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -8296,22 +8296,22 @@ body:not(.blog) .c-navbar__zone--branding:hover .header:after { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(18) > a:before { - -webkit-transform: scale(1, 1) rotate(3deg); - transform: scale(1, 1) rotate(3deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(19) > a:before { - -webkit-transform: scale(1, 1) rotate(0deg); - transform: scale(1, 1) rotate(0deg); + -webkit-transform: scale(1, 1) rotate(-2deg); + transform: scale(1, 1) rotate(-2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-navbar__zone--left .menu > li:focus-within:nth-child(20) > a:before { - -webkit-transform: scale(1, 1) rotate(3deg); - transform: scale(1, 1) rotate(3deg); + -webkit-transform: scale(1, 1) rotate(2deg); + transform: scale(1, 1) rotate(2deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -10274,84 +10274,84 @@ body:not(.blog) .c-noto__item--post-it { transition: all .3s ease-out; } .c-noto__item:nth-child(20n + 1).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(0px) translateY(-10px); - transform: rotate(-2deg) translateX(0px) translateY(-10px); } + -webkit-transform: rotate(-2deg) translateX(-20px) translateY(-20px); + transform: rotate(-2deg) translateX(-20px) translateY(-20px); } .c-noto__item:nth-child(20n + 2).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(0px) translateY(0px); - transform: rotate(2deg) translateX(0px) translateY(0px); } + -webkit-transform: rotate(-1deg) translateX(-10px) translateY(-10px); + transform: rotate(-1deg) translateX(-10px) translateY(-10px); } .c-noto__item:nth-child(20n + 3).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(-10px) translateY(0px); - transform: rotate(-2deg) translateX(-10px) translateY(0px); } + -webkit-transform: rotate(-1deg) translateX(10px) translateY(0px); + transform: rotate(-1deg) translateX(10px) translateY(0px); } .c-noto__item:nth-child(20n + 4).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(10px) translateY(-10px); - transform: rotate(-1deg) translateX(10px) translateY(-10px); } + -webkit-transform: rotate(2deg) translateX(-10px) translateY(-20px); + transform: rotate(2deg) translateX(-10px) translateY(-20px); } .c-noto__item:nth-child(20n + 5).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(20px) translateY(0px); - transform: rotate(2deg) translateX(20px) translateY(0px); } + -webkit-transform: rotate(-2deg) translateX(10px) translateY(-20px); + transform: rotate(-2deg) translateX(10px) translateY(-20px); } .c-noto__item:nth-child(20n + 6).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(0px) translateY(20px); - transform: rotate(2deg) translateX(0px) translateY(20px); } + -webkit-transform: rotate(-1deg) translateX(10px) translateY(-10px); + transform: rotate(-1deg) translateX(10px) translateY(-10px); } .c-noto__item:nth-child(20n + 7).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(20px) translateY(-10px); - transform: rotate(-2deg) translateX(20px) translateY(-10px); } + -webkit-transform: rotate(1deg) translateX(-20px) translateY(0px); + transform: rotate(1deg) translateX(-20px) translateY(0px); } .c-noto__item:nth-child(20n + 8).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(-20px) translateY(20px); - transform: rotate(-2deg) translateX(-20px) translateY(20px); } + -webkit-transform: rotate(-2deg) translateX(20px) translateY(-10px); + transform: rotate(-2deg) translateX(20px) translateY(-10px); } .c-noto__item:nth-child(20n + 9).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(-20px) translateY(0px); - transform: rotate(-1deg) translateX(-20px) translateY(0px); } + -webkit-transform: rotate(-2deg) translateX(10px) translateY(10px); + transform: rotate(-2deg) translateX(10px) translateY(10px); } .c-noto__item:nth-child(20n + 10).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(0px) translateY(-20px); - transform: rotate(-2deg) translateX(0px) translateY(-20px); } + -webkit-transform: rotate(1deg) translateX(0px) translateY(10px); + transform: rotate(1deg) translateX(0px) translateY(10px); } .c-noto__item:nth-child(20n + 11).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(10px) translateY(-10px); - transform: rotate(-2deg) translateX(10px) translateY(-10px); } + -webkit-transform: rotate(1deg) translateX(-10px) translateY(-20px); + transform: rotate(1deg) translateX(-10px) translateY(-20px); } .c-noto__item:nth-child(20n + 12).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(0px) translateY(10px); - transform: rotate(-1deg) translateX(0px) translateY(10px); } + -webkit-transform: rotate(2deg) translateX(10px) translateY(-20px); + transform: rotate(2deg) translateX(10px) translateY(-20px); } .c-noto__item:nth-child(20n + 13).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(10px) translateY(10px); - transform: rotate(-2deg) translateX(10px) translateY(10px); } + -webkit-transform: rotate(-1deg) translateX(-20px) translateY(-10px); + transform: rotate(-1deg) translateX(-20px) translateY(-10px); } .c-noto__item:nth-child(20n + 14).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(20px) translateY(-20px); - transform: rotate(-2deg) translateX(20px) translateY(-20px); } + -webkit-transform: rotate(-1deg) translateX(10px) translateY(-10px); + transform: rotate(-1deg) translateX(10px) translateY(-10px); } .c-noto__item:nth-child(20n + 15).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(0px) translateY(20px); - transform: rotate(-1deg) translateX(0px) translateY(20px); } + -webkit-transform: rotate(-2deg) translateX(-10px) translateY(-20px); + transform: rotate(-2deg) translateX(-10px) translateY(-20px); } .c-noto__item:nth-child(20n + 16).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(20px) translateY(0px); - transform: rotate(2deg) translateX(20px) translateY(0px); } + -webkit-transform: rotate(2deg) translateX(-20px) translateY(-10px); + transform: rotate(2deg) translateX(-20px) translateY(-10px); } .c-noto__item:nth-child(20n + 17).has-focus .c-card__frame { - -webkit-transform: rotate(1deg) translateX(10px) translateY(-10px); - transform: rotate(1deg) translateX(10px) translateY(-10px); } + -webkit-transform: rotate(1deg) translateX(0px) translateY(10px); + transform: rotate(1deg) translateX(0px) translateY(10px); } .c-noto__item:nth-child(20n + 18).has-focus .c-card__frame { - -webkit-transform: rotate(-2deg) translateX(20px) translateY(20px); - transform: rotate(-2deg) translateX(20px) translateY(20px); } + -webkit-transform: rotate(1deg) translateX(-20px) translateY(-20px); + transform: rotate(1deg) translateX(-20px) translateY(-20px); } .c-noto__item:nth-child(20n + 19).has-focus .c-card__frame { - -webkit-transform: rotate(2deg) translateX(10px) translateY(10px); - transform: rotate(2deg) translateX(10px) translateY(10px); } + -webkit-transform: rotate(-1deg) translateX(20px) translateY(0px); + transform: rotate(-1deg) translateX(20px) translateY(0px); } .c-noto__item:nth-child(20n + 20).has-focus .c-card__frame { - -webkit-transform: rotate(-1deg) translateX(-10px) translateY(20px); - transform: rotate(-1deg) translateX(-10px) translateY(20px); } + -webkit-transform: rotate(-2deg) translateX(10px) translateY(20px); + transform: rotate(-2deg) translateX(10px) translateY(20px); } .c-burger { position: relative; diff --git a/variations/noto/scss/style.scss b/variations/noto/scss/style.scss index 882375f..ba88283 100644 --- a/variations/noto/scss/style.scss +++ b/variations/noto/scss/style.scss @@ -5,7 +5,7 @@ Author: Pixelgrade Author URI: https://pixelgrade.com Description: Noto is a notebook inspired blogging theme, designed for your creative ambitions. From the variety of colors, the use of subtle motion effects and visual cues, this is the perfect solution to explore the rhythm and dynamics of your text‐based content. Tags: blog, entertainment, translation-ready, theme-options, featured-images, custom-colors, custom-menu, custom-logo, one-column, two-columns, three-columns, editor-style, sticky-post, footer-widgets, threaded-comments, rtl-language-support -Version: 1.1.3 +Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: noto