Browse Source

Mostly copy the bulma-templates over to work with.

master
Zed A. Shaw 8 months ago
parent
commit
b0583c1f48
81 changed files with 8744 additions and 2 deletions
  1. +1
    -0
      LICENSE
  2. +4
    -2
      README.md
  3. +82
    -0
      css/admin.css
  4. +21
    -0
      css/aside.css
  5. +67
    -0
      css/blog.css
  6. +1
    -0
      css/bulma-divider.min.css
  7. +1
    -0
      css/bulma.min.css
  8. +107
    -0
      css/cards.css
  9. +55
    -0
      css/cheatsheet.css
  10. +19
    -0
      css/contact.css
  11. +59
    -0
      css/forum.css
  12. +74
    -0
      css/hero.css
  13. +209
    -0
      css/inbox.css
  14. +27
    -0
      css/index.css
  15. +55
    -0
      css/instaAlbum.css
  16. +35
    -0
      css/kanban.css
  17. +18
    -0
      css/landing.css
  18. +51
    -0
      css/login.css
  19. +42
    -0
      css/personal.css
  20. +147
    -0
      css/prism.css
  21. +342
    -0
      css/showcase.css
  22. +51
    -0
      css/tabs.css
  23. BIN
     
  24. BIN
     
  25. BIN
     
  26. BIN
     
  27. BIN
     
  28. BIN
     
  29. BIN
     
  30. BIN
     
  31. BIN
     
  32. BIN
     
  33. BIN
     
  34. BIN
     
  35. BIN
     
  36. BIN
     
  37. BIN
     
  38. BIN
     
  39. BIN
     
  40. BIN
     
  41. BIN
     
  42. BIN
     
  43. BIN
     
  44. BIN
     
  45. BIN
     
  46. BIN
     
  47. BIN
     
  48. +26
    -0
      index.css
  49. +102
    -0
      index.html
  50. +10
    -0
      js/bulma.js
  51. +413
    -0
      js/kanban-switch.js
  52. +159
    -0
      js/kanban.js
  53. +57
    -0
      js/showcase.js
  54. +27
    -0
      js/tabs.js
  55. +275
    -0
      templates/admin.html
  56. +148
    -0
      templates/aside.html
  57. +354
    -0
      templates/band.html
  58. +208
    -0
      templates/blog-tailsaw.html
  59. +204
    -0
      templates/blog.html
  60. +308
    -0
      templates/cards-simple-fluid.html
  61. +445
    -0
      templates/cards-simple.html
  62. +439
    -0
      templates/cards.html
  63. +268
    -0
      templates/cheatsheet.html
  64. +98
    -0
      templates/contact.html
  65. +97
    -0
      templates/cover.html
  66. +256
    -0
      templates/forum.html
  67. +294
    -0
      templates/hero.html
  68. +214
    -0
      templates/inbox.html
  69. +11
    -0
      templates/index.html
  70. +269
    -0
      templates/instaAlbum.html
  71. +105
    -0
      templates/kanban-switch.html
  72. +280
    -0
      templates/kanban.html
  73. +81
    -0
      templates/kanban[search].html
  74. +101
    -0
      templates/landing.html
  75. +62
    -0
      templates/login.html
  76. +98
    -0
      templates/modal-cards.html
  77. +782
    -0
      templates/personal.html
  78. +217
    -0
      templates/search.html
  79. +537
    -0
      templates/showcase.html
  80. +27
    -0
      templates/skeleton.html
  81. +304
    -0
      templates/tabs.html

+ 1
- 0
LICENSE View File

@@ -0,0 +1 @@
This project is Museum Source. Just like a museum, it is full of works of art that you do not own, but you're free to look at. Copyright (c) Zed A. Shaw from 2020 until the end of copyright.

+ 4
- 2
README.md View File

@@ -1,3 +1,5 @@
# learnjsthehardway
# Learn JavaScript The Hard Way

This is the project you can follow from the live streams as I develop the website for the course. I initially started this using the awesome Bulma Templates at https://github.com/BulmaTemplates/bulma-templates and will place the code after each live session here.


This is the code I'm writing in public as I build the learnjsthehardway.com website to host my new course format.

+ 82
- 0
css/admin.css View File

