Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev #708

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Dev #708

Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
initial commit, template added
Stone98 committed Jan 28, 2021
commit 2c46e82aca2caed8c6811383de31436499bca4ac
Binary file added .DS_Store
Binary file not shown.
Binary file added portfolio/.DS_Store
Binary file not shown.
63 changes: 63 additions & 0 deletions portfolio/LICENSE.txt

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions portfolio/README.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


This is Dimension, a fun little one-pager with modal-ized (is that a word?) "pages"
and a cool depth effect (click on a menu item to see what I mean). Simple, fully
responsive, and kitted out with all the usual pre-styled elements you'd expect.
Hope you dig it :)

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.

(* = not included)

AJ
aj@lkn.io | @ajlkn


Credits:

Demo Images:
Unsplash (unsplash.com)

Icons:
Font Awesome (fontawesome.io)

Other:
jQuery (jquery.com)
Responsive Tools (github.com/ajlkn/responsive-tools)
5 changes: 5 additions & 0 deletions portfolio/assets/css/fontawesome-all.min.css

Large diffs are not rendered by default.

1,658 changes: 1,658 additions & 0 deletions portfolio/assets/css/main.css

Large diffs are not rendered by default.

37 changes: 37 additions & 0 deletions portfolio/assets/css/noscript.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* BG */

body.is-preload #bg:before {
background-color: transparent;
}

/* Header */

body.is-preload #header {
-moz-filter: none;
-webkit-filter: none;
-ms-filter: none;
filter: none;
}

body.is-preload #header > * {
opacity: 1;
}

body.is-preload #header .content .inner {
max-height: none;
padding: 3rem 2rem;
opacity: 1;
}

/* Main */

#main article {
opacity: 1;
margin: 4rem 0 0 0;
}
2 changes: 2 additions & 0 deletions portfolio/assets/js/breakpoints.min.js
2 changes: 2 additions & 0 deletions portfolio/assets/js/browser.min.js
2 changes: 2 additions & 0 deletions portfolio/assets/js/jquery.min.js

Large diffs are not rendered by default.

401 changes: 401 additions & 0 deletions portfolio/assets/js/main.js

Large diffs are not rendered by default.

587 changes: 587 additions & 0 deletions portfolio/assets/js/util.js

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions portfolio/assets/sass/base/_page.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Basic */

// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}

// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}

// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
background: _palette(bg);

// Stops initial animations until page loads.
&.is-preload {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}

}
76 changes: 76 additions & 0 deletions portfolio/assets/sass/base/_reset.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style:none;
}

blockquote, q {
quotes: none;

&:before,
&:after {
content: '';
content: none;
}
}

table {
border-collapse: collapse;
border-spacing: 0;
}

body {
-webkit-text-size-adjust: none;
}

mark {
background-color: transparent;
color: inherit;
}

input::-moz-focus-inner {
border: 0;
padding: 0;
}

input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
183 changes: 183 additions & 0 deletions portfolio/assets/sass/base/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Type */

html {
font-size: 16pt;

@include breakpoint('<=xlarge') {
font-size: 12pt;
}

@include breakpoint('<=small') {
font-size: 11pt;
}

@include breakpoint('<=xxsmall') {
font-size: 10pt;
}
}

body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-weight: _font(weight);
font-size: 1rem;
line-height: 1.65;
}

a {
@include vendor('transition', (
'color #{_duration(transition)} ease-in-out',
'background-color #{_duration(transition)} ease-in-out',
'border-bottom-color #{_duration(transition)} ease-in-out'
));
border-bottom: dotted 1px _palette(fg-light);
text-decoration: none;
color: inherit;

&:hover {
border-bottom-color: transparent;
}
}

strong, b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}

em, i {
font-style: italic;
}

p {
margin: 0 0 _size(element-margin) 0;
}

h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
line-height: 1.5;
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
letter-spacing: _font(letter-spacing);

a {
color: inherit;
text-decoration: none;
}

&.major {
border-bottom: solid _size(border-width) _palette(border);
width: -moz-max-content;
width: -webkit-max-content;
width: -ms-max-content;
width: max-content;
padding-bottom: 0.5rem;
margin: 0 0 (_size(element-margin) * 1) 0;
}
}

h1 {
font-size: 2.25rem;
line-height: 1.3;
letter-spacing: _font(letter-spacing-heading);
}

h2 {
font-size: 1.5rem;
line-height: 1.4;
letter-spacing: _font(letter-spacing-heading);
}

h3 {
font-size: 1rem;
}

h4 {
font-size: 0.8rem;
}

h5 {
font-size: 0.7rem;
}

h6 {
font-size: 0.6rem;
}

