Merge branch 'feat/it18229912' into 'develop'

Feat/it18229912

See merge request !38

Presently/presently/users/audioemotiontest.py

@@ -18,18 +18,9 @@ import time
 from os import path
 from pydub import AudioSegment
 
-#convert video files to .wav format
-# src = input("In: ")
-# dst = input("Out: ")
-# src = input("F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\media\\video\\22")
-# dst = input("F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\media\\audio")
-
-# sound = AudioSegment.from_mp3(src)
-# sound.export(dst, format="wav")
-
 saved_model_path = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\models\\model8723.json"
 saved_weights_path = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\models\\model8723_weights.h5"
-audio_file = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\media\\audio\\fearful.wav"
+audio_file = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\media\\audio\\publicspeech.wav"
 
 with open(saved_model_path, 'r') as json_file:
     json_savedModel = json_file.read()
@@ -126,6 +117,7 @@ fig = plt.figure(figsize = (10, 2))
 plt.bar(emo_list, pred_np, color = 'darkturquoise')
 plt.ylabel("Probabilty (%)")
 plt.show()
+print(emo_list, pred_np)
     
 max_emo = np.argmax(predictions)
 print('max emotion:', emotions.get(max_emo,-1))
@@ -145,5 +137,6 @@ plt.bar(emo_list, total_predictions_np, color = 'indigo')
 plt.ylabel("Mean probabilty (%)")
 plt.title("Session Summary")
 plt.show()
+print(emo_list, total_predictions)
 
 print(f"Emotions analyzed for: {(toc - tic):0.4f} seconds")

Presently/presently/users/static/users/assets/css/main.css

+body {
+	font-family: 'Arial', sans-serif;
+	background-image: url('gridme.png');
+}
+
+h1 {
+	text-align: center;
+	text-shadow: 0px 1px 3px black;
+	font-size: 80px;
+}
+
+p
+{
+	text-shadow: 0px 1px 3px #999999;
+}
+
+div
+{
+	font-size: 25px;
+	text-shadow: 0px 1px 3px #999999;
+}
+
+
+.colorResults {
+
+	width: 100px;
+	height: 100px;
+	float: left;
+	margin: 5px 5px 5px 5px;
+	padding: 5px 5px 5px 5px;
+	color: #ffffff;
+	text-shadow: 1px 1px 1px black;
+
+}
+
+.thumb {
+	height: 250px;
+	/*border: 1px solid #000;*/
+	margin: 10px 10px 10px 10px;
+	-moz-box-shadow: 0px 2px 8px 0px #555;
+	-webkit-box-shadow: 0px 2px 8px 0px #555;
+	box-shadow: 0px 2px 8px 0px #555;
+}
+
+.swatch
+{
+	width: 50px;
+	height: 50px;
+	float: left;
+	margin: 5px 5px 5px 5px;
+	padding: 5px 5px 5px 5px;
+	color: #ffffff;
+	text-shadow: 1px 1px 1px black;
+	border: 1px solid #999999;
+}
+
+#scheme
+{
+	display: none;
+	width: 400px;
+}

Presently/presently/users/static/users/assets/css/scss/styles.scss

+// The files that compile
+
+@import 'abstracts/index';
+@import 'base/index';
+@import 'layout/index';
+@import 'components/index';

Presently/presently/users/static/users/assets/js/detection.js