@@ -0,0 +1,82 @@
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.5;
height: 100%;
background: #ECF0F3;
}
nav.navbar {
border-top: 4px solid #276cda;
margin-bottom: 1rem;
}
.navbar-item.brand-text {
font-weight: 300;
}
.navbar-item, .navbar-link {
font-size: 14px;
font-weight: 700;
}
.columns {
width: 100%;
height: 100%;
margin-left: 0;
}
.menu-label {
color: #8F99A3;
letter-spacing: 1.3;
font-weight: 700;
}
.menu-list a {
color: #0F1D38;
font-size: 14px;
font-weight: 700;
}
.menu-list a:hover {
background-color: transparent;
color: #276cda;
}
.menu-list a.is-active {
background-color: transparent;
color: #276cda;
font-weight: 700;
}
.card {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
margin-bottom: 2rem;
}
.card-header-title {
color: #8F99A3;
font-weight: 400;
}
.info-tiles {
margin: 1rem 0;
}
.info-tiles .subtitle {
font-weight: 300;
color: #8F99A3;
}
.hero.welcome.is-info {
background: #36D1DC;
background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);
background: linear-gradient(to right, #5B86E5, #36D1DC);
}
.hero.welcome .title, .hero.welcome .subtitle {
color: hsl(192, 17%, 99%);
}
.card .content {
font-size: 14px;
}
.card-footer-item {
font-size: 14px;
font-weight: 700;
color: #8F99A3;
}
.card-footer-item:hover {
}
.card-table .table {
margin-bottom: 0;
}
.events-card .card-table {
max-height: 250px;
overflow-y: scroll;
}

+ 21
- 0
css/aside.css View File

@@ -0,0 +1,21 @@
.columns {
margin-top: 0;
}

/* Start nav drawer */
aside.column {
padding: 0;
box-shadow: 2px 0px 4px #888888;
}
.panel-heading, .panel-block {
border: 0;
border-radius: 0;
}
.panel-block {
justify-content: center;
}
/*End nav drawer */

section.column {
padding: 2rem;
}

+ 67
- 0
css/blog.css View File

@@ -0,0 +1,67 @@
html,body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 14px;
background: #F0F2F4;
}
.navbar.is-white {
background: #F0F2F4;
}
.navbar-brand .brand-text {
font-size: 1.11rem;
font-weight: bold;
}
.hero-body
{background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Plum_trees_Kitano_Tenmangu.jpg/1200px-Plum_trees_Kitano_Tenmangu.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 500px;
}
.articles {
margin: 5rem 0;
margin-top: -200px;
}
.articles .content p {
line-height: 1.9;
margin: 15px 0;
}
.author-image {
position: absolute;
top: -30px;
left: 50%;
width: 60px;
height: 60px;
margin-left: -30px;
border: 3px solid #ccc;
border-radius: 50%;
}
.media-center {
display: block;
margin-bottom: 1rem;
}
.media-content {
margin-top: 3rem;
}
.article, .promo-block {
margin-top: 6rem;
}
div.column.is-8:first-child {
padding-top: 0;
margin-top: 0;
}
.article-title {
font-size: 2rem;
font-weight: lighter;
line-height: 2;
}
.article-subtitle {
color: #909AA0;
margin-bottom: 3rem;
}
.article-body {
line-height: 1.4;
margin: 0 6rem;
}
.promo-block .container {
margin: 1rem 5rem;
}

+ 1
- 0
css/bulma-divider.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bulma.min.css
File diff suppressed because it is too large
View File


+ 107
- 0
css/cards.css View File

@@ -0,0 +1,107 @@
body {
background: #041221;
}
/* Card start*/
.card {overflow:hidden}
.card.large {
height: 600px;
-webkit-backface-visibility: hidden;
backface-visibility: initial;
border-radius: 5px;
}
/* Card end */
.media-content {
overflow: hidden;
}
.title.no-padding {
margin-bottom: 0 !important;
}
#flow span {
display: block;
width: 200vw;
height: 200vw;
position: absolute;
top: -180vw;
left: -50vw;
border-radius: 90vw;
opacity: 0.6;
}
.flow-1 {
background: #3281ff;
-webkit-animation: rotating 20s linear infinite;
-moz-animation: rotating 20s linear infinite;
-ms-animation: rotating 20s linear infinite;
-o-animation: rotating 20s linear infinite;
animation: rotating 20s linear infinite;
}
.flow-2 {
background: #f442ee;
position: absolute;
-webkit-animation: rotating 15s linear infinite;
-moz-animation: rotating 15s linear infinite;
-ms-animation: rotating 15s linear infinite;
-o-animation: rotating 15s linear infinite;
animation: rotating 15s linear infinite;
}
.flow-3 {
background: #42eef4;
position: absolute;
-webkit-animation: rotating 7s linear infinite;
-moz-animation: rotating 7s linear infinite;
-ms-animation: rotating 7s linear infinite;
-o-animation: rotating 7s linear infinite;
animation: rotating 7s linear infinite;
}
@-webkit-keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
.footer{
background-color: #222831;
color: lemonchiffon;
}
.footer p, strong
{color: lemonchiffon}
.footer a:hover
{color: crimson;}
.fa
{color: lemonchiffon;
margin: 10px}