@include breakpoint('<=small') {
h1 {
font-size: 1.75rem;
line-height: 1.4;
}

h2 {
font-size: 1.25em;
line-height: 1.5;
}
}

sub {
font-size: 0.8rem;
position: relative;
top: 0.5rem;
}

sup {
font-size: 0.8rem;
position: relative;
top: -0.5rem;
}

blockquote {
border-left: solid (_size(border-width) * 4) _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}

code {
background: _palette(border-bg);
border-radius: _size(border-radius);
font-family: _font(family-fixed);
font-size: 0.9rem;
margin: 0 0.25rem;
padding: 0.25rem 0.65rem;
}

pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9rem;
margin: 0 0 _size(element-margin) 0;

code {
display: block;
line-height: 1.75;
padding: 1rem 1.5rem;
overflow-x: auto;
}
}

hr {
border: 0;
border-bottom: solid _size(border-width) _palette(border);
margin: (_size(element-margin) * 1.375) 0;
}

.align-left {
text-align: left;
}

.align-center {
text-align: center;
}

.align-right {
text-align: right;
}
101 changes: 101 additions & 0 deletions portfolio/assets/sass/components/_actions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Actions */

ul.actions {
@include vendor('display', 'flex');
cursor: default;
list-style: none;
margin-left: (_size(element-margin) * -0.5);
padding-left: 0;

li {
padding: 0 0 0 (_size(element-margin) * 0.5);
vertical-align: middle;
}

&.special {
@include vendor('justify-content', 'center');
width: 100%;
margin-left: 0;

li {
&:first-child {
padding-left: 0;
}
}
}

&.stacked {
@include vendor('flex-direction', 'column');
margin-left: 0;

li {
padding: (_size(element-margin) * 0.65) 0 0 0;

&:first-child {
padding-top: 0;
}
}
}

&.fit {
width: calc(100% + #{_size(element-margin) * 0.5});

li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;

> * {
width: 100%;
}
}

&.stacked {
width: 100%;
}
}

@include breakpoint('<=xsmall') {
&:not(.fixed) {
@include vendor('flex-direction', 'column');
margin-left: 0;
width: 100% !important;

li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
width: 100%;

> * {
width: 100%;
}

&:first-child {
padding-top: 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
width: 100%;

&.icon {
&:before {
margin-left: -0.5em;
}
}
}
}
}
}
}
26 changes: 26 additions & 0 deletions portfolio/assets/sass/components/_box.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Box */

.box {
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
margin-bottom: _size(element-margin);
padding: 1.5em;

> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}

&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}
84 changes: 84 additions & 0 deletions portfolio/assets/sass/components/_button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
@include vendor('appearance', 'none');
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out');
background-color: transparent;
border-radius: _size(border-radius);
border: 0;
box-shadow: inset 0 0 0 _size(border-width) _palette(border);
color: _palette(fg-bold) !important;
cursor: pointer;
display: inline-block;
font-size: 0.8rem;
font-weight: _font(weight);
height: _size(element-height);
letter-spacing: _font(letter-spacing);
line-height: _size(element-height);
outline: 0;
padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5));
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;

&:hover {
background-color: _palette(border-bg);
}

&:active {
background-color: _palette(border-bg-alt);
}

&.icon {
&:before {
margin-right: 0.5em;
}
}

&.fit {
width: 100%;
}

&.small {
font-size: 0.6rem;
height: (_size(element-height) * 0.75);
line-height: (_size(element-height) * 0.75);
}

&.primary {
background-color: _palette(fg-bold);
color: _palette(bg) !important;
font-weight: _font(weight-bold);

&:hover {
}

&:active {
}
}

&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
cursor: default;
opacity: 0.25;
}
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
line-height: calc(#{_size(element-height)} - 2px);
}
252 changes: 252 additions & 0 deletions portfolio/assets/sass/components/_form.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Form */