+/*
+ *
+ * This is for uploading files to the page, standard HTML5 jazz.
+ *
+ * */
+function handleFileSelect(evt)
+{
+	var files = evt.target.files;
+
+	// Loop through the FileList and render image files as thumbnails
+	for (var i = 0, f; f = files[i]; i++)
+	{
+
+		// Only process image files
+		if (!f.type.match('image.*'))
+		{
+			continue;
+		}
+
+		var reader = new FileReader();
+
+		// Capture the file info
+		reader.onload = (function(theFile)
+		{
+			return function(e)
+			{
+				// Render thumbnail.
+				var span = document.createElement('span');
+				span.innerHTML = ['<img class="thumb" onclick="javascript:analyze(this, event);" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
+				document.getElementById('list').insertBefore(span, null);
+			};
+		})(f);
+
+		// Read the image file as data URL
+		reader.readAsDataURL(f);
+	}
+	var message = document.getElementById('message');
+	message.innerHTML = 'Click any image to get theme colors!';
+}
+
+/*
+* This portion was created by referencing the article
+* "Using python and k-means to find the dominant colors in images"
+* By Charles Leifer
+* */
+
+// You can see the Python version of this in Charles Leifer's article
+function euclidean(point1, point2)
+{
+	var s = 0;
+	for (var i = 0, l = point1.length; i < l; i++)
+	{
+		s += Math.pow(point1[i] - point2[i], 2)
+	}
+	return Math.sqrt(s);
+}
+
+// There are various ways to convert rgb to hex, I found this on Stack Overflow.
+function rgbToHex(rgb)
+{
+	function toHex(c)
+	{
+		var hex = parseInt(c).toString(16);
+		return hex.length == 1 ? '0' + hex : hex;
+	}
+	return '#' + toHex(rgb[0]) + toHex(rgb[1]) + toHex(rgb[2]);
+	
+}
+
+function calculateCenter(points, n)
+{
+	var values = []
+
+	// Here we're populating the values array with 0s just so we know what size it should be (n)
+	for (var i = 0; i < n; i++)
+	{
+		values.push(0);
+	}
+
+	var plength = 0;
+
+	for (var i = 0, l = points.length; i < l; i++)
+	{
+		plength++;
+		for (var j = 0; j < n; j++)
+		{
+			values[j] += points[i][j];
+		}
+	}
+
+	// Using the average to get the centers
+	for (var i = 0; i < n; i++)
+	{
+		values[i] = values[i] / plength;
+	}
+
+	return values;
+}
+
+// I basically just took this from Charles Leifer.
+function k_mean(points, k, min_diff)
+{
+	plength = points.length;
+	colorGroup = [];
+	seen = [];
+	while (colorGroup.length < k)
+	{
+		idx = parseInt(Math.random() * plength);
+		found = false;
+		for (var i = 0; i < seen.length; i++)
+		{
+			if (idx === seen[i])
+			{
+				found = true;
+				break;
+			}
+		}
+		if (!found)
+		{
+			seen.push(idx);
+			colorGroup.push([points[idx], [points[idx]]]);
+		}
+	}
+
+	while (true)
+	{
+		plists = [];
+		for (var i = 0; i < k; i++)
+		{
+			plists.push([]);
+		}
+
+		for (var j = 0; j < plength; j++)
+		{
+			var p = points[j], smallest_distance = 10000000, idx = 0;
+			for (var i = 0; i < k; i++)
+			{
+				var distance = euclidean(p, colorGroup[i][0]);
+				if (distance < smallest_distance)
+				{
+					smallest_distance = distance;
+					idx = i;
+				}
+			}
+			plists[idx].push(p);
+		}
+
+		var diff = 0;
+		for (var i = 0; i < k; i++)
+		{
+			var old = colorGroup[i], list = plists[i], center = calculateCenter(plists[i], 3), new_cluster = [center, (plists[i])], dist = euclidean(old[0], center);
+			colorGroup[i] = new_cluster
+			diff = diff > dist ? diff : dist;
+		}
+		if (diff < min_diff)
+		{
+			break;
+		}
+	}
+	return colorGroup;
+}
+
+// Here's where we to actual interaction with the webpage
+function processimg(img, canvaselement)
+{
+	var points = [];
+
+	// Drawing the given image onto a canvas 250x250 in size
+	canvaselement.drawImage(img, 0, 0, 250, 250);
+
+	// Getting data from said canvas.  This *DOES* get every pixel in the image.
+	// Luckily, it's fast.
+	dataCanvas = canvaselement.getImageData(0, 0, 250, 250).data;
+
+	// Populating the points array with colors from the image
+	for (var i = 0, l = dataCanvas.length; i < l; i += 4)
+	{
+		var r = dataCanvas[i], g = dataCanvas[i + 1], b = dataCanvas[i + 2];
+		points.push([r, g, b]);
+	}
+
+	var totals = k_mean(points, 3, 1), hex = [];
+
+	// If you try and convert the RGB to Hex directly here, it takes FOREVER,
+	// but if you have the helper method above, it works fast.  Strange.
+	for (var i = 0; i < totals.length; i++)
+	{
+		hex.push(rgbToHex(totals[i][0]));
+	}
+
+	return hex;
+}
+
+function pick(img, canvaselement, x, y)
+{
+	var pickedColor = "hay";
+
+	xx = x;
+	yy = y;
+
+	var imgData = canvaselement.getImageData(xx, yy, 1, 1).data;
+
+	pickedColor = rgbToHex(imgData);
+
+	return pickedColor;
+}
+
+// This is called when the user clicks an image.
+function analyze(img_elem, event)
+{
+	// This is getting the canvas from the page and the image in it
+	canvaselement = document.getElementById('canvas').getContext('2d'), img = new Image();
+	//var coords = relMouseCoords(document.getElementById('canvas'), event);
+
+	img.onload = function()
+	{
+		var message = document.getElementById('message');
+		//Hopefully we'll never see the "Loading..." message but it's here just in case
+		message.innerHTML = 'Loading...';
+		var colors = processimg(img, canvaselement);
+
+		// Showing the message of processing the image to the user
+		message.innerHTML = 'Theme Colors';
+		console.log(colors.length, 'length');
+		
+		document.getElementById('ts0').value = colors[0];
+		document.getElementById('ts1').value = colors[1];
+		document.getElementById('ts2').value = colors[2];
+		document.getElementById('ts3').value = colorfun;
+		document.getElementById('color1').style.backgroundColor = colors[0];
+		document.getElementById('color1').innerHTML = colors[0];
+		document.getElementById('color2').style.backgroundColor = colors[1];
+		document.getElementById('color2').innerHTML = colors[1];
+		document.getElementById('color3').style.backgroundColor = colors[2];
+		document.getElementById('color3').innerHTML = colors[2];
+		
+		
+		var colorfun = pick(img, canvaselement, event.offsetX, event.offsetY);
+		// pass in coordinates
+
+		document.getElementById('pickedColor').style.backgroundColor = colorfun;
+		document.getElementById('pickedColor').innerHTML = colorfun;
+		
+		document.getElementById('scheme').style.display="block";
+		
+		createSwatches(colorfun);
+		
+	}
+
+	img.src = img_elem.src;
+}
+
+// This is for the swatches that are generated from the picked color.
+function createSwatches(hex)
+{
+	nHex = hex;
+
+	// The light and dark values could potentially be changed so colors are changed based on these hues.  
+	// It's this way just in case we expand it to include such functionality.
+	var lightRGB = new Array(255, 255, 255);
+	var darkRGB = new Array(0, 0, 0);
+	var colorValues = new Array();
+	var swatch = new Array();
+
+	baseColor = hexToRGB(nHex);
+	opArray = new Array(1.0, .75, .50, .25, .10, .85, .75, .50, .25, .10);
+	for ( i = 0; i < 10; i++)
+	{
+		nMask = i < 5 ? lightRGB : darkRGB;
+
+		nColor = setColorHue(baseColor, opArray[i], nMask);
+
+		nHex = toHex(nColor[0]) + toHex(nColor[1]) + toHex(nColor[2]);
+
+		colorValues[i] = new Array();
+		colorValues[i][0] = nHex;
+		colorValues[i][1] = nColor;
+		
+		// Actually putting the swatches on the page
+		document.getElementById("s"+i).style.backgroundColor = "#" + nHex;
+	}
+}
+
+// Actually crating the hues with different lightness
+function setColorHue(originColor, opacityPercent, maskRGB)
+{
+	returnColor = new Array();
+	for ( w = 0; w < originColor.length; w++)
+		returnColor[w] = Math.round(originColor[w] * opacityPercent) + Math.round(maskRGB[w] * (1.0 - opacityPercent));
+	return returnColor;
+}
+
+// Helper method for sonverting to HEX
+function toHex(dec) {
+	hex=dec.toString(16);
+	if(hex.length==1)hex="0"+hex;
+	if(hex==100)hex="FF";
+	return hex.toUpperCase();
+}
+
+//Converting HEX to RGB
+function hexToRGB(hex)
+{
+	var r = hexToR(hex);
+	var g = hexToG(hex);
+	var b = hexToB(hex);
+
+	function hexToR(h)
+	{
+		return parseInt((cutHex(h)).substring(0, 2), 16)
+	}
+
+	function hexToG(h)
+	{
+		return parseInt((cutHex(h)).substring(2, 4), 16)
+	}
+
+	function hexToB(h)
+	{
+		return parseInt((cutHex(h)).substring(4, 6), 16)
+	}
+
+	function cutHex(h)
+	{
+		return (h.charAt(0) == "#") ? h.substring(1, 7) : h
+	}
+
+	return new Array(r, g, b);
+}
+
+
+// This is currently not used.  Maybe if we start playing with hues and everything, it'll be useful!
+/*
+ function HueShift(h,s) {
+ h+=s;
+ while (h>=360.0) h-=360.0;
+ while (h<0.0) h+=360.0;
+ return h;
+ }
+
+ function convertToHSV(hex)
+ {
+ var r = hexToR(hex);
+ var g = hexToG(hex);
+ var b = hexToB(hex);
+
+ function hexToR(h)
+ {
+ return parseInt((cutHex(h)).substring(0, 2), 16)
+ }
+
+ function hexToG(h)
+ {
+ return parseInt((cutHex(h)).substring(2, 4), 16)
+ }
+
+ function hexToB(h)
+ {
+ return parseInt((cutHex(h)).substring(4, 6), 16)
+ }
+
+ function cutHex(h)
+ {
+ return (h.charAt(0) == "#") ? h.substring(1, 7) : h
+ }
+
+ var computedH = 0;
+ var computedS = 0;
+ var computedV = 0;
+
+ r = r / 255;
+ g = g / 255;
+ b = b / 255;
+ var minRGB = Math.min(r, Math.min(g, b));
+ var maxRGB = Math.max(r, Math.max(g, b));
+
+ // Black-gray-white
+ if (minRGB == maxRGB)
+ {
+ computedV = minRGB;
+ return [0, 0, computedV];
+ }
+
+ // Colors other than black-gray-white:
+ var d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
+ var h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
+ computedH = 60 * (h - d / (maxRGB - minRGB));
+ computedS = (maxRGB - minRGB) / maxRGB;
+ computedV = maxRGB;
+ return [computedH, computedS, computedV];
+
+ }
+ */
\ No newline at end of file

Presently/presently/users/static/users/assets/scss/abstracts/_fonts.scss

+// External or internally hosted fonts
+// Two ways we can go about adding custom fonts: 
+
+// ## Hosted Google fonts
+// Drop the @import tag here and define the font families
+
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Source+Sans+Pro:300,500,700&display=swap');
+
+$font-serif-family: 'Playfair Display';
+$font-serif-weight-normal: 400;
+$font-serif-style-italic: 400i;
+
+$font-sans-family: 'Source Sans Pro';
+$font-sans-weight-normal: 300;
+$font-sans-weight-semi: 500;
+$font-sans-weight-bold: 700;
+
+$project-lineheight-base: 1.5;
+$project-lineheight-loose: 1.6875;
+$project-lineheight-tight: 1.25;
+
+// Set defaults
+$font-family-base: $font-sans-family, 'Healvetica Neue', sans-serif;
+$font-weight-base: $font-sans-weight-normal;
+$font-weight-bold: $font-sans-weight-bold;
+
+$font-family-serif: $font-serif-family, serif;

Presently/presently/users/static/users/assets/scss/abstracts/_functions.scss

+////
+/// Oomph Scaffold Functions
+/// @access public
+/// @group Oomph Functions
+/// @author Oomph, Inc. UX Engineers
+/// @parameter none
+/// @require no 3rd party requirements
+////
+
+
+/// Remove (strip) Units
+/// @author Bourbon / Thoughbot
+/// @parameter {Value} $value -Value, assumed number with unit
+/// @example  scss - Usage
+///   line-height: strip-unit(1.5em);
+/// @example css - Output
+///   line-height: 1.5;
+@function strip-unit($value) {
+  @return ($value / ($value * 0 + 1));
+}
+
+
+/// px()
+/// Change a unitless value to px
+/// @author jhogue
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @example scss - Usage
+///   width: px(48);
+/// @example css - Output
+///   width: 48px;
+@function px($value) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @return ($value * 1px);
+}
+
+
+/// em()
+/// Change a (assumed) pixel value to an em
+/// @author Bourbon / Thoughbot
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @param {float} $base - (optional) Numeric value for the pixel multiplier
+/// @example scss - Usage
+///   font-size: em(24);
+///   width: em(48, 24);
+/// @example css - Output
+///   font-size: 1.5em;
+///   width: 2em;
+@function em($value, $base: 16) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @if not unitless($base) {
+    $base: strip-unit($base);
+  }
+  @return ($value / $base) * 1em;
+}
+
+
+/// rem()
+/// Change a (assumed) pixel value to an rem
+/// @author Bourbon / Thoughbot
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @param {float} $base - (very optional) Numeric value for the pixel multiplier
+/// @example scss - Usage
+///   width: rem(48);
+/// @example css - Output
+///   width: 3rem;
+@function rem($value, $base: 16px) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @if not unitless($base) {
+    $base: strip-unit($base);
+  }
+  @return ($value / $base) * 1rem;
+}
+
+
+/// clearfix()
+/// Clearfix still useful, though less and less
+/// @author Bourbon / Thoughbot
+/// @require {None}
+/// @param {None}
+/// @example scss - Usage
+///   .element {
+///     @include clearfix;
+///   }
+/// @example css - Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}
+
+
+/// percent-color() =
+/// Emulate the way Adobe Illustrator allows percentages of defined global colors
+/// @link http://thesassway.com/intermediate/mixins-for-semi-transparent-colors
+/// @require Bourbon strip-units(), SASS opacify() and mix()
+/// @param $color - A color as Hex, RGB or HSL. Percent as numeric
+/// @param $percent - Optional background color for mixing function
+/// @param $background [white]
+/// @example scss - Usage
+///   background-color: percent-color(#666, 50%);
+/// @example css - Output
+///   background-color: #ccc;
+@function percent-color($color, $percent, $background: white) {
+  $percent: strip-unit($percent);
+  $opaque: opacify($color, 1);
+  $solid-color: mix($opaque, $background, $percent);
+  @return $solid-color;
+}