::selection
{background-color:#DEF4FF}

+ 55
- 0
css/cheatsheet.css View File

@@ -0,0 +1,55 @@
body,
html {
background: #f2f2f2;
}

pre,
.message {
max-width: 960px;
}

li {margin: 10px}

.hero.is-primary {
background: linear-gradient(to top right, #524ad0 10%, #D099FA);
}

.box {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.box span.icon {
float: right;
font-size: 1.7em;
padding: 2rem 2rem 0 0;
}

.is-large.fab {
font-size: 7em;
}

.is-large.fas {
font-size: 5em;
margin-left: 0.2em;
}

.media-content {overflow: hidden;}

.menu-list li a:hover {
background: #d9d9d9;
}

.token.number {
display: inline;
padding: inherit;
font-size: inherit;
line-height: inherit;
text-align: inherit;
vertical-align: inherit;
border-radius: inherit;
font-weight: inherit;
white-space: inherit;
background: inherit;
margin: inherit;
}
.footer {background-color: white;}

+ 19
- 0
css/contact.css View File

@@ -0,0 +1,19 @@
.social-media {
margin-top: 30px;
}

.social-media a {
margin-right: 10px;
}

.field:not(:last-child) {
margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
.navbar {
padding: 10px 0;
position: fixed;
width: 100%;
}
}

+ 59
- 0
css/forum.css View File

@@ -0,0 +1,59 @@
html,body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: #F2F6FA;
}
footer {
background-color: #F2F6FA !important;
}
.topNav {
border-top: 5px solid #3498DB;
}
.topNav .container {
border-bottom: 1px solid #E6EAEE;
}
.container .columns {
margin: 3rem 0;
}
.navbar-menu .navbar-item {
padding: 0 2rem;
}
aside.menu {
padding-top: 3rem;
}
aside.menu .menu-list {
line-height: 1.5;
}
aside.menu .menu-label {
padding-left: 10px;
font-weight: 700;
}
.button.is-primary.is-alt {
background: #00c6ff;
background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff);
background: linear-gradient(to bottom, #0072ff, #00c6ff);
font-weight: 700;
font-size: 14px;
height: 3rem;
line-height: 2.8;
}
.media-left img {
border-radius: 50%;
}
.media-content p {
font-size: 14px;
line-height: 2.3;
font-weight: 700;
color: #8F99A3;
}
article.post {
margin: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E6EAEE;
}
article.post:last-child {
padding-bottom: 0;
border-bottom: none;
}
.menu-list li{
padding: 5px;
}

+ 74
- 0
css/hero.css View File

@@ -0,0 +1,74 @@
html,body {
background: #EFF3F4;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.hero-body .container {
max-width: 700px;
}
.hero-body .title {
color: hsl(192,17%,99%) !important;
}
.hero-body .subtitle {
color: hsl(192,17%,99%) !important;
padding-top: 2rem;
line-height: 1.5;
}
.features {
padding: 5rem 0;
}
.box.cta {
border-radius: 0;
border-left: none;
border-right: none;
}
.card-image > .fa {
font-size: 8rem;
padding-top: 2rem;
padding-bottom: 2rem;
color: #209cee;
}
.card-content .content {
font-size: 14px;
margin: 1rem 1rem;
}
.card-content .content h4 {
font-size: 16px;
font-weight: 700;
}
.card {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
margin-bottom: 2rem;
}
.intro {
padding: 5rem 0;
text-align: center;
}
.sandbox {
padding: 5rem 0;
}
.tile.notification {
display: flex;
justify-content: center;
flex-direction: column;
}
.is-shady {
animation: flyintoright .4s backwards;
background: #fff;
box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
border-radius: 4px;
display: inline-block;
margin: 10px;
position: relative;
transition: all .2s ease-in-out;
}
.is-shady:hover {
box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
}
/*adds font awesome stars*/
footer li:before {
content: '\f1b2';
font-family: 'FontAwesome';
float: left;
margin-left: -1.5em;
color: #147efb;
}

+ 209
- 0
css/inbox.css View File

@@ -0,0 +1,209 @@
html,body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 14px;
line-height: 1.5;
height: 100%;
background-color: #fff;
}
.nav.is-dark {
background-color: #232B2D;
color: #F6F7F7;
}
.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
color: #F6F7F7;
}
.nav.is-dark .nav-item a.button.is-default {
color: #F6F7F7;
background-color: transparent;
border-width: 2px;
}
.nav.menu {
border-bottom: 1px solid #e1e1e1;
}
.nav.menu .nav-item .icon-btn {
border: 3px solid #B7C6C9;
border-radius: 90px;
padding: 5px 7px;
color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn {
color: #2EB398;
border: 3px solid #2EB398;
}
.nav.menu .nav-item .icon-btn .fa {
font-size: 20px;
color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn .fa {
color: #2EB398;
}
.aside {
display:block;
background-color: #F9F9F9;
border-right: 1px solid #DEDEDE;
}
.messages {
display:block;
background-color: #fff;
border-right: 1px solid #DEDEDE;
padding: 40px 20px;
}
.message {
display:block;
background-color: #fff;
padding: 40px 20px;
}
.aside .compose {
height: 95px;
margin:0 -10px;
padding: 25px 30px;
}
.aside .compose .button {
color: #F6F7F7;
}
.aside .compose .button .compose {
font-size: 14px;
font-weight: 700;
}
.aside .main {
padding: 40px;
color: #6F7B7E;
}
.aside .title {
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.aside .main .item {
display: block;
padding: 10px 0;
color: #6F7B7E;
}
.aside .main .item.active {
background-color: #F1F1F1;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .item:active,.aside .main .item:hover {
background-color: #F2F2F2;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .icon {
font-size: 19px;
padding-right: 30px;
color: #A0A0A0;
}
.aside .main .name {
font-size: 15px;
color: #5D5D5D;
font-weight: 500;
}
.messages .action-buttons {
padding: 0;
margin-top: -20px;
}
.message .action-buttons {
padding: 0;
margin-top: -5px;
}
.action-buttons .control.is-grouped {
display: inline-block;
margin-right: 30px;
}
.action-buttons .control.is-grouped:last-child {
margin-right: 0;
}
.action-buttons .control.is-grouped .button:first-child {
border-radius: 5px 0 0 5px;
}
.action-buttons .control.is-grouped .button:last-child {
border-radius: 0 5px 5px 0;
}
.action-buttons .control.is-grouped .button {
margin-right: -5px;
border-radius: 0;
}
.pg {
display: inline-block;
top:10px;
}
.action-buttons .pg .title {
display: block;
margin-top: 0;
padding-top: 0;
margin-bottom: 3px;
font-size:12px;
color: #AAAAA;
}
.action-buttons .pg a{
font-size:12px;
color: #AAAAAA;
text-decoration: none;
}
.is-grouped .button {
background-image: linear-gradient(#F8F8F8, #F1F1F1);
}
.is-grouped .button .fa {
font-size: 15px;
color: #AAAAAA;
}
.inbox-messages {
margin-top:60px;
}
.message-preview {
margin-top: 60px;
}
.inbox-messages .card {
width: 100%;
}
.inbox-messages strong {
color: #5D5D5D;
}
.inbox-messages .msg-check {
padding: 0 20px;
}
.inbox-messages .msg-subject {
padding: 10px 0;
color: #5D5D5D;
}
.inbox-messages .msg-attachment {
float:right;
}
.inbox-messages .msg-snippet {
padding: 5px 20px 0px 5px;
}
.inbox-messages .msg-subject .fa {
font-size: 14px;
padding:3px 0;
}
.inbox-messages .msg-timestamp {
float: right;
padding: 0 20px;
color: #5D5D5D;
}
.message-preview .avatar {
display: inline-block;
}
.message-preview .top .address {
display: inline-block;
padding: 0 20px;
}
.avatar img {
width: 40px;
border-radius: 50px;
border: 2px solid #999;
padding: 2px;
}
.address .name {
font-size: 16px;
font-weight: bold;
}
.address .email {
font-weight: bold;
color: #B6C7D1;
}
.card.active {
background-color:#F5F5F5;
}

+ 27
- 0
css/index.css View File

@@ -0,0 +1,27 @@
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: #F0F2F4;
}
.card {
margin-bottom: 3rem;
}
.content-wrapper {
margin-top: 3rem;
}
.card-footer-item {
font-size: 12px;
font-weight: bold;
color: #666;
}
.card-header-title {
display: block;
}
.card-content p {
margin-bottom: 2rem;
}
.container {
max-width: 95%;
}
.fa-code, .fa-search {
margin-right: 0.5vw;
}

+ 55
- 0
css/instaAlbum.css View File

@@ -0,0 +1,55 @@
.navbar {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background-color: white;
justify-content: space-around;
width: 100%;
border-bottom: 1px solid lightgray;
}
.navbar-menu {
flex-grow: 0.5;
justify-content: center;
}
.navbar-menu .navbar-item {
flex-grow: 1;
justify-content: center;
}
.navbar-menu .navbar-item .control {
width: 50%;
}
.body-columns {
margin-top: 10vh;
}
.card {
margin-top: 5rem;
}
.card .header {
padding: 5px 10px;
}
.card-footer .columns {
width: 100%;
}
.card-footer .columns input {
border: none;
border-radius: 0;
box-shadow: none;
}
.card-footer .columns .column:last-child {
display: flex;
align-items: center;
}
.card-footer .columns .column:last-child button {
border: none;
}
.footer {
margin-top: 10vh;
padding: 2rem 1.5rem;
}

/* @media screen and (max-width: 786px){
.navbar {
justify-content: space-between;
}
} */

+ 35
- 0
css/kanban.css View File

@@ -0,0 +1,35 @@
#sectioncontainer {
margin-top: 20px;
}

/* Keep from sticking to sides */
.cards-container {
max-width: 95%;
}

.board-item {
margin: 5px 0;
will-change: transform;
}

.board-item-content {
word-break: break-all;
position: relative;
padding: 20px;
background: #fff;
border-radius: 4px;
font-size: 17px;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
margin: 5px;
}

.delete {
pointer-events: auto;
}

footer {
margin-top: 2rem;
}

+ 18
- 0
css/landing.css View File

@@ -0,0 +1,18 @@
html,body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.hero.is-info {
background: linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
)
}
.hero .nav, .hero.is-success .nav {
-webkit-box-shadow: none;
box-shadow: none;
}
.hero .subtitle {
padding: 3rem 0;
line-height: 1.5;
}


+ 51
- 0
css/login.css View File

@@ -0,0 +1,51 @@
html,body {
font-family: 'Questrial', sans-serif;
font-size: 14px;
font-weight: 300;
}
.hero.is-success {
background: #F2F6FA;
}
.hero .nav, .hero.is-success .nav {
-webkit-box-shadow: none;
box-shadow: none;
}
.box {
margin-top: 5rem;
}
.avatar {
margin-top: -70px;
padding-bottom: 20px;
}
.avatar img {
padding: 5px;
background: #fff;
border-radius: 50%;
-webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
}
input {
font-weight: 300;
}
p {
font-weight: 700;
}
p.subtitle {
padding-top: 1rem;
}

.login-hr{
border-bottom: 1px solid black;
}

.has-text-black{
color: black;
}

.field{
padding-bottom: 10px;
}

.fa{
margin-left: 5px;
}

+ 42
- 0
css/personal.css View File

@@ -0,0 +1,42 @@
.has-same-height .card {
height: 320px;
overflow: hidden;
}

.card-content h3 {
text-align: center;
}

.table-profile td,
th {
border: none !important;
}

.table-profile td:first-of-type {
font-weight: bold;
}

.skills-content .media {
margin: 0 !important;
padding: 4px !important;
border: 0 !important;
}

.skills-content .progress {
height: 4px !important;
}

.custom-tags {
text-align: center !important;
display: block;
}

.portfolio-container .card {
margin-bottom: 2em;
}

.section-heading {
text-align: center;
margin-top: 1em;
margin-bottom: 6em;
}

+ 147
- 0
css/prism.css View File

@@ -0,0 +1,147 @@
code[class*='language-'],
pre[class*='language-'] {
color: rgb(215, 236, 255);
background: none;
font-family: 'Operator Mono', 'Roboto Mono', Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 2;
font-size: 1rem;
-webkit-overflow-scrolling: touch;
margin: 0;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
text-shadow: none;
background: #131824;
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
text-shadow: none;
background: #131824;
}

@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}

