diff --git a/assets/css/__style_root.scss b/assets/css/__style_root.scss new file mode 100644 index 00000000..4f0c4a49 --- /dev/null +++ b/assets/css/__style_root.scss @@ -0,0 +1,10 @@ +/* + * Style-Root to collect the various scss-files. + * This file is given to the sass-compiler. + */ + +@import '../css/variables.scss'; +@import '../fonts/fonts.scss'; +@import '../octicons/octicons.scss'; +@import '../css/sk-bounce.scss'; +@import './style.scss'; diff --git a/assets/css/buttons.css b/assets/css/buttons.css deleted file mode 100644 index ef8e0669..00000000 --- a/assets/css/buttons.css +++ /dev/null @@ -1,152 +0,0 @@ -/* BUTTONS - -------------------------------------------------------------------------- */ - -button { - display: inline-block; - background-color: rgba(203, 203, 203, 0.38); - color: #FFFFFF; - padding: 6px 12px; - margin-bottom: 0; - text-align: center; - white-space: nowrap; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; -} - -button:focus { - outline: 0; -} - -button:hover { - background-color: #badfff; -} - -button:disabled { - background-color: rgba(24,105,177,1); -} - -button .octicon { - padding-left: 6px; -} - -.index-page .btn-primary, -.index-page .btn-secondary { - padding: 10px; - font-size: .8em; -} - -.btn-primary { - margin: 9px 0; - background: #0087ff; - color: #fff; - border-radius: 2px; - text-transform: inherit; -} - -.btn-secondary { - background: #8cf; - color: #fff; - border-radius: 2px; -} - -.btn-white { - background: #fff; - color: #0087ff; - border-radius: 2px; -} - -.btn-outline { - border: 1px solid #8cf; - background: none; - padding: 4px 13px; - border-radius: 3px; - color: #0087ff; - display: inline-block; -} - -.btn-light { - background: #fff; -} - -.btn-cta { - box-shadow: 0 4px 60px rgba(0, 0, 0, .2); -} - -.btn-primary:hover { - background: #057ce7; -} - -.btn-large { - padding: 12px 17px; - font-size: 16px; -} - -.btn-small { - padding: 8px 10px; - font-size: 12px; -} - -.border-group-left { - border: 1px solid #0087ff; - border-radius: 2px 0 0 2px; - padding: 10px 14px; -} - -.border-group-middle { - border-top: 1px solid #0087ff; - border-bottom: 1px solid #0087ff; - padding: 10px 14px; - margin-left: -4px; -} - -.border-group-right { - border: 1px solid #0087ff; - border-radius: 0 2px 2px 0; - padding: 10px 14px; -} - -.border-group-right.btn { - border: 1px solid #88CCFF; - color: #88CCFF; - border-left-color: #0087FF; -} - -.border-group-right.btn:hover { - border: 1px solid #0087ff; - color: #0087ff; - cursor: pointer; -} - -.border-group-container { - color: #0087ff; - padding: 20px 0; - user-select: none; -} - -/* TODO there are two of these */ -.lang-select { - padding: 4px 13px; - position: absolute; - height: 36px; - width: 170px; - margin: 5px 8px; - top: 0; - left: 0; - appearance: none; - -webkit-appearance: none; -} - -.lang-select:after { - content: ""; - border: 5px solid transparent; - /*border-top-color: #8cf;*/ - border-top-color: #A6A6A6; - position: relative; - left: 75px; - top: 5px; - pointer-events: none; - display: inline-block; - z-index: 10; -} diff --git a/assets/css/new-challenge.css b/assets/css/new-challenge.css deleted file mode 100644 index c70eb786..00000000 --- a/assets/css/new-challenge.css +++ /dev/null @@ -1,222 +0,0 @@ - -/* CHALLENGE BORDER BOX STYLES - -------------------------------------------------------------------------- */ - -.border-box { - border: 1px solid; - padding: 18px; - margin: 18px 0 36px; - border-radius: 2px; - margin-bottom: 34px; -} - -.border-box::before { - margin: -32px -8px 0; - float: left; - background: #fff; - padding: 0 8px; - font-weight: bold; - font-size: 1.4em; -} - -.blue-border.border-box { - border-color: #BADFFF; -} - -.blue-border.border-box::before { - color: #0087ff; -} - -.grey-border.border-box { - border-color: #999; -} - -.grey-border.border-box::before { - color: rgba(51, 57, 53, 0.83); -} - -.blue-border.border-box code { - background: rgba(136, 204, 255, 0.15); - color: #4F6375; -} - -.blue-border.border-box code.comment { - background: none; - padding-left: 0; -} - -gre7-border.border-box code { - background: rgba(157, 166, 179, 0.16); -} - -/* RESET MARGINS AND PADDINGS IN BOXES - -------------------------------------------------------------------------- */ - -.border-box p:last-child, -.solid-box p:last-child { - margin-bottom: 0; -} - -.solid-box h2:first-child { - margin-top: 0; -} - -.solid-box h2 { - margin-top: 40px; -} - - -/* CHALLENGE SOLID BOX STYLES - -------------------------------------------------------------------------- */ - -/* This option gives solid boxes an octicon tab */ - - /*.solid-box::before { - margin: -40px -8px 0; - float: left; - border-radius: 2px; - font-family: 'Octicons'; - font-weight: 200; - font-size: 32px; - padding: 4px 8px 0px; - }*/ - - /*.chal-goal.bright-blue.solid-box::before { - content: "\f07b"; - background: rgba(136,204,255,1); - } - - .chal-background.light-blue.solid-box::before { - content: "\f007"; - background: #E6F6FF; - }*/ - -.solid-box { - border-radius: 2px; - padding: 24px; - margin-bottom: 34px; -} - -.light-blue.solid-box { - color: #4F6375; - background: rgba(136, 204, 255, 0.18); -} - -.bright-blue.solid-box { - color: #fff; - background: rgba(136,204,255,1); -} - -.bold-blue.solid-box { - background-color: #0087ff; - color: #fff;; -} - -.solid-box code { - border-color: #fff; - display: inline-block; -} - -/* VERIFY - -------------------------------------------------------------------------- */ - -.verify h3 { - display: inline-block; - padding-right: 12px; -} - -#path-required-warning, -#div-selected-dir{ - padding: 6px 12px 6px 10px; - vertical-align: middle; - margin-bottom: 0; - font-size: 13px; - font-weight: 400; - text-align: center; - white-space: nowrap; - margin-left: -3px; - color: #8cf; -} - -.verify-fail:before { - content: '✗ '; -} - -.verify-pass:before { - content: '✔︎ '; -} - -#verify-list { - display: none; - list-style: none; - padding-left: 0; -} - -#challenge-completed { - color: #2BDA9E; - font-size: 24px; - font-family: "NothingYouCouldDo"; -} - -#challenge-completed h2 { - padding: 0; margin: 0; -} - -#verify-spinner.sk-bounce { - display: none; - margin-left: 14px; - vertical-align: middle; -} - -/* CODE STYLES - -------------------------------------------------------------------------- */ - /* TODO needs some Cleanup, to have similar styling accros challenges and no doubled classes here! */ - -div.code { - padding-bottom: 4px; -} - -code { - font-size: 0.8em; - background: rgba(157, 166, 179, 0.16); - padding: 6px 6px 3px 6px; - border-radius: 2px; - font-family: 'Liberation Mono', Monaco, Courier New, monospace; - white-space: nowrap; -} - -code.shell:before { - content: "$ "; - opacity: 0.4; -} - -.blue-border-box code { - border: none; - background: rgba(136, 204, 255, 0.15); -} - -.prenext { - overflow: auto; -} - -.inline-tip { - font-style: normal; - font-family: 'Liberation Mono', Monaco, Courier New, monospace; - font-size: .7em; -} - -/* PAGES STYLES - -------------------------------------------------------------------------- */ - -.blue-border-box { - border: 1px solid #BADFFF; - padding: 18px; - margin: 18px 0 36px; - border-radius: 2px; -} - -.blue-border-box code { - border: none; - color: #4F6375; - background: rgba(136, 204, 255, 0.15); -} diff --git a/assets/css/new-style.css b/assets/css/new-style.css deleted file mode 100644 index c05b17fd..00000000 --- a/assets/css/new-style.css +++ /dev/null @@ -1,375 +0,0 @@ -/* FONTS - -------------------------------------------------------------------------- */ - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(fonts/SourceSansPro-Regular.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(fonts/SourceSansPro-Semibold.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(fonts/SourceSansPro-Bold.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(fonts/SourceSansPro-Black.otf) format('opentype'); -} - -/* GENERAL - -------------------------------------------------------------------------- */ - -body { - font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; - line-height: 1.8em; - color: rgba(51, 57, 53, 0.83); - background-color: #f5f5f5; - background-color: #fff; - font-size: 1.1em; - margin: 0; -} - -div, header, select, a { - box-sizing: border-box; -} - -li { - padding-bottom: 4px; -} - -a { - color: #0087ff; - text-decoration: none; -} - -a:hover { - color: #4BABFF; -} - -blockquote { - border-left: 1px solid rgb(186, 223, 255); - padding-left: 18px; - margin: 30px 0; - color: rgba(51, 57, 53, 0.83); -} - -img { - margin: 30px 0 18px; - border-radius: 2px; -} - -/* UTILITIES - -------------------------------------------------------------------------- */ - -.all-caps { - font-size: 12px; - text-transform: uppercase; -} - -.full-width { - width: 100%; -} - -.u-floatRight { - float: right; -} - -.u-floatLeft { - float: left; -} - -.u-textCenter { - text-align: center; -} - -.u-textRight { - text-align: right; -} - -.u-posFixed { - position: fixed; -} - -.u-inlineBlock { - display: inline-block; -} - -ul.no-list-style { - list-style: none; - margin: 0; - padding: 12px 0; -} - -/* LAYOUT - -------------------------------------------------------------------------- */ - -.nav { - width: 100%; - background-color: #fafafa; - top: 0; -} - -.wrapper { - min-width: 800px; - margin-top: 60px; -} - -.page-wrapper { - max-width: 600px; - margin: 60px auto 0; - padding: 15px; -} - -.challenge-content { - padding: 26px; - margin-left: 26%; - width: 74%; - height: 100%; - background-color: #fff; -} - -/* FIXED HEADER - -------------------------------------------------------------------------- */ - -.site-header { - height: 60px; - position: fixed; - top: 0; - width: 100%; - font-size: 20px; - z-index: 9; - text-align: center; - background: #fafafa; - padding: 10px 0; - border-bottom: 1px solid #e0e0e0; -} - -.site-header h2 { - margin-top: 12px; -} - -.challenge-title { - text-transform: capitalize; - font-size: 19px; - font-weight: 800; - color: #4BABFF; - line-height: 1; - display: inline-block; -} - -.filledblock { - display: inline-block; - padding: 4px 10px; - font-weight: 900; -} - -.filledblock:hover { - background: #4BABFF; - color: #fff; - border-radius: 2px; -} - -/* SIDEBAR - -------------------------------------------------------------------------- */ - - .sidebar { - width: 26%; - position: fixed; - height: 100%; - background-color: #fff; - } - -.list-of-challenges { - list-style-type: none; - margin: 0; - padding: 0; -} - -.list-of-challenges li { - padding: 0; -} - -.list-of-challenges h3 { - padding-left: 10px; - margin-bottom: 4px; -} - -.challenge-item { - padding: 3px 10px 3px 20px; - display: block; - text-transform: capitalize; - font-size: .8em; -} - -/* :after instead of :before cause - it messes with text-transform */ -.challenge-item:after { - content: " "; - float: left; - display: inline-block; - position: relative; - left: -9px; - top: 9px; - height: 6px; - width: 6px; - border: 0.15em solid #0087ff; - border-radius: 50px; -} - -.challenge-item.completed:after { - position: absolute; - left: 10px; - top: 12px; - height: 6px; - width: 6px; - border: 0.15em solid #0087ff; - background-color: #0087ff; - border-radius: 50px; -} - -.challenge-item.current .current-arrow { - display: block; -} - -.current-arrow { - float: right; - display: none; -} - -.challenge-item.current { - background-color: #8cf; - color: #fff; - margin-right: -3px; - border-color: white; - border-radius: 0 2px 2px 0; -} - -.challenge-item.completed { - position: relative; - padding-left: 30px; -} - -.challenge-name { - text-transform: capitalize; - font-weight: 900; - color: #0087ff; -} - -/* FOOTER - -------------------------------------------------------------------------- */ - -/* Mu-An's arrows - save the day */ -.arrow-right { - width: 10px; - height: 10px; - border-bottom-left-radius: 8px; - border-color: #000; - border-bottom: 1px solid; - border-left: 1px solid; - position: absolute; - right: 28px; -} - -.arrow-right:after { - content: ''; - display: block; - position: absolute; - top: 7px; - right: 0; - width: 5px; - height: 5px; - transform: rotate(-45deg); - border-right: 1px solid; - border-bottom: 1px solid; -} - -.arrow-left { - width: 10px; - height: 10px; - border-bottom-right-radius: 8px; - border-color: #000; - border-bottom: 1px solid; - border-right: 1px solid; - position: relative; - margin-bottom: 8px; - margin-left: 1px; -} - -.arrow-left:after { - content: ''; - display: block; - position: absolute; - top: 7px; - left: 0; - width: 5px; - height: 5px; - transform: rotate(-45deg); - border-left: 1px solid; - border-top: 1px solid; -} - -/* HOME PAGE - -------------------------------------------------------------------------- */ - - -.chal-background h3 { - margin: 0; -} - -.progress-circles .border-left { - border-left: 1px solid #0087ff; -} - -.progress-circle { - display: inline-block; - width: 10px; - height: 10px; - border: 0.15em solid #0087ff; - border-radius: 50px; -} - -.progress-circle.completed { - background: #0087ff; -} - -.progress-circle.completed + .progress-circle:not(.completed) { - background: #8cf; - animation: blink 1s steps(2, start) infinite; -} - -@keyframes blink { - to { - background: none; - } -} - -/* LANGUAGES, TRANSLATIONS - -------------------------------------------------------------------------- */ - -n, v, adj { - position: relative; -} - -.superscript { - font-size: 0.6em; - position: absolute; - top: -20%; - line-height: 0.6em; - font-weight: normal; - white-space: nowrap; - opacity: 0.8; -} diff --git a/assets/css/sk-bounce.css b/assets/css/sk-bounce.scss similarity index 50% rename from assets/css/sk-bounce.css rename to assets/css/sk-bounce.scss index 6e677176..9a3c121d 100644 --- a/assets/css/sk-bounce.css +++ b/assets/css/sk-bounce.scss @@ -1,5 +1,5 @@ /* - * This is a part of Spinkit by the awesome Tobias Ahlin! + * This is a part of the awesome Spinkit by Tobias Ahlin! * http://tobiasahlin.com/spinkit/ */ @@ -21,26 +21,29 @@ width: var(--sk-size); height: var(--sk-size); position: relative; -} -.sk-bounce-dot { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: var(--sk-color); - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -} + &-dot { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: var(--sk-color); + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -.sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; } + &:nth-child(2) { + animation-delay: -1.0s; + } + } +} +/* Animation */ @keyframes sk-bounce { 0%, 100% { transform: scale(0); } 45%, 55% { - transform: scale(1); - } + transform: scale(1); + } } diff --git a/assets/css/style.css b/assets/css/style.css deleted file mode 100644 index 1c4e5e48..00000000 --- a/assets/css/style.css +++ /dev/null @@ -1,725 +0,0 @@ -/* KEEP THIS AROUND UNTIL TRANSLATIONS ARE UPDATED */ - - - - -/* FONTS - -------------------------------------------------------------------------- */ - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(fonts/SourceSansPro-Regular.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(fonts/SourceSansPro-Semibold.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(fonts/SourceSansPro-Bold.otf) format('opentype'); -} - -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(fonts/SourceSansPro-Black.otf) format('opentype'); -} - -/* GENERAL - -------------------------------------------------------------------------- */ - -body { - font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; - line-height: 1.8em; - color: rgba(51, 57, 53, 0.83); - background-color: #f5f5f5; - background-color: #fff; - font-size: 15px; - margin: 0; -} - -div, header, select, a { - box-sizing: border-box; -} - -li { - padding-bottom: 4px; -} - -h1, h2, h3, h4, .toc { - font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; -} - -a { - color: #0087ff; - text-decoration: none; -} - -a:hover { - color: #4BABFF; -} - -p { - font-size: 16px; - line-height: 1.6em; -} - -blockquote { - border-left: 2px solid rgba(51, 57, 53, 0.83); - padding-left: 18px; - margin: 30px 0; - color: rgba(51, 57, 53, 0.83); -} - -img { - margin: 30px 0 18px; -} - -/* UTILITIES - -------------------------------------------------------------------------- */ - -.all-caps { - font-size: 12px; - text-transform: uppercase; -} - -.full-width { - width: 100%; -} - -.u-floatRight { - float: right; -} - -.u-floatLeft { - float: left; -} - -.u-textCenter { - text-align: center; -} - -.u-textRight { - text-align: right; -} - -.u-posFixed { - position: fixed; -} - -.u-inlineBlock { - display: inline-block; -} - -/* LAYOUT - -------------------------------------------------------------------------- */ - -.nav { - width: 100%; - background-color: #fafafa; - top: 0; -} - -.wrapper { - min-width: 800px; - margin-top: 60px; -} - -.page-wrapper { - max-width: 600px; - margin: 60px auto 0; - padding: 15px; -} - -.content { - padding: 26px; - margin-left: 26%; - width: 74%; - height: 100%; - background-color: #fff; -} - -/* FIXED HEADER - -------------------------------------------------------------------------- */ - -.site-header { - height: 60px; - position: fixed; - top: 0; - width: 100%; - font-size: 20px; - z-index: 9; - text-align: center; - background: #fafafa; - padding: 10px 0; - border-bottom: 1px solid #e0e0e0; -} - -.site-header h2 { - margin-top: 12px; -} - -.challenge-title { - text-transform: capitalize; - font-size: 19px; - font-weight: 800; - color: #4BABFF; - line-height: 1; - display: inline-block; -} - -.filledblock { - display: inline-block; - padding: 4px 10px; - font-weight: 900; -} - -.filledblock:hover { - background: #4BABFF; - color: #fff; -} - -/* SIDEBAR - -------------------------------------------------------------------------- */ - - .sidebar { - width: 26%; - position: fixed; - height: 100%; - background-color: #fff; - } - -.list-of-challenges { - list-style-type: none; - margin: 0; - padding: 0; -} - -.list-of-challenges li { - padding: 0; -} - -.list-of-challenges h3 { - padding-left: 10px; - margin-bottom: 4px; -} - -.challenge-item { - padding: 3px 10px 3px 20px; - display: block; - text-transform: capitalize; -} - -/* :after instead of :before cause - it messes with text-transform */ -.challenge-item:after { - content: " "; - float: left; - display: inline-block; - position: relative; - left: -9px; - top: 9px; - height: 6px; - width: 6px; - border: 0.15em solid #0087ff; - border-radius: 50px; -} - -.challenge-item.completed:after { - position: absolute; - left: 10px; - top: 12px; - height: 6px; - width: 6px; - border: 0.15em solid #0087ff; - background-color: #0087ff; - border-radius: 50px; -} - -.challenge-item.current .current-arrow { - display: block; -} - -.current-arrow { - float: right; - display: none; -} - -.challenge-item.current { - background-color: #8cf; - color: #0087FF; - margin-right: -3px; - border-color: white; - border-radius: 0 2px 2px 0; -} - -.challenge-item.completed { - position: relative; - padding-left: 30px; -} - -.challenge-name { - text-transform: capitalize; - font-weight: 900; - color: #0087ff; -} - -/* CHALLENGES - -------------------------------------------------------------------------- */ - - .content h1, .content h2, .content h3, .content h4 { - margin-top: 50px; - } - -.chal-background { - color: #6F879C; - background: rgba(136, 204, 255, 0.18); - border-radius: 2px; - padding: 3px 24px; -} - -.chal-background h2 { - margin-top: 18px; -} - - - -code, .outof { - font-size: 0.9em; - /*border: 1px solid #9DA6B3;*/ - background: rgba(157, 166, 179, 0.16); - padding: 2px 6px; - border-radius: 2px; - font-family: 'Liberation Mono', Monaco, Courier New, monospace; - white-space: nowrap; -} - -code.shell:before { - content: "$ "; - opacity: 0.4; -} - -.prenext { - overflow: auto; -} - -/* CHALLENGE SECTIONS - -------------------------------------------------------------------------- */ - -/* TODO Make these generic for dictionary - and resources page */ -.blue-border-box, -.didnt-pass, -.challenge { - border: 1px solid #BADFFF; - padding: 18px; - margin: 18px 0 36px; - border-radius: 2px; -} - -.didnt-pass { - border-color: #999; -} - -.blue-border-box h2, -.challenge h2 { - color: #08f; -} - -.blue-border-box h2, -.didnt-pass h2, -.challenge h2 { - margin: -32px -8px 0; - float: left; - background: #fff; - padding: 0 8px; -} - -.blue-border-box h2 + p { - margin-top: 0; -} - -.blue-border-box p:last-child, -.didnt-pass p:last-child { - margin-bottom: 0; -} - -.blue-border-box ul { - list-style: none; - margin: 0; - padding: 0; -} - -.blue-border-box code { - border: none; - background: rgba(136, 204, 255, 0.15); -} - -.blue-border-box li { - margin-top: 0px; -} - -.didnt-pass h4 { - margin: 10px 0 0; -} - -.didnt-pass p + h4 { - padding-top: 30px; -} - -.challenge p { - margin: 0; - color: #0087ff; -} - -/* VERIFY - -------------------------------------------------------------------------- */ - -.verify { - background-color: #0087ff; - color: #fff; - padding: 18px; - border-radius: 2px; -} - -.verify code { - border-color: #fff; - display: inline-block; -} - -.verify { - margin-top: 30px; - margin-bottom: 30px; -} - -.blue-border-box h4, -.verify h3 { - margin-top: 0; -} - -.verify h3 { - display: inline-block; - padding-right: 12px; -} - -#directory-path:empty { - display: none; -} - -#path-required-warning, -#directory-path { - padding: 6px 12px 6px 10px; - vertical-align: middle; - margin-bottom: 0; - font-size: 13px; - font-weight: 400; - text-align: center; - white-space: nowrap; - margin-left: -3px; - color: #8cf; -} - -#path-required-warning { - display: none; -} - -#path-required-warning.show { - display: inline; -} - -#path-required-warning.show + #directory-path { - display: none; -} - -.verify-fail:before { - content: '✗ '; -} - -.verify-pass:before { - content: '✔︎ '; -} - -#verify-list { - display: none; - list-style: none; - padding-left: 0; -} - -#challenge-completed { - color: #2BDA9E; - font-size: 24px; - font-family: "NothingYouCouldDo"; -} - -#challenge-completed h2 { - padding: 0; margin: 0; -} - -#verify-spinner.sk-double-bounce { - display: none; - width: 26px; - height: 26px; - position: relative; - margin: 0 auto 0 14px; - vertical-align: middle; -} - -#verify-spinner.sk-double-bounce .sk-child { - background-color: #E0E0E0; -} - -/* BUTTONS - -------------------------------------------------------------------------- */ - -button { - display: inline-block; - background-color: rgba(203, 203, 203, 0.38); - color: #FFFFFF; - padding: 6px 12px; - margin-bottom: 0; - text-align: center; - white-space: nowrap; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; -} - -button:focus { - outline: 0; -} - -button:hover { - background-color: rgba(227, 220, 220, 0.38); -} - -button:disabled { - background-color: rgba(167, 164, 164, 0.68); -} - -button .octicon { - padding-left: 6px; -} - -.btn-primary { - margin: 9px 0; - background: #0087ff; - color: #fff; - border-radius: 2px; - text-transform: inherit; -} - -.btn-secondary { - background: #8cf; - color: #fff; - border-radius: 2px; -} - -.btn-white { - background: #fff; - color: #0087ff; - border-radius: 2px; -} - -.btn-outline { - border: 1px solid #8cf; - background: none; - padding: 4px 13px; - border-radius: 3px; - color: #0087ff; - display: inline-block; -} - -.btn-light { - background: #fff; -} - -.btn-cta { - box-shadow: 0 4px 60px rgba(0, 0, 0, .2); -} - -.btn-primary:hover { - background: #057ce7; -} - -.btn-large { - padding: 12px 17px; - font-size: 16px; -} - -.btn-small { - padding: 8px 10px; - font-size: 12px; -} - -.border-group-left { - border: 1px solid #0087ff; - border-radius: 2px 0 0 2px; - padding: 10px 14px; -} - -.border-group-middle { - border-top: 1px solid #0087ff; - border-bottom: 1px solid #0087ff; - padding: 10px 14px; - margin-left: -4px; -} - -.border-group-right { - border: 1px solid #0087ff; - border-radius: 0 2px 2px 0; - padding: 10px 14px; -} - -.border-group-right.btn { - border: 1px solid #88CCFF; - color: #88CCFF; - border-left-color: #0087FF; -} - -.border-group-right.btn:hover { - border: 1px solid #0087ff; - color: #0087ff; - cursor: pointer; -} - -.border-group-container { - color: #0087ff; - padding: 20px 0; -} - -/* TODO there are two of these */ -.lang-select { - padding: 4px 13px; - position: absolute; - height: 36px; - width: 150px; - margin: 5px 8px; - top: 0; - left: 0; - appearance: none; - -webkit-appearance: none; -} - -.lang-select:after { - content: ""; - border: 5px solid transparent; - /*border-top-color: #8cf;*/ - border-top-color: #A6A6A6; - position: relative; - left: 66px; - top: 5px; - pointer-events: none; - display: inline-block; - z-index: 10; -} - -/* FOOTER - -------------------------------------------------------------------------- */ - -/* Mu-An's arrows - save the day */ -.arrow-right { - width: 10px; - height: 10px; - border-bottom-left-radius: 8px; - border-color: #000; - border-bottom: 1px solid; - border-left: 1px solid; - position: absolute; - right: 28px; -} - -.arrow-right:after { - content: ''; - display: block; - position: absolute; - top: 7px; - right: 0; - width: 5px; - height: 5px; - transform: rotate(-45deg); - border-right: 1px solid; - border-bottom: 1px solid; -} - -.arrow-left { - width: 10px; - height: 10px; - border-bottom-right-radius: 8px; - border-color: #000; - border-bottom: 1px solid; - border-right: 1px solid; - position: relative; - margin-bottom: 8px; - margin-left: 1px; -} - -.arrow-left:after { - content: ''; - display: block; - position: absolute; - top: 7px; - left: 0; - width: 5px; - height: 5px; - transform: rotate(-45deg); - border-left: 1px solid; - border-top: 1px solid; -} - -/* HOME PAGE - -------------------------------------------------------------------------- */ - -.progress-circles .border-left { - border-left: 1px solid #0087ff; -} - -.progress-circle { - display: inline-block; - width: 10px; - height: 10px; - border: 0.15em solid #0087ff; - border-radius: 50px; -} - -.progress-circle.completed { - background: #0087ff; -} - -.progress-circle.completed + .progress-circle:not(.completed) { - background: #8cf; - animation: blink 1s steps(2, start) infinite; -} - -@keyframes blink { - to { - background: none; - } -} - -/* LANGUAGES, TRANSLATIONS - -------------------------------------------------------------------------- */ - -n, v, adj { - position: relative; -} - -.superscript { - font-size: 0.6em; - position: absolute; - top: -20%; - line-height: 0.6em; - font-weight: normal; - white-space: nowrap; - opacity: 0.8; -} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 00000000..92c81fc1 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,565 @@ +/* + * All the Git-it Styling + */ + +/***************************** + * Commons + *****************************/ +body { + font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; + font-size: 1.1em; + line-height: 1.8em; + color: var(--grey_darker); + background-color: var(--white); + margin: 0; +} + +::-webkit-scrollbar { + width: 5px; + height: 5px; + + &-thumb { + background-color: var(--grey_light); + border-radius: 5px; + } + &-scrollbar-button { + display: none; + } +} + +div, header, select, a { + box-sizing: border-box; +} + +a { + color: var(--blue); + text-decoration: none; + + &:hover { + color: var(--blue-hover); + } +} + +li { + padding-bottom: 4px; +} + +img { + margin: 30px 0 18px; + border-radius: 2px; +} + +button { + padding: 8px 14px; + font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif; + border: none; + vertical-align: middle; + white-space: nowrap; + user-select: none; + + &:focus { + outline: 0; + } +} + +.inline-tip { + font-style: italic; + font-size: .85em; + padding-left: 10px; + + em { + font-style: normal; + } +} + +ul.no-list-style { + list-style: none; + margin: 20px 0 0 0; + padding: 0; +} + +/***************************** + * Wrappers + *****************************/ +.wrapper { + margin-top: 60px; + + &--page { + @extend .wrapper; + max-width: 600px; + margin: 60px auto 0; + padding: 24px; + } + + &--challenge { + @extend .wrapper; + display: flex; + + &__sidebar { + min-width: 26%; + + .sidebar { + position: fixed; + min-width: 26%; + } + } + + &__content { + padding: 26px; + } + } +} + +/***************************** + * RTL-Languages + *****************************/ +.rtl { + direction: rtl; + + // Code Elements should stay ltr + .code { + direction: ltr; + text-align: left; + } +} + +/***************************** + * Code Elements + *****************************/ +.code { + // Code Elements always stay direction ltr -> set in class .rtl.code + padding-bottom: 3px; +} + +code { + font-size: 0.8em; + font-family: 'Liberation Mono', Monaco, Courier New, monospace; + white-space: nowrap; + background: var(--white_darker); + padding: 6px 6px 3px 6px; + border-radius: 2px; + + &.comment { + background: none; + padding-left: 12px; + } + + &.shell::before { + content: "$ "; + color: var(--grey_light); + } +} + +.box--border--blue code { + background-color: var(--blue_lightest); + color: var(--blue_grey); +} +.box--solid--light code { + background-color: var(--white_darkest); +} + +/***************************** + * Boxes + *****************************/ +.box { + border-radius: 2px; + margin: 34px 0; + padding: 24px; + + p:last-child { + margin-bottom: 0; + } + + &--solid { + @extend .box; + + h2 { + margin-top: 40px; + + &:first-child { + margin-top: 0; + } + } + + &--light { + @extend .box--solid; + background-color: var(--blue_lightest); + color: var(--blue_grey); + } + } + + &--border { + @extend .box; + border: 1px solid; + padding-top: 10px; + + &:before { + background-color: white; + font-weight: bold; + font-size: 1.4em; + // White 'border' + padding: 0 8px; + margin-left: -8px; + // Positioning + float: left; + margin-top: -26px; + } + + &.box--notitle { + margin-top: auto; + + &:before { + content: none; + } + } + + &--blue { + @extend .box--border; + border-color: var(--blue_lighter); + + &:before { + color: var(--blue); + } + } + + &--grey { + @extend .box--border; + border-color: var(--grey); + + &::before { + color: var(--grey_darker); + } + } + } +} + +/***************************** + * Verify-Box + *****************************/ +.verify { + &__box { + @extend .box--solid; + background-color: var(--blue); + color: white; + } + + &__button { + background-color: white; + color: var(--blue); + border-radius: 2px; + + &:hover { + background-color: var(--white-hover); + } + &:disabled { + background-color: var(--blue_dark); + } + } + + &__spinner { + display: none; // Activated via JS. + margin: 0 0 0 10px; + vertical-align: middle; + + [class~="rtl"] & { + margin: 0 10px 0 0; + } + } + + &__dir-text { + padding: 6px 10px; + font-size: 13px; + color: var(--blue_light); + white-space: nowrap; + } + + &__list { + display: none; // Activated via JS. + list-style: none; + padding-left: 0; + + &__elem--fail:before { + content: '✗ '; + } + + &__elem--pass:before { + content: '✔︎ '; + } + } +} + +/***************************** + * Header + *****************************/ +.header { + height: 59px; // Due to 1px Border + width: 100%; + padding: 10px 0; + position: fixed; + top: 0; + z-index: 9; + display: flex; + justify-content: center; + font-size: 20px; + background-color: var(--white_dark); + border-bottom: 1px solid var(--white_darkest); + + &__lang { + height: 36px; + width: 170px; + margin: 0 auto 0 20px; + + select { + height: 100%; + width: 100%; + padding: 5px 10px; + border: 1px solid var(--blue_light); + border-radius: 3px; + color: var(--blue); + background: none; + appearance: none; + + &:focus { + outline-color: var(--blue_light); + } + } + + // Dropdown arrow + &:after { + content: ""; + border: 5px solid transparent; + border-top-color: var(--grey_light); + position: relative; + right: 20px; + top: 18.5px; + pointer-events: none; + } + } + + &__text { + position: absolute; + + &__gitit { + display: inline-block; + padding: 4px 10px; + font-weight: 900; + + &:hover { + background: var(--blue-hover); + color: white; + border-radius: 2px; + } + } + + &__title { + text-transform: capitalize; + font-size: 19px; + font-weight: 800; + color: var(--blue-hover); + display: inline-block; + } + } +} + +/***************************** + * Sidebar + *****************************/ +.sidebar { + h3 { + padding-left: 10px; + margin-bottom: 8px; + } + + &__list { + list-style-type: none; + margin: 8px 0; + padding: 0; + + &__item { + padding-bottom: 0; + + &.current { + background-color: var(--blue_light); + a { + color: white; + } + } + + a { + padding: 3px 0px 3px 20px; + display: block; + text-transform: capitalize; + font-size: .8em; + } + + .status-dot { + width: 10px; + height: 10px; + background-color: var(--blue); + vertical-align: middle; + position: relative; + top: -1px; + margin-right: 4px; + } + &.complete .status-dot { + // Replace with octicon__dotFill + -webkit-mask-image: url('../../assets/octicons/dot-fill.svg') + } + + .current-arrow { + height: 11px; + width: 11px; + background-color: white; + float: right; + margin: 10px 2px; // Centering height of 11px within 31px; + } + } + } +} + +/***************************** + * Footer + *****************************/ +.footer { + overflow: auto; + + &__left { + float: left; + } + &__right { + float: right; + text-align: -webkit-right; + } + + &__link{ + font-size: 12px; + text-transform: uppercase; + + .octicon__reply { + width: 16px; + height: 16px; + background-color: var(--blue); + display: block; + } + + &:hover { + color: var(--blue-hover); + .octicon__reply { + background-color: var(--blue-hover); + //************************ TODO: there's a flickering when hovering between octicon and link-text + } + } + } +} + +/***************************** + * Index Page + *****************************/ +.pgIndex { + &__progress { + margin: 20px 0; + color: var(--blue); + user-select: none; + display: flex; + line-height: 1.3em; + + &__box { + border: 1px solid var(--blue); + padding: 10px 14px; + display: inline; + + &--left { + @extend .pgIndex__progress__box; + border-radius: 2px 0 0 2px; + + [class~="rtl"] & { + border-radius: 0 2px 2px 0; + } + } + + &--middle { + @extend .pgIndex__progress__box; + margin-left: -1px; + z-index: 1; // Border above &--right + + [class~="rtl"] & { + margin-left: 0; + margin-right: -1px; + } + } + + &--right { + @extend .pgIndex__progress__box; + border-radius: 0 2px 2px 0; + margin-left: -1px; + border-color: var(--blue_light); + cursor: pointer; + + [class~="rtl"] & { + border-radius: 2px 0 0 2px; + margin-left: 0; + margin-right: -1px; + } + + .octicon__trash { + width: 18px; + height: 18px; + background-color: var(--blue_light); + vertical-align: middle; + } + + &:hover { + border-color: var(--blue); + .octicon__trash { + background-color: var(--blue); + } + } + } + } + + &__dot { + width: 10px; + height: 10px; + background-color: var(--blue); + + &.complete { + // Replace with octicon__dotFill + -webkit-mask-image: url('../../assets/octicons/dot-fill.svg') + } + } + } + + &__section { + margin: 40px 0 0 0; + + .box--solid--light h3 { + margin: 0; + } + + &__btn { + padding: 10px; + margin: 9px 0; + font-size: .8em; + border-radius: 2px; + color: white; + + &--primary { + @extend .pgIndex__section__btn; + background: var(--blue); + + &:hover { + background: var(--blue_dark); + } + } + + &--secondary { + @extend .pgIndex__section__btn; + background: var(--blue_light); + + &:hover{ + background: var(--blue_light-hover); + } + } + } + } +} diff --git a/assets/css/variables.scss b/assets/css/variables.scss new file mode 100644 index 00000000..cc95e422 --- /dev/null +++ b/assets/css/variables.scss @@ -0,0 +1,26 @@ +/** + * This file contains some variables for common design + * Trying to use more or less BEM-Model, using only one dash or lodash respectively + */ + +:root { + --blue: #0087ff; + --blue-hover: #4babff; + --blue_light: #88ccff; + --blue_light-hover: #66bdff; + --blue_lighter: #badfff; + --blue_lightest: #eaf6ff; + --blue_dark: #007ae6; + --blue_grey: #4f6375; + + --grey_darker: #5a5a5a; + //--grey_dark: #808080; + --grey: #999999; + --grey_light: #a6a6a6; + + --white_darkest: #e0e0e0; + --white_darker: #f0f0f0; + --white_dark: #fafafa; + --white: #ffffff; + --white-hover: #cce7ff; +} diff --git a/assets/css/fonts/SourceSansPro-Black.otf b/assets/fonts/SourceSansPro-Black.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-Black.otf rename to assets/fonts/SourceSansPro-Black.otf diff --git a/assets/css/fonts/SourceSansPro-BlackIt.otf b/assets/fonts/SourceSansPro-BlackIt.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-BlackIt.otf rename to assets/fonts/SourceSansPro-BlackIt.otf diff --git a/assets/css/fonts/SourceSansPro-Bold.otf b/assets/fonts/SourceSansPro-Bold.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-Bold.otf rename to assets/fonts/SourceSansPro-Bold.otf diff --git a/assets/css/fonts/SourceSansPro-BoldIt.otf b/assets/fonts/SourceSansPro-BoldIt.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-BoldIt.otf rename to assets/fonts/SourceSansPro-BoldIt.otf diff --git a/assets/css/fonts/SourceSansPro-ExtraLight.otf b/assets/fonts/SourceSansPro-ExtraLight.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-ExtraLight.otf rename to assets/fonts/SourceSansPro-ExtraLight.otf diff --git a/assets/css/fonts/SourceSansPro-ExtraLightIt.otf b/assets/fonts/SourceSansPro-ExtraLightIt.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-ExtraLightIt.otf rename to assets/fonts/SourceSansPro-ExtraLightIt.otf diff --git a/assets/css/fonts/SourceSansPro-It.otf b/assets/fonts/SourceSansPro-It.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-It.otf rename to assets/fonts/SourceSansPro-It.otf diff --git a/assets/css/fonts/SourceSansPro-Light.otf b/assets/fonts/SourceSansPro-Light.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-Light.otf rename to assets/fonts/SourceSansPro-Light.otf diff --git a/assets/css/fonts/SourceSansPro-LightIt.otf b/assets/fonts/SourceSansPro-LightIt.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-LightIt.otf rename to assets/fonts/SourceSansPro-LightIt.otf diff --git a/assets/css/fonts/SourceSansPro-Regular.otf b/assets/fonts/SourceSansPro-Regular.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-Regular.otf rename to assets/fonts/SourceSansPro-Regular.otf diff --git a/assets/css/fonts/SourceSansPro-Semibold.otf b/assets/fonts/SourceSansPro-Semibold.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-Semibold.otf rename to assets/fonts/SourceSansPro-Semibold.otf diff --git a/assets/css/fonts/SourceSansPro-SemiboldIt.otf b/assets/fonts/SourceSansPro-SemiboldIt.otf similarity index 100% rename from assets/css/fonts/SourceSansPro-SemiboldIt.otf rename to assets/fonts/SourceSansPro-SemiboldIt.otf diff --git a/assets/fonts/fonts.scss b/assets/fonts/fonts.scss new file mode 100644 index 00000000..a50b5c44 --- /dev/null +++ b/assets/fonts/fonts.scss @@ -0,0 +1,31 @@ +/* + * Font Definitions + */ + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../../assets/fonts/SourceSansPro-Regular.otf) format('opentype'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(../../assets/fonts/SourceSansPro-Semibold.otf) format('opentype'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../../assets/fonts/SourceSansPro-Bold.otf) format('opentype'); +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 900; + src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../../assets/fonts/SourceSansPro-Black.otf) format('opentype'); +} diff --git a/assets/octicons-local.ttf b/assets/octicons-local.ttf deleted file mode 100644 index 7bb08eac..00000000 Binary files a/assets/octicons-local.ttf and /dev/null differ diff --git a/assets/octicons.css b/assets/octicons.css deleted file mode 100644 index e15ff071..00000000 --- a/assets/octicons.css +++ /dev/null @@ -1,224 +0,0 @@ -@font-face { - font-family: 'octicons'; - src: url('octicons.eot?#iefix') format('embedded-opentype'), - url('octicons.woff') format('woff'), - url('octicons.ttf') format('truetype'), - url('octicons.svg#octicons') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* - -.octicon is optimized for 16px. -.mega-octicon is optimized for 32px but can be used larger. - -*/ -.octicon, .mega-octicon { - font: normal normal normal 16px/1 octicons; - display: inline-block; - text-decoration: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.mega-octicon { font-size: 32px; } - -.octicon-alert:before { content: '\f02d'} /*  */ -.octicon-arrow-down:before { content: '\f03f'} /*  */ -.octicon-arrow-left:before { content: '\f040'} /*  */ -.octicon-arrow-right:before { content: '\f03e'} /*  */ -.octicon-arrow-small-down:before { content: '\f0a0'} /*  */ -.octicon-arrow-small-left:before { content: '\f0a1'} /*  */ -.octicon-arrow-small-right:before { content: '\f071'} /*  */ -.octicon-arrow-small-up:before { content: '\f09f'} /*  */ -.octicon-arrow-up:before { content: '\f03d'} /*  */ -.octicon-microscope:before, -.octicon-beaker:before { content: '\f0dd'} /*  */ -.octicon-bell:before { content: '\f0de'} /*  */ -.octicon-bold:before { content: '\f0e2'} /*  */ -.octicon-book:before { content: '\f007'} /*  */ -.octicon-bookmark:before { content: '\f07b'} /*  */ -.octicon-briefcase:before { content: '\f0d3'} /*  */ -.octicon-broadcast:before { content: '\f048'} /*  */ -.octicon-browser:before { content: '\f0c5'} /*  */ -.octicon-bug:before { content: '\f091'} /*  */ -.octicon-calendar:before { content: '\f068'} /*  */ -.octicon-check:before { content: '\f03a'} /*  */ -.octicon-checklist:before { content: '\f076'} /*  */ -.octicon-chevron-down:before { content: '\f0a3'} /*  */ -.octicon-chevron-left:before { content: '\f0a4'} /*  */ -.octicon-chevron-right:before { content: '\f078'} /*  */ -.octicon-chevron-up:before { content: '\f0a2'} /*  */ -.octicon-circle-slash:before { content: '\f084'} /*  */ -.octicon-circuit-board:before { content: '\f0d6'} /*  */ -.octicon-clippy:before { content: '\f035'} /*  */ -.octicon-clock:before { content: '\f046'} /*  */ -.octicon-cloud-download:before { content: '\f00b'} /*  */ -.octicon-cloud-upload:before { content: '\f00c'} /*  */ -.octicon-code:before { content: '\f05f'} /*  */ -.octicon-color-mode:before { content: '\f065'} /*  */ -.octicon-comment-add:before, -.octicon-comment:before { content: '\f02b'} /*  */ -.octicon-comment-discussion:before { content: '\f04f'} /*  */ -.octicon-credit-card:before { content: '\f045'} /*  */ -.octicon-dash:before { content: '\f0ca'} /*  */ -.octicon-dashboard:before { content: '\f07d'} /*  */ -.octicon-database:before { content: '\f096'} /*  */ -.octicon-clone:before, -.octicon-desktop-download:before { content: '\f0dc'} /*  */ -.octicon-device-camera:before { content: '\f056'} /*  */ -.octicon-device-camera-video:before { content: '\f057'} /*  */ -.octicon-device-desktop:before { content: '\f27c'} /*  */ -.octicon-device-mobile:before { content: '\f038'} /*  */ -.octicon-diff:before { content: '\f04d'} /*  */ -.octicon-diff-added:before { content: '\f06b'} /*  */ -.octicon-diff-ignored:before { content: '\f099'} /*  */ -.octicon-diff-modified:before { content: '\f06d'} /*  */ -.octicon-diff-removed:before { content: '\f06c'} /*  */ -.octicon-diff-renamed:before { content: '\f06e'} /*  */ -.octicon-ellipsis:before { content: '\f09a'} /*  */ -.octicon-eye-unwatch:before, -.octicon-eye-watch:before, -.octicon-eye:before { content: '\f04e'} /*  */ -.octicon-file-binary:before { content: '\f094'} /*  */ -.octicon-file-code:before { content: '\f010'} /*  */ -.octicon-file-directory:before { content: '\f016'} /*  */ -.octicon-file-media:before { content: '\f012'} /*  */ -.octicon-file-pdf:before { content: '\f014'} /*  */ -.octicon-file-submodule:before { content: '\f017'} /*  */ -.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */ -.octicon-file-symlink-file:before { content: '\f0b0'} /*  */ -.octicon-file-text:before { content: '\f011'} /*  */ -.octicon-file-zip:before { content: '\f013'} /*  */ -.octicon-flame:before { content: '\f0d2'} /*  */ -.octicon-fold:before { content: '\f0cc'} /*  */ -.octicon-gear:before { content: '\f02f'} /*  */ -.octicon-gift:before { content: '\f042'} /*  */ -.octicon-gist:before { content: '\f00e'} /*  */ -.octicon-gist-secret:before { content: '\f08c'} /*  */ -.octicon-git-branch-create:before, -.octicon-git-branch-delete:before, -.octicon-git-branch:before { content: '\f020'} /*  */ -.octicon-git-commit:before { content: '\f01f'} /*  */ -.octicon-git-compare:before { content: '\f0ac'} /*  */ -.octicon-git-merge:before { content: '\f023'} /*  */ -.octicon-git-pull-request-abandoned:before, -.octicon-git-pull-request:before { content: '\f009'} /*  */ -.octicon-globe:before { content: '\f0b6'} /*  */ -.octicon-graph:before { content: '\f043'} /*  */ -.octicon-heart:before { content: '\2665'} /* ♥ */ -.octicon-history:before { content: '\f07e'} /*  */ -.octicon-home:before { content: '\f08d'} /*  */ -.octicon-horizontal-rule:before { content: '\f070'} /*  */ -.octicon-hubot:before { content: '\f09d'} /*  */ -.octicon-inbox:before { content: '\f0cf'} /*  */ -.octicon-info:before { content: '\f059'} /*  */ -.octicon-issue-closed:before { content: '\f028'} /*  */ -.octicon-issue-opened:before { content: '\f026'} /*  */ -.octicon-issue-reopened:before { content: '\f027'} /*  */ -.octicon-italic:before { content: '\f0e4'} /*  */ -.octicon-jersey:before { content: '\f019'} /*  */ -.octicon-key:before { content: '\f049'} /*  */ -.octicon-keyboard:before { content: '\f00d'} /*  */ -.octicon-law:before { content: '\f0d8'} /*  */ -.octicon-light-bulb:before { content: '\f000'} /*  */ -.octicon-link:before { content: '\f05c'} /*  */ -.octicon-link-external:before { content: '\f07f'} /*  */ -.octicon-list-ordered:before { content: '\f062'} /*  */ -.octicon-list-unordered:before { content: '\f061'} /*  */ -.octicon-location:before { content: '\f060'} /*  */ -.octicon-gist-private:before, -.octicon-mirror-private:before, -.octicon-git-fork-private:before, -.octicon-lock:before { content: '\f06a'} /*  */ -.octicon-logo-gist:before { content: '\f0ad'} /*  */ -.octicon-logo-github:before { content: '\f092'} /*  */ -.octicon-mail:before { content: '\f03b'} /*  */ -.octicon-mail-read:before { content: '\f03c'} /*  */ -.octicon-mail-reply:before { content: '\f051'} /*  */ -.octicon-mark-github:before { content: '\f00a'} /*  */ -.octicon-markdown:before { content: '\f0c9'} /*  */ -.octicon-megaphone:before { content: '\f077'} /*  */ -.octicon-mention:before { content: '\f0be'} /*  */ -.octicon-milestone:before { content: '\f075'} /*  */ -.octicon-mirror-public:before, -.octicon-mirror:before { content: '\f024'} /*  */ -.octicon-mortar-board:before { content: '\f0d7'} /*  */ -.octicon-mute:before { content: '\f080'} /*  */ -.octicon-no-newline:before { content: '\f09c'} /*  */ -.octicon-octoface:before { content: '\f008'} /*  */ -.octicon-organization:before { content: '\f037'} /*  */ -.octicon-package:before { content: '\f0c4'} /*  */ -.octicon-paintcan:before { content: '\f0d1'} /*  */ -.octicon-pencil:before { content: '\f058'} /*  */ -.octicon-person-add:before, -.octicon-person-follow:before, -.octicon-person:before { content: '\f018'} /*  */ -.octicon-pin:before { content: '\f041'} /*  */ -.octicon-plug:before { content: '\f0d4'} /*  */ -.octicon-repo-create:before, -.octicon-gist-new:before, -.octicon-file-directory-create:before, -.octicon-file-add:before, -.octicon-plus:before { content: '\f05d'} /*  */ -.octicon-primitive-dot:before { content: '\f052'} /*  */ -.octicon-primitive-square:before { content: '\f053'} /*  */ -.octicon-pulse:before { content: '\f085'} /*  */ -.octicon-question:before { content: '\f02c'} /*  */ -.octicon-quote:before { content: '\f063'} /*  */ -.octicon-radio-tower:before { content: '\f030'} /*  */ -.octicon-repo-delete:before, -.octicon-repo:before { content: '\f001'} /*  */ -.octicon-repo-clone:before { content: '\f04c'} /*  */ -.octicon-repo-force-push:before { content: '\f04a'} /*  */ -.octicon-gist-fork:before, -.octicon-repo-forked:before { content: '\f002'} /*  */ -.octicon-repo-pull:before { content: '\f006'} /*  */ -.octicon-repo-push:before { content: '\f005'} /*  */ -.octicon-rocket:before { content: '\f033'} /*  */ -.octicon-rss:before { content: '\f034'} /*  */ -.octicon-ruby:before { content: '\f047'} /*  */ -.octicon-search-save:before, -.octicon-search:before { content: '\f02e'} /*  */ -.octicon-server:before { content: '\f097'} /*  */ -.octicon-settings:before { content: '\f07c'} /*  */ -.octicon-shield:before { content: '\f0e1'} /*  */ -.octicon-log-in:before, -.octicon-sign-in:before { content: '\f036'} /*  */ -.octicon-log-out:before, -.octicon-sign-out:before { content: '\f032'} /*  */ -.octicon-squirrel:before { content: '\f0b2'} /*  */ -.octicon-star-add:before, -.octicon-star-delete:before, -.octicon-star:before { content: '\f02a'} /*  */ -.octicon-stop:before { content: '\f08f'} /*  */ -.octicon-repo-sync:before, -.octicon-sync:before { content: '\f087'} /*  */ -.octicon-tag-remove:before, -.octicon-tag-add:before, -.octicon-tag:before { content: '\f015'} /*  */ -.octicon-tasklist:before { content: '\f0e5'} /*  */ -.octicon-telescope:before { content: '\f088'} /*  */ -.octicon-terminal:before { content: '\f0c8'} /*  */ -.octicon-text-size:before { content: '\f0e3'} /*  */ -.octicon-three-bars:before { content: '\f05e'} /*  */ -.octicon-thumbsdown:before { content: '\f0db'} /*  */ -.octicon-thumbsup:before { content: '\f0da'} /*  */ -.octicon-tools:before { content: '\f031'} /*  */ -.octicon-trashcan:before { content: '\f0d0'} /*  */ -.octicon-triangle-down:before { content: '\f05b'} /*  */ -.octicon-triangle-left:before { content: '\f044'} /*  */ -.octicon-triangle-right:before { content: '\f05a'} /*  */ -.octicon-triangle-up:before { content: '\f0aa'} /*  */ -.octicon-unfold:before { content: '\f039'} /*  */ -.octicon-unmute:before { content: '\f0ba'} /*  */ -.octicon-versions:before { content: '\f064'} /*  */ -.octicon-watch:before { content: '\f0e0'} /*  */ -.octicon-remove-close:before, -.octicon-x:before { content: '\f081'} /*  */ -.octicon-zap:before { content: '\26A1'} /* ⚡ */ diff --git a/assets/octicons.ttf b/assets/octicons.ttf deleted file mode 100644 index 15a42d17..00000000 Binary files a/assets/octicons.ttf and /dev/null differ diff --git a/assets/octicons.woff b/assets/octicons.woff deleted file mode 100644 index 51e10f1c..00000000 Binary files a/assets/octicons.woff and /dev/null differ diff --git a/assets/octicons/dot-fill.svg b/assets/octicons/dot-fill.svg new file mode 100644 index 00000000..03223741 --- /dev/null +++ b/assets/octicons/dot-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/octicons/dot.svg b/assets/octicons/dot.svg new file mode 100644 index 00000000..b143351a --- /dev/null +++ b/assets/octicons/dot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/octicons/octicons.scss b/assets/octicons/octicons.scss new file mode 100644 index 00000000..85a91551 --- /dev/null +++ b/assets/octicons/octicons.scss @@ -0,0 +1,49 @@ +/* + * Just a small wrapper, picking the octicons used in Git-it. + * Most octicons are adapted a bit to fill the full svg-size. + * Octicons are provided by GitHub Inc. under MIT-License + * Ref. https://github.com/primer/octicons + */ + +.octicon { + -webkit-mask-size: cover; + display: inline-block; + /* Just some default size and color */ + width: 20px; + height: 20px; + background: black; + + &__trash { + @extend .octicon; + -webkit-mask-image: url('../../assets/octicons/trash.svg'); + } + + &__reply { + @extend .octicon; + -webkit-mask-image: url('../../assets/octicons/reply.svg'); + + &--right{ + @extend .octicon__reply; + transform: rotate(180deg); + } + &--left { + @extend .octicon__reply; + transform: rotate3d(1, 0, 0, 180deg); + } + } + + &__triangleRight { + @extend .octicon; + -webkit-mask-image: url('../../assets/octicons/triangle-right.svg') + } + + &__dot { + @extend .octicon; + -webkit-mask-image: url('../../assets/octicons/dot.svg') + } + + &__dotFill { + @extend .octicon; + -webkit-mask-image: url('../../assets/octicons/dot-fill.svg') + } +} diff --git a/assets/octicons/reply.svg b/assets/octicons/reply.svg new file mode 100644 index 00000000..df836f0d --- /dev/null +++ b/assets/octicons/reply.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/octicons/trash.svg b/assets/octicons/trash.svg new file mode 100644 index 00000000..2271366f --- /dev/null +++ b/assets/octicons/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/octicons/triangle-right.svg b/assets/octicons/triangle-right.svg new file mode 100644 index 00000000..979319c0 --- /dev/null +++ b/assets/octicons/triangle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/build/build-challenges.js b/lib/build/build-challenges.js index 2f9352fc..03abddee 100644 --- a/lib/build/build-challenges.js +++ b/lib/build/build-challenges.js @@ -51,13 +51,13 @@ console.log('Built challenges!') * Function to get Header */ function buildHeader (filename) { - const challengeTitle = makeTitleName(filename) + const pageTitle = makeTitleName(filename) const content = { - challengeTitle, + pageTitle, localeMenu: new Handlebars.SafeString(getLocaleMenu()) } - return partialTemplates.chalHeader(content) + return partialTemplates.header(content) } /* @@ -205,7 +205,7 @@ function getAllChallengesArray () { */ function getPartialTemplates () { return { - chalHeader: Handlebars.compile(fs.readFileSync(path.join(partialsFolder, 'chal-header.hbs')).toString().trim()), + header: Handlebars.compile(fs.readFileSync(path.join(partialsFolder, 'header.hbs')).toString().trim()), chalFooter: Handlebars.compile(fs.readFileSync(path.join(partialsFolder, 'chal-footer.hbs')).toString().trim()), chalSidebar: Handlebars.compile(fs.readFileSync(path.join(partialsFolder, 'chal-sidebar.hbs')).toString().trim()) } diff --git a/lib/build/build-css.js b/lib/build/build-css.js new file mode 100644 index 00000000..4b6f9743 --- /dev/null +++ b/lib/build/build-css.js @@ -0,0 +1,28 @@ +/* + * Runs in: Node - Build Application + * This file builds out the css using sass. + */ +const fs = require('fs') +const path = require('path') +const sass = require('sass') + +const basepath = path.normalize(path.join(__dirname, '../..')) +const inputRootFile = path.join(basepath, 'assets', 'css', '__style_root.scss') +const outputFolder = path.join(basepath, 'built', 'styles') +const outputFile = path.join(outputFolder, 'style.css') + +// If output-folder does not exist, create it +try { + fs.accessSync(outputFolder) +} catch (e) { + fs.mkdirSync(outputFolder, { recursive: true }) +} + +// Build css and write to file +const result = sass.renderSync({ + file: inputRootFile, + outputStyle: 'compressed', +}) +fs.writeFileSync(outputFile, result.css) + +console.log('Built styles!') diff --git a/lib/build/build-pages.js b/lib/build/build-pages.js index 2a8f798e..33aba98d 100644 --- a/lib/build/build-pages.js +++ b/lib/build/build-pages.js @@ -38,8 +38,13 @@ pageFiles.forEach(filename => { header: buildHeader(filename), body: fs.readFileSync(path.join(inputFolder, filename)).toString() } - builtContent = layoutTemplate(content) + //Insert Script on index-page + if (filename.match('index[.]hbs')) { + content.script = '' + } + + builtContent = layoutTemplate(content) fs.writeFileSync(path.join(outputFolder, filename.replace('\.hbs', '\.html')), builtContent) }) console.log('Built pages!') @@ -48,7 +53,7 @@ console.log('Built pages!') * Function to get Header */ function buildHeader (filename) { - const source = fs.readFileSync(path.join(partialsFolder, 'page-header.hbs')).toString() + const source = fs.readFileSync(path.join(partialsFolder, 'header.hbs')).toString() const template = Handlebars.compile(source) const content = { diff --git a/lib/challenge-sidebar-handler.js b/lib/challenge-sidebar-handler.js index 11750ecf..29fd415d 100644 --- a/lib/challenge-sidebar-handler.js +++ b/lib/challenge-sidebar-handler.js @@ -21,9 +21,9 @@ document.addEventListener('DOMContentLoaded', () => { */ function showChallengeComplete (challengeKey, isComplete) { if (isComplete) { - document.getElementById('sidebar-' + challengeKey).classList.add('completed') + document.getElementById('sidebar__list__item--' + challengeKey).classList.add('complete') } else { - document.getElementById('sidebar-' + challengeKey).classList.remove('completed') + document.getElementById('sidebar__list__item--' + challengeKey).classList.remove('complete') } } diff --git a/lib/challenge-verify-handler.js b/lib/challenge-verify-handler.js index 20d400ee..c961040f 100644 --- a/lib/challenge-verify-handler.js +++ b/lib/challenge-verify-handler.js @@ -138,9 +138,9 @@ function printOutVerifyList (list) { i18n.t(listItem.message, listItem.data) )) if (listItem.pass) { - li.classList.add('verify-pass') + li.classList.add('verify__list__elem--pass') } else { - li.classList.add('verify-fail') + li.classList.add('verify__list__elem--fail') } verifyList.appendChild(li) diff --git a/lib/i18n-translate.js b/lib/i18n-translate.js index b3eb0931..6c824e59 100644 --- a/lib/i18n-translate.js +++ b/lib/i18n-translate.js @@ -33,14 +33,14 @@ const defaultOptions = { document.addEventListener('DOMContentLoaded', () => { setDropdownLanguage() insertDataTranslations() - insertBoxTranslationStyles() // Box-Titles are done in CSS, so need specific handling + insertTranslationStyles() }) /* * Set Language change listener * When changeLanguage is done, the main process will reload the window therefore executing translation-insert from scratch. */ -const languageSelector = document.getElementById('lang-select') +const languageSelector = document.getElementById('header__lang__select') languageSelector.addEventListener('change', () => { i18n.changeLanguage(languageSelector.value) }) @@ -49,7 +49,7 @@ languageSelector.addEventListener('change', () => { * Select current Language in Dropdown-Element */ function setDropdownLanguage () { - const languageSelector = document.getElementById('lang-select') + const languageSelector = document.getElementById('header__lang__select') languageSelector.value = i18n.language } @@ -83,35 +83,34 @@ function insertDataTranslations () { } /* + * Adding/Removing rtl-class if necessary. * Box Titles are done with CSS ::before, so the styles need to be inserted dynamically. - * Here always removing old styles and adding new ones into the specific Stylesheet (see challenges.hbs). + * Here always removing old styles and adding new ones into the specific Stylesheet (see challenges.hbs). */ -function insertBoxTranslationStyles () { +function insertTranslationStyles () { const sheetTitle = 'jsTranslationStylesheet' const sheetIndex = [...document.styleSheets].findIndex(sheet => sheet.title === sheetTitle) + // Insert Style for right-to-left languages + if (appLanguages[i18n.language].direction === 'rtl') { + document.getElementById('wrapper__content').classList.add('rtl') + } else { + document.getElementById('wrapper__content').classList.remove('rtl') + } + // Abort if stylesheet not found if (sheetIndex < 0) { return } - // Delete old rules while (document.styleSheets[sheetIndex].rules.length > 0) { document.styleSheets[sheetIndex].deleteRule(0) } - - // Insert Style for right-to-left languages - if (appLanguages[i18n.language].direction === 'rtl') { - document.styleSheets[sheetIndex].insertRule('div.content {direction: rtl;}') - // Code-Elements should stay ltr - document.styleSheets[sheetIndex].insertRule('div.code {direction: ltr;}') - } - - // Append rules for challenge-boxes + // Append rules for box-titles if (document.styleSheets[sheetIndex].ownerNode.id === 'challenge-translation-style') { - document.styleSheets[sheetIndex].insertRule(".chal-goal.border-box::before {content: '" + i18n.t('Goal') + "';}") - document.styleSheets[sheetIndex].insertRule(".chal-no-pass.border-box::before {content: '" + i18n.t("Didn't Pass?") + "';}") - document.styleSheets[sheetIndex].insertRule(".chal-tip.border-box::before {content: '" + i18n.t('Tip') + "';}") - document.styleSheets[sheetIndex].insertRule(".chal-step.border-box::before {content: '" + i18n.t('Step') + "';}") + document.styleSheets[sheetIndex].insertRule(".box--goal::before {content: '" + i18n.t('Goal') + "';}") + document.styleSheets[sheetIndex].insertRule(".box--fail::before {content: '" + i18n.t("Didn't Pass?") + "';}") + document.styleSheets[sheetIndex].insertRule(".box--tip::before {content: '" + i18n.t('Tip') + "';}") + document.styleSheets[sheetIndex].insertRule(".box--step::before {content: '" + i18n.t('Step') + "';}") } } diff --git a/lib/index-challenge-handler.js b/lib/index-challenge-handler.js index d339da29..88bef8ff 100644 --- a/lib/index-challenge-handler.js +++ b/lib/index-challenge-handler.js @@ -9,13 +9,13 @@ const path = require('path') const ipc = require('electron').ipcRenderer const userData = require(path.normalize(path.join(__dirname, '../../lib/user-data.js'))) -const clearAllButtons = document.querySelectorAll('.js-clear-all-challenges') -const pickupButton = document.getElementById('pickup-button') -const progressCircles = document.querySelectorAll('.progress-circle') +const clearAllButtons = document.querySelectorAll('.js__clearAllChallenges') +const pickupButton = document.getElementById('pgIndex__pickupButton') +const progressCircles = document.querySelectorAll('.pgIndex__progress__dot') -const IndexSectionStart = document.getElementById('index-section-start') -const IndexSectionWip = document.getElementById('index-section-wip') -const IndexSectionFinished = document.getElementById('index-section-finished') +const IndexSectionStart = document.getElementById('pgIndex__section--start') +const IndexSectionWip = document.getElementById('pgIndex__section--wip') +const IndexSectionFinished = document.getElementById('pgIndex__section--finished') // Execute after DOM loaded. document.addEventListener('DOMContentLoaded', () => { @@ -23,28 +23,28 @@ document.addEventListener('DOMContentLoaded', () => { const challengeUserData = userData.getChallengeData() const challengeUserDataKeys = Object.keys(challengeUserData) - // Go through the challenges in challengeUserData to see which are completed - let countCompleted = 0 + // Go through the challenges in challengeUserData to see which are complete + let countComplete = 0 challengeUserDataKeys.forEach((challengeKey, index) => { if (challengeUserData[challengeKey].challengeComplete) { - countCompleted++ - progressCircles[index].classList.add('completed') // Mark corresponding circle as completed + countComplete++ + progressCircles[index].classList.add('complete') // Mark corresponding circle as complete if (index < challengeUserDataKeys.length - 1) { - pickupButton.href = path.join(__dirname, '..', 'challenges', challengeUserDataKeys[index + 1] + '.html') // Set Link on pickup-button to next challenge + pickupButton.href = path.join(__dirname, '..', 'challenges', challengeUserDataKeys[index + 1] + '.html') // Set Link on pickupButton to next challenge } } }) // If no challenges are complete, show the start-section - if (countCompleted === 0) { + if (countComplete === 0) { showSection('start') } // If only some challenges are complete, show the wip-section - if (countCompleted !== 0 && countCompleted !== challengeUserDataKeys.length) { + if (countComplete !== 0 && countComplete !== challengeUserDataKeys.length) { showSection('wip') } // If all challenges are complete, show the finished-section - if (countCompleted === challengeUserDataKeys.length) { + if (countComplete === challengeUserDataKeys.length) { showSection('finished') } @@ -66,7 +66,7 @@ ipc.on('confirm-clearAll', () => { // Clear all ProgressCircles in TopBar progressCircles.forEach(progressCircle => { - progressCircle.classList.remove('completed') + progressCircle.classList.remove('complete') }) // Show Start-Index Page diff --git a/package-lock.json b/package-lock.json index c651a88a..b758098f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -235,6 +235,24 @@ "color-convert": "^1.9.0" } }, + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "dependencies": { + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + } + } + }, "append-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz", @@ -406,6 +424,12 @@ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", "dev": true }, + "binary-extensions": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", + "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", + "dev": true + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -435,6 +459,15 @@ "concat-map": "0.0.1" } }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, "broccoli-plugin": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/broccoli-plugin/-/broccoli-plugin-1.3.1.tgz", @@ -611,6 +644,30 @@ "parse5": "^3.0.1" } }, + "chokidar": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", + "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", + "dev": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.1.2", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.5.0" + }, + "dependencies": { + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + } + } + }, "chromium-pickle-js": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz", @@ -1625,6 +1682,15 @@ "trim-repeated": "^1.0.0" } }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", @@ -1794,6 +1860,13 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true }, + "fsevents": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", + "dev": true, + "optional": true + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -2310,6 +2383,15 @@ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "dev": true }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -2370,6 +2452,12 @@ "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=", "dev": true }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, "is-regex": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz", @@ -3070,6 +3158,12 @@ "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", "dev": true }, + "picomatch": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", + "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", + "dev": true + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -3356,6 +3450,15 @@ "util-deprecate": "^1.0.1" } }, + "readdirp": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", + "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", @@ -3504,6 +3607,15 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "sass": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.29.0.tgz", + "integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "semver": { "version": "7.3.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", @@ -3940,6 +4052,15 @@ "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==", "dev": true }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + }, "to-through": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz", diff --git a/package.json b/package.json index 39bd02d1..817454f9 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "lint": "standard lib/*.js lib/verify/*.js menus/*.js main.js", "lint:fix": "standard --fix lib/*.js lib/verify/*.js menus/*.js main.js", "i18n:extract": "i18next -c ./config/i18next-parser.config.js", - "build": "rimraf built/* && node lib/build/build-challenges.js && node lib/build/build-pages.js", + "build": "rimraf built/* && node lib/build/build-challenges.js && node lib/build/build-pages.js && node lib/build/build-css.js", "pack": "npm run build && npm run pack-mac && npm run pack-lin && npm run pack-win", "pack-mac": "electron-packager . Git-it --platform=darwin --arch=x64 --icon=assets/git-it.icns --overwrite --out=out --extraResource=resources/i18n/ --ignore=.github/ --ignore=resources/", "pack-lin": "electron-packager . Git-it --platform=linux --arch=x64 --icon=assets/git-it.png --overwrite --out=out --extraResource=resources/i18n/ --ignore=.github/ --ignore=resources/", @@ -48,6 +48,7 @@ "handlebars": "^4.7.6", "i18next-parser": "^3.5.0", "rimraf": "^3.0.2", + "sass": "^1.29.0", "standard": "^16.0.3" }, "dependencies": { diff --git a/resources/content/challenges/10_requesting_you_pull_please.hbs b/resources/content/challenges/10_requesting_you_pull_please.hbs index 9d60517c..ec650cf0 100644 --- a/resources/content/challenges/10_requesting_you_pull_please.hbs +++ b/resources/content/challenges/10_requesting_you_pull_please.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -17,7 +17,7 @@ alt="An illustration showing two options. The latter option contains more of the alphabet than the first and is asking the first to accept its work so that the alapabet is complete.">
-
+

+

-
+

-
+

@@ -25,7 +25,7 @@
git push <REMOTENAME> --delete <BRANCHNAME>
-
+

@@ -33,7 +33,7 @@
git pull upstream gh-pages
-
+

@@ -47,17 +47,27 @@ {{{ verify_directory_button }}} -
+
    -
    • -
    git merge <BRANCHNAME>
    -
    • -
    git checkout <BRANCHNAME>
    -
    • -
    git branch -d <BRANCHNAME>
    -
    • -
    git push <REMOTENAME> --delete <BRANCHNAME>
    -
    • -
    git pull <REMOTENAME> <BRANCHNAME>
    +
  • + +
    git merge <BRANCHNAME>
    +
    • +
  • + +
    git checkout <BRANCHNAME>
    +
    • +
  • + +
    git branch -d <BRANCHNAME>
    +
    • +
  • + +
    git push <REMOTENAME> --delete <BRANCHNAME>
    +
    • +
  • + +
    git pull <REMOTENAME> <BRANCHNAME>
    +
diff --git a/resources/content/challenges/1_get_git.hbs b/resources/content/challenges/1_get_git.hbs index fa2f87c4..4c796b8e 100644 --- a/resources/content/challenges/1_get_git.hbs +++ b/resources/content/challenges/1_get_git.hbs @@ -1,8 +1,8 @@ -
+

-
+

-
+

-
+

-
+

@@ -65,7 +65,7 @@ {{{ verify_button }}} -
+

diff --git a/resources/content/challenges/2_repository.hbs b/resources/content/challenges/2_repository.hbs index 811fcdc4..80985e63 100644 --- a/resources/content/challenges/2_repository.hbs +++ b/resources/content/challenges/2_repository.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -27,7 +27,7 @@

-
+

@@ -54,15 +54,23 @@ {{{ verify_directory_button }}} -
+
    -
    • -
    mkdir <FOLDERNAME>
    -
    • -
    cd <FOLDERNAME>
    -
    • -
    ls
    -
    • -
    git init
    +
  • + +
    mkdir <FOLDERNAME>
    +
    • +
  • + +
    cd <FOLDERNAME>
    +
    • +
  • + +
    ls
    +
    • +
  • + +
    git init
    +
diff --git a/resources/content/challenges/3_commit_to_it.hbs b/resources/content/challenges/3_commit_to_it.hbs index 86497cf8..f5a6b142 100644 --- a/resources/content/challenges/3_commit_to_it.hbs +++ b/resources/content/challenges/3_commit_to_it.hbs @@ -1,19 +1,19 @@ -
+

-
+

-
+

-
+

@@ -33,7 +33,7 @@
git commit -m "Created readme"
-
+

@@ -49,17 +49,27 @@ {{{ verify_directory_button }}} -
+
    -
    • -
    git status
    -
    • -
    git diff
    -
    • -
    git add <FILENAME>
    -
    • -
    git add .
    -
    • -
    git commit -m "your commit message"
    -
      +
    • + +
      git status
      +
      • +
    • + +
      git diff
      +
      • +
    • + +
      git add <FILENAME>
      +
      • +
    • + +
      git add .
      +
      • +
    • + +
      git commit -m "your commit message"
      +
      • +
diff --git a/resources/content/challenges/4_githubbin.hbs b/resources/content/challenges/4_githubbin.hbs index fb2bc870..d3199568 100644 --- a/resources/content/challenges/4_githubbin.hbs +++ b/resources/content/challenges/4_githubbin.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -10,7 +10,7 @@

-
+

-
+

@@ -29,17 +29,17 @@
git config --global user.username <UserName>

-
git config --global user.username
+
git config --global user.username
{{{ verify_button }}} -
+

-
+

diff --git a/resources/content/challenges/5_remote_control.hbs b/resources/content/challenges/5_remote_control.hbs index d46c68c0..f4a5f16b 100644 --- a/resources/content/challenges/5_remote_control.hbs +++ b/resources/content/challenges/5_remote_control.hbs @@ -1,8 +1,8 @@ -
+

-
+

-
+

@@ -35,7 +35,7 @@
-
+

-
+

@@ -61,17 +61,17 @@

+
-
-

-

+
+

+

-
git remote set-url origin <URLFROMGITHUB>
-
+
git remote set-url origin <URLFROMGITHUB>
-
+

@@ -88,17 +88,27 @@ {{{ verify_directory_button }}} -
+
    -
    • -
    git remote add <REMOTENAME> <URL>
    -
    • -
    git remote set-url <REMOTENAME> <URL>
    -
    • -
    git pull <REMOTENAME> <BRANCHNAME>
    -
    • -
    git remote -v
    -
    • -
    git push <REMOTENAME> <BRANCH>
    +
  • + +
    git remote add <REMOTENAME> <URL>
    +
    • +
  • + +
    git remote set-url <REMOTENAME> <URL>
    +
    • +
  • + +
    git pull <REMOTENAME> <BRANCHNAME>
    +
    • +
  • + +
    git remote -v
    +
    • +
  • + +
    git push <REMOTENAME> <BRANCH>
    +
diff --git a/resources/content/challenges/6_forks_and_clones.hbs b/resources/content/challenges/6_forks_and_clones.hbs index 6531e91e..5b16078b 100644 --- a/resources/content/challenges/6_forks_and_clones.hbs +++ b/resources/content/challenges/6_forks_and_clones.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -17,7 +17,7 @@ width="100%">
-
+

-
+

@@ -48,7 +48,7 @@ i18n-data="ch06~Now you've got a copy of the repository on your computer and it is automatically connected to the remote repository (your forked copy) on your GitHub account. Type {/cde/}git remote -v{/cde_e/} to see that the address to the fork is already set up.">

-
+

+

    -
    • -
    git remote add <REMOTENAME> <URL>
    -
    • -
    git remote set-url <REMOTENAME> <URL>
    -
    • -
    git remote -v
    +
  • + +
    git remote add <REMOTENAME> <URL>
    +
    • +
  • + +
    git remote set-url <REMOTENAME> <URL>
    +
    • +
  • + +
    git remote -v
    +
diff --git a/resources/content/challenges/7_branches_arent_just_for_birds.hbs b/resources/content/challenges/7_branches_arent_just_for_birds.hbs index 0aa89354..a2423449 100644 --- a/resources/content/challenges/7_branches_arent_just_for_birds.hbs +++ b/resources/content/challenges/7_branches_arent_just_for_birds.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -25,11 +25,10 @@ i18n-options='{ "lnk_pages": "http://pages.github.com" }'>

-
http://githubusername.github.io/repositoryname
-
+

@@ -53,7 +52,7 @@
git checkout <BRANCHNAME>
-
+

    @@ -72,7 +71,7 @@
-
+

@@ -87,7 +86,7 @@ {{{ verify_directory_button }}} -
+

@@ -115,19 +114,31 @@

-
+
    -
    • -
    git checkout -b <BRANCHNAME>
    -
    • -
    git branch <BRANCHNAME>
    -
    • -
    git checkout <BRANCHNAME>
    -
    • -
    git branch
    -
    • -
    git branch -m <NEWBRANCHNAME>
    -
    • -
    git status
    +
  • + +
    git checkout -b <BRANCHNAME>
    +
    • +
  • + +
    git branch <BRANCHNAME>
    +
    • +
  • + +
    git checkout <BRANCHNAME>
    +
    • +
  • + +
    git branch
    +
    • +
  • + +
    git branch -m <NEWBRANCHNAME>
    +
    • +
  • + +
    git status
    +
diff --git a/resources/content/challenges/8_its_a_small_world.hbs b/resources/content/challenges/8_its_a_small_world.hbs index 72c5e04f..75897f52 100644 --- a/resources/content/challenges/8_its_a_small_world.hbs +++ b/resources/content/challenges/8_its_a_small_world.hbs @@ -1,8 +1,8 @@ -
+

-
+

@@ -18,7 +18,7 @@ }'>
-
+