Presently/presently/users/static/users/assets/scss/abstracts/_index.scss

+// Import all Abstracts
+
+// Helpful functions and mixins for every project
+@import 'functions';
+@import 'mixins/clamping';
+@import 'mixins/fluid-units';
+@import 'mixins/fluid-typography';
+@import 'mixins/hacks';
+@import 'mixins/maintain-ratio';
+@import 'mixins/screen-reader';
+@import 'mixins/show-hide';
+
+// Fonts should load at the top of the CSS file
+@import 'fonts';
+
+// Project Variables — things that need to be defined before BS4
+@import 'project-vars/breakpoints';
+@import 'project-vars/colors';
+@import 'project-vars/spacing';
+@import 'project-vars/type-sizes';
+@import 'project-vars/vars';

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_clamping.scss

+/// Various ways to do line clamping
+/// @author jhogue
+///
+/// @param {String} Max-width value
+///
+/// @example scss - Usage
+///   // .element {
+///   //   @include single-line-clamp(em(240));
+///   // }
+///
+/// @example css - Output
+///   // .element {
+///   //   max-width: 15em;
+///   //   overflow: hidden;
+///   //   text-overflow: ellipsis;
+///   //   white-space: nowrap;
+///   // }
+///
+@mixin single-line-clamp($width) {
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Simple approach for multi-lines
+/// @author jhogue
+///
+/// @param {Numeric} Number of lines to clamp to
+/// @param {String} Font-size
+/// @param {String} Line-height
+///
+/// @example scss - Usage
+///   // .element {
+///   //   @include multi-line-clamp(2);
+///   // }
+///
+/// @example css - Output
+///   // .element {
+///   //   position: relative;
+///   //   overflow: hidden;
+///   //   max-height: 3.125rem;
+///   //   padding-right: 1em;
+///   // }
+///   // .element::before,
+///   // .element::after {
+///   //   position: absolute;
+///   //   bottom: 0;
+///   //   right: 0;
+///   // }
+///   // .element::before {
+///   //   z-index: 2;
+///   //   content: '\2026';
+///   // }
+///   // .element::after {
+///   //   content: "";
+///   //   z-index: 1;
+///   //   width: 1em;
+///   //   height: 1em;
+///   // }
+///
+/// @example With more complicated $font-size declaration
+///   // .element {
+///   //   @include multi-line-clamp(2, rem(map-get(map-get($type-sizes, x-large), h3)));
+///   // }
+///
+@mixin multi-line-clamp($lines, $fs: $font-size-base, $lh: $line-height-base) {
+  // Set up the variables
+  $lines: $lines * 1rem;
+  $fs: strip-unit($fs);
+  $lh: strip-unit($lh);
+  
+  position: relative;
+  overflow: hidden;
+  max-height: ($lh * $fs) * $lines;
+  padding-right: 1em; // space for ellipsis
+  
+  &::before,
+  &::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  
+  &::before {
+    z-index: 2;
+    content: '\2026';
+  }
+  
+  &::after {
+    content: "";
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+  }
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_fluid-typography.scss

+
+/// Deep getter to go into the $type-sizes array
+/// @author jhogue
+///
+/// @require {map} $type-sizes
+///
+/// @require {function} type-of
+/// @require {function} map-get
+///
+/// @param {String} Breakpoint map key name
+/// @param {String} Element name [base]
+///
+/// @example scss - Usage
+///    font-size: px(one-type-size('x-large', 'h1'));
+///
+/// @example css - Output
+///    font-size: 31px;
+///
+@function one-type-size($element, $break: null, $unit: 1rem) {
+  @if $break == null {
+    // No breakpoint name is defined, so grab the first one
+    $keys: map-keys($type-sizes);
+    $break: nth($keys, 1);
+  }
+  @if type-of($type-sizes) != 'map' {
+    @error 'A list named $type-sizes is undefined. [Function one-type-size()]';
+  }
+  @if type-of(map-get($type-sizes, $break)) != 'map' {
+    @error 'Can’t reach into the $type-sizes map for another map. [Function one-type-size()]';
+  }
+  $elementsize: map-get(map-get($type-sizes, $break), $element);
+  
+  // Not sure I like this. We assume pixels in and REM/EM out with this math
+  @return strip-unit(rem($elementsize)) * $unit;
+}
+
+
+/// Use fluid-units() to output all sizes for a typographic element
+/// @author jhogue
+///
+/// @require {map} $type-sizes
+/// @require {map} $project-breakpoints
+///
+/// @require {function} type-of
+/// @require {function} map-keys
+/// @require {function} map-has-key
+/// @require {function} nth
+/// @require {function} length
+/// @require {function} em
+///
+/// @require {function} bp
+///
+/// @require {mixin} one-type-size
+/// @require {mixin} fluid-units
+///
+/// @param {String} Element name [base]
+/// @param {String} Render mobile values [true]
+///
+/// @example scss - Usage
+///   @include one-element-size(h1);
+///
+/// @example css - Output
+///   h1 {
+///     font-size: 1.9375em;
+///   }
+///   @media (min-width: 30em) {
+///     h1 {
+///       font-size: calc(1.9375em + 0.8125 * (100vw - 30em) / 55);
+///     }
+///   }
+///   @media (min-width: 85em) {
+///     h1 {
+///       font-size: calc(1.9375em + 0.8125 * 1em);
+///     }
+///   }
+///
+@mixin fluid-type-sizes($elem: 'base', $mobile: true) {
+  @if type-of($type-sizes) != 'map' {
+    @error 'A list named $type-sizes is undefined. [Mixin one-element-size()]';
+  }
+
+  // List only the keys from the $type-sizes list.
+  // Expects only two. Only uses the first and last
+  $keys: map-keys($type-sizes);
+  $first-key: nth($keys, 1);
+  $last-key: nth($keys, length($keys));
+
+  // Change these key values into a typographic value
+  // by getting the matching key/value pair from the $type-sizes array
+  $min-value: strip-unit((one-type-size($elem, $first-key)));
+  $max-value: strip-unit((one-type-size($elem, $last-key)));
+
+  // Use the same keys to grab the corresponding breakpoints
+  @if type-of($project-breakpoints) != 'map' {
+    @error 'A list named $project-breakpoints is undefined. [Mixin one-element-size()]';
+  }
+  @if not map-has-key($project-breakpoints, $first-key) {
+    @error 'Your $type-sizes map key "#{$first-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
+  }
+  @if not map-has-key($project-breakpoints, $last-key) {
+    @error 'Your $type-sizes map key "#{$last-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
+  }
+
+  $min-vw: strip-unit(rem(bp($first-key)));
+  $max-vw: strip-unit(rem(bp($last-key)));
+
+  // Finally, use this mixin to set the base size and max size within the viewport range
+  @if $min-value != $max-value {
+    // Min and Max are different, so output the crazy calc function
+    @include fluid-units('font-size', $min-value, $max-value, $min-vw, $max-vw, 1rem, $mobile);
+  } @else {
+    font-size: ($min-value * 1rem);
+  }
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_fluid-units.scss

+/// fluid-units() =
+/// Set a minimum value, maximum value, and use calc() to fluidly go from one to the other in between
+/// @author J. Hogue @artinruins
+/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
+/// @link Inspired by http://madebymike.com.au/writing/precise-control-responsive-typography/
+///
+/// @require All numbers passed must be the same unit and unitless. The last parameter is the unit of the output
+///
+/// @param {List} $properties
+///   List one or multiple properties to assign values to
+///
+/// @param {String} $min-value
+/// @param {String} $max-value
+///   Min/Max values for the measurement. Both should be unitless values.
+///
+/// @param {String} $min-vw
+/// @param {String} $max-vw
+///   Min/Max viewport width. Which viewport "locks" should the fluid measurements start and end at?
+///
+/// @param {String} $unit
+///   Assumes 1rem by default
+///
+/// @example scss - Usage with CSS vars
+///  // .element {
+///  //   @include fluid-units('padding-top' 'padding-bottom', 1, 3, (480/16), (1200/16), 1rem);
+///  // }
+///
+/// @example css - Output
+///  // .element {
+///  //   padding-top: 1rem;
+///  //   padding-bottom: 1rem;
+///  // }
+///  // @media (min-width: 30rem) {
+///  //   .element {
+///  //     padding-top: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
+///  //     padding-bottom: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
+///  //   }
+///  // }
+///  // @media (min-width: 75rem) {
+///  //   .element {
+///  //     padding-top: 3rem;
+///  //     padding-bottom: 3rem;
+///  //   }
+///  // }
+///
+
+/// Helper function
+@function fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit: 1rem) {
+  @return calc(#{$min-value * $unit} + (#{$max-value} - #{$min-value}) * ((100vw - #{$min-vw * $unit}) / #{$max-vw - $min-vw}));
+}
+
+/// Actual mixin
+@mixin fluid-units($properties, $min-value, $max-value, $min-vw, $max-vw, $unit: 1rem, $mobile: true) {
+  
+  // Strip units if not unitless
+  $min-value: strip-unit($min-value);
+  $max-value: strip-unit($max-value);
+  $min-vw: strip-unit($min-vw);
+  $max-vw: strip-unit($max-vw);
+  
+  // Mobile-first: declare the $min-value as the default for any property passed
+  @if ($mobile == true) {
+    @each $property in $properties {
+      #{$property}: #{$min-value * $unit};
+    }
+  }
+
+  // Now declare the creamy, fluid center using a media query at the min-width
+  @media (min-width: #{$min-vw * $unit}) {
+    @each $property in $properties {
+      #{$property}: fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit);
+    }
+  }
+
+  // Finally, stop the crazy fluidity and set the max value at the max viewport width
+  @media (min-width: #{$max-vw * $unit}) {
+    @each $property in $properties {
+      #{$property}: #{$max-value * $unit};
+    }
+  }
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_hacks.scss

+///
+/// Store useful Browser Hacks here
+/// Test them to pass the Linter and then document them for everyone else
+///
+/// See http://browserhacks.com/ for some inspiration when you encounter a browser that needs hacking
+///
+
+// Target old IE only — works for IE10 and 11, not newer
+@mixin hack-for-old-ie() {
+  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    @content;
+  }
+}
+
+// Target ANY Firefox browser
+@mixin hack-for-any-firefox() {
+  // stylelint-disable function-url-quotes
+  @-moz-document url-prefix() {
+    @content;
+  }
+  // stylelint-enable function-url-quotes
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_maintain-ratio.scss

+//// maintain-ratio(), proportional-container() and image-cover() =
+///
+/// Set a container to crop an element and maintain an aspect ratio
+/// Use proportional-container() and image-cover() together:
+///
+/// @link https://gist.github.com/brianmcallister/2932463
+///
+/// @example scss - Usage
+///   .container {
+///     @include proportional-container(16 9);
+///
+///     .element {
+///       @include image-cover();
+///     }
+///   }
+///
+/// @example css - Output
+///   .container {
+///     position: relative;
+///     overflow: hidden;
+///     z-index: 1;
+///     width: 100%;
+///     height: 0;
+///     padding-bottom: 56.25%;
+///   }
+///   .container .element {
+///    transform: translateX(-50%);
+///    top: 0;
+///    left: 50%;
+///    width: auto;
+///    max-width: none;
+///    height: 100%;
+///   }
+////
+
+
+/// maintain-ratio() =
+/// Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio
+/// @author jhogue
+///
+/// @param {list} Ratio [1 1]
+///
+/// @require {function} length
+/// @require {function} percentage
+/// @require {function} nth
+///
+/// @example scss - Usage
+///   @include maintain-ratio(16 9)
+///
+/// @example css - Output
+///   width: 100%;
+///   height: 0;
+///   padding-bottom: 56.25%;
+///
+@mixin maintain-ratio($ratio: 1 1) {
+  @if length($ratio) < 2 or length($ratio) > 2 {
+    @warn "$ratio must be a list with two values.";
+  }
+  width: 100%;
+  height: 0;
+  padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
+}
+
+/// proportional-container() =
+/// Sets a container to "crop" an element to a fixed aspect ratio
+/// @author jhogue
+///
+/// @param {list} Ratio [1 1]
+///
+/// @require {mixin} maintain-ratio
+///
+/// @example scss - Usage
+///   @include proportional-container(16 9)
+///
+/// @example css - Output
+///   position: relative;
+///   overflow: hidden;
+///   z-index: 1;
+///   height: 0;
+///   padding-bottom: 56.25%;
+///   width: 100%
+///
+@mixin proportional-container($ratio: 1 1) {
+  @include maintain-ratio($ratio);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+/// image-cover() =
+/// Sets a container to "crop" an element to a fixed aspect ratio
+/// @author jhogue
+///
+/// @param {String} $center ['100% auto']
+///   Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'
+///
+/// @require {library} Bourbon
+/// @require {mixin} transform
+///
+/// @example scss - Usage
+///  @include image-cover(auto 100%)
+///
+@mixin image-cover($center: '100% auto') {
+  $allowed: ('100% auto','auto 100%','contain');
+
+  @if not index($allowed, $center) {
+    @error "Keyword `#{$center}` for mixin 'image-cover' is not allowed. `#{$allowed}` is expected.";
+  }
+  position: absolute;
+  z-index: 2;
+
+  @if ($center == 'contain') {
+    // Keep the entire element inside the container
+    @include transform(translate(-50%,-50%));
+    top: 50%;
+    left: 50%;
+    width: auto;
+    height: auto;
+    max-height: 100%;
+  } @else if ($center == '100% auto') {
+    // Fill the width, let the height be what it needs to be
+    @include transform(translateY(-50%));
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: auto;
+  } @else {
+    // Default: Fill the height, let the width be what it needs to be
+    @include transform(translateX(-50%));
+    top: 0;
+    left: 50%;
+    width: auto;
+    max-width: none;
+    height: 100%;
+  }
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_screen-reader.scss

+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+    clip-path: none;
+  }
+}

Presently/presently/users/static/users/assets/scss/abstracts/mixins/_show-hide.scss

+// Utilities to make hiding or showing an element quicker
+
+@mixin hide {
+  display: none;
+  visibility: hidden;
+}
+
+@mixin show($d: block) {
+  display: $d;
+  visibility: visible;
+}

Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_breakpoints.scss

+//
+// Breakpoints
+//
+
+$project-breakpoints: (
+  // List as unitless pixels
+  base: 440,  // 620-440= 180
+  small: 620,  // 760-620= 140
+  medium: 760,  // 960-760= 200
+  large: 960,  // 1200-960= 240
+  x-large: 1200, // 1520-1200 = 320
+  xx-large: 1520  // 1520-1200 = 320
+);
+
+$project-maxwidths: (
+  base: 1380,
+  text: 800
+);
+
+// Helpers
+@function bp($bp) {
+  @return em(map-get($project-breakpoints, $bp));
+}
+
+// For responsive typography
+// Declare a minimum and maximum viewport size for fluidity to happen within
+$min-vw: strip-unit(em(bp(base)));
+$max-vw: strip-unit(em(bp(large)));
+
+$maxwidth-container: em(map-get($project-maxwidths, base));
+$maxwidth-text: em(map-get($project-maxwidths, text));

Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_colors.scss

+//
+// Color system
+//
+
+$white: #fff;
+$black: #1a1818; // slightly warm black h0 s5 b10
+
+// Oomph color palette
+$project-colors: (
+  red: #d62901,
+  teal: #70BDC1,
+  blue: #4a7090,
+  denim: #2d5070,
+  orange: #e89424,
+  green: #008a65,
+  white: $white,
+  grey-100: #f8f2f2, // h0 s2 b97
+  grey-300: #b8aeae, // h0 s5 b72
+  grey-400: #aaa2a2, // h0 s5 b65
+  grey-700: #474444, // h0 s5 b28
+  grey-800: #333030, // h0 s5 b20
+  black: $black,
+  blackest: #0f0e0e
+);
+
+// Helper
+@function palette($color) {
+  @return map-get($project-colors, $color);
+}
+
+
+// Project colors
+$project-color-body-bg__dark: palette(blackest);
+$project-color-main-bg__dark: palette(black);
+$project-color-body-fg__dark: palette(grey-400);
+
+$project-color-body-bg__light: palette(white);
+$project-color-main-bg__light: palette(grey-100);
+$project-color-body-fg__light: palette(grey-800);
+
+// Links
+$link-color__dark: palette(teal); 
+$link-decoration: underline;
+$link-hover-color__dark: palette(grey-100);
+$link-hover-decoration: none;
+
+$link-color__light: palette(blue); 
+$link-hover-color__light: palette(grey-800);
+
+// Other 
+$code-color__dark: palette(green);
+
+$border-color__dark: rgba($white, 0.15);
+$border-color__light: rgba($black, 0.15);
+
+$pass__dark: #14cc45;
+$fail__dark: #f23900;
+$edge__dark: #fe6;
+
+$pass__light: #0b8428;
+$fail__light: #c63606;
+$edge__light: #b45e09;

Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_spacing.scss

+// Establishing some vertical rhythm for block elements
+// We use em so that they scale based on the font size of the element and breakpoint
+$project-vertical-rhythm: ($project-lineheight-base * 1rem);
+
+// Horizontal spacing
+$inside-min: 1rem;
+$inside-max: 2rem;
+
+$outside-min: 1rem;
+$outside-max: 3rem;
+
+$vertical-min: $project-vertical-rhythm;
+$vertical-max: ($project-vertical-rhythm * 3);

Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_type-sizes.scss

+//
+// Fluid Type-size system
+//
+
+////
+/// Required list of sizes for typographics elements
+/// 1) Decide which breakpoint that the fluidity will begin and end.
+///    These should correspond to named keys in the $rpp-breakpoints map
+/// 3) Set base font sizes for mobile first
+/// 4) Set the desired sizes for desktop
+/// Mixins will fluidly change between the two values
+////
+
+
+/// Typographic Scales Map
+/// List as unitless pixels, use SASS function to convert to whatever you want
+///
+$type-sizes: (
+
+  // 1.125 typographic scale base 15
+  small: (
+    small: 13,
+    base: 15,
+    h6: 15,
+    h5: 16,
+    h4: 18,
+    h3: 20,
+    h2: 22,
+    h1: 24,
+    display-4: 27,
+    display-3: 30,
+    display-2: 33,
+    display-1: 37
+  ),
+
+  // 1.22 typographic scale base 18
+  x-large: (
+    small: 15,
+    base: 18,
+    h6: 18,
+    h5: 21,
+    h4: 25,
+    h3: 30,
+    h2: 36,
+    h1: 43,
+    display-4: 52,
+    display-3: 63,
+    display-2: 76,
+    display-1: 92
+  ),
+);

Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_vars.scss

+//
+// General variables
+//
+
+$transition: all 250ms ease;
+$kerning: 0.03125em;
+
+// Focus styles
+$focus-outline-width: 0.125rem;
+$focus-outline-style: solid;
+
+// Z Indices
+$z-indices: (
+  base: 1,
+);
+
+// Z-index helper
+@function z($name: base) {
+  @return map-get($z-indices, $name);
+}

Presently/presently/users/static/users/assets/scss/base/_global.scss

+
+pre {
+  line-height: 1.8;
+  padding: $vertical-min $inside-min;
+  margin-bottom: 1.375rem;
+}
+
+hr {
+  border: 0;
+  color: transparent;
+  height: 0px;
+  margin: 0;
+  padding: 0;
+}

Presently/presently/users/static/users/assets/scss/base/_index.scss

+// Base Styles
+@import 'reset';
+@import 'global';
+@import 'media';
+@import 'typography';
+@import 'utilities';

Presently/presently/users/static/users/assets/scss/base/_media.scss

+// Default starting point for media.
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+video {
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+iframe {
+  max-width: 100%;
+  width: 100%;
+}

Presently/presently/users/static/users/assets/scss/base/_reset.scss

+// A simple, modern reset without a lot of opinions
+// https://hankchizljaw.com/wrote/a-modern-css-reset/
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+// Set core body defaults
+body {
+  //line-height: 1.5;
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  
+  // Since we replaced BS4 Reboot, need to declare some things:
+  font-family: $font-family-base;
+  font-size: 100%;
+  font-weight: $font-weight-base;
+  line-height: $project-lineheight-base;
+  color: $project-color-body-fg__dark;
+  text-align: left;
+  background-color: $project-color-body-bg__dark;
+  
+  @media (max-width: bp(small)) {
+    text-rendering: optimizeLegibility;
+  }
+}
+
+// Remove styles on ul, ol elements with a class attribute
+//ul[class],
+//ol[class] {
+//  list-style: none;
+//  margin: 0; // be careful, though, this can be have more specificity than we want
+//}
+.list-unstyled {
+  margin: 0;
+}
+
+// A elements that don't have a class get default styles
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+// Make images easier to work with
+img {
+  max-width: 100%;
+  display: block;
+}
+
+// Natural flow and rhythm in articles by default
+.rhythm > * + * {
+  margin-top: $project-vertical-rhythm;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: $link-color__dark;
+  text-decoration: $link-decoration;
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+
+  transition: $transition;
+
+  &:hover,
+  &:focus {
+    color: $link-hover-color__dark;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href)
+// which have not been made explicitly keyboard-focusable (without tabindex).
+// See https://github.com/twbs/bootstrap/issues/19402
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+  }
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+// Remove all animations and transitions for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file

Presently/presently/users/static/users/assets/scss/base/_typography.scss

+// Resets of Bootstrap
+
+b,
+strong,
+th,
+dt {
+  font-weight: $font-weight-bold;
+  letter-spacing: $kerning;
+}
+
+// All display and utility classes
+//.display-1,
+//.display-2,
+//.display-3,
+//.display-4 {}
+
+.display-1 {
+  @include fluid-type-sizes('display-1');
+  line-height: 1.105;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.display-2 {
+  @include fluid-type-sizes('display-2');
+  line-height: 1;
+  margin-top: 1.625rem;
+  margin-bottom: 1.5rem;
+}
+
+.display-3 {
+  @include fluid-type-sizes('display-3');
+  line-height: 1.1875;
+  margin-top: 2rem;
+  margin-bottom: 1.25rem;
+}
+
+.display-4 {
+  @include fluid-type-sizes('display-4');
+  line-height: 1.375;
+  margin-top: -0.5rem;
+  margin-bottom: 0.875rem;
+}
+
+// All headers and utility classes
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: $font-family-serif;
+  font-weight: normal;
+}
+
+// Set Type fluidly
+h1,
+.h1 {
+  @include fluid-type-sizes('h1');
+  //margin-top: 1.875rem;
+  //margin-bottom: 1.625rem;
+}
+
+h2,
+.h2 {
+  @include fluid-type-sizes('h2');
+  //line-height: 1.333;
+  //margin-top: 2.125rem;
+  //margin-bottom: 1.375rem;
+}
+
+h3,
+.h3 {
+  @include fluid-type-sizes('h3');
+  //font-weight: $font-weight-bold;
+  //margin-top: 2.5rem;
+  //margin-bottom: 1.25rem;
+}
+
+h4,
+.h4 {
+  @include fluid-type-sizes('h4');
+  //margin-top: -0.25rem;
+  //margin-bottom: 1.5rem;
+}
+
+h5,
+.h5 {
+  @include fluid-type-sizes('h5');
+  font-weight: $font-weight-bold;
+  //margin-top: 1.625rem;
+  //margin-bottom: 0.25rem;
+}
+
+h6,
+.h6 {
+  @include fluid-type-sizes('h6');
+  font-weight: $font-weight-bold;
+  letter-spacing: $kerning;
+  //line-height: 1.35;
+  //margin-top: 1.625rem;
+  //margin-bottom: 0.125rem;
+  text-transform: uppercase;
+}
+
+// Base size applied to elements (not containers)
+p,
+blockquote,
+address,
+li,
+dt,
+dd,
+label,
+input,
+.text-size-normal {
+  @include fluid-type-sizes('base', false);
+}
+
+// Margin bottoms
+// p already declared properly via BS4
+//blockquote,
+//address,
+//ul,
+//ol,
+//dl {
+//  margin-bottom: $paragraph-margin-bottom;
+//}
+
+// A little more space after list-items
+li {
+  padding-bottom: 0.125rem;
+}
+
+details {
+  padding-bottom: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+summary {
+  
+  > * {
+    display: inline-block;
+  }
+  
+  &::-webkit-details-marker {
+    font-size: 1.75em;
+  }
+}
+
+
+// Type utilities
+small,
+.text-small {
+  @include fluid-type-sizes('small');
+}
+
+.text-uppercase {
+  letter-spacing: $kerning;
+  text-transform: uppercase;
+}
+
+.text-italic {
+  font-family: $font-family-serif;
+  font-style: italic;
+  letter-spacing: $kerning;
+}
+
+abbr,
+.text-abbr {
+  font-size: 93.75%;
+  letter-spacing: $kerning;
+  text-transform: uppercase;
+}

Presently/presently/users/static/users/assets/scss/base/_utilities.scss

+
+// Spacing
+.u__space__outer {
+  @include fluid-units (
+    'padding-left' 'padding-right',
+    $outside-min,
+    $outside-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__inner {
+  @include fluid-units (
+    'padding-left' 'padding-right',
+    $inside-min,
+    $inside-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical {
+  @include fluid-units (
+    'padding-top' 'padding-bottom',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical--top {
+  @include fluid-units (
+    'padding-top',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical--bottom {
+  @include fluid-units (
+    'padding-bottom',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-right {
+  text-align: right;
+}

Presently/presently/users/static/users/assets/scss/components/_colorcube.scss

+.cc {
+  &__brand {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__title {
+      
+      a {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding-top: 0.5rem;
+        text-decoration: none;
+
+        img {
+          margin: 0 1rem -0.625rem 0;
+        }
+      }
+    }
+    
+    &__subtitle {}
+  }
+  
+  &__form {
+    
+    &__textarea {
+      height: 10.5em;
+      width: 100%;
+    }
+    
+    &__input {
+      padding: 0.75rem;
+    }
+    
+    &__row &__label {
+      display: inline-block;
+      padding: 0.75rem;
+      width: 4em;
+    }
+    
+    &__row &__input {
+      width: 6em;
+    }
+    
+    &__button {
+      border: 0;
+      cursor: pointer;
+      display: inline-block;
+      font-weight: $font-sans-weight-bold;
+      padding: 0.5rem 1.5rem;
+      text-transform: uppercase;
+      transition: $transition;
+      -webkit-appearance: none;
+    }
+  }
+  
+  &__results {
+    @include hide;
+
+    &__title {}
+    
+    &__content {}
+  }
+}

Presently/presently/users/static/users/assets/scss/components/_index.scss

+// Component Styles: page sections
+@import 'page';
+@import 'colorcube';
+@import 'results';
+@import 'theme';

Presently/presently/users/static/users/assets/scss/components/_page.scss

+
+.p {
+  &__header {
+    background-color: $project-color-body-bg__dark;
+  }
+  
+  &__main {
+    background-color: $project-color-main-bg__dark;
+  }
+  
+  &__footer {
+    background-color: $project-color-body-bg__dark;
+    
+    small {
+      color: palette(grey-300);
+    }
+    
+    &__logo {
+      float: left;
+      margin-right: $inside-min;
+    }
+  }
+}

Presently/presently/users/static/users/assets/scss/components/_results.scss

+$swatch-border-width: 5px;
+$swatch-size: rem(120);
+
+.results {
+  
+  &__row {
+    display: flex;
+    flex-flow: row nowrap;
+    padding-top: 1rem;
+
+    &__header {}
+  }
+
+  &__col {
+    padding-bottom: 1rem;
+    flex: 1 0 auto;
+  }
+  
+  &__row &__row {
+    border: 0;
+    flex: 1 0 50%;
+    padding-top: 0;
+  }
+}
+
+// Specific Columns
+.ratios {
+
+  &__original {
+    flex: 0 0 ($swatch-size * 1.5);
+  }
+
+  &__on-light {}
+
+  &__on-dark {}
+  
+  &__custom {
+    input {
+      padding: 0.25rem 0.5rem;
+      width: 6em;
+    }
+  }
+}
+
+
+// Original color
+.original {
+  
+  &__label {
+    padding-bottom: 0.5rem;
+  }
+
+  &__hsl {
+    float: left;
+    
+    p {
+      padding: 0.375rem 0 0.375rem;
+    }
+  }
+
+  &__swatch {
+    float: right;
+    height: $swatch-size;
+    width: ($swatch-size * 0.75);
+  }
+}
+
+// Modifications column
+.mod {
+  &__label {
+    padding-bottom: 0.5rem;
+  }
+  
+  &__swatch {
+    float: left;
+    margin-right: 0.5rem;
+    height: $swatch-size;
+    width: ($swatch-size * 0.75);
+  }
+  
+  &__controls {
+    label {
+      display: inline-block;
+      font-weight: $font-sans-weight-bold;
+      width: 1em;
+    }
+    
+    input {
+      margin: 0 0 -1px;
+      padding: 0.375rem 0 0.375rem 0.5rem;
+      
+      &::-webkit-inner-spin-button {
+        opacity: 1; // always show (negate autohide for Chrome)
+      }
+    }
+  }
+}
+
+.color-ratio {
+  
+  &__wrapper {
+    .icon {
+      display: inline-block;
+      font-size: rem(24);
+      text-align: center;
+      width: 0.875em;
+    }
+  }
+
+  &__passfail {
+    b {
+      @include sr-only;
+    }
+  }
+
+  &__wrapper + &__wrapper {
+    margin-top: - $swatch-border-width;
+  }
+
+  &__label {
+    padding-bottom: 0.5rem;
+    
+    .target-45 &,
+    .target-3 & {
+      @include hide;
+    }
+    
+    .ratios__on-light &,
+    .ratios__on-dark & {
+      padding: 0.5rem 0 0.75rem;
+    }
+  }
+
+  &__swatch {
+    border-style: solid;
+    border-width: $swatch-border-width;
+    display: inline-block;
+    font-weight: $font-sans-weight-semi;
+    line-height: $project-lineheight-tight;
+    overflow: hidden;
+    padding: 0.625rem 0.5rem;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 7rem;
+  }
+  
+  .fail &__swatch::before {
+    border: 2px solid currentColor;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 150%;
+    transform: translate(-50%, -50%) rotate(-33deg);
+  }
+
+  .target-7 &__swatch {}
+
+  .target-45 &__swatch {}
+  
+  .target-3 &__swatch {}
+
+  &__passfail {
+    text-transform: uppercase;
+  }
+  
+  &__results {
+    display: inline-block;
+    padding-left: 0.5rem;
+    vertical-align: middle;
+  }
+}
+
+.level {
+  
+  &--AAplus,
+  &--AAAplus {
+    font-size: rem(24);
+  }
+}

Presently/presently/users/static/users/assets/scss/components/_theme.scss

+// All color applications stored here
+
+// Default colors and scheme: "dark mode"
+pre {
+  background-color: rgba($code-color__dark, 0.1);
+  border-top: 3px solid rgba($code-color__dark, 0.5);
+  border-bottom: 3px solid rgba($code-color__dark, 0.5);
+}
+
+hr {
+  background-color: transparent;
+  border-top: 1px solid $border-color__dark;
+}
+
+.text-light {
+  color: palette(grey-100);
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  color: palette(grey-100);
+}
+
+details {
+  border-bottom: 1px solid $border-color__dark;
+}
+
+summary {
+  &::-webkit-details-marker {
+    color: palette(white);
+  }
+}
+
+.cc {
+  &__brand {
+    &__title {
+      a {
+        color: palette(grey-100);
+      }
+    }
+  }
+  
+  &__form {
+    
+    &__label {
+      color: palette(grey-100);
+    }
+    
+    &__input {
+      color: palette(grey-300);
+      background-color: $project-color-body-bg__dark;
+      border: 1px solid $border-color__dark;
+    }
+    
+    &__button {
+      background-color: palette(teal);
+      color: palette(blackest);
+      
+      &:hover,
+      &:focus {
+        background-color: palette(blue);
+        color: palette(white);
+      }
+      
+      &:active {
+        background-color: palette(red);
+        color: palette(white);
+      }
+    }
+  }
+}
+
+.results {
+  &__row {
+    border-bottom: 1px solid $border-color__dark;
+  }
+}
+
+.color-ratio {
+  
+  &__wrapper {
+    &.pass .icon { color: $pass__dark; }
+
+    &.edge .icon { color: $edge__dark; }
+
+    &.fail .icon { color: $fail__dark; }
+  }
+  
+  &__label {
+    strong {
+      color: palette(white);
+    }
+  }
+}
+
+
+// Alternate theme: "light mode"
+@media (prefers-color-scheme: light) {
+  body {
+    color: $project-color-body-fg__light;
+    background-color: $project-color-body-bg__light;
+  }
+  
+  a {
+    color: $link-color__light;
+    
+    &:hover,
+    &:focus {
+      color: $link-hover-color__light;
+    }
+  }
+  
+  .p {
+    &__header {
+      background-color: $project-color-body-bg__light;
+    }
+    
+    &__main {
+      background-color: $project-color-main-bg__light;
+    }
+    
+    &__footer {
+      background-color: $project-color-body-bg__light;
+      
+      small {
+        color: palette(grey-700);
+      }
+    }
+  }
+  
+  .text-light {
+    color: palette(grey-700);
+  }
+  
+  hr {
+    border-top: 1px solid $border-color__light;
+  }
+  
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5,
+  h6,
+  .h6 {
+    color: palette(grey-700);
+  }
+  
+  details {
+    border-bottom: 1px solid $border-color__light;
+  }
+  
+  summary {
+    &::-webkit-details-marker {
+      color: palette(black);
+    }
+  }
+  
+  .cc {
+    &__brand {
+      &__title {
+        a {
+          color: palette(grey-800);
+        }
+      }
+    }
+
+    &__form {
+      &__label {
+        color: palette(grey-700);
+      }
+      
+      &__input {
+        color: palette(grey-700);
+        background-color: $project-color-body-bg__light;
+        border: 1px solid $border-color__light;
+      }
+      
+      &__button {
+        background-color: palette(blue);
+        color: palette(white);
+        
+        &:hover,
+        &:focus {
+          background-color: palette(teal);
+          color: palette(black);
+        }
+      }
+    }
+  }
+  
+  .results {
+    &__row {
+      border-bottom: 1px solid $border-color__light;
+    }
+  }
+  
+  .color-ratio {
+    &__wrapper {
+      &.pass .icon { color: $pass__light; }
+  
+      &.edge .icon { color: $edge__light; }
+  
+      &.fail .icon { color: $fail__light; }
+    }
+    
+    &__label {
+      strong {
+        color: palette(black);
+      }
+    }
+  }
+}

Presently/presently/users/static/users/assets/scss/layout/_grid.scss

+//
+// Grid
+//
+
+.g {
+  &__row {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    margin: 0 - $inside-min;
+  }
+  
+  &__col {
+    flex: 1 0 100%;
+    max-width: 100%;
+    padding: 0 $inside-min;
+  }
+  
+  &--wide {
+    flex: 1 1 100%;
+    min-width: 100%;
+  }
+  
+  &--two {
+    @media (min-width: bp(small)) {
+      flex: 1 0 50%;
+      max-width: 50%;
+    }
+  }
+  
+  &--three {
+    @media (min-width: bp(medium)) {
+      flex: 1 0 33.3%;
+      max-width: 33.3%;
+    }
+  }
+}
\ No newline at end of file

Presently/presently/users/static/users/assets/scss/layout/_index.scss

+// Base Styles
+@import 'layout';
+@import 'grid';

Presently/presently/users/static/users/assets/scss/layout/_layout.scss

+//
+// Layout
+//
+
+.l {
+  &__max {
+    margin: 0 auto;
+    max-width: $maxwidth-container;
+    
+    &--text {
+      margin: 0 auto;
+      max-width: $maxwidth-text;
+    }
+  }
+  
+  &__header {}
+  
+  &__main {}
+  
+  &__foot {}
+}
\ No newline at end of file

Presently/presently/users/static/users/assets/scss/styles.scss

+// The files that compile
+
+@import 'abstracts/index';
+@import 'base/index';
+@import 'layout/index';
+@import 'components/index';

Presently/presently/users/templates/users/colourcube.html

+{% extends 'users/base.html' %}
+{% load static %}
+{% block content %}
+
+<link rel="stylesheet" href="{% static 'users/assets/css/main.css' %}" type="text/css">
+
+<main class="l__main p__main container">
+    <article class="l__max u__space__outer">
+
+        <form action="/" class="u__space__outer u__space__vertical cc__form" method="post">
+            <div class="g__row">
+                <div class="g__col g--three rhythm">
+                    <h2>Step 1:</h2>
+                    <p>Detect HEX colors from the input image. </p>
+
+                    <!--Here is where the user uploads-->
+                    <div>
+                        Upload as many images as you would like.
+                    </div>
+                    <br>
+
+                    <input type="file" id="files" name="files[]" multiple />
+                    <br>
+                    <output id="list"></output>
+
+                    <!--This script has to be called after the file input is initialized-->
+                    <script>
+                        document.getElementById('files').addEventListener('change', handleFileSelect, false);
+                    </script>
+
+                    <!--This is where the image will technically go when we're taking color information from it (standard HTML5)-->
+                    <canvas id="canvas" style="display: none;" width="150" height="150"></canvas>
+
+                    <!--This is where the colors will show up-->
+                    <div id="theme">
+                        <p id="message"></p>
+
+                        <!--Something curious about this is if you keep clicking on the image,
+    you'll get the same colors, but sometimes in a different order.-->
+                        <div id="pickedColor" class="colorResults"></div>
+                        <div id="color1" class="colorResults"></div>
+                        <div id="color2" class="colorResults"></div>
+                        <div id="color3" class="colorResults"></div>
+
+                    </div>
+                    <br>
+                    <br>
+                    <div id="scheme">
+                        <br>
+                        <br>
+                        <br>
+                        <br>
+                        <p>
+                            Generated Mono Color Scheme
+                        </p>
+                        <div class="swatches">
+                            <div class="swatch" id="s0"></div>
+                            <div class="swatch" id="s1"></div>
+                            <div class="swatch" id="s2"></div>
+                            <div class="swatch" id="s3"></div>
+                            <div class="swatch" id="s4"></div>
+                            <div class="swatch" id="s5"></div>
+                            <div class="swatch" id="s6"></div>
+                            <div class="swatch" id="s7"></div>
+                            <div class="swatch" id="s8"></div>
+                            <div class="swatch" id="s9"></div>
+
+                            <input type="text" id="ts3" class="inputField">
+                            <input type="text" id="ts0" class="inputField">
+                            <input type="text" id="ts1" class="inputField">
+                            <input type="text" id="ts2" class="inputField">
+                            <textarea style="display: none;" name="" id="txtArea" cols="10" rows="5"></textarea>
+
+
+                        </div>
+
+
+                    </div>
+                    <div>
+                        <div class="g__col g--three">
+                            <div class="cc__form__row">
+                                <label class="cc__form__label" for="white-value">Light</label>
+                                <input class="cc__form__input" type="text" id="white-value" name="white-value"
+                                    value="#FFFFFF" required />
+                            </div>
+                            <div class="cc__form__row">
+                                <label class="cc__form__label" for="black-value">Dark</label>
+                                <input class="cc__form__input" type="text" id="black-value" name="black-value"
+                                    value="#101010" required />
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- Submit Button -->
+                    <div class="cc__form__submit g--wide text-align-center">
+                        <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button"
+                            value="Get Ratios">
+                    </div>
+
+                </div>
+        </form>
+
+        <div id="results-content" class="u__space__vertical--bottom cc__results">
+            <div class="u__space__outer cc__results__description">
+                <h2 class="cc__results__title u__space__vertical--bottom">Step 2: Review colors!</h2>
+                <div class="g__row">
+                    <div class="g__col g--two rhythm">
+                        <h3>Criteria</h3>
+                        <p>This tool shows three different ratio targets and how your color performs with each — white,
+                            black, or other colors in your palette:</p>
+                        <ul>
+                            <li><strong class="text-light">WCAG Level AAA:</strong> a contrast ratio equal or greater
+                                than <strong>7.0</strong>. For large-scale text, a ratio equal or greater than
+                                <strong>4.5</strong>.</li>
+                            <li><strong class="text-light">WCAG Level AA:</strong> a contrast ratio equal or greater
+                                than <strong>4.5</strong>. For large-scale text, a ratio equal or greater than
+                                <strong>3.0</strong>.</li>
+                            <li>Text that is considered “Large-scale” is <strong>18 points (24px)</strong> or larger or
+                                <strong>14 points (19px) and bold</strong> or larger.</li>
+                        </ul>
+                    </div>
+                    <div class="g__col g--two rhythm">
+                        <p>For more details about success criteria, see the <a title="Go to w3 website in a new window"
+                                target="_blank" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 minimum
+                                contrast ratios</a> page.</p>
+
+                        <h3>Modify with HSL</h3>
+                        <p><strong>Why HSL?</strong> By modifying primarily the saturation and/or lightness, the
+                            original intention of the color is intact. To modify the Hue would be to start to modify the
+                            color from a blue to a blue-green, or from a red to an orange. Of course, modify the Hue as
+                            you wish as well, but our intention is to show how small movements to the saturation and
+                            lightness can increase accessibility while retaining the intention of the brand color. <a
+                                href="https://www.nixsensor.com/what-is-hsl-color/" target="_blank">More about how HSL
+                                works</a>.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div id="results-output" class="u__space__vertical--top cc__results__content"></div>
+
+            <div class="l__max--text u__space__outer u__space__vertical--top rhythm cc__results__description">
+                <h3>Edge values</h3>
+                <p>Be careful with <strong class="text-light">EDGE</strong> values &mdash; the color passes validation,
+                    but is within 0.5. It may still present a legibility issue even though it gets a passing grade. </p>
+
+                <h3>Most legible Pair</h3>
+                <p>From the given list of colors, which color combination is the <em>most legible</em>? This does not
+                    mean that the color pair will pass minimum requirements, but it has the best chance of passing. </p>
+                <p><strong class="text-light">Custom:</strong> Use the text input to change the color pairing.</p>
+
+                <h3>Check your hover text color vs. your body text color</h3>
+                <p>If <a title="Go to Webaim.org, link opens in a new window." target="_blank"
+                        href="http://webaim.org/techniques/hypertext/link_text#appearance">links are not underlined</a>,
+                    there must be 3:1 contrast between link text and body text and also an additional change (e.g.,
+                    underlining) on mouse hover and keyboard focus. Use the tool to compare your link color against your
+                    body text color to see how they pair in the Most Legible column.</p>
+            </div>
+        </div>
+
+    </article>
+</main>
+
+{% endblock content %}
\ No newline at end of file

Presently/presently/users/templates/users/home.html

@@ -108,7 +108,7 @@
                     </form>
                     <small id="dropzoneHelp" class="form-text text-muted">Max file size is 2MB and max number of files is 10.</small>
                 </div>
-                <a href="{% url 'feedback' %}" class="btn btn-light mt-3" id="" type="submit">Upload</a>
+                <a href="{% url 'slidecheckerdashboard' %}" class="btn btn-light mt-3" id="" type="submit">Upload</a>
             </div>
 
           </div>