diff --git a/app/server/public/images/svg-icons/approved-script-checked.svg b/app/server/public/images/svg-icons/approved-script-checked.svg new file mode 100644 index 0000000..17808be --- /dev/null +++ b/app/server/public/images/svg-icons/approved-script-checked.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/change.svg b/app/server/public/images/svg-icons/change.svg new file mode 100644 index 0000000..6f3bdc9 --- /dev/null +++ b/app/server/public/images/svg-icons/change.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/server/public/images/svg-icons/checkmark-completed.svg b/app/server/public/images/svg-icons/checkmark-completed.svg new file mode 100644 index 0000000..ec5fb2d --- /dev/null +++ b/app/server/public/images/svg-icons/checkmark-completed.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/chevron-outline.svg b/app/server/public/images/svg-icons/chevron-outline.svg new file mode 100644 index 0000000..2bfca56 --- /dev/null +++ b/app/server/public/images/svg-icons/chevron-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/clock.svg b/app/server/public/images/svg-icons/clock.svg new file mode 100644 index 0000000..cfe14c9 --- /dev/null +++ b/app/server/public/images/svg-icons/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/colour-split-circle.svg b/app/server/public/images/svg-icons/colour-split-circle.svg new file mode 100644 index 0000000..e7cb809 --- /dev/null +++ b/app/server/public/images/svg-icons/colour-split-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/server/public/images/svg-icons/layers.svg b/app/server/public/images/svg-icons/layers.svg new file mode 100644 index 0000000..86f8b40 --- /dev/null +++ b/app/server/public/images/svg-icons/layers.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/line-graph.svg b/app/server/public/images/svg-icons/line-graph.svg new file mode 100644 index 0000000..e95caa6 --- /dev/null +++ b/app/server/public/images/svg-icons/line-graph.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/server/public/images/svg-icons/logotype-orange.svg b/app/server/public/images/svg-icons/logotype-orange.svg new file mode 100644 index 0000000..d7edeaf --- /dev/null +++ b/app/server/public/images/svg-icons/logotype-orange.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/app/server/public/images/svg-icons/symbol-orange.svg b/app/server/public/images/svg-icons/symbol-orange.svg new file mode 100644 index 0000000..3daa05e --- /dev/null +++ b/app/server/public/images/svg-icons/symbol-orange.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/server/robles_content_module_server.rb b/app/server/robles_content_module_server.rb index 60459e3..8a4f103 100644 --- a/app/server/robles_content_module_server.rb +++ b/app/server/robles_content_module_server.rb @@ -28,6 +28,16 @@ def text_path(lesson, segment) "/texts/#{lesson.slug}/#{segment.slug}" end + def segment_path(lesson, segment) + if segment.is_a?(Video) + transcript_path(lesson, segment) + elsif segment.is_a?(Assessment) + assessment_path(lesson, segment) + elsif segment.is_a?(Text) + text_path(lesson, segment) + end + end + def class_for_domain(course) if course.domains.count > 1 'multi-domain' diff --git a/app/server/views/content_modules/_header.html.erb b/app/server/views/content_modules/_header.html.erb new file mode 100644 index 0000000..b0cdb3f --- /dev/null +++ b/app/server/views/content_modules/_header.html.erb @@ -0,0 +1,18 @@ + diff --git a/app/server/views/content_modules/_index_table_of_contents.html.erb b/app/server/views/content_modules/_index_table_of_contents.html.erb index e8bf9d3..6a514a1 100644 --- a/app/server/views/content_modules/_index_table_of_contents.html.erb +++ b/app/server/views/content_modules/_index_table_of_contents.html.erb @@ -1,31 +1,35 @@ -
+
<% content_module.lessons.each do |lesson| %>

Lesson <%= lesson.ordinal %>: <%= lesson.title %>

-
+

<%= lesson.description %>

- - <% lesson.segments.each do |segment| %> -
-
- <% if segment.is_a?(Video) %> -

<%= segment.title %>

- <% if segment.free %>Free<% end %> - slide - <% elsif segment.is_a?(Assessment) %> -

<%= segment.title %>

- <% elsif segment.is_a?(Text) %> -

<%= segment.title %>

- <% end %> +
+ <% lesson.segments.each do |segment| %> +
+
+ <%= segment.ref %> +
+
+
+ <% if segment.is_a?(Video) %> + <%= segment.title %> + slide + <% elsif segment.is_a?(Assessment) %> + <%= segment.title %> + <% elsif segment.is_a?(Text) %> + <%= segment.title %> + <% end %> +
+
+ <%= segment.description %> +
+
-

<%= segment.description %>

- - <%= segment.ref %> - -
- <% end %> + <% end %> +
<% end %>
diff --git a/app/server/views/content_modules/_table_of_contents.html.erb b/app/server/views/content_modules/_table_of_contents.html.erb index a9d59ae..b6f457e 100644 --- a/app/server/views/content_modules/_table_of_contents.html.erb +++ b/app/server/views/content_modules/_table_of_contents.html.erb @@ -1,41 +1,33 @@ -
-
-
-
-
+ diff --git a/app/server/views/content_modules/assessment.html.erb b/app/server/views/content_modules/assessment.html.erb index 2afdcd0..17d0a01 100644 --- a/app/server/views/content_modules/assessment.html.erb +++ b/app/server/views/content_modules/assessment.html.erb @@ -1,75 +1,35 @@ - - -
- <%= erb :'content_modules/_table_of_contents.html', locals: { content_module: content_module, current_segment: segment } %> - -
-
-
-
- - <%= content_module.title %> - - - - <%= segment.title %> - - -

- <%= segment.ref %> -
- <%= segment.title %> - - It's a quiz! - -
-

-
-
- -
- <% segment.questions.each do |question| %> +
+

<%= segment.ref%>.<%= segment.title %>

+ <% segment.questions.each do |question| %> +
+

<%= question.question %>

-

<%= question.question %>