diff --git a/resources/content/challenges/9_pull_never_out_of_date.hbs b/resources/content/challenges/9_pull_never_out_of_date.hbs index 1c52affc..71f7ba52 100644 --- a/resources/content/challenges/9_pull_never_out_of_date.hbs +++ b/resources/content/challenges/9_pull_never_out_of_date.hbs @@ -1,9 +1,9 @@ -
+

-
-

+
+

@@ -11,7 +11,7 @@ alt="A diagram shows a computer pulling information down from a repository's website" width="100%">
-
+

@@ -24,13 +24,19 @@ {{{ verify_directory_button }}} -
+
    -
    • -
    git status
    -
    • -
    git pull <REMOTENAME> <REMOTEBRANCH>
    -
    • -
    git fetch --dry-run
    +
  • + +
    git status
    +
    • +
  • + +
    git pull <REMOTENAME> <REMOTEBRANCH>
    +
    • +
  • + +
    git fetch --dry-run
    +
diff --git a/resources/content/pages/about.hbs b/resources/content/pages/about.hbs index c95af742..1f04b1fa 100644 --- a/resources/content/pages/about.hbs +++ b/resources/content/pages/about.hbs @@ -1,20 +1,18 @@ -
-

-

+

+

-

+

-

+

-

+

-

+