form {
margin: 0 0 _size(element-margin) 0;

> :last-child {
margin-bottom: 0;
}

> .fields {
$gutter: (_size(element-margin) * 0.75);

@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);

> .field {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
padding: $gutter 0 0 $gutter;
width: calc(100% - #{$gutter * 1});

&.half {
width: calc(50% - #{$gutter * 0.5});
}

&.third {
width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
}

&.quarter {
width: calc(25% - #{$gutter * 0.25});
}
}
}

@include breakpoint('<=xsmall') {
> .fields {
$gutter: (_size(element-margin) * 0.75);

width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);

> .field {
padding: $gutter 0 0 $gutter;
width: calc(100% - #{$gutter * 1});

&.half {
width: calc(100% - #{$gutter * 1});
}

&.third {
width: calc(100% - #{$gutter * 1});
}

&.quarter {
width: calc(100% - #{$gutter * 1});
}
}
}
}
}

label {
color: _palette(fg-bold);
display: block;
font-size: 0.8rem;
font-weight: _font(weight);
letter-spacing: _font(letter-spacing);
line-height: 1.5;
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
@include vendor('appearance', 'none');
@include vendor('transition', (
'border-color #{_duration(transition)} ease-in-out',
'box-shadow #{_duration(transition)} ease-in-out',
'background-color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 1rem;
text-decoration: none;
width: 100%;

&:invalid {
box-shadow: none;
}

&:focus {
background: _palette(border-bg);
border-color: _palette(fg-bold);
box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
}
}

select {
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: _size(element-height);
padding-right: _size(element-height);
text-overflow: ellipsis;

option {
color: _palette(fg);
background: _palette(bg);
}

&:focus {
&::-ms-value {
background-color: transparent;
}
}

&::-ms-expand {
display: none;
}
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
height: _size(element-height);
}

textarea {
padding: 0.75rem 1rem;
}

input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2rem;
opacity: 0;
width: 1rem;
z-index: -1;

& + label {
@include icon(false, solid);
@include vendor('user-select', 'none');
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 0.8rem;
font-weight: _font(weight);
margin: 0 0 (_size(element-margin) * 0.25) 0;
padding-left: (_size(element-height) * 0.6) + 1rem;
padding-right: 0.75rem;
position: relative;

&:before {
@include vendor('transition', (
'border-color #{_duration(transition)} ease-in-out',
'box-shadow #{_duration(transition)} ease-in-out',
'background-color #{_duration(transition)} ease-in-out'
));
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
content: '';
display: inline-block;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.6);
//line-height: calc(#{_size(element-height) * 0.6} + 0em);
position: absolute;
text-align: center;
top: -0.15rem;
width: (_size(element-height) * 0.6);
}
}

&:checked + label {
&:before {
background: _palette(fg-bold) !important;
border-color: _palette(fg-bold) !important;
color: _palette(bg);
content: '\f00c';
}
}

&:focus + label {
&:before {
background: _palette(border-bg);
border-color: _palette(fg-bold);
box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
}
}
}

input[type="checkbox"] {
& + label {
&:before {
border-radius: _size(border-radius);
}
}
}

input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}

::-webkit-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

:-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

::-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

:-ms-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

.formerize-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
33 changes: 33 additions & 0 deletions portfolio/assets/sass/components/_icon.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Icon */

.icon {
@include icon;
border-bottom: none;
position: relative;

> .label {
display: none;
}

&:before {
line-height: inherit;
}

&.solid {
&:before {
font-weight: 900;
}
}

&.brands {
&:before {
font-family: 'Font Awesome 5 Brands';
}
}
}
40 changes: 40 additions & 0 deletions portfolio/assets/sass/components/_icons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Icons */

ul.icons {
cursor: default;
list-style: none;
padding-left: 0;

li {
display: inline-block;
padding: 0 0.75em 0 0;

&:last-child {
padding-right: 0;
}

a {
border-radius: 100%;
box-shadow: inset 0 0 0 _size(border-width) _palette(border);
display: inline-block;
height: 2.25rem;
line-height: 2.25rem;
text-align: center;
width: 2.25rem;

&:hover {
background-color: _palette(border-bg);
}

&:active {
background-color: _palette(border-bg-alt);
}
}
}
}
87 changes: 87 additions & 0 deletions portfolio/assets/sass/components/_image.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Image */

.image {
border-radius: _size(border-radius);
border: 0;
display: inline-block;
position: relative;

&:before {
@include vendor('pointer-events', 'none');
background-image: url('../../images/overlay.png');
background-color: _palette(bg-overlay);
border-radius: _size(border-radius);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}

img {
border-radius: _size(border-radius);
display: block;
}

&.left,
&.right {
max-width: 40%;

img {
width: 100%;
}
}

&.left {
float: left;
padding: 0 1.5em 1em 0;
top: 0.25em;
}

&.right {
float: right;
padding: 0 0 1em 1.5em;
top: 0.25em;
}

&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;

img {
width: 100%;
}
}

&.main {
display: block;
margin: (_size(element-margin) * 1.25) 0;
width: 100%;

img {
width: 100%;
}
}

@include breakpoint('<=small') {
&.main {
margin: (_size(element-margin) * 1) 0;
}
}

@include breakpoint('<=xsmall') {
&.main {
margin: (_size(element-margin) * 0.75) 0;
}
}
}
56 changes: 56 additions & 0 deletions portfolio/assets/sass/components/_list.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* List */

ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25em;

li {
padding-left: 0.25em;
}
}

ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;

li {
padding-left: 0.5em;
}

&.alt {
list-style: none;
padding-left: 0;

li {
border-top: solid _size(border-width) _palette(border);
padding: 0.5em 0;

&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
}

dl {
margin: 0 0 _size(element-margin) 0;

dt {
display: block;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}

dd {
margin-left: _size(element-margin);
}
}
81 changes: 81 additions & 0 deletions portfolio/assets/sass/components/_table.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Table */

.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}

table {
margin: 0 0 _size(element-margin) 0;
width: 100%;

tbody {
tr {
border: solid _size(border-width) _palette(border);
border-left: 0;
border-right: 0;

&:nth-child(2n + 1) {
background-color: _palette(border-bg);
}
}
}

td {
padding: 0.75em 0.75em;
}

th {
color: _palette(fg-bold);
font-size: 0.9em;
font-weight: _font(weight-bold);
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}

thead {
border-bottom: solid (_size(border-width) * 2) _palette(border);
}

tfoot {
border-top: solid (_size(border-width) * 2) _palette(border);
}

&.alt {
border-collapse: separate;

tbody {
tr {
td {
border: solid _size(border-width) _palette(border);
border-left-width: 0;
border-top-width: 0;

&:first-child {
border-left-width: _size(border-width);
}
}

&:first-child {
td {
border-top-width: _size(border-width);
}
}
}
}

thead {
border-bottom: 0;
}

tfoot {
border-top: 0;
}
}
}
68 changes: 68 additions & 0 deletions portfolio/assets/sass/layout/_bg.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* BG */

#bg {
@include vendor('transform', 'scale(1.0)');
-webkit-backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;

&:before, &:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

&:before {
@include vendor('transition', 'background-color #{_duration(bg)} ease-in-out');
@include vendor('transition-delay', '#{_duration(intro)}');
background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}),
url('../../images/overlay.png');
background-size: auto,
256px 256px;
background-position: center,
center;
background-repeat: no-repeat,
repeat;
z-index: 2;
}

