_sass/layouts/layout.scss in jekyll-theme-fica-0.2.2 vs _sass/layouts/layout.scss in jekyll-theme-fica-0.3.0
- old
+ new
@@ -1,69 +1,93 @@
//
// Site Header
//
.site-nav {
+ display: flex;
+ align-items: center;
background: $site-header-bg;
height: 80px;
width: 100%;
z-index: 100;
- .nav-links {
- float: right;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ .site-nav-link-container {
margin-right: 25px;
margin-left: 0;
+ a {
+ &:first-child {
+ color: rgba(0, 0, 0, 0.54);
+ background-color: $link-color;
+ transition: $transition-links;
+ padding: 11px 19px 13px;
+ border-radius: 40px;
+ @include animation-fade-in(0.3);
+
+ &:hover {
+ background-color: $btn-color-hover;
+ }
+ }
+ }
}
+
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;
-
+ @include animation-fade-in(0.6);
+ @include title-small;
+ text-transform: uppercase;
&: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 {
+ .site-nav-logo {
+ display: flex;
text-transform: none;
color: $text-color;
- font-size: 35px;
+ font-size: 32px;
line-height: 80px;
padding: 0 13px;
font-weight: bold;
+ margin-right: auto;
+ @include animation-fade-in(0.1);
&:hover {
color: $text-mute-color;
background-color: transparent;
- }
+ img {
+ opacity: 0.5;
+ transition: $transition-links;
+ }
+ }
+ img {
+ width: 32px;
+ height: 32px;
+ transition: all 0.7s ease-in-out;
+ }
+ p {
+ margin-bottom: 0px;
+ line-height: 32px;
+ }
@media screen and (min-width: $pc-width) {
padding: 0 30px;
}
+ @media screen and (max-width: $Site-Nav-Logo-text-autohide) {
+ p {
+ display: none;
+ }
+ }
}
.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;
@@ -71,18 +95,18 @@
&:hover {
background: rgba(232, 234, 237, 0.04);
}
}
- #check {
+ #site-nav-check {
display: none;
}
@media (max-width: 885px) {
.checkbtn {
display: block;
}
- .nav-links {
+ .site-nav-link-container {
position: fixed;
width: 100%;
height: 100vh;
background: $primary_color;
top: 80px;
@@ -107,22 +131,29 @@
&.active {
background: $btn-bg-color;
}
}
}
- #check {
+ #site-nav-check {
&:checked {
~ {
- .nav-links {
+ .site-nav-link-container {
left: 0;
}
}
}
}
+ a {
+ line-height: 80px;
+ }
}
}
-
+// .sticky {
+// position: fixed;
+// top: 0;
+// width: 100%;
+// }
//
// Header Banner
//
.header-home-mod {
position: static;
@@ -134,21 +165,23 @@
background-color: $home-header-title-color;
text-align: center;
justify-content: space-around;
line-height: 1.5;
- .img {
+ .site-banner-img-container {
padding-top: 61px;
width: 100%;
> img {
@include animation-fade-in(2.1);
box-shadow: 0px 0px 20px 0px #00000052;
transition: all 300ms ease 0ms;
+ border-radius: 15px;
&:hover {
box-shadow: 0px 0px 0px 0px #00000052;
+ border-radius: 0px;
}
}
}
.banner-content {
@@ -158,17 +191,18 @@
flex-direction: column;
> a {
display: block;
margin-top: 30px;
- padding: 15px 81px;
+ padding: 21px 81px;
border: none;
- border-radius: 5px;
+ border-radius: 15px;
cursor: pointer;
color: $BTT-svg-color;
background-color: $link-color;
transition: $transition-btn;
+ @include title-medium;
@include animation-fade-in(1.65);
&,
&:visited {
@@ -182,30 +216,23 @@
border-color: $btn-color-hover;
}
}
.page-header-title {
+ @include display-medium;
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;
+ @include title-medium;
padding-bottom: 7px;
@include animation-fade-in(1);
}
}
@@ -222,11 +249,11 @@
@media screen and (min-width: 993px) {
display: flex;
padding: 40px 10px 40px 10px;
- .img {
+ .site-banner-img-container {
width: $site-banner-picture-sze_wdth;
> img {
@include animation-fade-in(2.65);
}
@@ -242,55 +269,128 @@
}
}
}
}
-
-
.text-muted {
@include text-muted;
}
.text-unmuted {
@include text-unmuted;
}
-//
+//
// Posts
-//
-.post-header {
- margin-bottom: $font-spacing;
-}
+//
+.post {
+ // Animation
+ opacity: 0;
+ transform: translateY(3rem);
+ animation: 208.898ms linear 0s 1 normal forwards running slide-up;
+ animation-delay: 252.00568990042672ms;
+ .post-header {
+ margin-bottom: $font-spacing;
+ }
-.post-title {
- @include relative-font-size(2.925);
- line-height: 1.15;
- margin-bottom: 5px;
+ .post-title {
+ @include display-large;
+ line-height: 1.15;
+ margin-bottom: 5px;
+ }
+ .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;
- @media screen and (min-width: $pc-width) {
- @include relative-font-size(3.7);
+ .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;
+ }
+ }
+ }
}
}
.post-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
padding: 9px;
margin-left: 0;
list-style: none;
-
- .post {
- border-bottom: 2px solid $border-color;
+ .post-container {
+ border: 2px solid $border-color;
padding-bottom: 10px;
- padding-top: 10px;
-
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 12px;
+ a {
+ color: $text-color;
+ }
+ &:hover {
+ background: linear-gradient(0deg,rgba(68,71,70,.15),rgba(68,71,70,.15));
+ }
+ }
+ .post {
.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-header {
+ @include headline-large;
+ margin: 12px 0px 0px 0px;
}
.post-info {
display: flex;
justify-content: space-between;
@@ -352,138 +452,82 @@
}
}
}
}
- > 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;
- }
+ }
+ .post-descriptions {
+ 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;
+ > h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ a {
+ @include body-medium;
+ a[href^="#"] {
+ display: none
+ }
}
}
- }
}
+.site-post-list-title {
+ @include display-large;
+}
//
// 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;
+ p {
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+ }
- .links-footer {
+ a {
+ display: block;
width: calc(100% - (#{$font-spacing} / 2));
transition: $transition-links;
word-break: break-all;
+ color: rgba(128, 134, 139, 0.57);
+ font-weight: 500;
+ line-height: 3.3;
- &:first-child {
- font-weight: 700;
- letter-spacing: 1px;
- text-transform: uppercase;
- margin-bottom: 10px;
- }
-
&:not(:first-child) {
padding: 2px 0;
}
- > a {
+ &:visited {
color: rgba(128, 134, 139, 0.57);
- font-weight: 500;
+ }
- &:visited {
- color: rgba(128, 134, 139, 0.57);
- }
-
- &:hover {
- color: $footer-links-hover-color;
- }
+ &:hover {
+ color: $footer-links-hover-color;
}
}
.footer-product {
list-style: none;
@@ -493,10 +537,11 @@
&:first-child {
padding: 1px 0px 0px;
font-size: 2rem;
font-weight: 900;
+ font-family: $md-ref-typeface-plain;
}
&:hover {
color: $text-color;
text-decoration: none;
@@ -520,17 +565,16 @@
}
}
}
}
.footer-info {
- padding-top: 10px;
+ @include label-small;
border-top: 1px solid $border-color;
- font-size: 0.8rem;
justify-content: space-between;
display: flex;
flex-direction: column;
- padding: 10px 10px 0;
+ padding: 20px 10px 20px;
margin-left: 0px;
margin-right: 0px;
> span {
margin-bottom: 3px;
@@ -581,9 +625,10 @@
padding: 8px;
border-radius: 50px;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
+ color: inherit;
}
}
.disable-svg {
cursor: not-allowed;