_sass/layouts/layout.scss in jekyll-theme-fica-0.2.0 vs _sass/layouts/layout.scss in jekyll-theme-fica-0.2.2
- old
+ new
@@ -1,718 +1,612 @@
-//
-// Site header
-//
-.site-header {
- background-color: $site-header-bg;
- border-top: 5px solid $site-header-bg;
- border-bottom: 5px solid $site-header-bg;
- min-height: $spacing-unit * 1.865;
- line-height: $line-height * $font-size * 2.25;
-
- // Positioning context for the mobile navigation icon
- position: relative;
-}
-
-.site-header-home {
- background-color: $home-header-title-color;
- border-top: 5px solid $home-header-title-color;
- border-bottom: 5px solid $home-header-title-color;
- min-height: $spacing-unit * 1.865;
- line-height: $line-height * $font-size * 2.25;
-
- // Positioning context for the mobile navigation icon
- position: relative;
-
-}
-
-//
-// Site Nav and Title
-//
-.site-nav {
- transition: all 0.3s ease-in-out;
- position: absolute;
- top: 9px;
- right: $spacing-unit / 2;
- background-color: $menu-bdr-color;
- border-radius: 10px;
- text-align: right;
- z-index: 10000;
-
- .btn-nav {
- font-weight: 700;
- color: $text-color;
- line-height: $line-height;
- letter-spacing: 0rem;
- display: block;
- padding: 5px 10px;
-
- font-family: $text-font-family;
-
- margin-left: 20px;
-
- &:hover {
- color: $header-link-color;
- }
- }
-
- .nav-trigger {
- display: none;
- float: right;
- padding-right: 100px;
- padding-left: 1px;
- }
-
- .menu-icon {
- float: right;
- width: 36px;
- height: 26px;
- line-height: 0;
- padding-top: 10px;
- text-align: center;
-
- >svg path {
- fill: $menu-color;
- }
- }
-
- label[for="nav-trigger"] {
- display: block;
- float: right;
- width: 36px;
- height: 36px;
- z-index: 2;
- cursor: pointer;
- }
-
- input~.trigger {
- clear: both;
- display: none;
- }
-
- input:checked~.trigger {
- display: block;
- padding-bottom: 5px;
- }
-
- .page-link {
- font-weight: 600;
- color: $text-color;
- line-height: $line-height;
- letter-spacing: 0rem;
- display: block;
- padding: 5px 10px;
- transition: all 0.4s ease;
-
- font-family: $text-font-family;
-
- // Gaps between nav items, but not on the last one
- &:not(:last-child) {
- margin-right: 0;
- }
-
- margin-left: 20px;
-
- &:hover {
- color: $header-link-color;
- }
-
- }
-
- @media screen and (min-width: $mobile-width) {
- position: static;
- float: right;
- border: none;
- background-color: inherit;
-
- .btn-nav {
- padding: 11px 19px 13px;
- border: none;
- border-radius: 40px;
- display: inline;
- margin-right: 20px;
- cursor: pointer;
- color: $BTT-svg-color;
- background-color: $link-color;
- transition: $transition-btn;
-
- &,
- &:visited {
- color: $BTT-svg-color;
- }
-
- &:hover {
- color: $btn-text-hover-color;
- text-decoration: none;
- background-color: $btn-color-hover;
- border-color: $btn-color-hover;
- }
- }
-
- label[for="nav-trigger"] {
- display: none;
- }
-
- .menu-icon {
- display: none;
- }
-
- input~.trigger {
- display: block;
- }
-
- .page-link {
- display: inline;
- padding: 0;
-
- &:not(:last-child) {
- margin-right: 20px;
- }
-
- margin-left: auto;
- }
- }
-}
-
-.site-title {
- @include relative-font-size(1.9);
- font-weight: 690;
- letter-spacing: -1px;
- margin-bottom: 0;
- font-family: $text-font-family;
-
- @include media-query($mobile-width) {
- padding-right: 45px;
- }
-
- &,
- &:visited {
- color: $text-color;
- }
-
- &:hover {
- color: $header-link-color;
- }
-
- @include animation-fade-in(105m);
- animation-duration: $animation-main;
- -webkit-animation-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
- animation-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
-}
-
-//
-// Header Banner
-//
-.site-banner {
- padding: 40px 15px 40px 15px;
- color: $text-color;
- background-color: $home-header-title-color;
- text-align: center;
- justify-content: space-around;
-
- >img {
- padding-top: 61px;
- width: 100%;
- @include animation-fade-in(2.10);
- }
-
- .banner-content {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
-
- >a {
- display: block;
- margin-top: 30px;
- padding: 15px 81px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- color: $BTT-svg-color;
- background-color: $link-color;
- transition: $transition-btn;
-
- @include animation-fade-in(1.65);
-
- &,
- &:visited {
- color: $BTT-svg-color;
- }
-
- &:hover {
- color: $btn-text-hover-color;
- text-decoration: none;
- background-color: $btn-color-hover;
- border-color: $btn-color-hover;
- }
- }
-
- .page-header-title {
- border-top: 8px;
- margin-bottom: 0%;
- font-size: $site-banner-title-fnt-sze;
- color: $header-bg-color;
- text-align: center;
- font-weight: bold;
- font-family: $text-font-family;
- padding-bottom: 7px;
- line-height: 1.5;
- @include animation-fade-in(.10);
- }
-
- .site-banner-description {
- border-top: 8px;
- margin-bottom: 0%;
- font-size: $site-banner-description-fnt-sze;
- color: $text-color;
- text-align: center;
- font-weight: bold;
- font-family: $text-font-family;
- padding-bottom: 7px;
- @include animation-fade-in(1);
- }
-
- }
-
-
- // For Large Screens
- @media screen and (min-width: $mobile-width) {
- border-bottom: 100px solid $home-header-title-color;
-
- .banner-content {
- >a {
- display: none;
- }
- }
- }
-
- @media screen and (min-width: 993px) {
- display: flex;
- padding: 40px 10px 40px 10px;
-
- >img {
- width: $site-banner-picture-sze_wdth;
- @include animation-fade-in(2.65);
- }
-
- .banner-content {
- transform: translateX(30vw);
- animation: slide 1250ms cubic-bezier(0.75, 0, 0.33, 1) forwards;
- animation-delay: 2s;
-
- >a {
- display: block;
- }
- }
- }
-
-}
-
-//
-// Site footer
-//
-.site-footer {
- background-color: $footer-bg-color;
- padding-top: $spacing-unit;
- position: relative;
-
- .footer-col {
- margin-bottom: 10px;
- }
-
- .footer-middle {
- margin-bottom: 10px;
- }
-
- .footer-last {
- margin-bottom: 10px;
- }
-
- .Links_footer {
- list-style: none;
- width: calc(100% - (#{$spacing-unit} / 2));
- transition: $transition-links;
- word-break: break-all;
-
- &:first-child {
- font-weight: bolder;
- padding-right: $spacing-unit / 2;
- padding-left: 0;
- padding-bottom: 4px;
- font-size: larger;
- color: $footer-head-link-color;
- }
-
- >a {
- color: $footer-links-color;
-
- &:visited {
- color: $footer-links-color;
- }
-
- &:hover {
- color: $footer-links-hover-color;
- }
- }
- }
-
- .Product_footer {
- list-style: none;
- color: $text-color;
- width: calc(100% - (#{$spacing-unit} / 2));
- padding: 0 ($spacing-unit / 2);
-
- &:first-child {
- padding: 1px 0px 0px;
- font-size: 0.6cm;
- font-weight: 900;
- }
-
- &:hover {
- color: $text-color;
- text-decoration: none;
- }
- }
-
- @media screen and (min-width: 650px) {
- .footer-col-wrapper {
- display: flex;
- }
-
- .footer-col {
- @include footer-wrapper;
- }
-
- .footer-middle {
- @include footer-wrapper;
- width: calc(35% - (#{$spacing-unit} / 2));
- }
-
- .footer-last {
- @include footer-wrapper;
- width: calc(35% - (#{$spacing-unit} / 2));
- }
- }
-}
-
-.footer-info {
- padding-top: 10px;
- border-top: 1px solid $border-color;
- font-size: 0.8rem;
- justify-content: space-between;
- display: flex;
- flex-direction: column;
- padding: 10px 10px;
- margin-left: 0px;
- margin-right: 0px;
-
- >span {
- margin-bottom: 3px;
-
- >a {
- color: #9e9e9e;
-
- &:visited {
- color: #9e9e9e;
- }
-
- &:hover {
- color: $text-color;
- }
- }
- }
-
- @media screen and (min-width: 650px) {
- flex-direction: row;
- margin-left: 100px;
- margin-right: 100px;
- }
-}
-
-//
-// page content
-//
-.page-content {
- padding: $spacing-unit 0;
- flex: 1 0 auto;
-}
-
-.page-heading {
- @include relative-font-size(2.5);
-}
-
-.post-list-heading {
- @include relative-font-size(1.75);
-}
-
-//
-// Posts
-//
-
-.post-list {
- padding: 9px;
- margin-left: 0;
- list-style: none;
-
- >li {
- border-bottom: 2px solid $border-color;
- padding-bottom: 10px;
- padding-top: 10px;
-
- >p {
- // Make the description shorter
- margin: 0;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3; // line height
- -webkit-box-orient: vertical;
- }
-
- >h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-size: $font-size;
- }
- }
-
-}
-
-.post-meta {
- font-size: $small-font-size;
- color: $text-color;
- word-spacing: 1px;
-}
-
-.text-muted {
- @include text-muted;
-}
-
-.text-unmuted {
- @include text-unmuted;
-}
-
-.post-link {
- @include relative-font-size(2);
-}
-
-.post-header {
- margin-bottom: $spacing-unit;
-}
-
-.post-title {
- @include relative-font-size(2.925);
- line-height: 1.15;
- margin-bottom: 5px;
-
- @media screen and (min-width: $pc-width) {
- @include relative-font-size(3);
- }
-}
-
-.post-content {
- margin-bottom: $spacing-unit;
-
- h4,
- h5,
- h6 {
- margin-top: $spacing-unit;
- }
-}
-
-.post-info {
- display: flex;
- justify-content: space-between;
- padding-bottom: 15px;
- cursor: default;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- align-items: baseline;
-
- .post-info-date {
- color: $footer-head-link-color;
- font-size: $small-font-size;
- word-spacing: 1px;
-
- &::before {
- content: "calendar_today";
- font-family: "Material Icons Round";
- font-size: 12px;
- line-height: 1;
- padding-right: 5px;
- }
- }
-
- .post-info-pin {
- background-color: $table-header-bg-color;
- color: $footer-head-link-color;
- border-radius: 5px;
- padding: 2px 5px 2px 5px;
- cursor: default;
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- display: flex;
- align-items: center;
- gap: 4px;
-
- >span {
- transform: rotate(45deg);
- font-size: 15px;
- line-height: 1.4rem;
- height: 1.3rem;
- }
-
- >p {
- margin-bottom: 0;
- display: none;
- text-transform: capitalize;
- }
-
- @media screen and (min-width: $mobile-width) {
- >p {
- display: inline-block;
- }
- }
- }
-}
-
-//
-// Post Nav
-//
-
-.post-nav {
- padding-top: 5px;
- display: inline;
- list-style: none;
- display: flex;
- justify-content: space-evenly;
- gap: 80px;
- -ms-flex-align: center;
- align-items: center;
- margin: 0px;
-
- @media screen and (min-width: $mobile-width) {
- gap: 100px;
- }
-}
-
-.post-nav-svg {
- color: $footer-links-color;
- transition: $tansitions-page-bar;
- padding: 8px;
- border-radius: 50px;
-
- &:hover {
- background-color: rgba(255, 255, 255, .10);
- }
-}
-
-.disable-svg {
- cursor: not-allowed;
- color: $footer-head-link-color;
-}
-
-.post-nav-num {
- user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- cursor: default;
- display: inline;
- @include text-muted;
-}
-
-
-//
-// Post footer
-//
-.post-footer {
- padding-top: 9px;
- border-top: 3px solid $border-color;
- margin: 0px;
-
- >a {
- >svg {
- fill: $footer-links-color;
- width: 33px;
- height: 33px;
- text-align: center;
- border-radius: 100%;
- padding: 5px 3px 2px 5px;
- transition: $tansitions-page-bar;
-
- &:hover {
- background-color: rgba(255, 255, 255, .10);
- }
- }
- }
-}
-
-.btn {
- padding: 8px 25px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- color: $text-color;
- background-color: $btn-bg-color;
- transition: $transition-btn;
-
- &,
- &:visited {
- color: $text-color;
- }
-
- &:hover {
- color: $btn-text-hover-color;
- text-decoration: none;
- background-color: $btn-color-hover;
- border-color: $btn-color-hover;
- }
-}
-
-//
-// Back to top(BTT)
-//
-#back-to-top {
- display: none;
- position: fixed;
- bottom: 20px;
- right: 20px;
- width: 50px;
- height: 50px;
- background-color: $BTT-bg-color;
- color: $BTT-svg-color;
- border: 2px solid $BTT-bg-color;
- cursor: pointer;
- text-align: center;
- border-radius: 50%;
- text-align: center;
- z-index: 2;
-
- >i {
- // padding-top: 3px;
- font-size: 48px;
- font-weight: 700;
- }
-}
-
-.BTT-Entrance {
- animation-duration: 0.5s;
- animation-fill-mode: both;
- animation-name: BTT-Entrance;
-}
-
-.BTT-Exit {
- animation-duration: 0.25s;
- animation-fill-mode: both;
- animation-name: BTT-Exit;
-}
\ No newline at end of file
+//
+// Site Header
+//
+.site-nav {
+ background: $site-header-bg;
+ height: 80px;
+ width: 100%;
+ z-index: 100;
+ .nav-links {
+ float: right;
+ margin-right: 25px;
+ margin-left: 0;
+ }
+ a {
+ line-height: 80px;
+ margin: 0 5px;
+ color: $text-color;
+ font-size: 17px;
+ padding: 7px 13px;
+ border-radius: 3px;
+ text-transform: uppercase;
+ transition: $transition-links;
+
+ &:hover {
+ color: $text-mute-color;
+ }
+
+ // Download btn
+ &:first-child {
+ color: rgba(0, 0, 0, 0.54);
+ background-color: $link-color;
+ transition: $transition-links;
+ padding: 11px 19px 13px;
+ border-radius: 40px;
+
+ &:hover {
+ background-color: $btn-color-hover;
+ }
+ }
+ }
+
+ .logo {
+ text-transform: none;
+ color: $text-color;
+ font-size: 35px;
+ line-height: 80px;
+ padding: 0 13px;
+ font-weight: bold;
+
+ &:hover {
+ color: $text-mute-color;
+ background-color: transparent;
+ }
+
+ @media screen and (min-width: $pc-width) {
+ padding: 0 30px;
+ }
+ }
+ .checkbtn {
+ font-size: 40px;
+ color: $text-color;
+ float: right;
+ top: 20px;
+ // line-height: 80px;
+ cursor: pointer;
+ display: none;
+ margin: 1% 20px 1% 0;
+ padding: 10px;
+ border-radius: 43px;
+ transition: $transition-btn;
+
+ &:hover {
+ background: rgba(232, 234, 237, 0.04);
+ }
+ }
+ #check {
+ display: none;
+ }
+ @media (max-width: 885px) {
+ .checkbtn {
+ display: block;
+ }
+ .nav-links {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ background: $primary_color;
+ top: 80px;
+ left: 100%;
+ text-align: center;
+ transition: all 0.5s;
+ a {
+ display: block;
+ margin: 0;
+ font-size: 20px;
+
+ &:first-child {
+ background-color: transparent;
+ border-radius: 3px;
+ color: $link-color;
+ }
+
+ &:hover {
+ background: $btn-bg-color;
+ color: rgba(0, 0, 0, 0.54);
+ }
+ &.active {
+ background: $btn-bg-color;
+ }
+ }
+ }
+ #check {
+ &:checked {
+ ~ {
+ .nav-links {
+ left: 0;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Header Banner
+//
+.header-home-mod {
+ position: static;
+ background-color: $home-header-title-color;
+}
+.site-banner {
+ padding: 40px 15px 40px 15px;
+ color: $text-color;
+ background-color: $home-header-title-color;
+ text-align: center;
+ justify-content: space-around;
+ line-height: 1.5;
+
+ .img {
+ padding-top: 61px;
+ width: 100%;
+
+ > img {
+ @include animation-fade-in(2.1);
+ box-shadow: 0px 0px 20px 0px #00000052;
+ transition: all 300ms ease 0ms;
+
+ &:hover {
+ box-shadow: 0px 0px 0px 0px #00000052;
+ }
+ }
+ }
+
+ .banner-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ > a {
+ display: block;
+ margin-top: 30px;
+ padding: 15px 81px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ color: $BTT-svg-color;
+ background-color: $link-color;
+ transition: $transition-btn;
+
+ @include animation-fade-in(1.65);
+
+ &,
+ &:visited {
+ color: $BTT-svg-color;
+ }
+
+ &:hover {
+ color: $btn-text-hover-color;
+ text-decoration: none;
+ background-color: $btn-color-hover;
+ border-color: $btn-color-hover;
+ }
+ }
+
+ .page-header-title {
+ border-top: 8px;
+ margin-bottom: 0%;
+ font-size: $site-banner-title-fnt-sze;
+ color: $header-bg-color;
+ text-align: center;
+ font-weight: bold;
+ font-family: $font-family;
+ padding-bottom: 7px;
+ line-height: 1.5;
+ @include animation-fade-in(0.1);
+ }
+
+ .site-banner-description {
+ border-top: 8px;
+ margin-bottom: 0%;
+ font-size: $site-banner-description-fnt-sze;
+ color: $text-color;
+ text-align: center;
+ font-weight: bold;
+ font-family: $font-family;
+ padding-bottom: 7px;
+ @include animation-fade-in(1);
+ }
+ }
+
+ // For Large Screens
+ @media screen and (min-width: $mobile-width) {
+ border-bottom: 100px solid $home-header-title-color;
+
+ .banner-content {
+ > a {
+ display: none;
+ }
+ }
+ }
+
+ @media screen and (min-width: 993px) {
+ display: flex;
+ padding: 40px 10px 40px 10px;
+
+ .img {
+ width: $site-banner-picture-sze_wdth;
+
+ > img {
+ @include animation-fade-in(2.65);
+ }
+ }
+
+ .banner-content {
+ transform: translateX(30vw);
+ animation: slide 1250ms cubic-bezier(0.75, 0, 0.33, 1) forwards;
+ animation-delay: 2s;
+
+ > a {
+ display: block;
+ }
+ }
+ }
+}
+
+
+
+.text-muted {
+ @include text-muted;
+}
+
+.text-unmuted {
+ @include text-unmuted;
+}
+
+//
+// Posts
+//
+.post-header {
+ margin-bottom: $font-spacing;
+}
+
+.post-title {
+ @include relative-font-size(2.925);
+ line-height: 1.15;
+ margin-bottom: 5px;
+
+ @media screen and (min-width: $pc-width) {
+ @include relative-font-size(3.7);
+ }
+}
+.post-list {
+ padding: 9px;
+ margin-left: 0;
+ list-style: none;
+
+ .post {
+ border-bottom: 2px solid $border-color;
+ padding-bottom: 10px;
+ padding-top: 10px;
+
+ .post-meta {
+ font-size: $small-font-size;
+ color: $text-color;
+ word-spacing: 1px;
+ }
+
+ .post-link {
+ @include relative-font-size(3);
+ line-height: 1.5;
+ }
+
+ .post-info {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 15px;
+ cursor: default;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ align-items: baseline;
+ line-height: 1.5;
+
+ .post-info-date {
+ color: $text-mute-color;
+ font-size: $small-font-size;
+ word-spacing: 1px;
+
+ &::before {
+ content: "calendar_today";
+ font-family: "Material Icons Round";
+ font-size: 12px;
+ line-height: 1;
+ padding-right: 5px;
+ }
+ }
+
+ .post-info-pin {
+ background-color: $table-header-bg-color;
+ color: $text-mute-color;
+ border-radius: 5px;
+ padding: 2px 5px 2px 5px;
+ cursor: default;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ > span {
+ transform: rotate(45deg);
+ font-size: 15px;
+ line-height: 1.4rem;
+ height: 1.3rem;
+ }
+
+ > p {
+ margin-bottom: 0;
+ display: none;
+ text-transform: capitalize;
+ }
+
+ @media screen and (min-width: $mobile-width) {
+ > p {
+ display: inline-block;
+ }
+ }
+ }
+ }
+
+ > p {
+ // Make the description shorter
+ margin: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3; // line height
+ -webkit-box-orient: vertical;
+ }
+
+ > h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: $font-size;
+ }
+ }
+}
+
+.post-info {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 15px;
+ cursor: default;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ align-items: baseline;
+
+ .post-info-date {
+ color: $text-mute-color;
+ font-size: $small-font-size;
+ word-spacing: 1px;
+
+ &::before {
+ content: "calendar_today";
+ font-family: "Material Icons Round";
+ font-size: 12px;
+ line-height: 1;
+ padding-right: 5px;
+ }
+ }
+
+ .post-info-pin {
+ background-color: $table-header-bg-color;
+ color: $text-mute-color;
+ border-radius: 5px;
+ padding: 2px 5px 2px 5px;
+ cursor: default;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ > span {
+ transform: rotate(45deg);
+ font-size: 15px;
+ line-height: 1.4rem;
+ height: 1.3rem;
+ }
+
+ > p {
+ margin-bottom: 0;
+ display: none;
+ text-transform: capitalize;
+ }
+
+ @media screen and (min-width: $mobile-width) {
+ > p {
+ display: inline-block;
+ }
+ }
+ }
+}
+
+//
+// Site footer
+//
+.site-footer {
+ background-color: $footer-bg-color;
+ padding-top: $font-spacing;
+ padding-bottom: 10px;
+
+ .site-footer-wrapper {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+
+ .footer-col {
+ list-style: none;
+ font-size: 20px;
+ margin-bottom: 10px;
+
+ .links-footer {
+ width: calc(100% - (#{$font-spacing} / 2));
+ transition: $transition-links;
+ word-break: break-all;
+
+ &:first-child {
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+ }
+
+ &:not(:first-child) {
+ padding: 2px 0;
+ }
+
+ > a {
+ color: rgba(128, 134, 139, 0.57);
+ font-weight: 500;
+
+ &:visited {
+ color: rgba(128, 134, 139, 0.57);
+ }
+
+ &:hover {
+ color: $footer-links-hover-color;
+ }
+ }
+ }
+
+ .footer-product {
+ list-style: none;
+ color: $text-color;
+ width: calc(100% - (#{$font-spacing} / 2));
+ padding: 0 ($font-spacing / 2);
+
+ &:first-child {
+ padding: 1px 0px 0px;
+ font-size: 2rem;
+ font-weight: 900;
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: none;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ .site-footer-wrapper {
+ flex-direction: row;
+ }
+
+ .footer-col {
+ &:not(:first-child) {
+ @include footer-wrapper;
+ }
+
+ &:first-child {
+ @include footer-wrapper;
+ width: calc(42% - (#{$font-spacing} / 2));
+ }
+ }
+ }
+}
+.footer-info {
+ padding-top: 10px;
+ border-top: 1px solid $border-color;
+ font-size: 0.8rem;
+ justify-content: space-between;
+ display: flex;
+ flex-direction: column;
+ padding: 10px 10px 0;
+ margin-left: 0px;
+ margin-right: 0px;
+
+ > span {
+ margin-bottom: 3px;
+
+ > a {
+ color: #9e9e9e;
+
+ &:visited {
+ color: #9e9e9e;
+ }
+
+ &:hover {
+ color: $text-color;
+ }
+ }
+ }
+
+ @media screen and (min-width: 692px) {
+ flex-direction: row;
+ margin-left: 100px;
+ margin-right: 100px;
+ }
+}
+
+//
+// Post Nav
+//
+
+.post-nav {
+ padding-top: 5px;
+ display: inline;
+ list-style: none;
+ display: flex;
+ justify-content: space-evenly;
+ gap: 80px;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 0px;
+
+ @media screen and (min-width: $mobile-width) {
+ gap: 100px;
+ }
+}
+
+.post-nav-svg {
+ color: $footer-links-color;
+ transition: $tansitions-page-bar;
+ padding: 8px;
+ border-radius: 50px;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+}
+
+.disable-svg {
+ cursor: not-allowed;
+ color: $text-mute-color;
+}
+
+.post-nav-num {
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ cursor: default;
+ display: inline;
+ @include text-muted;
+}
+
+//
+// Post footer
+//
+.post-footer {
+ padding-top: 13px;
+ border-top: 3px solid $border-color;
+ margin: 0px;
+}