&:after {
@include vendor('transform', 'scale(1.125)');
@include vendor('transition', (
'transform #{_duration(article)} ease-in-out',
'filter #{_duration(article)} ease-in-out'
));
background-image: url('../../images/bg.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}

body.is-article-visible & {
&:after {
@include vendor('transform', 'scale(1.0825)');
@include vendor('filter', 'blur(0.2rem)');
}
}

body.is-preload & {
&:before {
background-color: _palette(bg-alt);
}
}
}
37 changes: 37 additions & 0 deletions portfolio/assets/sass/layout/_footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Footer */

#footer {
@include vendor('transition', (
'transform #{_duration(article)} ease-in-out',
'filter #{_duration(article)} ease-in-out',
'opacity #{_duration(article)} ease-in-out',
));
width: 100%;
max-width: 100%;
margin-top: 2rem;
text-align: center;

.copyright {
letter-spacing: _font(letter-spacing);
font-size: 0.6rem;
opacity: 0.75;
margin-bottom: 0;
text-transform: uppercase;
}

body.is-article-visible & {
@include vendor('transform', 'scale(0.95)');
@include vendor('filter', 'blur(0.1rem)');
opacity: 0;
}

body.is-preload & {
opacity: 0;
}
}
261 changes: 261 additions & 0 deletions portfolio/assets/sass/layout/_header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Header */

#header {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('align-items', 'center');
@include vendor('transition', (
'transform #{_duration(article)} ease-in-out',
'filter #{_duration(article)} ease-in-out',
'opacity #{_duration(article)} ease-in-out',
));
background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
max-width: 100%;
text-align: center;