/* Code blocks */
pre[class*='language-'] {
overflow: auto;
padding: 0.75rem 1.25rem;
}

pre.is-option {
margin: 0;
padding: 0;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: linear-gradient(-30deg, #273149, #1c273f);
border-radius: 0.25rem;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8ca2d3;
}

.token.selector,
.token.attr-name {
color: #c7f683;
}

.token.punctuation {
color: #5ac8e3;
}

.namespace {
opacity: 0.7;
}

.token.tag {
color: #2cefd8;
}

.token.property,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #85b4ff;
}

.token.string,
.language-css .token.string,
.token.url,
.token.attr-value,
.token.char,
.token.builtin,
.token.inserted {
color: #ffd694;
}

.token.operator,
.token.entity,
.style .token.string {
color: #ff9bbe;
}

.token.important,
.token.atrule,
.token.keyword {
color: #b7adff;
}

.token.function {
color: #25d0e5;
}

.token.regex,
.token.variable {
color: #00a8d4;
}

.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}

+ 342
- 0
css/showcase.css View File

@@ -0,0 +1,342 @@
@import url("https://fonts.googleapis.com/css?family=Lato|Poppins|Kaushan+Script");
.has-vertically-aligned-content {
display: flex;
flex-direction: column;
justify-content: center;
}