-

-
+

diff --git a/resources/content/pages/dictionary.hbs b/resources/content/pages/dictionary.hbs index a4ee0e7e..d32fe949 100644 --- a/resources/content/pages/dictionary.hbs +++ b/resources/content/pages/dictionary.hbs @@ -1,110 +1,165 @@ -
-

+

-

-
-
    -
    • +

    +
    +
      +
    • +
      mkdir <FOLDERNAME>
      -
      • + +
    • +
      cd <FOLDERNAME>
      -
      • + +
    • +
      ls
      -
    -
    + +
+
-

-
-
    -
    • -
    git --version
    -
    • -
    git config --global user.name "Your Name"
    -
    • -
    git config --global user.email youremail@example.com
    -
    • -
    git config --global user.username uSeRnAmE
    -
-
+

+
+
    +
  • + +
    git --version
    +
    • +
  • + +
    git config --global user.name "Your Name"
    +
    • +
  • + +
    git config --global user.email youremail@example.com
    +
    • +
  • + +
    git config --global user.username uSeRnAmE
    +
    • +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git init
      -
      • + +
    • +
      git status
      -
      • + +
    • +
      git diff
      -
      • + +
    • +
      git add <FILENAME>
      -
      • + +
    • +
      git add .
      -
    • -
      • + +
    • +
      git commit -m "your commit message"
      -
      • + +
    • +
      git clone <URL>
      -
    -
    + +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git branch <BRANCHNAME>
      -
      • + +
    • +
      git checkout <BRANCHNAME>
      -
      • + +
    • +
      git checkout -b <BRANCHNAME>
      -
      • + +
    • +
      git branch
      -
      • + +
    • +
      git branch -m <NEWBRANCHNAME>
      -
    -
    + +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git remote add <REMOTENAME> <URL>
      -
      • + +
    • +
      git remote set-url <REMOTENAME> <URL>
      -
      • + +
    • +
      git remote -v
      -
    -
    + +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git pull
      -
      • + +
    • +
      git pull <REMOTENAME> <REMOTEBRANCH>
      -
      • + +
    • +
      git fetch --dry-run
      -
    -
    + +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git push <REMOTENAME> <BRANCHNAME>
      -
      • + +
    • +
      git merge <BRANCHNAME>
      -
    -
    + +