> * {
@include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
position: relative;
margin-top: 3.5rem;

&:before {
content: '';
display: block;
position: absolute;
top: calc(-3.5rem - 1px);
left: calc(50% - #{_size(border-width) * 1});
width: _size(border-width);
height: calc(3.5rem + 1px);
background: _palette(border);
}
}

> :first-child {
margin-top: 0;

&:before {
display: none;
}
}

.logo {
width: 5.5rem;
height: 5.5rem;
line-height: 5.5rem;
border: solid _size(border-width) _palette(border);
border-radius: 100%;

.icon {
&:before {
font-size: 2rem;
}
}
}

.content {
border-style: solid;
border-color: _palette(border);
border-top-width: _size(border-width);
border-bottom-width: _size(border-width);
max-width: 100%;

.inner {
@include vendor('transition', (
'max-height #{_duration(intro)} ease',
'padding #{_duration(intro)} ease',
'opacity #{_duration(article)} ease-in-out'
));
@include vendor('transition-delay', '0.25s');
padding: 3rem 2rem;
max-height: 40rem;
overflow: hidden;

> :last-child {
margin-bottom: 0;
}
}

p {
text-transform: uppercase;
letter-spacing: _font(letter-spacing);
font-size: 0.8rem;
line-height: 2;
}
}

nav {
ul {
@include vendor('display', 'flex');
margin-bottom: 0;
list-style: none;
padding-left: 0;
border: solid _size(border-width) _palette(border);
border-radius: _size(border-radius);

li {
padding-left: 0;
border-left: solid _size(border-width) _palette(border);

&:first-child {
border-left: 0;
}

a {
display: block;
min-width: 7.5rem;
height: 2.75rem;
line-height: 2.75rem;
padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
text-transform: uppercase;
letter-spacing: _font(letter-spacing);
font-size: 0.8rem;
border-bottom: 0;

&:hover {
background-color: _palette(border-bg);
}

&:active {
background-color: _palette(border-bg-alt);
}
}
}
}

&.use-middle {
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: calc(50% - #{_size(border-width) * 1});
width: _size(border-width);
height: 100%;
background: _palette(border);
}

ul {
li {
&.is-middle {
border-left: 0;
}
}
}
}
}

body.is-article-visible & {
@include vendor('transform', 'scale(0.95)');
@include vendor('filter', 'blur(0.1rem)');
opacity: 0;
}

body.is-preload & {
> * {
opacity: 0;
}

@include vendor('filter', 'blur(0.125rem)');

.content {
.inner {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
}
}

@include breakpoint('<=medium') {
.content {
p {
br {
display: none;
}
}
}
}

@include breakpoint('<=small') {
> * {
margin-top: 2rem;

&:before {
top: calc(-2rem - 1px);
height: calc(2rem + 1px);
}
}

.logo {
width: 4.75rem;
height: 4.75rem;
line-height: 4.75rem;

.icon {
&:before {
font-size: 1.75rem;
}
}
}

.content {
.inner {
padding: 2.5rem 1rem;
}

p {
line-height: 1.875;
}
}
}

@include breakpoint('<=xsmall') {
padding: 1.5rem 0;

.content {
.inner {
padding: 2.5rem 0;
}
}

nav {
ul {
@include vendor('flex-direction', 'column');
min-width: 10rem;
max-width: 100%;

li {
border-left: 0;
border-top: solid _size(border-width) _palette(border);

&:first-child {
border-top: 0;
}

a {
height: 3rem;
line-height: 3rem;
min-width: 0;
width: 100%;
}
}
}

&.use-middle {
&:after {
display: none;
}
}
}
}
}
102 changes: 102 additions & 0 deletions portfolio/assets/sass/layout/_main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Main */

#main {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
@include vendor('display', 'flex');
@include vendor('align-items', 'center');
@include vendor('justify-content', 'center');
@include vendor('flex-direction', 'column');
position: relative;
max-width: 100%;
z-index: 3;

article {
@include vendor('transform', 'translateY(0.25rem)');
@include vendor('transition', (
'opacity #{_duration(article)} ease-in-out',
'transform #{_duration(article)} ease-in-out'
));
@include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0));
position: relative;
width: 40rem;
max-width: 100%;
background-color: transparentize(_palette(bg), 0.15);
border-radius: _size(border-radius);
opacity: 0;

&.active {
@include vendor('transform', 'translateY(0)');
opacity: 1;
}

.close {
display: block;
position: absolute;
top: 0;
right: 0;
width: 4rem;
height: 4rem;
cursor: pointer;
text-indent: 4rem;
overflow: hidden;
white-space: nowrap;

&:before {
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
content: '';
display: block;
position: absolute;
top: 0.75rem;
left: 0.75rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 100%;
background-position: center;
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(border)}; stroke-width: 1; }</style><line x1="2" y1="2" x2="18" y2="18" /><line x1="18" y1="2" x2="2" y2="18" /></svg>');
background-size: 20px 20px;
background-repeat: no-repeat;
}

&:hover {
&:before {
background-color: _palette(border-bg);
}
}

&:active {
&:before {
background-color: _palette(border-bg-alt);
}
}
}
}

@include breakpoint('<=small') {
article {
@include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0));

.close {
&:before {
top: 0.875rem;
left: 0.875rem;
width: 2.25rem;
height: 2.25rem;
background-size: 14px 14px;
}
}
}
}

@include breakpoint('<=xsmall') {
article {
@include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0));
}
}
}
36 changes: 36 additions & 0 deletions portfolio/assets/sass/layout/_wrapper.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Wrapper */

#wrapper {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('align-items', 'center');
@include vendor('justify-content', 'space-between');
position: relative;
min-height: 100vh;
width: 100%;
padding: 4rem 2rem;
z-index: 3;

&:before {
content: '';
display: block;
}

@include breakpoint('<=xlarge') {
padding: 3rem 2rem;
}

