penguincoder
/
penguincoder-org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Copy Juice template and add some of the Base framework for layout

main
Andrew Coleman 2023-01-12 14:21:42 -05:00
parent 975529bcf4
commit 1c7fa8d767
8 changed files with 381 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
sass/_containers.scss Normal file
View File

@ -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;
}
}

45
sass/_markdown.scss Normal file
View File

@ -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;
}

38
sass/_mixins.scss Normal file
View File

@ -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;
}

9
sass/_penguincoder.scss Normal file
View File

@ -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;
}

39
sass/_text.scss Normal file
View File

@ -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;
}

13
sass/_utility.scss Normal file
View File

@ -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;
}

197
sass/juice.scss Normal file
View File

@ -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;
}
}

7
sass/pc.scss
View File

@ -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;
}