@@ -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. |
@@ -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. |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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} |
@@ -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;} |
@@ -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%; | |||
} | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} | |||
} */ |
@@ -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; | |||
} |
@@ -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; | |||
} | |||
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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} |
@@ -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%; | |||
} |
@@ -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; | |||
} |
@@ -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> |
@@ -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'); | |||
}); | |||
})(); |
@@ -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"); |
@@ -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", | |||