@include breakpoint('<=small') {
padding: 2rem 1rem;
}

@include breakpoint('<=xsmall') {
padding: 1rem;
}
}
223 changes: 223 additions & 0 deletions portfolio/assets/sass/libs/_breakpoints.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */

// Vars.

/// Breakpoints.
/// @var {list}
$breakpoints: () !global;

// Mixins.

/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin breakpoints($x: ()) {
$breakpoints: $x !global;
}

/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
@media screen and (orientation: #{$orientation}) {
@content;
}
}

/// Wraps @content in a @media block using a given query.
/// @param {string} $query Query.
@mixin breakpoint($query: null) {

$breakpoint: null;
$op: null;
$media: null;

// Determine operator, breakpoint.

// Greater than or equal.
@if (str-slice($query, 0, 2) == '>=') {

$op: 'gte';
$breakpoint: str-slice($query, 3);

}

// Less than or equal.
@elseif (str-slice($query, 0, 2) == '<=') {

$op: 'lte';
$breakpoint: str-slice($query, 3);

}

// Greater than.
@elseif (str-slice($query, 0, 1) == '>') {

$op: 'gt';
$breakpoint: str-slice($query, 2);

}

// Less than.
@elseif (str-slice($query, 0, 1) == '<') {

$op: 'lt';
$breakpoint: str-slice($query, 2);

}

// Not.
@elseif (str-slice($query, 0, 1) == '!') {

$op: 'not';
$breakpoint: str-slice($query, 2);

}

// Equal.
@else {

$op: 'eq';
$breakpoint: $query;

}

// Build media.
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {

$a: map-get($breakpoints, $breakpoint);

// Range.
@if (type-of($a) == 'list') {

$x: nth($a, 1);
$y: nth($a, 2);

// Max only.
@if ($x == null) {

// Greater than or equal (>= 0 / anything)
@if ($op == 'gte') {
$media: 'screen';
}

// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}

// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}

// Less than (< 0 / invalid)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: -1px)';
}

// Not (> y)
@elseif ($op == 'not') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}

// Equal (<= y)
@else {
$media: 'screen and (max-width: ' + $y + ')';
}

}

// Min only.
@else if ($y == null) {

// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}

// Less than or equal (<= inf / anything)
@elseif ($op == 'lte') {
$media: 'screen';
}

// Greater than (> inf / invalid)
@elseif ($op == 'gt') {
$media: 'screen and (max-width: -1px)';
}

// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}

// Not (< x)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}

// Equal (>= x)
@else {
$media: 'screen and (min-width: ' + $x + ')';
}

}

// Min and max.
@else {

// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}

// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}

// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}

// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}

// Not (< x and > y)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
}

// Equal (>= x and <= y)
@else {
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
}

}

}

// String.
@else {

// Missing a media type? Prefix with "screen".
@if (str-slice($a, 0, 1) == '(') {
$media: 'screen and ' + $a;
}

// Otherwise, use as-is.
@else {
$media: $a;
}

}

}

// Output.
@media #{$media} {
@content;
}

}
90 changes: 90 additions & 0 deletions portfolio/assets/sass/libs/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {

$result: null;

@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {

$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);

@for $i from 1 through length($list) {

@if $i != $index {
$result: append($result, nth($list, $i));
}

}

}

@return $result;

}

/// Gets a value from a map.
/// @author Hugo Giraudel
/// @param {map} $map Map.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function val($map, $keys...) {

@if nth($keys, 1) == null {
$keys: remove-nth($keys, 1);
}

@each $key in $keys {
$map: map-get($map, $key);
}

@return $map;

}

/// Gets a duration value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
@return val($duration, $keys...);
}

/// Gets a font value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _font($keys...) {
@return val($font, $keys...);
}

/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
@return val($misc, $keys...);
}

/// Gets a palette value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _palette($keys...) {
@return val($palette, $keys...);
}

/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
@return val($size, $keys...);
}
78 changes: 78 additions & 0 deletions portfolio/assets/sass/libs/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $category Optional category to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $category: regular, $where: before) {

text-decoration: none;

&:#{$where} {

@if $content {
content: $content;
}

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;

@if ($category == brands) {
font-family: 'Font Awesome 5 Brands';
}
@elseif ($category == solid) {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@else {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}

}

}

/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {

@if $important {
$important: '!important';
}

$x: 0.1em;

@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}

padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};

}

/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {

$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');

@return url("data:image/svg+xml;charset=utf8,#{$svg}");

}
43 changes: 43 additions & 0 deletions portfolio/assets/sass/libs/_vars.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// Misc.
$misc: (
z-index-base: 10000
);

// Duration.
$duration: (
transition: 0.2s,
bg: 2.5s,
intro: 0.75s,
article: 0.325s
);

