From c8cab949e97ca0f380487311a9d1f4983cd0c69d Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:56:39 +0800 Subject: [PATCH 01/19] WEB-6747: Tweaking some base stuff --- app/server/views/styles/abstracts/colors.scss | 127 +++++++++++++++ .../views/styles/abstracts/functions.scss | 10 ++ .../styles/components/written_content.scss | 146 ++++++++++++++++++ 3 files changed, 283 insertions(+) create mode 100644 app/server/views/styles/abstracts/colors.scss create mode 100644 app/server/views/styles/abstracts/functions.scss create mode 100644 app/server/views/styles/components/written_content.scss 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..15590dc --- /dev/null +++ b/app/server/views/styles/abstracts/functions.scss @@ -0,0 +1,10 @@ +@use "sass:math"; +@use "../01-settings/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/components/written_content.scss b/app/server/views/styles/components/written_content.scss new file mode 100644 index 0000000..193cf0c --- /dev/null +++ b/app/server/views/styles/components/written_content.scss @@ -0,0 +1,146 @@ +/** + * .written_content is a wrapper class that will format standard things like + * p, h1, h2, blockquote etc. Used in things like articles. + * + */ + + @use '../01-settings/colors'; + @use '../01-settings/fonts'; + @use '../06-tools/functions' as f; + @use '../06-tools/mixins'; + + + .written-content { + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 48px; + word-break: break-word; + } + + h1, + h2 { + font-size: f.px2rem(32px); + + @include mixins.mobile { + font-size: f.px2rem(28px); + } + } + + h3 { + font-size: f.px2rem(24px); + } + + h4 { + font-size: f.px2rem(20px); + } + + h5, + h6 { + font-size: f.px2rem(16px); + } + + p, ul, ol, .note { + font-family: fonts.$system; + font-size: f.px2rem(16px); + line-height: 1.66; + word-break: break-word; + } + + p { + margin-top: 20px; + } + + a { + color: colors.$orange-determination; + } + + em { + font-weight: 700; + font-style: normal; + } + + code { + background-color: rgba(colors.$grey-thought, 0.25); + border: 1px solid colors.$grey-thought; + padding: 1px 8px; + font-size: f.px2rem(15px); + border-radius: 8px; + } + + pre { + margin-top: 24px; + + code { + padding: 24px; + } + } + + pre + p, pre + ul, pre + ol { + margin-top: 24px; + } + + .note, + blockquote { + margin-top: 24px; + padding: 24px; + border: 1px solid colors.$orange-glow; + background-color: colors.$white; + border-radius: 16px; + } + + 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: colors.$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; + } + + img.bordered { + border: 1px solid colors.$black-night; + } + + } From fd021fbb7d84524eccab09f80025cc53927e4275 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:57:02 +0800 Subject: [PATCH 02/19] WEB-6747: Adds svgs --- .../public/images/svg-icons/approved-script-checked.svg | 3 +++ app/server/public/images/svg-icons/change.svg | 9 +++++++++ .../public/images/svg-icons/checkmark-completed.svg | 3 +++ app/server/public/images/svg-icons/chevron-outline.svg | 3 +++ app/server/public/images/svg-icons/clock.svg | 3 +++ app/server/public/images/svg-icons/layers.svg | 3 +++ app/server/public/images/svg-icons/line-graph.svg | 3 +++ 7 files changed, 27 insertions(+) create mode 100644 app/server/public/images/svg-icons/approved-script-checked.svg create mode 100644 app/server/public/images/svg-icons/change.svg create mode 100644 app/server/public/images/svg-icons/checkmark-completed.svg create mode 100644 app/server/public/images/svg-icons/chevron-outline.svg create mode 100644 app/server/public/images/svg-icons/clock.svg create mode 100644 app/server/public/images/svg-icons/layers.svg create mode 100644 app/server/public/images/svg-icons/line-graph.svg 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/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 @@ + + + From 9a95bf87751172893b3c73cea73a1c7d6432746b Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:58:15 +0800 Subject: [PATCH 03/19] WEB-6747: More changes to base things --- .../views/styles/abstracts/functions.scss | 2 +- app/server/views/styles/abstracts/mixins.scss | 57 +++++++++++++++++-- .../views/styles/abstracts/variables.scss | 4 ++ app/server/views/styles/base/base.scss | 4 +- app/server/views/styles/base/typography.scss | 23 ++++---- .../styles/components/written_content.scss | 38 ++++++------- 6 files changed, 85 insertions(+), 43 deletions(-) diff --git a/app/server/views/styles/abstracts/functions.scss b/app/server/views/styles/abstracts/functions.scss index 15590dc..4bf86d2 100644 --- a/app/server/views/styles/abstracts/functions.scss +++ b/app/server/views/styles/abstracts/functions.scss @@ -1,5 +1,5 @@ @use "sass:math"; -@use "../01-settings/fonts"; +@use "../abstracts/fonts"; /* Function to convert pixel font sizes to rem */ @function px2rem($size) { 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..b47460c 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'; + $mono: 'Relative Mono'; + $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/base/base.scss b/app/server/views/styles/base/base.scss index ad17074..e271498 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 { 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/written_content.scss b/app/server/views/styles/components/written_content.scss index 193cf0c..aa4a666 100644 --- a/app/server/views/styles/components/written_content.scss +++ b/app/server/views/styles/components/written_content.scss @@ -4,10 +4,9 @@ * */ - @use '../01-settings/colors'; - @use '../01-settings/fonts'; - @use '../06-tools/functions' as f; - @use '../06-tools/mixins'; + @import '../abstracts/colors'; + @import '../abstracts/fonts'; + .written-content { @@ -24,29 +23,26 @@ h1, h2 { - font-size: f.px2rem(32px); + font-size: 32px; - @include mixins.mobile { - font-size: f.px2rem(28px); - } } h3 { - font-size: f.px2rem(24px); + font-size: 24px; } h4 { - font-size: f.px2rem(20px); + font-size: 20px; } h5, h6 { - font-size: f.px2rem(16px); + font-size: 16px; } p, ul, ol, .note { - font-family: fonts.$system; - font-size: f.px2rem(16px); + font-family: $base; + font-size: 16px; line-height: 1.66; word-break: break-word; } @@ -56,7 +52,7 @@ } a { - color: colors.$orange-determination; + color: $orange-determination; } em { @@ -65,10 +61,10 @@ } code { - background-color: rgba(colors.$grey-thought, 0.25); - border: 1px solid colors.$grey-thought; + background-color: rgba($grey-thought, 0.25); + border: 1px solid $grey-thought; padding: 1px 8px; - font-size: f.px2rem(15px); + font-size: 15px; border-radius: 8px; } @@ -88,8 +84,8 @@ blockquote { margin-top: 24px; padding: 24px; - border: 1px solid colors.$orange-glow; - background-color: colors.$white; + border: 1px solid $orange-glow; + background-color: $white; border-radius: 16px; } @@ -105,7 +101,7 @@ &::before { content: "\200B"; - background-color: colors.$orange-enthusiasm; + background-color: $orange-enthusiasm; display: inline-block; height: 8px; width: 8px; @@ -140,7 +136,7 @@ } img.bordered { - border: 1px solid colors.$black-night; + border: 1px solid $black-night; } } From 23c060e498ae1eee65c8544b5fee22b85fbb9cdb Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:58:37 +0800 Subject: [PATCH 04/19] WEB-6747: SVGs to symbols --- app/server/views/shared/_svg_icons.html.erb | 69 +++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/app/server/views/shared/_svg_icons.html.erb b/app/server/views/shared/_svg_icons.html.erb index 624cd6e..2558edb 100644 --- a/app/server/views/shared/_svg_icons.html.erb +++ b/app/server/views/shared/_svg_icons.html.erb @@ -24,4 +24,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 51a79a75720d5ad7a59d4474dbdc8c37f3c2129b Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:59:04 +0800 Subject: [PATCH 05/19] WEB-6747: Adds new files to css compiling --- app/server/views/styles/application.scss | 241 ++++++++++++----------- 1 file changed, 122 insertions(+), 119 deletions(-) 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; From ef283776557419f75c3165579bfe16aaaec63487 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 22:59:59 +0800 Subject: [PATCH 06/19] WEB-6747: Restructures the front page to work with module structure --- .../_index_table_of_contents.html.erb | 46 ++++--- .../views/content_modules/index.html.erb | 128 +++++++++--------- 2 files changed, 91 insertions(+), 83 deletions(-) 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/index.html.erb b/app/server/views/content_modules/index.html.erb index c9f7365..e92284f 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 } %>
From bb9cf643e96144dc7524b52fd5997cdcb5d96161 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 23:00:24 +0800 Subject: [PATCH 07/19] WEB-6747: Big old SCSS file for new styles.. --- .../views/styles/components/modular.scss | 265 ++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 app/server/views/styles/components/modular.scss diff --git a/app/server/views/styles/components/modular.scss b/app/server/views/styles/components/modular.scss new file mode 100644 index 0000000..1f93f54 --- /dev/null +++ b/app/server/views/styles/components/modular.scss @@ -0,0 +1,265 @@ + +@import '../abstracts/colors'; +@import '../abstracts/fonts'; +@import '../abstracts/mixins'; + + + +.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; + + .authors { + margin-top: 12px; + } + } + + 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; + 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; + } + } + } + } + + } + + } + + } +} + + +/** +Stuff & Things + */ + + + .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; +} From ca509b79966716e3900d4a4d8248cfa3ee747322 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Mon, 3 Jun 2024 23:19:02 +0800 Subject: [PATCH 08/19] WEB-6747: Tweaking some classes and paddings --- .../_table_of_contents.html.erb | 6 +---- .../views/content_modules/index.html.erb | 2 +- .../views/styles/components/modular.scss | 25 ++++++++++++++++--- 3 files changed, 23 insertions(+), 10 deletions(-) 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..147a931 100644 --- a/app/server/views/content_modules/_table_of_contents.html.erb +++ b/app/server/views/content_modules/_table_of_contents.html.erb @@ -3,11 +3,7 @@
From 4d77459484942b5d871d933f7a97e3e9cd441478 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:59:54 +0100 Subject: [PATCH 11/19] WEB-6747: Styling the floating toc --- .../views/styles/components/modular.scss | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) diff --git a/app/server/views/styles/components/modular.scss b/app/server/views/styles/components/modular.scss index a266e6e..bb81bab 100644 --- a/app/server/views/styles/components/modular.scss +++ b/app/server/views/styles/components/modular.scss @@ -208,6 +208,7 @@ .slide-button { text-decoration: none; background-color: $white; + color: $black-night; border: 1px solid $black-night; border-radius: 6px; display: inline-flex; @@ -232,7 +233,104 @@ 2. Segments ========================================================================== */ +.lesson-toc { + max-width: 400px; + + .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; + + h2 { + margin: 0 24px; + font-size: 1.125rem; + padding-top: 24px; + } + } + .toc-body { + padding: 24px 0; + scrollbar-width: none; + + .module-title { + margin-bottom: 4px; + font-size: 1.25rem; + } + + .length { + font-size: 0.875rem; + } + .section-list { + .section-list-header-wrapper { + padding: 36px 24px 0; + gap: 24px; + padding-inline: 24px; + + .section-list-header { + h4 { + font-size: 1.25rem; + line-height: 1.25; + } + + p { + font-size: 0.875rem; + padding-top: 4px; + } + } + } + + .section-segment-list { + display: block; + list-style: none; + margin: 0; + padding: 24px 0 0 0; + + .current-segment { + + &::before { + content: ''; + background-color: $black-night; + } + } + + li { + white-space: normal; + padding: 12px 48px; + text-overflow: ellipsis; + position: relative; + + &:hover { + background-color: $grey-wisp; + } + + &::before { + content: ''; + position: absolute; + left: 12px; + width: 24px; + height: 24px; + border-radius: 6px; + background-color: $white; + border: 1px solid $black-night; + } + + a { + color: $black-night; + text-decoration: none; + } + } + } + } + } + } +} @@ -280,3 +378,7 @@ .mt-80 { margin-top: 80px; } + +.px-24 { + margin-inline: 24px; +} From 7fe93c5e00a22a7d8a9b1b8a505d193ea8d2126e Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Fri, 19 Jul 2024 14:33:56 +0100 Subject: [PATCH 12/19] WEB-6747: Some SVGs I have no recollection of --- .../images/svg-icons/colour-split-circle.svg | 4 +++ .../images/svg-icons/logotype-orange.svg | 16 +++++++++ .../public/images/svg-icons/symbol-orange.svg | 11 ++++++ app/server/views/shared/_svg_icons.html.erb | 35 +++++++++++++++++++ 4 files changed, 66 insertions(+) create mode 100644 app/server/public/images/svg-icons/colour-split-circle.svg create mode 100644 app/server/public/images/svg-icons/logotype-orange.svg create mode 100644 app/server/public/images/svg-icons/symbol-orange.svg 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/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/views/shared/_svg_icons.html.erb b/app/server/views/shared/_svg_icons.html.erb index 2558edb..db536c9 100644 --- a/app/server/views/shared/_svg_icons.html.erb +++ b/app/server/views/shared/_svg_icons.html.erb @@ -93,4 +93,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From a7bb58fd08a34c06aeffe46fe63d532ecc8eec49 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Fri, 19 Jul 2024 14:34:37 +0100 Subject: [PATCH 13/19] A header that is Kodeco --- .../views/content_modules/_header.html.erb | 37 +++ .../segment_transcript.html.erb | 38 +-- .../views/styles/components/navigation.scss | 286 +++++++++--------- 3 files changed, 196 insertions(+), 165 deletions(-) create mode 100644 app/server/views/content_modules/_header.html.erb 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..5761729 --- /dev/null +++ b/app/server/views/content_modules/_header.html.erb @@ -0,0 +1,37 @@ + diff --git a/app/server/views/content_modules/segment_transcript.html.erb b/app/server/views/content_modules/segment_transcript.html.erb index e5e29a8..43c4f3c 100644 --- a/app/server/views/content_modules/segment_transcript.html.erb +++ b/app/server/views/content_modules/segment_transcript.html.erb @@ -1,27 +1,19 @@ - -
- <%= 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 %> -
-

