Browse Source

Mostly copy the bulma-templates over to work with.

cleanuptesting
Zed A. Shaw 2 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
      images/admin.png
  24. BIN
      images/band.png
  25. BIN
      images/blog.png
  26. BIN
      images/blog2.png
  27. BIN
      images/bulma.png
  28. BIN
      images/cards.png
  29. BIN
      images/cheatsheet.png
  30. BIN
      images/contact.png
  31. BIN
      images/cover.png
  32. BIN
      images/fav_icon.png
  33. BIN
      images/favicon.png
  34. BIN
      images/first-post.png
  35. BIN
      images/forum.png
  36. BIN
      images/hero.png
  37. BIN
      images/inbox.png
  38. BIN
      images/instaalbum.png
  39. BIN
      images/kanban.png
  40. BIN
      images/kanban2.png
  41. BIN
      images/landing.png
  42. BIN
      images/login.png
  43. BIN
      images/modalcards.png
  44. BIN
      images/personal.png
  45. BIN
      images/showcase.png
  46. BIN
      images/tabs.png
  47. BIN
      images/white.jpg
  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
images/admin.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 173KB

BIN
images/band.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 832KB

BIN
images/blog.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 100KB

BIN
images/blog2.png View File

Before After
Width: 1895  |  Height: 961  |  Size: 89KB

BIN
images/bulma.png View File

Before After
Width: 640  |  Height: 160  |  Size: 11KB

BIN
images/cards.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 855KB

BIN
images/cheatsheet.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 168KB

BIN
images/contact.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 86KB

BIN
images/cover.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 48KB

BIN
images/fav_icon.png View File

Before After
Width: 76  |  Height: 76  |  Size: 32KB

BIN
images/favicon.png View File

Before After
Width: 32  |  Height: 32  |  Size: 482B

BIN
images/first-post.png View File

Before After
Width: 1400  |  Height: 780  |  Size: 61KB

BIN
images/forum.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 173KB

BIN
images/hero.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 201KB

BIN
images/inbox.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 309KB

BIN
images/instaalbum.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 714KB

BIN
images/kanban.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 100KB

BIN
images/kanban2.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 55KB

BIN
images/landing.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 463KB

BIN
images/login.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 58KB

BIN
images/modalcards.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 670KB

BIN
images/personal.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 398KB

BIN
images/showcase.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 765KB

BIN
images/tabs.png View File

Before After
Width: 1533  |  Height: 725  |  Size: 48KB

BIN
images/white.jpg View File

Before After
Width: 200  |  Height: 200  |  Size: 1.9KB

+ 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)
})
}
})
}

}
},