// Size.
$size: (
border-radius: 4px,
border-width: 1px,
element-height: 2.75rem,
element-margin: 2rem
);

// Font.
$font: (
family: ('Source Sans Pro', sans-serif),
family-fixed: ('Courier New', monospace),
weight: 300,
weight-bold: 600,
letter-spacing: 0.2rem,
letter-spacing-heading: 0.5rem
);

// Palette.
$palette: (
bg: #1b1f22,
bg-alt: #000000,
bg-overlay: rgba(19,21,25,0.5),
fg: #ffffff,
fg-bold: #ffffff,
fg-light: rgba(255,255,255,0.5),
border: #ffffff,
border-bg: rgba(255,255,255,0.075),
border-bg-alt: rgba(255,255,255,0.175)
);
376 changes: 376 additions & 0 deletions portfolio/assets/sass/libs/_vendor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,376 @@
// vendor.scss v1.0 | @ajlkn | MIT licensed */

// Vars.

/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
'-moz-',
'-webkit-',
'-ms-',
''
);

/// Properties that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-properties: (

// Animation.
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',

// Appearance.
'appearance',

// Backdrop filter.
'backdrop-filter',

// Background image options.
'background-clip',
'background-origin',
'background-size',

// Box sizing.
'box-sizing',

// Clip path.
'clip-path',

// Filter effects.
'filter',

// Flexbox.
'align-content',
'align-items',
'align-self',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'order',

// Font feature.
'font-feature-settings',
'font-language-override',
'font-variant-ligatures',

// Font kerning.
'font-kerning',

// Fragmented borders and backgrounds.
'box-decoration-break',

// Grid layout.
'grid-column',
'grid-column-align',
'grid-column-end',
'grid-column-start',
'grid-row',
'grid-row-align',
'grid-row-end',
'grid-row-start',
'grid-template-columns',
'grid-template-rows',

// Hyphens.
'hyphens',
'word-break',

// Masks.
'mask',
'mask-border',
'mask-border-outset',
'mask-border-repeat',
'mask-border-slice',
'mask-border-source',
'mask-border-width',
'mask-clip',
'mask-composite',
'mask-image',
'mask-origin',
'mask-position',
'mask-repeat',
'mask-size',

// Multicolumn.
'break-after',
'break-before',
'break-inside',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-color',
'column-rule-style',
'column-rule-width',
'column-span',
'column-width',
'columns',

// Object fit.
'object-fit',
'object-position',

// Regions.
'flow-from',
'flow-into',
'region-fragment',

// Scroll snap points.
'scroll-snap-coordinate',
'scroll-snap-destination',
'scroll-snap-points-x',
'scroll-snap-points-y',
'scroll-snap-type',

// Shapes.
'shape-image-threshold',
'shape-margin',
'shape-outside',

// Tab size.
'tab-size',

// Text align last.
'text-align-last',

// Text decoration.
'text-decoration-color',
'text-decoration-line',
'text-decoration-skip',
'text-decoration-style',

// Text emphasis.
'text-emphasis',
'text-emphasis-color',
'text-emphasis-position',
'text-emphasis-style',

// Text size adjust.
'text-size-adjust',

// Text spacing.
'text-spacing',

// Transform.
'transform',
'transform-origin',

// Transform 3D.
'backface-visibility',
'perspective',
'perspective-origin',
'transform-style',

// Transition.
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',

// Unicode bidi.
'unicode-bidi',

// User select.
'user-select',

// Writing mode.
'writing-mode',

);

/// Values that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-values: (

// Cross fade.
'cross-fade',

// Element function.
'element',

// Filter function.
'filter',

// Flexbox.
'flex',
'inline-flex',

// Grab cursors.
'grab',
'grabbing',

// Gradients.
'linear-gradient',
'repeating-linear-gradient',
'radial-gradient',
'repeating-radial-gradient',

// Grid layout.
'grid',
'inline-grid',

// Image set.
'image-set',

// Intrinsic width.
'max-content',
'min-content',
'fit-content',
'fill',
'fill-available',
'stretch',

// Sticky position.
'sticky',

// Transform.
'transform',

// Zoom cursors.
'zoom-in',
'zoom-out',

);

// Functions.

/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {

$result: null;

@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {

$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);

@for $i from 1 through length($list) {

@if $i != $index {
$result: append($result, nth($list, $i));
}

}

}

@return $result;

}

/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {

$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;

}

/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {

@each $string in $strings {
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
}

@return $strings;

}

// Mixins.

/// Wraps @content in vendorized keyframe blocks.
/// @param {string} $name Name.
@mixin keyframes($name) {

@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }

}