* {
box-sizing: border-box;
}

html {
font-family: 'Poppins', Lato, Tahoma, sans-serif;
width: 100%;
min-height: 100%;
}

.header-wrapper {
padding-bottom: 30px;
}

.hero {
background-image: url(https://picsum.photos/id/381/1920/1080);
background: linear-gradient(rgba(31, 44, 108, 0.65), rgba(31, 44, 108, 0.65)), rgba(0, 0, 0, 0.55) url("https://picsum.photos/id/381/1920/1080") no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
font-family: 'Poppins', sans-serif;
}

.hero .title {
font-family: 'Kaushan Script', sans-serif;
transform: rotate(-5deg);
font-size: 5rem;
color: whitesmoke;
}

.hero .subtitle {
padding: 5px;
color: whitesmoke;
}

.hero .profession {
padding-top: 50px;
font-size: 1.7rem;
text-transform: uppercase;
}

.hero .hero-foot {
height: 50px;
background: white;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.082);
}

@media (max-width: 599px) {
.hero .hero-foot {
display: none;
}
}

.hero .hero-foot .hero-foot--wrapper {
margin: 7px auto;
height: 50px;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop {
line-height: 38px;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 1px;
font-size: 1rem;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li {
display: inline-block;
padding-right: 15px;
padding-left: 15px;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li.is-active a {
border-bottom: 2px solid #1f2c6c;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a {
color: #1f2c6c;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a:hover {
color: #1f2c6c;
transition: all .2s ease-in-out;
border-bottom: 2px solid #1f2c6c;
}

.main-content {
padding-top: 2rem;
color: #3c4172;
font-family: 'Poppins', sans-serif;
}

.main-content .section-dark {
background-color: #f0f3f5;
padding: 60px 0px;
}

.main-content .section-dark.resume {
height: 400px;
padding-top: 100px;
}

@media (max-width: 599px) {
.main-content .section-dark.resume {
padding-top: 75px;
}
}

.main-content .section-dark.resume .title {
padding: 20px;
}

.main-content .section-dark.resume button {
border: 2px solid #43485c;
background: white;
color: #43485c;
height: 50px;
width: 250px;
font-size: 1rem;
text-transform: uppercase;
}

.main-content .section-dark.resume .fa-download {
color: #1f2c6c;
}

.main-content .section-dark.my-work {
padding: 120px;
}

@media (max-width: 599px) {
.main-content .section-dark.my-work {
padding: 75px 20px;
}
}

.main-content .section-dark.my-work .work-item {
margin-bottom: 1rem;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
border-radius: 5px;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
}

.main-content .section-dark.my-work .work-item:hover {
-webkit-transform: scale(1.055) translateY(-2px);
transform: scale(1.055) translateY(-2px);
-webkit-box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
}

.main-content .section-light {
padding: 30px;
}

.main-content .section-light.about-me {
padding-bottom: 100px;
}

.main-content .section-light.about-me .is-larger {
font-size: 1.2rem;
}

@media (max-width: 599px) {
.main-content .section-light.about-me .about-links {
text-align: center;
}
}

.main-content .section-light.about-me .right-image img {
border-radius: 11px;
margin: 20px;
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
}

@media (max-width: 599px) {
.main-content .section-light.about-me .right-image img {
margin: auto;
}
}

.main-content .section-light.skills {
padding: 100px;
}

@media (max-width: 599px) {
.main-content .section-light.skills {
padding: 50px 20px 40px 20px;
padding-bottom: 20px;
}
}

.main-content .section-light.skills h1 {
padding: 10px;
}

.main-content .section-light.contact {
padding: 200px;
}

.main-content .section-light.contact button {
width: 100%;
background-color: #43485c;
color: white;
height: 50px;
font-size: 1.1rem;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
}

@media (max-width: 599px) {
.main-content .section-light.contact {
padding: 60px 20px;
}
}

.main-content .section-color.services {
padding: 100px;
background-color: #43485c;
color: white;
}

.main-content .section-color.services .title,
.main-content .section-color.services .subtitle {
color: white;
}

.main-content .section-color.services i {
font-size: 3rem;
padding: 20px;
}

.main-content .section-title {
color: #43485c;
text-transform: uppercase;
font-size: 1.8rem;
letter-spacing: 2px;
padding-bottom: 30px;
}

.footer {
bottom: 0;
width: 100vw;
padding: 0;
height: 80px;
line-height: 25px;
text-align: center;
background: #1f2c6c;
color: whitesmoke;
padding-top: 2rem;
}

.footer a {
padding: 0rem 1rem 1rem 1rem;
color: lightgrey;
}

.footer a i {
font-size: 1.5rem;
padding: 0px 10px;
}

.footer a .nav-item {
color: whitesmoke;
}

.fa-download {
color: #43485c;
}

#toTop {
height: 50px;
width: 50px;
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(31, 44, 108, 0.65);
color: white;
cursor: pointer;
border-radius: 50%;
font-size: 2rem;
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
}

#toTop a {
color: white;
}

#toTop:hover {
background-color: #43485c;
}

