_sass/base.scss in jekyll-theme-fica-0.2.2 vs _sass/base.scss in jekyll-theme-fica-0.3.0
- old
+ new
@@ -30,10 +30,16 @@
figure {
margin: 0;
padding: 0;
}
+* {
+ @include horizontal-scroll;
+ margin: 0;
+ padding: 0;
+}
+
// set `margin-bottom` to maintain vertical alignment
h1,
h2,
h3,
h4,
@@ -44,87 +50,60 @@
pre,
ul,
ol,
figure,
%vertical-rhythm {
- margin-bottom: $font-spacing - 15;
+ margin-bottom: 15px;
}
-//
-// body
-//
body {
- font: $font-weight #{$font-size}/#{$line-height} $font-family;
+ @include body-medium;
+ // font: $font-weight #{$font-size}/#{$line-height} $font-family;
color: $text-color;
background-color: $primary_color;
-webkit-text-size-adjust: 100%;
font-kerning: normal;
- display: flex;
min-height: 100vh;
flex-direction: column;
overflow-wrap: break-word;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- &::-webkit-scrollbar {
- height: 16px;
- }
-
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background: rgba(128, 134, 139, 0.2);
- background-clip: padding-box;
- border: 4px solid transparent;
- border-radius: 10px;
- box-sizing: border-box;
-
- &:hover {
- background: rgba(128, 134, 139, 0.4);
- box-sizing: border-box;
- background-clip: padding-box;
- }
- }
+ display: flex;
+ line-height: 40px;
}
-//
-// line
-//
hr {
margin-top: $font-spacing;
margin-bottom: $font-spacing;
border: 0;
border-top: 2px solid $text-mute-color;
border-radius: 7px;
}
+p {
+ line-height: 26px;
+}
//
// wrapper
//
.wrapper {
padding: 0 $font-spacing - 5 0 $font-spacing - 5;
margin: 0 auto 0 auto;
max-width: $content-width + 100;
}
.footer-wrapper {
- padding: 0 $font-spacing - 5 0 $font-spacing - 5;
- margin: 0 auto 0 auto;
- max-width: 1168px;
- }
-
-
-.post-wrapper {
padding: 0 $font-spacing - 5 0 $font-spacing - 5;
margin: 0 auto 0 auto;
- max-width: $content-width + 100;
+ max-width: 1168px;
+}
+.post-content {
+ padding: 30px $font-spacing - 5 0 $font-spacing - 5;
+ margin: 0 auto 0 auto;
+
@media screen and (min-width: 1111px) {
- display: flex;
- justify-content: center;
+ display: grid;
+ grid-template-columns: 1fr 15em;
}
}
.content {
padding: 30px 0 30px;
@@ -138,37 +117,26 @@
//
// Headers
//
h1 {
- font-size: $font-size + 31;
- line-height: 1.5;
+ @include headline-large;
}
-
h2 {
- font-size: $font-size + 26;
- line-height: 1.5;
+ @include headline-medium;
}
-
h3 {
- font-size: $font-size + 21;
- line-height: 1.5;
+ @include headline-small;
}
-
h4 {
- font-size: $font-size + 16;
- line-height: 1.5;
+ @include title-large;
}
-
h5 {
- font-size: $font-size + 11;
- line-height: 1.5;
+ @include title-medium;
}
-
h6 {
- font-size: $font-size + 6;
- line-height: 1.5;
+ @include title-small;
}
//
// Lists
//
@@ -211,31 +179,31 @@
// BOLD
//
strong {
font-weight: 900;
font-size: 18px;
+ letter-spacing: 3px;
}
//
// Figures
//
figure > img {
display: block;
}
figcaption {
- font-size: $small-font-size;
+ @include body-small;
}
//
// Blockquotes
//
blockquote {
color: $blockquote-text-color;
border-left: 4px solid $code-background-color;
padding-left: $font-spacing / 2;
- @include relative-font-size(1.125);
font-style: italic;
> :last-child {
margin-bottom: 0;
}
@@ -249,32 +217,28 @@
//
// Code format
//
pre,
code {
- font-size: inherit;
border: 1px solid $code-background-color;
border-radius: 4px;
font-weight: 700;
background-color: $code-background-color;
color: $code-text-color;
-
- @include horizontal-scroll();
-}
-
-code {
+ line-height: 1.5rem;
padding: 1px 5px;
+ @include horizontal-scroll();
a {
color: inherit !important;
border-bottom: none !important;
pointer-events: none;
}
}
-
pre {
overflow-x: auto;
+ border: 0;
> code {
border: 0;
padding-right: 0;
padding-left: 0;
@@ -305,11 +269,11 @@
@extend %vertical-rhythm;
pre {
margin-bottom: 0;
font-size: $code-font-family;
- line-height: 1.5rem;
+ // line-height: 1.5rem;
word-wrap: normal;
/* Fixed Safari overflow-x */
}
.lineno {
@@ -413,60 +377,61 @@
margin-inline-start: 40px;
}
}
//
-// Error page
+// 404 page
//
-.container {
+.container-404 {
margin: 10px auto;
max-width: 400px;
text-align: center;
background-color: $error-div-bg-color;
border-radius: 20px;
align-content: center;
+ .prompt-404 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .paragraph-404 {
+ > p {
+ margin-bottom: 0px;
+ line-height: 2;
- > svg {
- height: 220px;
- width: 220px;
- margin-left: 3px;
- margin-right: 5px;
- margin-top: 50px;
- fill: $error-btn-svg-color;
- }
-}
-
-.error-pagh {
- > p {
- margin-bottom: 0px;
- line-height: 2;
-
- &:last-child {
- margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 15px;
+ }
+ }
}
- }
-}
-.btn-error {
- display: inline-block;
- padding: 17px 16px 16px;
- color: #e7e7e7;
- background-color: #2e353e;
- transition: all 0.2s ease-in-out;
- width: 92%;
- border-bottom-left-radius: 20px;
- border-bottom-right-radius: 20px;
- height: 24px;
- line-height: 1.5;
+ .btn-404 {
+ display: inline-block;
+ padding: 17px 16px 16px;
+ color: #e7e7e7;
+ background-color: #2e353e;
+ transition: all 0.2s ease-in-out;
+ width: 92%;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
- &,
- &:visited {
- color: $text-color;
- }
+ &,
+ &:visited {
+ color: $text-color;
+ }
- &:hover {
- color: $btn-text-hover-color;
- text-decoration: none;
- background-color: $btn-color-hover;
- border-color: $btn-color-hover;
+ &:hover {
+ color: $btn-text-hover-color;
+ text-decoration: none;
+ background-color: $btn-color-hover;
+ border-color: $btn-color-hover;
+ }
+ }
+ > svg {
+ height: 220px;
+ width: 220px;
+ margin-left: 3px;
+ margin-right: 5px;
+ margin-top: 50px;
+ fill: $error-btn-svg-color;
+ }
}
}