Copy Juice template and add some of the Base framework for layout
parent
975529bcf4
commit
1c7fa8d767
|
@ -0,0 +1,40 @@
|
|||
.container {
|
||||
max-width: ($breakpoint-xl - $grid-gutter * 2);
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@include breakpoint(m) {
|
||||
.container-m {
|
||||
width: ($breakpoint-m - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(l) {
|
||||
.container-l {
|
||||
width: ($breakpoint-l - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
.container-xl {
|
||||
width: ($breakpoint-xl - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,45 @@
|
|||
.content {
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.content pre {
|
||||
overflow-x: auto;
|
||||
padding: 1.25em 1.5em;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
background-color: white;
|
||||
color: #4a4a4a;
|
||||
font-size: .875em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.content code {
|
||||
background-color: white;
|
||||
color: #4a4a4a;
|
||||
font-size: .875em;
|
||||
font-weight: normal;
|
||||
padding: 0.25em 0.5em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.content pre code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: var(--primary-link-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
border-left: #e2dede 8px solid;
|
||||
margin: 0;
|
||||
background-color: #f2f1f0;
|
||||
padding: 0 20px;
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
$breakpoint-m: 768px !default;
|
||||
$breakpoint-l: 980px !default;
|
||||
$breakpoint-xl: 1200px !default;
|
||||
|
||||
$grid-gutter: 16px !default;
|
||||
|
||||
// Mixins
|
||||
|
||||
// Breakpoints
|
||||
// Example: .component { @include breakpoint(m) { background: red; } };
|
||||
// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
|
||||
@mixin breakpoint($bp) {
|
||||
@if $bp == xl {
|
||||
@media only screen and (min-width: $breakpoint-xl) { @content ; }
|
||||
}
|
||||
@else if $bp == l {
|
||||
@media only screen and (min-width: $breakpoint-l) { @content ; }
|
||||
}
|
||||
@else if $bp == m {
|
||||
@media only screen and (min-width: $breakpoint-m) { @content ; }
|
||||
}
|
||||
}
|
||||
|
||||
// Background Color with Opacity
|
||||
// Example: .element { @include background-rgba(#000000, .5); }}
|
||||
// Output: .element { background: rgba(0, 0, 0, .5); }
|
||||
@mixin background-rgba($color, $alpha) {
|
||||
background-color: $color;
|
||||
background-color: rgba($color, $alpha);
|
||||
}
|
||||
|
||||
// Animations
|
||||
// Example: .fade { @mixin animate(1s); }
|
||||
// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
|
||||
@mixin animate($duration: 1s) {
|
||||
animation-duration: $duration;
|
||||
animation-fill-mode: both;
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
.capsule {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 6px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: 1px solid var(--primary-text-color);
|
||||
white-space: pre;
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
.heading-text {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
padding: 10px 0 25px 0;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
h1, .title-text {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
color: var(--primary-text-color);
|
||||
border-left: var(--primary-color) 8px solid;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h2, .subtitle-text {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.2px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pos-absolute {
|
||||
right: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 2px 10px 2px #ddd;
|
||||
}
|
|
@ -0,0 +1,197 @@
|
|||
@import "_utility.scss";
|
||||
@import "_text.scss";
|
||||
@import "_markdown.scss";
|
||||
@import "_penguincoder.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_containers.scss";
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--secondary-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
padding: 0.3rem 0;
|
||||
}
|
||||
|
||||
p > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--primary-color);
|
||||
color: black;
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "Alfa Slab One", serif;
|
||||
font-size: 32px;
|
||||
color: var(--primary-text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 40px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 100vh;
|
||||
background-color: var(--primary-color);
|
||||
overflow-x: hidden;
|
||||
padding: 0 40px;
|
||||
|
||||
.explore-more {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
padding: 50px 100px;
|
||||
flex-grow: 1;
|
||||
|
||||
.toc {
|
||||
max-width: 260px;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
padding: 10px 20px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.toc-item a, .toc-item-child a {
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-item a.active, .toc-item-child a.active {
|
||||
color: var(--toc-highlight-text-color);
|
||||
}
|
||||
|
||||
.toc-item-child {
|
||||
padding: 0 30px 5px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toc-sticky {
|
||||
border-radius: 3px;
|
||||
border-top: 5px solid var(--primary-color);
|
||||
background-color: white;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
top: 10px;
|
||||
padding: 10px 0 20px;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #202020;
|
||||
color: #fcfcfc;
|
||||
|
||||
a {
|
||||
color: #fcfcfc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.content {
|
||||
max-width: 60%;
|
||||
min-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
header {
|
||||
padding: 10px 30px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
margin: 10px;
|
||||
|
||||
img {
|
||||
width: 45px;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.explore-more, .toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
.content a span.icon, .content a i {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.content a:hover, .content a i:hover {
|
||||
text-decoration: none;
|
||||
}
|
Loading…
Reference in New Issue