-
    +
      <% question.choices.each do |choice| %> -
    • - <%= choice.ref %> - <%= choice.option %> - <% if choice.correct %>correct<% end %> +
    • + <%= choice.ref %> + <%= choice.option %> + <% if choice.correct %> + Correct answer: <%= question.explanation %> + <% end %>
      • <% end %>
    - <%= question.explanation %>
- <% end %> -
+
+ Learning Objective: <%= question.learning_objective %> +
+
+ <% end %> +
-
diff --git a/app/server/views/content_modules/index.html.erb b/app/server/views/content_modules/index.html.erb index c9f7365..09ef0f0 100644 --- a/app/server/views/content_modules/index.html.erb +++ b/app/server/views/content_modules/index.html.erb @@ -1,78 +1,82 @@ -
- -
- -
-
- -
-
- Version - <%= content_module.version_description %> -
-
- Platform - <%= content_module.platform %> +
+
+
+
+

<%= content_module.title %>

+
+
+
+ Platform: + <%= content_module.platform %> +
+
+ Language: + <%= content_module.language %> +
+
+ Editor: + <%= content_module.editor %> +
-
- Language - <%= content_module.language %> +

+ <%= content_module.description %> +

+

+ By* <%= content_module.authors.map(&:username).to_sentence(two_words_connector: ' & ', last_word_connector: ' and ') %> +

+
+
+
+ +
+
EXPERIENCE
+
<%= content_module.difficulty&.titlecase %> level
+
-
- Editor - <%= content_module.editor %> +
+ +
+
VERSION
+
<%= content_module.version_description %>
+
-
-
-
- +
+ +
+
CONTENT
+
<%= content_module.lessons.size %> <%= 'lesson'.pluralize(content_module.lessons.size) %>
+
- -
- <%= content_module.description %> +
+
- - <%= erb :'content_modules/_index_table_of_contents.html', locals: { content_module: content_module } %> - -
-
-

Who is this course for

-
- <%= content_module.who_is_this_for %> -
+
+
+
+
+
+
+

Module outcomes

-
-

Concepts covered in this course

-
- <%= content_module.covered_concepts %> -
+
+ <%= content_module.outcomes %>
-
- -
-
- -
- - <% if content_module.professional %> -
- Pro -
- <% end %> +
+
+

Covered concepts

+
+
+ <%= content_module.covered_concepts %>
+
+
-

<%= content_module.title %>

-

- By* <%= content_module.authors.map(&:username).to_sentence(two_words_connector: ' & ', last_word_connector: ' and ') %> -

-

- <%= content_module.short_description %> -

-
+
+ <%= erb :'content_modules/_index_table_of_contents.html', locals: { content_module: content_module } %>
diff --git a/app/server/views/content_modules/segment_transcript.html.erb b/app/server/views/content_modules/segment_transcript.html.erb index e5e29a8..88b02f2 100644 --- a/app/server/views/content_modules/segment_transcript.html.erb +++ b/app/server/views/content_modules/segment_transcript.html.erb @@ -1,67 +1,16 @@ - - -
- <%= erb :'content_modules/_table_of_contents.html', locals: { content_module: content_module, current_segment: segment } %> - -
-
-
-
- - <%= content_module.title %> - - - - <%= segment.title %> - - - - -

- <%= segment.ref %> -
- <%= segment.title %> - <% if segment.respond_to?(:authors) %> - - <% if segment.authors.filter { |author| author.role == 'author' }.present? %> - Written by <%= segment.authors.filter { |author| author.role == 'author' }.map(&:username).to_sentence %> - <% end %> - - <% end %> -
-

-
-
- -
+
+

<%= segment.ref%>.<%= segment.title %>

+
<%= segment.transcript if segment.respond_to?(:transcript) %>
- -
+
+ diff --git a/app/server/views/content_modules/text.html.erb b/app/server/views/content_modules/text.html.erb index 96dc17b..434f1f3 100644 --- a/app/server/views/content_modules/text.html.erb +++ b/app/server/views/content_modules/text.html.erb @@ -3,83 +3,19 @@ <%= "This chapter exceeds the word limit." if word_counter.exceeds_word_limit? %>
+<%= erb :'content_modules/_header.html', locals: { content_module: content_module} %> - - -
- -
-
-
-
- - <%= content_module.title %> - - - - <%= segment.title %> - - - - -

-
- <%= segment.title %> - - <% if segment.authors.filter { |author| author.role == 'author' }.present? %> - Written by <%= segment.authors.filter { |author| author.role == 'author' }.map(&:username).to_sentence %> - <% end %> - -
-

-
-
- -
+
+

<%= segment.ref%>.<%= segment.title %>