/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {

// Determine if property should expand.
$expandProperty: index($vendor-properties, $property);

// Determine if value should expand (and if so, add '-prefix-' placeholder).
$expandValue: false;

@each $x in $value {
@each $y in $vendor-values {
@if $y == str-slice($x, 1, str-length($y)) {

$value: set-nth($value, index($value, $x), '-prefix-' + $x);
$expandValue: true;

}
}
}

// Expand property?
@if $expandProperty {
@each $vendor in $vendor-prefixes {
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}

// Expand just the value?
@elseif $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}

// Neither? Treat them as a normal declaration.
@else {
#{$property}: #{$value};
}

}
50 changes: 50 additions & 0 deletions portfolio/assets/sass/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'fontawesome-all.min.css';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600');

/*
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

// Breakpoints.

@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( 481px, 736px ),
xsmall: ( 361px, 480px ),
xxsmall: ( null, 360px )
));

// Base.

@import 'base/reset';
@import 'base/page';
@import 'base/typography';

// Component.

@import 'components/form';
@import 'components/box';
@import 'components/icon';
@import 'components/image';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
@import 'components/table';
@import 'components/button';

// Layout.

@import 'layout/bg';
@import 'layout/wrapper';
@import 'layout/header';
@import 'layout/main';
@import 'layout/footer';
50 changes: 50 additions & 0 deletions portfolio/assets/sass/noscript.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';

/*
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* BG */

#bg {
body.is-preload & {
&:before {
background-color: transparent;
}
}
}

/* Header */

#header {
body.is-preload & {
> * {
opacity: 1;
}

@include vendor('filter', 'none');

.content {
.inner {
max-height: none;
padding: 3rem 2rem;
opacity: 1;
}
}
}
}

/* Main */

#main {
article {
opacity: 1;
margin: (_size(element-margin) * 2) 0 0 0;
}
}
Binary file added portfolio/assets/webfonts/fa-brands-400.eot
Binary file not shown.
3,442 changes: 3,442 additions & 0 deletions portfolio/assets/webfonts/fa-brands-400.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/assets/webfonts/fa-brands-400.ttf
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-brands-400.woff
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-brands-400.woff2
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-regular-400.eot
Binary file not shown.
803 changes: 803 additions & 0 deletions portfolio/assets/webfonts/fa-regular-400.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/assets/webfonts/fa-regular-400.ttf
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-regular-400.woff
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-regular-400.woff2
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-solid-900.eot
Binary file not shown.
4,649 changes: 4,649 additions & 0 deletions portfolio/assets/webfonts/fa-solid-900.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/assets/webfonts/fa-solid-900.ttf
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-solid-900.woff
Binary file not shown.
Binary file added portfolio/assets/webfonts/fa-solid-900.woff2
Binary file not shown.
Binary file added portfolio/images/arizona-image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/images/bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/images/overlay.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/images/pic01.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/images/pic02.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added portfolio/images/pic03.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
362 changes: 362 additions & 0 deletions portfolio/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,362 @@
<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Dimension by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-gem"></span>
</div>
<div class="content">
<div class="inner">
<h1>Dimension</h1>
<p>A fully responsive site template designed by <a href="https://html5up.net">HTML5 UP</a> and released<br />
for free under the <a href="https://html5up.net/license">Creative Commons</a> license.</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>

<!-- Main -->
<div id="main">

<!-- Intro -->
<article id="intro">
<h2 class="major">Intro</h2>
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>
</article>

<!-- Work -->
<article id="work">
<h2 class="major">Work</h2>
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.</p>
</article>

<!-- About -->
<article id="about">
<h2 class="major">About</h2>
<span class="image main"><img src="images/pic03.jpg" alt="" /></span>
<p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.</p>
</article>

<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</article>

<!-- Elements -->
<article id="elements">
<h2 class="major">Elements</h2>

<section>
<h3 class="major">Text</h3>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<h4>Blockquote</h4>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h4>Preformatted</h4>
<pre><code>i = 0;

while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}

print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>

<section>
<h3 class="major">Lists</h3>

<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>

<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>

<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>

<h4>Actions</h4>
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</section>

<section>
<h3 class="major">Table</h3>
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>

<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>

<section>
<h3 class="major">Buttons</h3>
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</section>

<section>
<h3 class="major">Form</h3>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="demo-name">Name</label>
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
</div>
<div class="field half">
<label for="demo-email">Email</label>
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
</div>
<div class="field">
<label for="demo-category">Category</label>
<select name="demo-category" id="demo-category">
<option value="">-</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="field half">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="field half">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="field">
<label for="demo-message">Message</label>
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</section>

</article>

</div>

<!-- Footer -->
<footer id="footer">
<p class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>

</div>

<!-- BG -->
<div id="bg"></div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

</body>
</html>