+
-

-
-
    -
    • +

    +
    +
      +
    • +
      git branch -D <BRANCHNAME>
      -
      • + +
    • +
      git push <REMOTENAME> --delete <BRANCHNAME>
      -
    -
    + +
diff --git a/resources/content/pages/index.hbs b/resources/content/pages/index.hbs index b43356f7..b8e55e00 100644 --- a/resources/content/pages/index.hbs +++ b/resources/content/pages/index.hbs @@ -1,27 +1,27 @@ -
-
- - -
-
-
-
-
-
-
-
-
-
-
- - +
+
+ +
+ + + + + + + + + + + +
+
-
+

-
+

@@ -35,27 +35,25 @@ }'>

- - + +
-
+

-

- - - +

+ + +
-
+

-

- - - - +

+ + + +
- - diff --git a/resources/content/pages/resources.hbs b/resources/content/pages/resources.hbs index 4377ba5e..ccbe14a6 100644 --- a/resources/content/pages/resources.hbs +++ b/resources/content/pages/resources.hbs @@ -1,99 +1,97 @@ -
-

-

-

+

+

+

-
-

-
    -
  • -
+
+

+
    +
  • +
-

-
    -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
+

+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
-

-

-

-
    -
  • -
  • -
-

+

+

+
    +
  • +

  • -
+ "lnk_guides": "https://help.github.com/desktop/" + }'> + +

+
-

-
-

-
    -
  • -
  • -
  • -
  • -
-
+

+
+

+
    +
  • +
  • +
  • +
  • +
diff --git a/resources/content/partials/chal-footer.hbs b/resources/content/partials/chal-footer.hbs index fe4af5e9..cf92dcee 100644 --- a/resources/content/partials/chal-footer.hbs +++ b/resources/content/partials/chal-footer.hbs @@ -1,12 +1,12 @@ -
-
- {{ previousName }} -
+
+
+ {{ previousName }} +
-
- {{ nextName }} -
+
+ {{ nextName }} +
diff --git a/resources/content/partials/chal-header.hbs b/resources/content/partials/chal-header.hbs deleted file mode 100644 index 7c8dcd41..00000000 --- a/resources/content/partials/chal-header.hbs +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/resources/content/partials/chal-sidebar.hbs b/resources/content/partials/chal-sidebar.hbs index 32b71e40..3ba26ff0 100644 --- a/resources/content/partials/chal-sidebar.hbs +++ b/resources/content/partials/chal-sidebar.hbs @@ -1,12 +1,15 @@ -