+
<%= segment.body %>
- -
+
diff --git a/app/server/views/shared/_svg_icons.html.erb b/app/server/views/shared/_svg_icons.html.erb index 624cd6e..db536c9 100644 --- a/app/server/views/shared/_svg_icons.html.erb +++ b/app/server/views/shared/_svg_icons.html.erb @@ -24,4 +24,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/server/views/styles/abstracts/colors.scss b/app/server/views/styles/abstracts/colors.scss new file mode 100644 index 0000000..051d358 --- /dev/null +++ b/app/server/views/styles/abstracts/colors.scss @@ -0,0 +1,127 @@ +/** + * This file contains all colour definitions. + * + * 1. Colours + * 2. Highlighter Colours + * + */ + +/* ========================================================================== + 1. Colours +========================================================================== */ + +/* Black */ + +$black-night: #14161E; +$black-night-hover: #43454B; + +// Dark mode +$black-phantom: #0E0F14; +$black-jaguar: #07080A; /* Dark mode input */ +$black-iridium: #3B3D43; /* Dark mode hover */ +$black-plaza: #30363D; /* Dark mode borders */ + +/* Grey */ + +$grey-thought: #D7D7D7; /* Main Brand Grey */ +$grey-thought-20: #D7D7D733; /*Main Brand Grey at 20% opacity */ +$grey-thought-50: #D7D7D77F; /*Main Brand Grey at 50% opacity */ +$grey-wisp: #F7F7F7; /* Brand Light Grey */ +$grey-london: #AC9FAB; /* Light Multi-platform Colour */ +$grey-taupe: #5F4F5E; /* Dark Multi-platform Colour */ + +/* Red */ + +$red-lychee: #E34A4C; +$red-lipstick: #962224; + +/* Pink */ + +$pink-doll: #F26FAA; /* Light Server-Side Swift Colour */ +$pink-peony: #A53B6B; /* Dark Server-Side Swift Colour */ +$pink-peach: #E6978A; +$pink-incense: #99584D; + +/* Orange */ + +$orange-glow: #FF5A00; /* Main Brand Colour */ +$orange-enthusiasm: #FF8847; /* Brand Light Orange */ +$orange-enthusiasm-20: #FF884733; /* Brand Light Orange with 20% opacity */ +$orange-determination: #CE3F00; /* Brand Dark Orange */ +$orange-raw-sienna: #CF7F42; +$orange-burnt: #82491D; + +/* Yellow */ + +$yellow-autumn: #E3A93D; /* Light Pro-Gro Colour */ +$yellow-curry: #966B19; /* Dark Pro-Gro Colour */ + +/* Green */ + +$green-meadow: #00B87E; /* Light Android Colour */ +$green-meadow-50: #00B87E80; /* Light Android 50% opacity */ +$green-meadow-dark: #0F553E; /* Light Android colour equivalent for 50% opacity on dark background */ +$green-rainforest: #157857; /* Dark Android Colour */ +$green-celery: #AEB740; +$green-cypress: #575C20; +$green-olive: #778749; +$green-kelp: #3C4425; + +/* Blue */ + +$blue-sky : #2EA4DD; /* Light Flutter Colour */ +$blue-sky-50 : #2EA4DD80;/* Light Flutter 50% opacity */ +$blue-sky-dark : #1B4A6B;/* Light Flutter colour equivalent for 50% opacity on dark background */ +$blue-sea: #106790; /* Dark Flutter Colour */ +$blue-cornflower : #597CEE; +$blue-denim : #2C48A1; + +/* Purple */ + +$purple-iolite: #8763D2; /* Light iOS Colour */ +$purple-iolite-50: #8763D280;/* Light iOS 50% opacity */ +$purple-iolite-dark: #3C2C64; /* Light iOS colour equivalent for 50% opacity on dark background */ +$purple-amethyst: #4D3285; /* Dark iOS Colour */ +$purple-almost-fuchsia: #B44EBF; /* Light Game Tech Colour */ +$purple-regal: #6B2372; /* Dark Game Tech Colour */ + +/* White */ + +$white: #FFFFFF; + +/* Transparent */ + +$transparent: transparent; + +/* ========================================================================== + 2. Highlighter Colours +========================================================================== */ + +$hljs-bright-grey: #999999; +$hljs-bright-red: #F64E1A; +$hljs-bright-orange: #F08D49; +$hljs-bright-yellow: #F8C555; +$hljs-bright-green: #7EC699; +$hljs-bright-aqua: #18B5AB; +$hljs-bright-blue: #70A2FF; +$hljs-bright-purple: #CC99CD; + +$hljs-pastel-grey: #9FA4B1; +$hljs-pastel-red: #F37957; +$hljs-pastel-orange: #F5AB57; +$hljs-pastel-yellow: #F8C555; +$hljs-pastel-green: #86AD85; +$hljs-pastel-aqua: #5FB3B3; +$hljs-pastel-blue: #6293C3; +$hljs-pastel-purple: #C192C1; + +$hljs-light-grey: #918791; +$hljs-light-red: #E34A4C; +$hljs-light-orange: #FF5A00; +$hljs-light-yellow: #966B19; +$hljs-light-green: #157857; +$hljs-light-aqua: #1D7EAF; +$hljs-light-blue: #2E5FFF; +$hljs-light-purple: #6B2372; + + diff --git a/app/server/views/styles/abstracts/functions.scss b/app/server/views/styles/abstracts/functions.scss new file mode 100644 index 0000000..4bf86d2 --- /dev/null +++ b/app/server/views/styles/abstracts/functions.scss @@ -0,0 +1,10 @@ +@use "sass:math"; +@use "../abstracts/fonts"; + +/* Function to convert pixel font sizes to rem */ +@function px2rem($size) { + @if math.unit($size) != 'px' { + @error "The size argument (#{$size}) must be in pixels."; + } + @return math.div($size, fonts.$base-font-size) * 1rem; +} diff --git a/app/server/views/styles/abstracts/mixins.scss b/app/server/views/styles/abstracts/mixins.scss index e814436..9f09652 100644 --- a/app/server/views/styles/abstracts/mixins.scss +++ b/app/server/views/styles/abstracts/mixins.scss @@ -23,9 +23,9 @@ border-radius: $border-radius; } - /* ========================================================================== +/* ========================================================================== 2. Breakpoints - ========================================================================== */ +========================================================================== */ @mixin breakpoint($minWidth: 0, $maxWidth: 0, $minHeight: 0, $maxHeight: 0) { $type: type-of($minWidth); @@ -113,8 +113,8 @@ } /* ========================================================================== - 3. Pseudo element absolute - ========================================================================== */ + 3. Pseudo element absolute +========================================================================== */ @mixin pseudo-absolute{ position: relative; @@ -130,9 +130,9 @@ } } - /* ========================================================================== +/* ========================================================================== 4. Border Hover - ========================================================================== */ +========================================================================== */ @mixin link-border{ transition: border 0s; @@ -159,3 +159,48 @@ scrollbar-width: none; &::-webkit-scrollbar { width: 0 !important } } + +/* ========================================================================== + 7. Truncation +========================================================================== */ + +@mixin truncate($num_lines) { + display: -webkit-box; + -webkit-line-clamp: $num_lines; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* ========================================================================== + 8. Flexed spacing +========================================================================== */ + + @mixin stacked($spacing) { + display: flex; + align-items: center; + column-gap: $spacing; + } + + +/* ========================================================================== + 9. Aspect Ratio +========================================================================== */ + +@mixin aspect-ratio($ratio) { + position: relative; + overflow: hidden; + + &::before { + content: ''; + display: inline-block; + padding-bottom: $ratio * 100%; + } + + > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/app/server/views/styles/abstracts/variables.scss b/app/server/views/styles/abstracts/variables.scss index 09eab26..977f1a9 100644 --- a/app/server/views/styles/abstracts/variables.scss +++ b/app/server/views/styles/abstracts/variables.scss @@ -22,6 +22,10 @@ $header-3: "Bitter", serif; $monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; $article: "IBM Plex Serif", serif; + $base: 'Relative', sans-serif; + $mono: 'Relative Mono', monospace; + $base-font-size: 16px; + $system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* ========================================================================== diff --git a/app/server/views/styles/application.scss b/app/server/views/styles/application.scss index 13dc0bf..2c28bee 100644 --- a/app/server/views/styles/application.scss +++ b/app/server/views/styles/application.scss @@ -8,6 +8,7 @@ // --------- @import 'abstracts/variables'; @import 'abstracts/mixins'; +@import 'abstracts/colors'; // Base // --------- @@ -29,6 +30,8 @@ @import 'components/slide'; @import 'components/tutorials'; @import 'components/videos'; +@import 'components/written_content'; +@import 'components/modular.scss'; // Objects // --------- @@ -69,8 +72,8 @@ // .c-sidebar-navigator { // padding-bottom: 0; // position: relative; - - + + // li { // padding-left: 20px; // margin-top: 12px !important; @@ -78,7 +81,7 @@ // white-space: normal !important; // text-overflow: unset !important; // overflow-x: visible !important; - + // a { // white-space: normal !important; // font-weight: 400; @@ -88,14 +91,14 @@ // color: $white; // text-decoration: none; // position: relative; - + // &:hover { // text-decoration: underline; // color: $grey-lynch; // } - + // } - + // } // } @@ -108,7 +111,7 @@ // nav.c-video-player__lessons { // width: 100%; // overflow-y: scroll; - + // .c-video-player__lessons-section { // display: block; // } @@ -124,21 +127,21 @@ // padding: 0 24px 20px; // border-bottom: 1px solid $grey-mako; // display: none; - - + + // .c-video-player__lessons-header { // display: block; // cursor: pointer; // position: relative; // } - + // .c-video-player__lessons-title { // display: block; // font-size: 1.125rem; /* 18/16 */ // color: $white; // margin-top: 20px; // } - + // li { // font-size: 0.9375rem; /* 15/16 */ // font-weight: 600; @@ -151,16 +154,16 @@ // white-space: nowrap; // text-overflow: ellipsis; // overflow-x: hidden; - + // &:first-child { // margin-top: 0; // } - + // .c-box-list__item-number { // margin-right: 3px; // font-weight: 600; // } - + // .c-box-list__item-title { // width: 100%; // text-overflow: ellipsis; @@ -175,11 +178,11 @@ // ========================================================================== */ // .c-nav-sidebar--book { - + // .c-sidebar-navigator { // padding-bottom: 50; // position: relative; - + // &:before { // content: ""; // position: absolute; @@ -190,7 +193,7 @@ // background: $grey-shuttle; // } // } - + // } // /* ========================================================================== @@ -204,16 +207,16 @@ // align-items: center; // position: relative; // z-index: 999999; - + // a { // font-weight: 600 !important; // text-decoration: none; // color: $white; - + // &:hover { // text-decoration: underline; // } -// } +// } // } // .c-book-header { @@ -262,12 +265,12 @@ // flex-wrap: nowrap; // align-items: baseline; // } - + // h1 span:first-child { // font-size: 5.625rem; /* 90/16 */ // margin-right: 9px; // } - + // h1 span { // display: block; // } @@ -276,17 +279,17 @@ // c-written-tutorial__content { // padding-bottom: 120px; - + // > h2 { // font-size: 2.5rem; - - + + // a { // color: $black-mine-shaft; // } - + // } - + // > span { // display: block; // font-size: 0.75rem; /* 12/16 */ @@ -295,121 +298,121 @@ // letter-spacing: .5px; // margin-top: 15px; // } - + // img.bordered { // border-width: 9px; // } // } // .c-book-chapter { - + // .l-image-100 { // img { // max-width: 100% !important; // } // } - + // .l-image-90 { // img { // max-width: 90% !important; // } // } - + // .l-image-80 { // img { // max-width: 80% !important; // } // } - + // .l-image-70 { // img { // max-width: 70% !important; // } // } - + // .l-image-60 { // img { // max-width: 60% !important; // } // } - + // .l-image-50 { // img { // max-width: 50% !important; // } // } - + // .l-image-40 { // img { // max-width: 40% !important; // } // } - + // .l-image-30 { // img { // max-width: 30% !important; // } // } - + // .l-image-20 { // img { // max-width: 20% !important; // } // } - + // .l-image-10 { // img { // max-width: 10% !important; // } // } - + // } -// .l-book-chapter article.c-written-tutorial .c-written-tutorial__content { - +// .l-book-chapter article.c-written-tutorial .c-written-tutorial__content { + // h1, h2 { // font-size: 1.875em; // } - + // h3 { // font-size: 1.5em; // } - + // h4 { // font-size: 1.188em; // } - + // ul, ol, p, blockquote { // font-size: 1.0625em; - + // p { // font-size: 1em; // } - + // li { // p { // margin-top: .5rem; // font-size: 1em; // } -// } - +// } + // ul, ol { // font-size: 1em; // } // } - + // pre { // font-size: 0.8125em; - + // code { // font-size: 1em; // } // } - + // code { // font-size: 0.875em; // } - + // blockquote { // font-size: 1em; // } @@ -418,91 +421,91 @@ // /*************************************/ // .c-written-tutorial__content { - + // .c-written-tutorial__content-tags { // width: 100%; // padding-right: 45px; // } - + // .c-written-tutorial__content-share { // display: flex; // align-items: flex-start; // margin-left: auto; - + // button { // margin-left: 6px; // } - + // .o-button--bookmark { // height: 28px; // line-height: 28px; // padding: 0; - + // svg { // margin-top: -10px; // } -// } +// } // } - + // h1, h2 { // font-size: 1.6875rem; /* 27/16 */ // margin-top: 27px; // } - + // h3 { // font-size: 1.3125rem; /* 21/16 */ // margin-top: 24px; // } - + // h4 { // font-size: 1.125rem; /* 18/16 */ // margin-top: 18px; // } - + // h1, h2, h3, h4, h5 { // margin-top: 36px; // color: $black-mine-shaft; - + // a { // color: $green-brand; // } // } - + // h2 + p, h3 + p, h4 + p { // margin-top: 12px; // } - + // p, ul, ol { // font-family: $article; // font-size: 1.0625rem; /* 18/16 */ // line-height: 1.58; // margin-top: 24px; - + // a { // color: $green-brand; // } - + // em { // font-weight: 700; // font-style: normal; // } - + // } - + // ul, ol { // padding-left: 24px; - + // li { // margin-top: .5rem; // } // } - + // ul { // li { // list-style: square; // } // } - + // div.note { // font-family: $article; // background: $grey-black-squeeze; @@ -510,35 +513,35 @@ // padding: 20px 24px; // border-radius: $border-radius; // margin-top: 24px; - + // pre { // margin-left: 0px; // width: 100%; // } - + // em { // font-weight: 700; // font-style: normal; // } - + // p { // font-size: 1.0625rem; - + // &:first-child{ // margin-top: 0; // } // } - + // a { // color: $green-brand; // } - + // } - + // pre, code { // word-wrap: break-word; // } - + // pre { // font-family: "Menlo", monospace !important; // font-size: 0.8125rem; /* 13/16 */ @@ -554,12 +557,12 @@ // white-space: pre-wrap; // border: 1px solid $white; // } - + // .c-spoiler pre { // margin-left: 0px; // width: 100%; // } - + // code { // font-family: "Menlo", monospace; // font-size: 0.875rem; /* 14/16 */ @@ -568,34 +571,34 @@ // background: $grey-black-squeeze; // border-radius: 5px; // } - + // img, .wp-video { // margin: 0 auto; // display: flex; // max-width: 100%; // height: auto; // } - + // .bordered { // border: .75rem solid $grey-catskill; // border-radius: $border-radius; // } - + // .wp-caption { // margin: 36px auto; // } - + // .wp-caption-text { // font-size: 0.9375rem; /* 15/16 */ // color: $grey-raven; // margin-top: 9px; // } - + // .c-written-tutorial__content-iframe { // position: relative; // padding-bottom: 56.25%; // margin: 36px 0; - + // iframe { // position: absolute; // top: 0; @@ -604,10 +607,10 @@ // height: 100%; // } // } - + // .c-spoiler { // text-align: center; - + // &.c-spoiler--revealed { // .c-spoiler__answer { // display: block; @@ -616,7 +619,7 @@ // display: none; // } // } - + // .c-spoiler__answer { // text-align: left; // font-family: $article; @@ -626,24 +629,24 @@ // border-radius: $border-radius; // margin-top: 24px; // display: none; - + // em { // font-weight: 700; // font-style: normal; // } - + // p { // font-size: 1.0625rem; - + // &:first-child{ // margin-top: 0; // } // } - + // a { // color: $green-brand; // } -// } +// } // } // } @@ -656,7 +659,7 @@ // header { // display: block !important; // } - + // h1, h2, h3, h4, h5 { // code { // font-size: inherit !important; @@ -666,12 +669,12 @@ // padding: 0 !important; // } // } - + // pre code { // background: none !important; // border: none !important; // } - + // blockquote { // font-family: inherit; // background: $grey-black-squeeze; @@ -679,38 +682,38 @@ // padding: 20px 24px; // border-radius: $border-radius; // margin-top: 24px; - + // pre { // margin-left: 0px; // width: 100%; // } - + // em { // font-weight: 700; // font-style: normal; // } - + // p { // font-size: 1.0625rem; - + // &:first-child{ // margin-top: 0; // } // } - + // a { // color: $green-brand; // } // } - + // figure { // max-width: 720px; // margin: 0 auto; - + // img { // max-height: 720px; // } - + // figcaption { // margin-top: 12px; // font-size: 0.9375em; /* 15/16 */ @@ -718,7 +721,7 @@ // text-align: center; // } // } - + // .l-image-bordered { // img { // border: 9px solid $grey-catskill; @@ -746,7 +749,7 @@ // .l-admin { // padding-left: 270px; -// } +// } // .l-whitespace { // white-space: nowrap; @@ -825,7 +828,7 @@ // grid-template-columns: 300px 1fr!important; // grid-column-gap: 90px; // align-items: flex-start!important; -// } +// } // h1 { // line-height: 1.25; @@ -838,26 +841,26 @@ // img { // max-width: 100%; -// } -// } +// } +// } // } - + // .l-collection-hero__copy { // flex-wrap: wrap; // h1, > span { // text-align: left; // } -// } +// } // .l-collection-hero__copy-markdown { // font-size: 1.1875em !important; /* 21/16 */ /* 19/16 */ -// } +// } // p { // margin-top: 55px; // text-align: left; -// } +// } // } @@ -915,7 +918,7 @@ // .l-padding-60 { // padding-top: 100px; -// } +// } // .l-block-wrapper { // max-width: 1280px; @@ -928,7 +931,7 @@ // } // /* ========================================================================== -// T.O.C. +// T.O.C. // ========================================================================== */ @@ -984,7 +987,7 @@ // font-size: 1.3125rem; /* 21/16 */ // } -// p { +// p { // font-size: 1rem; // margin-top: 15px; // color: $black-mine-shaft; diff --git a/app/server/views/styles/base/base.scss b/app/server/views/styles/base/base.scss index ad17074..1ac3929 100644 --- a/app/server/views/styles/base/base.scss +++ b/app/server/views/styles/base/base.scss @@ -5,7 +5,7 @@ html { box-sizing: border-box; - font-family: $body; + font-family: $base; } *, @@ -37,7 +37,7 @@ button { background: transparent; border: 0; padding: 0; - font-family: $body; + font-family: $base; } fieldset { @@ -100,3 +100,7 @@ svg.icon{ width: 32px; height: 32px; } + +body { + background-color: $grey-wisp; +} diff --git a/app/server/views/styles/base/typography.scss b/app/server/views/styles/base/typography.scss index 2bdf262..58a71fa 100644 --- a/app/server/views/styles/base/typography.scss +++ b/app/server/views/styles/base/typography.scss @@ -3,12 +3,12 @@ */ body{ - font-family: $body; + font-family: $base; font-display: auto; font-size: 1rem; - font-weight: normal; - line-height: 1.45; - color: $black-mine-shaft; + font-weight: 400; + line-height: 1.5; + color: $black-night; -webkit-backface-visibility: hidden; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); -moz-osx-font-smoothing: grayscale; @@ -17,15 +17,15 @@ body{ } h1, h2, h3, h4, h5{ - font-family: $header; + font-family: $base; font-display: auto; - font-weight: 700; - letter-spacing: -.5px; + font-weight: 400; + line-height: 1.25; + letter-spacing: unset; } h1{ font-size: 3rem; - line-height: 1.125; @include breakpoint("mobile"){ font-size: 1.875rem; @@ -35,24 +35,21 @@ h1{ h2{ font-size: 1.875rem; - line-height: 1.25; } h3{ font-size: 1.5rem; - line-height: 1.35; } h4{ font-size: 1.3125rem; /* 21/16 */ - line-height: 1.35; } p{ - font-size: 1.0625rem; + font-size: 1rem; @include breakpoint("mobile"){ font-size: 0.9375rem; } -} \ No newline at end of file +} diff --git a/app/server/views/styles/components/modular.scss b/app/server/views/styles/components/modular.scss new file mode 100644 index 0000000..02fa494 --- /dev/null +++ b/app/server/views/styles/components/modular.scss @@ -0,0 +1,421 @@ + +@import '../abstracts/colors'; +@import '../abstracts/fonts'; +@import '../abstracts/mixins'; + + +/* ========================================================================== + 1. Module Homepage +========================================================================== */ + +.content-hero { + background-color: $black-night; + color: $white; + border-radius: 40px; + display: grid; + padding: 72px 106px; + grid-template-columns: minmax(494px, 690px) minmax(230px, 378px); + grid-column-gap: 105px; + min-height: 676px; + + .content-hero-left { + display: grid; + width: unset; + + h1 { + font-size: 3rem; + word-break: break-word; + } + + .metadata { + margin-block: 12px; + gap: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + + .version-meta { + display: flex; + gap: 12px; + } + + .authors { + margin-top: 32px; + } + } + + p.description { + display: block; + font-size: 1.125rem; + margin-top: 24px; + word-break: break-word; + + } + } + + .programme-metadata { + display: flex; + align-self: flex-end; + width: 100%; + border-top: 2px solid $white; + + .programme-metadata__segment{ + display: flex; + gap: 24px; + padding-right: 20px; + padding-left: 20px; + border-right: 1px solid $white; + margin-top: 36px; + + &:first-of-type { + padding-left: 0; + } + + &:last-of-type { + border-right: none; + padding-right: 0; + } + + .programme-metadata__segment-icon { + align-self: center; + width: 32px; + height: 32px; + } + + .programme-metadata__segment-info { + display: grid; + align-items: center; + gap: 6px; + } + + } + } + + .content-hero-right { + max-width: 398px; + + .content-image { + max-width: 350px; + } + } +} + +.content-middle { + display: grid; + grid-column-gap: 8.33%; + grid-template-columns: 33.33% 58.33%; + + .content-middle-left { + + h2 { + font-size: 1.25rem; + margin-bottom: 24px; + font-weight: 400; + } + + .outcomes { + ul { + li { + list-style: none; + padding-left: 40px; + font-size: 1rem; + line-height: 1.5; + position: relative; + + &::before { + content: ''; + background-image: url('../images/svg-icons/checkmark-completed.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + position: absolute; + display: inline-block; + background-color: transparent; + left: 0; + width: 24px; + height: 24px; + top: calc(50% - 12px); + } + } + } + } + + .concepts { + margin-top: 40px; + } + } + + .content-middle-right { + .content-toc { + h2 { + margin-bottom: 24px; + } + + .content-toc-description { + word-break: break-word; + padding-bottom: 32px; + } + .toc-container { + border: 1px solid $black-night; + border-radius: 16px; + background-color: $white; + margin-bottom: 32px; + + .toc-segment { + border-bottom: 1px solid $black-night; + padding: 24px; + display: flex; + flex-direction: row; + + .segment-number { + background-color: $black-night; + color: $white; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; + width: 56px; + height: 56px; + margin-right: 24px; + font-size: 1.125rem; + } + + .toc-grid { + display: flex; + flex-direction: column; + gap: 6px; + + .segment-header { + display: flex; + line-height: 1.25; + gap: 24px; + margin-right: auto; + + + .segment-title { + text-decoration: none; + color: $black-night; + font-size: 1.25rem; + transition: none; + + &:hover { + text-decoration: underline; + color: $orange-determination; + } + } + + .slide-button { + text-decoration: none; + background-color: $white; + color: $black-night; + border: 1px solid $black-night; + border-radius: 6px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.725rem; + padding: 6px; + height: 24px; + } + } + } + } + + } + + } + + } +} + + +/* ========================================================================== + 3. Segments +========================================================================== */ + +.content-module { + margin-top: 40px; + + .segment { + display: grid; + width: min(1536px, 100vw - 48px); + margin-inline: auto; + grid-template-columns: 396px 1fr 40px; + gap: 32px; + padding-bottom: 120px; + + .segment-header { + margin-top: unset; + font-size: 2.25rem; + } + + .transcript-segment { + + p, pre, ul, ol, h2, h3, h4 { + margin-left: 116px; + position: relative; + } + + blockquote { + margin-left: 116px; + + p { + margin: unset; + } + } + + .video-timestamp { + display: flex; + align-items: center; + position: absolute; + left: -116px; + height: 24px; + padding: 0 8px; + font-size: 0.875rem; + text-decoration: underline; + background: none; + box-shadow: none; + border: none; + font-weight: 400; + } + } + + .assessment-quiz { + .quiz-container { + border: 1px solid $black-night; + padding: 24px; + margin-top: 40px; + border-radius: 16px; + background-color: $white; + + h3 { + font-weight: 500; + font-size: 1.25rem; + line-height: 1.5; + padding-left: 12px; + margin-bottom: 12px; + } + + ul.quiz-questions { + list-style: none; + + .quiz-option { + display: flex; + align-items: center; + width: 100%; + min-height: 64px; + padding: 12px; + border-radius: 12px; + flex-wrap: wrap; + + .option-ref { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + border-radius: 8px; + background-color: $grey-thought; + font-size: 0.875rem; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + } + .option-text { + padding-inline: 24px; + margin-bottom: 20px; + } + + .quiz-explanation { + font-size: 0.875rem; + line-height: 1.5; + margin-left: 56px; + + &.written-content { + p { + margin: unset; + + &:first-of-type{ + display: inline; + } + } + + & > * { + font-size: inherit; + line-height: inherit; + } + } + } + } + + .correct-choice { + border: 2px solid $green-meadow; + } + } + + .quiz-lo { + background-color: $grey-thought; + padding: 30px; + padding-left: 40px; + margin-top: 12px; + margin-bottom: -24px; + margin-inline: -24px; + border-radius: 0 0 16px 16px; + } + + } + } + } +} + + + + +/* ========================================================================== + 4. Stuff & bits +========================================================================== */ + + + .mb-8 { + margin-bottom: 8px; + } + +.sc-white { + fill: $white; +} + +.fs-16 { + font-size: 1rem; +} + +.lh-1 { + line-height: 1; +} + +.fs-18 { + font-size: 1.125rem; +} + +.w-bold { + font-weight: 700; +} + +.container-1188 { + max-width: 1188px; + margin-inline: auto; +} + +.container-1386 { + max-width: 1386px; + margin-inline: auto; +} + +.mt-80 { + margin-top: 80px; +} + +.px-24 { + margin-inline: 24px; +} diff --git a/app/server/views/styles/components/navigation.scss b/app/server/views/styles/components/navigation.scss index 42f40f1..775c1d3 100644 --- a/app/server/views/styles/components/navigation.scss +++ b/app/server/views/styles/components/navigation.scss @@ -728,7 +728,7 @@ padding: 20px 24px; } - .c-nav-sidebar__section { + .c-nav-sidebar__section { display: flex; align-items: center; height: 50px; @@ -769,7 +769,7 @@ } - a.c-nav-sidebar__item { + a.c-nav-sidebar__item { display: block; color: $black-mine-shaft; text-decoration: none; @@ -1100,7 +1100,7 @@ .c-sidebar-navigator__indicator { display: none; } - + } } @@ -1633,7 +1633,7 @@ header#c-global-header{ align-items: center; font-family: $body; color: white !important; - font-size: 0.8125rem !important; + font-size: 0.8125rem !important; font-weight: 400; @include breakpoint("mobile-large"){ @@ -2050,7 +2050,7 @@ footer#c-global-footer{ } .c-global-footer__logo { - + @include breakpoint($maxWidth: 1080px){ grid-area: logo; max-width: 25%; @@ -2341,63 +2341,6 @@ footer#c-global-footer{ } -/* ========================================================================== -8b. Tabs (Navigation) -========================================================================== */ - -.c-tabs-navigation{ - background: $black-onyx; - display: flex; - align-items: center; - height: 72px; - width: 100%; - padding: 0 27px; - overflow: hidden; - overflow-x: scroll; - white-space: nowrap; - @include mobile-scroll; - @include hide-scrollbar; - - &::-webkit-scrollbar { - display: none; - } - - li { - margin-left: 24px; - - &:first-child { - margin-left: 0; - } - - a { - color: $grey-chateau; - font-size: 0.9375rem; /* 15/16 */ - font-weight: 600; - text-decoration: none; - } - - &.c-tabs--active{ - a { - color: $white; - position: relative; - - &:after { - content: ""; - position: absolute; - left: 0; - bottom: -27px; - width: 100%; - height: 3px; - background: $green-brand; - } - - } - } - - } - -} - /* ========================================================================== 9. Mobile Navigator @@ -2643,114 +2586,174 @@ footer#c-global-footer{ } + + /* ========================================================================== - 11. Paginator - ========================================================================== */ + A. Kodeco Floating TOC. +========================================================================== */ -.c-paginator { +.lesson-toc { + max-width: 400px; - a { - width: 100%; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - font-family: $header; - font-weight: 700; - font-size: 1.125rem; /* 18/16 */ - height: 72px; - line-height: 72px; - text-decoration: none; - text-align: center; - color: $black-mine-shaft; - cursor: pointer; + .toc-expanded { + display: block; + border: 1px solid $black-night; + border-radius: 16px; + background-color: $white; + + .toc-header { + min-height: 64px; + background-color: $grey-wisp; + border-radius: 16px 16px 0 0; + align-items: center; - &:hover { - background: #F5F8FB; + h2 { + margin: 0 24px; + font-size: 1.125rem; + padding-top: 24px; + } } + .toc-body { + padding: 24px 0; + scrollbar-width: none; - span { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + .module-title { + margin-bottom: 4px; + font-size: 1.25rem; + } - svg { - width: 17px; - height: 15px; - fill: $grey-chateau; - } + .length { + font-size: 0.875rem; + } - } + .section-list { + .section-list-header-wrapper { + padding: 36px 24px 0; + gap: 24px; + padding-inline: 24px; - .c-paginator__back { + .section-list-header { + h4 { + font-size: 1.25rem; + line-height: 1.25; + } - &:hover svg { - transform: translateX(-5px); - } + p { + font-size: 0.875rem; + padding-top: 4px; + } + } + } - span, svg { - margin-right: auto; - margin-right: auto; - } + .section-segment-list { + display: block; + list-style: none; + margin: 0; + padding: 24px 0 0 0; - span { - margin-left: -41px; - } + .current-segment { - svg { - transition: all .25s; - margin-left: 24px; - } + &::before { + content: ''; + background-color: $orange-determination; + } + } - } + li { + white-space: normal; + padding: 12px 48px; + text-overflow: ellipsis; + position: relative; - .c-paginator__forward { + &:hover { + background-color: $grey-wisp; + } - &:hover svg { - transform: translateX(5px); - } + &::before { + content: ''; + position: absolute; + left: 12px; + width: 24px; + height: 24px; + border-radius: 6px; + background-color: $white; + border: 1px solid $black-night; + } - span, svg { - margin-left: auto; - margin-left: auto; + a { + color: $black-night; + text-decoration: none; + } + } + } + } } + } +} - span { - margin-right: -41px; - } - svg { - transition: all .25s; - margin-right: 24px; - } +/* ========================================================================== + B. Kodeco Header +========================================================================== */ - } +.global-header { + display: flex; + min-height: 80px; + background-color: $white; + position: sticky; + z-index: 99; - .c-paginator__pages { + .header-container { + max-width: 1584px; + width: 100%; + height: 100%; display: flex; + align-items: center; + margin: auto; - .c-paginator__pages--active { - cursor: default; - color: $grey-chateau; - text-decoration: none; - } + .header-left { + display: flex; + flex: 1; + align-items: center; + justify-content: flex-start; - a { - color: $green-brand; - text-decoration: underline; - margin: 0 8px; - } + .header-logo { + flex-shrink: 0; + margin-right: 24px; - } + a { + min-width: 115px; -} + svg { + max-height: 24px; + max-width: 115px; + fill: $orange-glow; + cursor: pointer; -.c-paginator--no-hover { - a { - &:hover { - background: none; + &:hover { + fill: $black-night; + } + } + } + } + .page-name { + h4 { + font-size: 1.5rem; + color: $grey-thought; + font-weight: 700; + font-family: $mono; + } + } + } + + .header-center { + flex: 1; + display: flex; + + span { + font-size: 1.25rem; + } } } + } diff --git a/app/server/views/styles/components/written_content.scss b/app/server/views/styles/components/written_content.scss new file mode 100644 index 0000000..9afb3e8 --- /dev/null +++ b/app/server/views/styles/components/written_content.scss @@ -0,0 +1,244 @@ +/** + * .written_content is a wrapper class that will format standard things like + * p, h1, h2, blockquote etc. Used in things like articles. + * + */ + + @import '../abstracts/colors'; + @import '../abstracts/fonts'; + + + + .written-content { + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 48px; + word-break: break-word; + } + + h1, + h2 { + font-size: 32px; + + } + + h3 { + font-size: 24px; + } + + h4 { + font-size: 20px; + } + + h5, + h6 { + font-size: 16px; + } + + p, ul, ol, .note { + font-family: $base; + font-size: 16px; + line-height: 1.66; + word-break: break-word; + } + + p { + margin-top: 20px; + } + + a { + color: $orange-determination; + } + + em { + font-weight: 700; + font-style: normal; + } + + code { + background-color: rgba($grey-thought, 0.25); + border: 1px solid $grey-thought; + padding: 1px 8px; + font-size: 15px; + border-radius: 8px; + } + + pre { + margin-top: 24px; + + code { + padding: 24px; + } + } + + pre code.hljs, + pre.hjls, pre code { + display: block; + overflow-x: auto; + padding: 24px; + background: $black-night; + color: $grey-thought; + font-family: 'Relative Mono', monospace; + font-variant-ligatures: no-contextual; + } + + .hljs { + background: $black-night; + color: $grey-thought; + font-family: 'Relative Mono', monospace; + } + + pre + p, pre + ul, pre + ol { + margin-top: 24px; + } + + .note, + blockquote { + margin-top: 24px; + padding: 24px; + border: 1px solid $orange-glow; + background-color: $white; + border-radius: 16px; + + p { + margin-top: unset; + } + } + + ul { + margin-top: 4px; + list-style: none; + + li { + position: relative; + margin-top: 16px; + padding-left: 40px; + line-height: 1.66; + + &::before { + content: "\200B"; + background-color: $orange-enthusiasm; + display: inline-block; + height: 8px; + width: 8px; + border-radius: 2px; + position: absolute; + top: 9px; + left: 16px; + } + } + } + + ol { + margin-top: 20px; + padding-left: 20px; + list-style: number; + + li { + position: relative; + margin-top: 12px; + padding-top: 4px; + line-height: 1.66; + } + } + + img { + padding: 8px; + border-radius: 16px; + margin: 40px auto; + max-width: 100%; + height: auto; + display: block; + } + + figure { + max-width: 720px; + margin: 0 auto; + + picture:has(svg){ + justify-content: center; + display: flex; + } + + &.l-image-bordered img { + padding: 8px; + border-radius: 16px; + border: 1px solid #14161E; + } + + figcaption { + font-family: "Relative Mono" !important; + font-size: 0.875rem; + color: #14161E; + margin-bottom: 40px; + margin-top: 12px; + text-align: center; + } + + &.l-image-100 { + img, svg { + max-width: 100% !important; + } + } + + &.l-image-90 { + img, svg { + max-width: 90% !important; + } + } + + &.l-image-80 { + img, svg { + max-width: 80% !important; + } + } + + &.l-image-70 { + img, svg { + max-width: 70% !important; + } + } + + &.l-image-60 { + img, svg { + max-width: 60% !important; + } + } + + &.l-image-50 { + img { + max-width: 50% !important; + } + } + + &.l-image-40 { + img { + max-width: 40% !important; + } + } + + &.l-image-30 { + img { + max-width: 30% !important; + } + } + + &.l-image-20 { + img { + max-width: 20% !important; + } + } + + &.l-image-10 { + img { + max-width: 10% !important; + } + } + + } + }