-
-
- -
+
+
+
+ <%= erb :'content_modules/_table_of_contents.html', locals: { content_module: content_module, current_segment: segment } %> +
+
+

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

+
<%= segment.transcript if segment.respond_to?(:transcript) %>
- -
+
+ diff --git a/app/server/views/styles/components/modular.scss b/app/server/views/styles/components/modular.scss index bb81bab..70d1f58 100644 --- a/app/server/views/styles/components/modular.scss +++ b/app/server/views/styles/components/modular.scss @@ -229,104 +229,53 @@ } } + /* ========================================================================== - 2. Segments + 3. Segments ========================================================================== */ -.lesson-toc { - max-width: 400px; - - .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; +.content-module { + margin-top: 40px; - h2 { - margin: 0 24px; - font-size: 1.125rem; - padding-top: 24px; - } - } - .toc-body { - padding: 24px 0; - scrollbar-width: none; - - .module-title { - margin-bottom: 4px; - font-size: 1.25rem; + .segment { + display: grid; + width: min(1536px, 100vw - 48px); + margin-inline: auto; + grid-template-columns: 396px 1fr 40px; + gap: 32px; + + .transcript-segment { + .segment-title { + margin-top: unset; + font-size: 2.25rem; } - .length { - font-size: 0.875rem; + p, pre, ul, ol, h2, h3, h4 { + margin-left: 116px; + position: relative; } - .section-list { - .section-list-header-wrapper { - padding: 36px 24px 0; - gap: 24px; - padding-inline: 24px; + blockquote { + margin-left: 116px; - .section-list-header { - h4 { - font-size: 1.25rem; - line-height: 1.25; - } - - p { - font-size: 0.875rem; - padding-top: 4px; - } - } + p { + margin: unset; } + } - .section-segment-list { - display: block; - list-style: none; - margin: 0; - padding: 24px 0 0 0; - - .current-segment { - - &::before { - content: ''; - background-color: $black-night; - } - } - - li { - white-space: normal; - padding: 12px 48px; - text-overflow: ellipsis; - position: relative; - - &:hover { - background-color: $grey-wisp; - } - - &::before { - content: ''; - position: absolute; - left: 12px; - width: 24px; - height: 24px; - border-radius: 6px; - background-color: $white; - border: 1px solid $black-night; - } - - a { - color: $black-night; - text-decoration: none; - } - } - } + .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; } } } @@ -334,10 +283,8 @@ - - /* ========================================================================== - 3. Stuff & bits + 4. Stuff & bits ========================================================================== */ diff --git a/app/server/views/styles/components/written_content.scss b/app/server/views/styles/components/written_content.scss index aa4a666..68a1737 100644 --- a/app/server/views/styles/components/written_content.scss +++ b/app/server/views/styles/components/written_content.scss @@ -76,6 +76,23 @@ } } + pre code.hljs, + pre.hjls { + 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; } From a58ed3a5d947addb8ce12835173d3ce646e86ed4 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Fri, 19 Jul 2024 17:23:15 +0100 Subject: [PATCH 17/19] WEB-6747: Text module and tweaking images and adding sizing back in --- .../views/content_modules/text.html.erb | 82 ++-------------- .../views/styles/components/modular.scss | 10 +- .../styles/components/written_content.scss | 93 ++++++++++++++++++- 3 files changed, 104 insertions(+), 81 deletions(-) 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/styles/components/modular.scss b/app/server/views/styles/components/modular.scss index 70d1f58..ecb76ef 100644 --- a/app/server/views/styles/components/modular.scss +++ b/app/server/views/styles/components/modular.scss @@ -243,12 +243,14 @@ 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 { - .segment-title { - margin-top: unset; - font-size: 2.25rem; - } p, pre, ul, ol, h2, h3, h4 { margin-left: 116px; diff --git a/app/server/views/styles/components/written_content.scss b/app/server/views/styles/components/written_content.scss index 68a1737..9afb3e8 100644 --- a/app/server/views/styles/components/written_content.scss +++ b/app/server/views/styles/components/written_content.scss @@ -77,7 +77,7 @@ } pre code.hljs, - pre.hjls { + pre.hjls, pre code { display: block; overflow-x: auto; padding: 24px; @@ -104,6 +104,10 @@ border: 1px solid $orange-glow; background-color: $white; border-radius: 16px; + + p { + margin-top: unset; + } } ul { @@ -152,8 +156,89 @@ display: block; } - img.bordered { - border: 1px solid $black-night; - } + 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; + } + } + } } From 92c6215c5e75d6a6e36d2312a214e024e4de85b7 Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Fri, 19 Jul 2024 17:23:44 +0100 Subject: [PATCH 18/19] WEB-6747: A shared header file --- .../views/content_modules/_header.html.erb | 19 ----------------- .../segment_transcript.html.erb | 21 ++----------------- .../views/styles/components/navigation.scss | 1 + 3 files changed, 3 insertions(+), 38 deletions(-) diff --git a/app/server/views/content_modules/_header.html.erb b/app/server/views/content_modules/_header.html.erb index 5761729..b0cdb3f 100644 --- a/app/server/views/content_modules/_header.html.erb +++ b/app/server/views/content_modules/_header.html.erb @@ -11,27 +11,8 @@

robles: preview

-
<%= content_module.shortcode %>: <%= content_module.title %>.
- -
-
- - - -
-
diff --git a/app/server/views/content_modules/segment_transcript.html.erb b/app/server/views/content_modules/segment_transcript.html.erb index f6bf385..88b02f2 100644 --- a/app/server/views/content_modules/segment_transcript.html.erb +++ b/app/server/views/content_modules/segment_transcript.html.erb @@ -1,21 +1,4 @@ - +<%= erb :'content_modules/_header.html', locals: { content_module: content_module} %>
@@ -23,7 +6,7 @@ <%= erb :'content_modules/_table_of_contents.html', locals: { content_module: content_module, current_segment: segment } %>
-

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

+

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

<%= segment.transcript if segment.respond_to?(:transcript) %>
diff --git a/app/server/views/styles/components/navigation.scss b/app/server/views/styles/components/navigation.scss index d093d6b..775c1d3 100644 --- a/app/server/views/styles/components/navigation.scss +++ b/app/server/views/styles/components/navigation.scss @@ -2728,6 +2728,7 @@ footer#c-global-footer{ max-height: 24px; max-width: 115px; fill: $orange-glow; + cursor: pointer; &:hover { fill: $black-night; From 818121c9dd8c5aa3eafd0e873ba6c68176dd0ebb Mon Sep 17 00:00:00 2001 From: edith <58082567+jellodiil@users.noreply.github.com> Date: Wed, 14 Aug 2024 20:23:09 +0100 Subject: [PATCH 19/19] WEB-6747: Adds styling to assessments --- .../views/content_modules/assessment.html.erb | 86 +++++------------- .../views/styles/components/modular.scss | 88 +++++++++++++++++++ 2 files changed, 111 insertions(+), 63 deletions(-) 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/styles/components/modular.scss b/app/server/views/styles/components/modular.scss index ecb76ef..02fa494 100644 --- a/app/server/views/styles/components/modular.scss +++ b/app/server/views/styles/components/modular.scss @@ -280,11 +280,99 @@ 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 ========================================================================== */