::-webkit-scrollbar {
width: 8px;
background-color: rgba(245, 245, 245, 0);
}

::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #43485c;
}

body.preloader-site {
overflow: hidden;
}

.preloader-wrapper {
height: 100%;
width: 100%;
background: #1f2c6c;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
}

.preloader-wrapper .preloader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 120px;
}

.white
{color:ghostwhite}

+ 51
- 0
css/tabs.css View File

@@ -0,0 +1,51 @@
.tabs {
margin-bottom: -1px !important;
position: relative;
}
.tab-content {
padding: 60px;
top: 197px;
color: #000;
background-color: white;
}
.tab-pane {
display: none;
}
.tab-pane.is-active {
display: block;
width: 50%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.is-active {
display: initial;
}

.cent{
display: block;
margin: 10px auto;
padding: 5px;
border: 1px solid #ccc}

.video
{display: block;
margin: 0 auto;}

/* CSS from http://embedresponsively.com */
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


BIN
View File


+ 26
- 0
index.css View File

@@ -0,0 +1,26 @@
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: #DCDCDC;
}
.card {
margin-bottom: 3rem;
}
.content-wrapper {
margin-top: 3rem;
}
.card-footer-item {
font-size: 12px;
font-weight: normal;
}
.card-header-title {
display: block;
}
.card-content p {
margin-bottom: 2rem;
}
.container {
max-width: 95%;
}
.fa-code, .fa-search {
margin-right: 0.5vw;
}

+ 102
- 0
index.html View File

@@ -0,0 +1,102 @@
<oDOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn JavaScript The Hard Way</title>
<link rel="shortcut icon" href="/images/fav_icon.png" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Bulma Version 0.8.x-->
<link rel="stylesheet" href="/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="/css/landing.css">
</head>

<body>
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<h2 class="is-size-2">LJSTHW</h2>
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/BulmaTemplates/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>

<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title is-size-2 has-text-white">
Learn JavaScript the Hard Way
</h1>
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle has-text-white-bis">
Zed is cooking up a whole new website to run the Learn JavaScript the Hard Way course, and you get to watch him code it <b>live</b>. Sign up for the mailing list to be notified of the next live stream.
</h2>



<div class="box">
<div data-mailtrain-subscription-widget data-url="https://train.learnjsthehardway.com/subscription/">
<a href="https://train.learnjsthehardway.com/subscription/">Subscribe to our list</a>
</div>
<script src="https://train.learnjsthehardway.com/subscription/widget.js"></script>

</div>
</div>
</div>
</div>

</section>
<script async type="text/javascript" src="/js/bulma.js"></script>
</body>

</html>

+ 10
- 0
js/bulma.js View File

@@ -0,0 +1,10 @@
// The following code is based off a toggle menu by @Bradcomp
// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function() {
var burger = document.querySelector('.burger');
var menu = document.querySelector('#'+burger.dataset.target);
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();

+ 413
- 0
js/kanban-switch.js View File

@@ -0,0 +1,413 @@
const app = new Vue({

el: '#app',


data: {
search: "",
isSwitched: false,
isSwitchedCustom: "Pleasant feelings",
title: "PLEASANT FEELINGS",
aos: "UNPLEASANT FEELINGS",
cards: [
{
name: "OPEN",
cardColor: "dark",
items: [
"understanding",
"confident",
"reliable",
"easy",
"amazed",
"free",
"sympathetic",
"interested",
"satisfied",
"receptive",
"accepting",
"kind",
]
},
{
name: "HAPPY",
cardColor: "info",
items: [
"great",
"gay",
"joyous",
"lucky",
"fortunate",
"delighted",
"overjoyed",
"gleeful",
"thankful",
"important",
"festive",
"ecstatic",
"satisfied",
"glad",
"cheerful",
"sunny",
"merry",
"elated",
"jubilant"
]
},
{
name: "ALIVE",
cardColor: "primary",
items: [
"playful",
"curageous",
"energetic",
"liberated",
"optimistic",
"provocative",
"impulsive",
"free",
"frisky",
"animated",
"spirited",
"thrilled",
"wonderful"
]
},
{
name: "GOOD",
cardColor: "info",
items: [
"calm",
"peaceful",
"at ease",
"comfortable",
"pleased",
"encouraged",
"clever",
"surprised",
"content",
"quiet",
"certain",
"relaxed",
"serene",
"free and easy",
"bright",
"blessed",
"reassured"
]
},
{
name: "LOVE",
cardColor: "danger",
items: [
"loving",
"considerate",
"affectionate",
"sensitive",
"tender",
"devoted",
"attracted",
"passionate",
"admiration",
"warm",
"touched",
"sympathy",
"close",
"loved",
"comforted",
"drawn toward"
]
},
{
name: "INTERESTED",
cardColor: "info",
items: [
"concerned",
"affected",
"fascinated",
"intrigued",
"absorbed",
"inquisitive",
"nosy",
"snoopy",
"engrossed",
"curious",
]
},
{
name: "POSITIVE",
cardColor: "success",
items: [
"eager",
"keen",
"earnest",
"intent",
"anxious",
"inspired",
"determined",
"excited",
"enthusiastic",
"bold",
"brave",
"daring",
"challenged",
"optimistic",
"re-enforced",
"confident",
"hopeful",
]
},
{
name: "STRONG",
cardColor: "primary",
items: [
"impulsive",
"free",
"sure",
"certain",
"rebellious",
"unique",
"dynamic",
"tenacious",
"hardy",
"secure"
]
},
],
emotions: [
{
name: "ANGRY",
cardColor: "danger",
items: [
"irritated",
"enraged",
"hostile",
"insulting",
"sore",
"annoyed",
"upset",
"hateful",
"unpleasant",
"offensive",
"bitter",
"aggressive",
"resentful",
"inflamed",
"provoked",
"incensed",
"infuriated",
"cross",
"worked up",
"boiling",
"fuming",
"indignant"
]
},
{
name: "DEPRESSED",
cardColor: "dark",
items: [
"lousy",
"disappointed",
"discouraged",
"ashamed",
"powerless",
"diminished",
"guilty",
"dissatisfied",
"miserable",
"detestable",
"repugnant",
"despicable",
"disgusting",
"abominable",
"terrible",
"in despair",
"sulky",
"bad",
"a sense of loss"
]
},
{
name: "CONFUSED",
cardColor: "info",
items: [
"upset",
"doubtful",
"uncertain",
"ashamed",
"indecisive",
"perplexed",
"embarassed",
"hesitant",
"shy",
"stupefied",
"disillusioned",
"unbelieving",
"skeptical",
"distrustful",
"misgiving",
"lost",
"unsure",
"uneasy",
"pessimistic",
"tense"
]
},

{
name: "HELPLESS",
cardColor: "info",
items: [
"incapable",
"alone",
"paralyzed",
"fatigued",
"useless",
"inferior",
"vulnerable",
"empty",
"forced",
"hesitant",
"despair",
"frustrated",
"distressed",
"woeful",
"pathetic",
"tragic",
"in a stew",
"dominated"
]
},
{
name: "INDIFFERENT",
cardColor: "info",
items: [
"dull",
"nonchalant",
"neutral",
"reserved",
"weary",
"bored",
"preoccupied",
"cold",
"disinterested",
"lifeless"
]
},
{
name: "AFRAID",
cardColor: "info",
items: [
"fearful",
"terrified",
"suspicious",
"anxious",
"alarmed",
"panic",
"nervous",
"scared",
"worried",
"frightened",
"timid",
"shaky",
"restless",
"doubtful",
"threatened",
"cowardly",
"quaking",
"menaced",
"wary"
]
},

{
name: "HURT",
cardColor: "info",
items: [
"crushed",
"tormented",
"pained",
"tortured",
"dejected",
"rejected",
"injured",
"offended",
"afflicted",
"aching",
"victimized",
"heartbroken",
"agonized",
"humiliated",
"wronged",
"alienated"
]
},

{
name: "SAD",
cardColor: "info",
items: [
"tearful",
"sorrowful",
"pained",
"grief",
"anguish",
"desolate",
"desperate",
"pessimistic",
"unhappy",
"lonely",
"grieved",
"mournful",
"dismayed"
]
},
]
},



computed: {
filteredCards() {

var _this = this
if (this.isSwitched) {


if (this.search.length === 0) return this.emotions
return this.emotions.map(function (card) {
return {
name: card.name,
cardColor: card.cardColor,
items: card.items.filter(function (item) {
return item.includes(_this.search)
})
}
})
} else {

if (this.search.length === 0) return this.cards
return this.cards.map(function (card) {
return {
name: card.name,
cardColor: card.cardColor,
items: card.items.filter(function (item) {
return item.includes(_this.search)
})
}
})
}

}
},

methods: {
removeCard(card) {
this.cards.splice(this.cards.indexOf(card), 1)
},
clearSearchField() {
this.search = ''
}
}
});
app.$mount("#app");

+ 159
- 0
js/kanban.js View File

@@ -0,0 +1,159 @@
var App = new Vue({
el: "#app",
data() {
return {
search: "",
title: "Game of Thrones",
cards: [
{
name: "Season One",
cardColor: "dark",
items: [
"winter is coming",
"the kingsroad",
"lord snow",
"cripples, bastards and broken things",
"the wolf and the lion",
"a golden crown",