Move to SASS
This commit is contained in:
parent
3ab7ab54b4
commit
47c7cf1aa4
11 changed files with 1136 additions and 562 deletions
|
|
@ -1,157 +0,0 @@
|
|||
@import "colours.less";
|
||||
|
||||
.blog-post {
|
||||
&__image-container {
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
background: @Grey-200;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
|
||||
&--container{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&--tagline {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding: 2px;
|
||||
background: @Grey-200;
|
||||
border-radius: 2px;
|
||||
border: 1px solid @Grey-400;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
border-left: 4px solid @primary;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
padding-left:10px;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
|
||||
/**
|
||||
* Obsidian style
|
||||
* ported by Alexander Marenin (http://github.com/ioncreature)
|
||||
*/
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: #282b2e;
|
||||
color: #e0e2e4;
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-selector-id {
|
||||
color: #93c763;
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: #ffcd22;
|
||||
}
|
||||
|
||||
.hljs-attribute {
|
||||
color: #668bb0;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-section {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #d39745;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #557182;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-emphasis,
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #8cbbad;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-symbol {
|
||||
color: #ec7600;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: #818e96;
|
||||
}
|
||||
|
||||
.hljs-selector-class {
|
||||
color: #A082BD
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__next {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
&__title {
|
||||
display: flex;
|
||||
|
||||
&__label {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
border-collapse: collapse;
|
||||
|
||||
&__post:hover {
|
||||
background: @Grey-300;
|
||||
}
|
||||
}
|
||||
157
Website/wwwroot/css/blog.scss
Normal file
157
Website/wwwroot/css/blog.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
@import "colours.scss";
|
||||
|
||||
.blog-post {
|
||||
&__image-container {
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
background: $Grey-200;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
|
||||
&--container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&--tagline {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre)>code {
|
||||
padding: 2px;
|
||||
background: $Grey-200;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $Grey-400;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
border-left: 4px solid $primary;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
padding-left: 10px;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
|
||||
/**
|
||||
* Obsidian style
|
||||
* ported by Alexander Marenin (http://github.com/ioncreature)
|
||||
*/
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: #282b2e;
|
||||
color: #e0e2e4;
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-selector-id {
|
||||
color: #93c763;
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: #ffcd22;
|
||||
}
|
||||
|
||||
.hljs-attribute {
|
||||
color: #668bb0;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-section {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #d39745;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #557182;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-emphasis,
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #8cbbad;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-symbol {
|
||||
color: #ec7600;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: #818e96;
|
||||
}
|
||||
|
||||
.hljs-selector-class {
|
||||
color: #A082BD
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__next {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
&__title {
|
||||
display: flex;
|
||||
|
||||
&__label {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
border-collapse: collapse;
|
||||
|
||||
&__post:hover {
|
||||
background: $Grey-300;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
@import "material_colours.less";
|
||||
|
||||
@background:@Grey-50;
|
||||
|
||||
@primary-100:@Red-100;
|
||||
@primary-200:@Red-200;
|
||||
@primary-300:@Red-300;
|
||||
@primary-400:@Red-400;
|
||||
@primary-500:@Red-500;
|
||||
@primary-600:@Red-600;
|
||||
@primary-700:@Red-700;
|
||||
@primary-800:@Red-800;
|
||||
@primary-900:@Red-900;
|
||||
|
||||
@accent-100:@Teal-100;
|
||||
@accent-200:@Teal-200;
|
||||
@accent-400:@Teal-400;
|
||||
@accent-700:@Teal-700;
|
||||
|
||||
@primary:@primary-600;
|
||||
@accent:@accent-400;
|
||||
@control:@Grey-200;
|
||||
@control2:@Grey-300;
|
||||
23
Website/wwwroot/css/colours.scss
Normal file
23
Website/wwwroot/css/colours.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
@import "material_colours.scss";
|
||||
|
||||
$background:$Grey-50;
|
||||
|
||||
$primary-100:$Red-100;
|
||||
$primary-200:$Red-200;
|
||||
$primary-300:$Red-300;
|
||||
$primary-400:$Red-400;
|
||||
$primary-500:$Red-500;
|
||||
$primary-600:$Red-600;
|
||||
$primary-700:$Red-700;
|
||||
$primary-800:$Red-800;
|
||||
$primary-900:$Red-900;
|
||||
|
||||
$accent-100:$Teal-100;
|
||||
$accent-200:$Teal-200;
|
||||
$accent-400:$Teal-400;
|
||||
$accent-700:$Teal-700;
|
||||
|
||||
$primary:$primary-600;
|
||||
$accent:$accent-400;
|
||||
$control:$Grey-200;
|
||||
$control2:$Grey-300;
|
||||
|
|
@ -1,272 +0,0 @@
|
|||
@Red-50:#ffebee;
|
||||
@Red-100:#ffcdd2;
|
||||
@Red-200:#ef9a9a;
|
||||
@Red-300:#e57373;
|
||||
@Red-400:#ef5350;
|
||||
@Red-500:#f44336;
|
||||
@Red-600:#e53935;
|
||||
@Red-700:#d32f2f;
|
||||
@Red-800:#c62828;
|
||||
@Red-900:#b71c1c;
|
||||
@Red-A100:#ff8a80;
|
||||
@Red-A200:#ff5252;
|
||||
@Red-A400:#ff1744;
|
||||
@Red-A700:#d50000;
|
||||
|
||||
@Pink-50:#fce4ec;
|
||||
@Pink-100:#f8bbd0;
|
||||
@Pink-200:#f48fb1;
|
||||
@Pink-300:#f06292;
|
||||
@Pink-400:#ec407a;
|
||||
@Pink-500:#e91e63;
|
||||
@Pink-600:#d81b60;
|
||||
@Pink-700:#c2185b;
|
||||
@Pink-800:#ad1457;
|
||||
@Pink-900:#880e4f;
|
||||
@Pink-A100:#ff80ab;
|
||||
@Pink-A200:#ff4081;
|
||||
@Pink-A400:#f50057;
|
||||
@Pink-A700:#c51162;
|
||||
|
||||
@Purple-50:#f3e5f5;
|
||||
@Purple-100:#e1bee7;
|
||||
@Purple-200:#ce93d8;
|
||||
@Purple-300:#ba68c8;
|
||||
@Purple-400:#ab47bc;
|
||||
@Purple-500:#9c27b0;
|
||||
@Purple-600:#8e24aa;
|
||||
@Purple-700:#7b1fa2;
|
||||
@Purple-800:#6a1b9a;
|
||||
@Purple-900:#4a148c;
|
||||
@Purple-A100:#ea80fc;
|
||||
@Purple-A200:#e040fb;
|
||||
@Purple-A400:#d500f9;
|
||||
@Purple-A700:#aa00ff;
|
||||
|
||||
@DeepPurple-50:#ede7f6;
|
||||
@DeepPurple-50100:#d1c4e9;
|
||||
@DeepPurple-50200:#b39ddb;
|
||||
@DeepPurple-50300:#9575cd;
|
||||
@DeepPurple-50400:#7e57c2;
|
||||
@DeepPurple-50500:#673ab7;
|
||||
@DeepPurple-50600:#5e35b1;
|
||||
@DeepPurple-50700:#512da8;
|
||||
@DeepPurple-50800:#4527a0;
|
||||
@DeepPurple-50900:#311b92;
|
||||
@DeepPurple-50A100:#b388ff;
|
||||
@DeepPurple-50A200:#7c4dff;
|
||||
@DeepPurple-50A400:#651fff;
|
||||
@DeepPurple-50A700:#6200ea;
|
||||
|
||||
@Indigo-50:#e8eaf6;
|
||||
@Indigo-100:#c5cae9;
|
||||
@Indigo-200:#9fa8da;
|
||||
@Indigo-300:#7986cb;
|
||||
@Indigo-400:#5c6bc0;
|
||||
@Indigo-500:#3f51b5;
|
||||
@Indigo-600:#3949ab;
|
||||
@Indigo-700:#303f9f;
|
||||
@Indigo-800:#283593;
|
||||
@Indigo-900:#1a237e;
|
||||
@Indigo-A100:#8c9eff;
|
||||
@Indigo-A200:#536dfe;
|
||||
@Indigo-A400:#3d5afe;
|
||||
@Indigo-A700:#304ffe;
|
||||
|
||||
@Blue-50:#e3f2fd;
|
||||
@Blue-100:#bbdefb;
|
||||
@Blue-200:#90caf9;
|
||||
@Blue-300:#64b5f6;
|
||||
@Blue-400:#42a5f5;
|
||||
@Blue-500:#2196f3;
|
||||
@Blue-600:#1e88e5;
|
||||
@Blue-700:#1976d2;
|
||||
@Blue-800:#1565c0;
|
||||
@Blue-900:#0d47a1;
|
||||
@Blue-A100:#82b1ff;
|
||||
@Blue-A200:#448aff;
|
||||
@Blue-A400:#2979ff;
|
||||
@Blue-A700:#2962ff;
|
||||
|
||||
@LightBlue-50:#e1f5fe;
|
||||
@LightBlue-100:#b3e5fc;
|
||||
@LightBlue-200:#81d4fa;
|
||||
@LightBlue-300:#4fc3f7;
|
||||
@LightBlue-400:#29b6f6;
|
||||
@LightBlue-500:#03a9f4;
|
||||
@LightBlue-600:#039be5;
|
||||
@LightBlue-700:#0288d1;
|
||||
@LightBlue-800:#0277bd;
|
||||
@LightBlue-900:#01579b;
|
||||
@LightBlue-A100:#80d8ff;
|
||||
@LightBlue-A200:#40c4ff;
|
||||
@LightBlue-A400:#00b0ff;
|
||||
@LightBlue-A700:#0091ea;
|
||||
|
||||
@Cyan-50:#e0f7fa;
|
||||
@Cyan-100:#b2ebf2;
|
||||
@Cyan-200:#80deea;
|
||||
@Cyan-300:#4dd0e1;
|
||||
@Cyan-400:#26c6da;
|
||||
@Cyan-500:#00bcd4;
|
||||
@Cyan-600:#00acc1;
|
||||
@Cyan-700:#0097a7;
|
||||
@Cyan-800:#00838f;
|
||||
@Cyan-900:#006064;
|
||||
@Cyan-A100:#84ffff;
|
||||
@Cyan-A200:#18ffff;
|
||||
@Cyan-A400:#00e5ff;
|
||||
@Cyan-A700:#00b8d4;
|
||||
|
||||
@Teal-50:#e0f2f1;
|
||||
@Teal-100:#b2dfdb;
|
||||
@Teal-200:#80cbc4;
|
||||
@Teal-300:#4db6ac;
|
||||
@Teal-400:#26a69a;
|
||||
@Teal-500:#009688;
|
||||
@Teal-600:#00897b;
|
||||
@Teal-700:#00796b;
|
||||
@Teal-800:#00695c;
|
||||
@Teal-900:#004d40;
|
||||
@Teal-A100:#a7ffeb;
|
||||
@Teal-A200:#64ffda;
|
||||
@Teal-A400:#1de9b6;
|
||||
@Teal-A700:#00bfa5;
|
||||
|
||||
@Green-50:#e8f5e9;
|
||||
@Green-100:#c8e6c9;
|
||||
@Green-200:#a5d6a7;
|
||||
@Green-300:#81c784;
|
||||
@Green-400:#66bb6a;
|
||||
@Green-500:#4caf50;
|
||||
@Green-600:#43a047;
|
||||
@Green-700:#388e3c;
|
||||
@Green-800:#2e7d32;
|
||||
@Green-900:#1b5e20;
|
||||
@Green-A100:#b9f6ca;
|
||||
@Green-A200:#69f0ae;
|
||||
@Green-A400:#00e676;
|
||||
@Green-A700:#00c853;
|
||||
|
||||
@LightGreen-50:#f1f8e9;
|
||||
@LightGreen-100:#dcedc8;
|
||||
@LightGreen-200:#c5e1a5;
|
||||
@LightGreen-300:#aed581;
|
||||
@LightGreen-400:#9ccc65;
|
||||
@LightGreen-500:#8bc34a;
|
||||
@LightGreen-600:#7cb342;
|
||||
@LightGreen-700:#689f38;
|
||||
@LightGreen-800:#558b2f;
|
||||
@LightGreen-900:#33691e;
|
||||
@LightGreen-A100:#ccff90;
|
||||
@LightGreen-A200:#b2ff59;
|
||||
@LightGreen-A400:#76ff03;
|
||||
@LightGreen-A700:#64dd17;
|
||||
|
||||
@Lime-50:#f9fbe7;
|
||||
@Lime-100:#f0f4c3;
|
||||
@Lime-200:#e6ee9c;
|
||||
@Lime-300:#dce775;
|
||||
@Lime-400:#d4e157;
|
||||
@Lime-500:#cddc39;
|
||||
@Lime-600:#c0ca33;
|
||||
@Lime-700:#afb42b;
|
||||
@Lime-800:#9e9d24;
|
||||
@Lime-900:#827717;
|
||||
@Lime-A100:#f4ff81;
|
||||
@Lime-A200:#eeff41;
|
||||
@Lime-A400:#c6ff00;
|
||||
@Lime-A700:#aeea00;
|
||||
|
||||
@Yellow-50:#fffde7;
|
||||
@Yellow-100:#fff9c4;
|
||||
@Yellow-200:#fff59d;
|
||||
@Yellow-300:#fff176;
|
||||
@Yellow-400:#ffee58;
|
||||
@Yellow-500:#ffeb3b;
|
||||
@Yellow-600:#fdd835;
|
||||
@Yellow-700:#fbc02d;
|
||||
@Yellow-800:#f9a825;
|
||||
@Yellow-900:#f57f17;
|
||||
@Yellow-A100:#ffff8d;
|
||||
@Yellow-A200:#ffff00;
|
||||
@Yellow-A400:#ffea00;
|
||||
@Yellow-A700:#ffd600;
|
||||
|
||||
@Amber-50:#fff8e1;
|
||||
@Amber-100:#ffecb3;
|
||||
@Amber-200:#ffe082;
|
||||
@Amber-300:#ffd54f;
|
||||
@Amber-400:#ffca28;
|
||||
@Amber-500:#ffc107;
|
||||
@Amber-600:#ffb300;
|
||||
@Amber-700:#ffa000;
|
||||
@Amber-800:#ff8f00;
|
||||
@Amber-900:#ff6f00;
|
||||
@Amber-A100:#ffe57f;
|
||||
@Amber-A200:#ffd740;
|
||||
@Amber-A400:#ffc400;
|
||||
@Amber-A700:#ffab00;
|
||||
|
||||
@Orange-50:#fff3e0;
|
||||
@Orange-100:#ffe0b2;
|
||||
@Orange-200:#ffcc80;
|
||||
@Orange-300:#ffb74d;
|
||||
@Orange-400:#ffa726;
|
||||
@Orange-500:#ff9800;
|
||||
@Orange-600:#fb8c00;
|
||||
@Orange-700:#f57c00;
|
||||
@Orange-800:#ef6c00;
|
||||
@Orange-900:#e65100;
|
||||
@Orange-A100:#ffd180;
|
||||
@Orange-A200:#ffab40;
|
||||
@Orange-A400:#ff9100;
|
||||
@Orange-A700:#ff6d00;
|
||||
|
||||
@DeepOrange-50:#fbe9e7;
|
||||
@DeepOrange-100:#ffccbc;
|
||||
@DeepOrange-200:#ffab91;
|
||||
@DeepOrange-300:#ff8a65;
|
||||
@DeepOrange-400:#ff7043;
|
||||
@DeepOrange-500:#ff5722;
|
||||
@DeepOrange-600:#f4511e;
|
||||
@DeepOrange-700:#e64a19;
|
||||
@DeepOrange-800:#d84315;
|
||||
@DeepOrange-900:#bf360c;
|
||||
@DeepOrange-A100:#ff9e80;
|
||||
@DeepOrange-A200:#ff6e40;
|
||||
@DeepOrange-A400:#ff3d00;
|
||||
@DeepOrange-A700:#dd2c00;
|
||||
|
||||
@Brown-50:#efebe9;
|
||||
@Brown-100:#d7ccc8;
|
||||
@Brown-200:#bcaaa4;
|
||||
@Brown-300:#a1887f;
|
||||
@Brown-400:#8d6e63;
|
||||
@Brown-500:#795548;
|
||||
@Brown-600:#6d4c41;
|
||||
@Brown-700:#5d4037;
|
||||
@Brown-800:#4e342e;
|
||||
@Brown-900:#3e2723;
|
||||
|
||||
@Grey-50:#fafafa;
|
||||
@Grey-100:#f5f5f5;
|
||||
@Grey-200:#eeeeee;
|
||||
@Grey-300:#e0e0e0;
|
||||
@Grey-400:#bdbdbd;
|
||||
@Grey-500:#9e9e9e;
|
||||
@Grey-600:#757575;
|
||||
@Grey-700:#616161;
|
||||
@Grey-800:#424242;
|
||||
@Grey-900:#212121;
|
||||
|
||||
@BlueGrey-50:#eceff1;
|
||||
@BlueGrey-100:#cfd8dc;
|
||||
@BlueGrey-200:#b0bec5;
|
||||
@BlueGrey-300:#90a4ae;
|
||||
@BlueGrey-400:#78909c;
|
||||
@BlueGrey-500:#607d8b;
|
||||
@BlueGrey-600:#546e7a;
|
||||
@BlueGrey-700:#455a64;
|
||||
@BlueGrey-800:#37474f;
|
||||
@BlueGrey-900:#263238;
|
||||
272
Website/wwwroot/css/material_colours.scss
Normal file
272
Website/wwwroot/css/material_colours.scss
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
$Red-50:#ffebee;
|
||||
$Red-100:#ffcdd2;
|
||||
$Red-200:#ef9a9a;
|
||||
$Red-300:#e57373;
|
||||
$Red-400:#ef5350;
|
||||
$Red-500:#f44336;
|
||||
$Red-600:#e53935;
|
||||
$Red-700:#d32f2f;
|
||||
$Red-800:#c62828;
|
||||
$Red-900:#b71c1c;
|
||||
$Red-A100:#ff8a80;
|
||||
$Red-A200:#ff5252;
|
||||
$Red-A400:#ff1744;
|
||||
$Red-A700:#d50000;
|
||||
|
||||
$Pink-50:#fce4ec;
|
||||
$Pink-100:#f8bbd0;
|
||||
$Pink-200:#f48fb1;
|
||||
$Pink-300:#f06292;
|
||||
$Pink-400:#ec407a;
|
||||
$Pink-500:#e91e63;
|
||||
$Pink-600:#d81b60;
|
||||
$Pink-700:#c2185b;
|
||||
$Pink-800:#ad1457;
|
||||
$Pink-900:#880e4f;
|
||||
$Pink-A100:#ff80ab;
|
||||
$Pink-A200:#ff4081;
|
||||
$Pink-A400:#f50057;
|
||||
$Pink-A700:#c51162;
|
||||
|
||||
$Purple-50:#f3e5f5;
|
||||
$Purple-100:#e1bee7;
|
||||
$Purple-200:#ce93d8;
|
||||
$Purple-300:#ba68c8;
|
||||
$Purple-400:#ab47bc;
|
||||
$Purple-500:#9c27b0;
|
||||
$Purple-600:#8e24aa;
|
||||
$Purple-700:#7b1fa2;
|
||||
$Purple-800:#6a1b9a;
|
||||
$Purple-900:#4a148c;
|
||||
$Purple-A100:#ea80fc;
|
||||
$Purple-A200:#e040fb;
|
||||
$Purple-A400:#d500f9;
|
||||
$Purple-A700:#aa00ff;
|
||||
|
||||
$DeepPurple-50:#ede7f6;
|
||||
$DeepPurple-50100:#d1c4e9;
|
||||
$DeepPurple-50200:#b39ddb;
|
||||
$DeepPurple-50300:#9575cd;
|
||||
$DeepPurple-50400:#7e57c2;
|
||||
$DeepPurple-50500:#673ab7;
|
||||
$DeepPurple-50600:#5e35b1;
|
||||
$DeepPurple-50700:#512da8;
|
||||
$DeepPurple-50800:#4527a0;
|
||||
$DeepPurple-50900:#311b92;
|
||||
$DeepPurple-50A100:#b388ff;
|
||||
$DeepPurple-50A200:#7c4dff;
|
||||
$DeepPurple-50A400:#651fff;
|
||||
$DeepPurple-50A700:#6200ea;
|
||||
|
||||
$Indigo-50:#e8eaf6;
|
||||
$Indigo-100:#c5cae9;
|
||||
$Indigo-200:#9fa8da;
|
||||
$Indigo-300:#7986cb;
|
||||
$Indigo-400:#5c6bc0;
|
||||
$Indigo-500:#3f51b5;
|
||||
$Indigo-600:#3949ab;
|
||||
$Indigo-700:#303f9f;
|
||||
$Indigo-800:#283593;
|
||||
$Indigo-900:#1a237e;
|
||||
$Indigo-A100:#8c9eff;
|
||||
$Indigo-A200:#536dfe;
|
||||
$Indigo-A400:#3d5afe;
|
||||
$Indigo-A700:#304ffe;
|
||||
|
||||
$Blue-50:#e3f2fd;
|
||||
$Blue-100:#bbdefb;
|
||||
$Blue-200:#90caf9;
|
||||
$Blue-300:#64b5f6;
|
||||
$Blue-400:#42a5f5;
|
||||
$Blue-500:#2196f3;
|
||||
$Blue-600:#1e88e5;
|
||||
$Blue-700:#1976d2;
|
||||
$Blue-800:#1565c0;
|
||||
$Blue-900:#0d47a1;
|
||||
$Blue-A100:#82b1ff;
|
||||
$Blue-A200:#448aff;
|
||||
$Blue-A400:#2979ff;
|
||||
$Blue-A700:#2962ff;
|
||||
|
||||
$LightBlue-50:#e1f5fe;
|
||||
$LightBlue-100:#b3e5fc;
|
||||
$LightBlue-200:#81d4fa;
|
||||
$LightBlue-300:#4fc3f7;
|
||||
$LightBlue-400:#29b6f6;
|
||||
$LightBlue-500:#03a9f4;
|
||||
$LightBlue-600:#039be5;
|
||||
$LightBlue-700:#0288d1;
|
||||
$LightBlue-800:#0277bd;
|
||||
$LightBlue-900:#01579b;
|
||||
$LightBlue-A100:#80d8ff;
|
||||
$LightBlue-A200:#40c4ff;
|
||||
$LightBlue-A400:#00b0ff;
|
||||
$LightBlue-A700:#0091ea;
|
||||
|
||||
$Cyan-50:#e0f7fa;
|
||||
$Cyan-100:#b2ebf2;
|
||||
$Cyan-200:#80deea;
|
||||
$Cyan-300:#4dd0e1;
|
||||
$Cyan-400:#26c6da;
|
||||
$Cyan-500:#00bcd4;
|
||||
$Cyan-600:#00acc1;
|
||||
$Cyan-700:#0097a7;
|
||||
$Cyan-800:#00838f;
|
||||
$Cyan-900:#006064;
|
||||
$Cyan-A100:#84ffff;
|
||||
$Cyan-A200:#18ffff;
|
||||
$Cyan-A400:#00e5ff;
|
||||
$Cyan-A700:#00b8d4;
|
||||
|
||||
$Teal-50:#e0f2f1;
|
||||
$Teal-100:#b2dfdb;
|
||||
$Teal-200:#80cbc4;
|
||||
$Teal-300:#4db6ac;
|
||||
$Teal-400:#26a69a;
|
||||
$Teal-500:#009688;
|
||||
$Teal-600:#00897b;
|
||||
$Teal-700:#00796b;
|
||||
$Teal-800:#00695c;
|
||||
$Teal-900:#004d40;
|
||||
$Teal-A100:#a7ffeb;
|
||||
$Teal-A200:#64ffda;
|
||||
$Teal-A400:#1de9b6;
|
||||
$Teal-A700:#00bfa5;
|
||||
|
||||
$Green-50:#e8f5e9;
|
||||
$Green-100:#c8e6c9;
|
||||
$Green-200:#a5d6a7;
|
||||
$Green-300:#81c784;
|
||||
$Green-400:#66bb6a;
|
||||
$Green-500:#4caf50;
|
||||
$Green-600:#43a047;
|
||||
$Green-700:#388e3c;
|
||||
$Green-800:#2e7d32;
|
||||
$Green-900:#1b5e20;
|
||||
$Green-A100:#b9f6ca;
|
||||
$Green-A200:#69f0ae;
|
||||
$Green-A400:#00e676;
|
||||
$Green-A700:#00c853;
|
||||
|
||||
$LightGreen-50:#f1f8e9;
|
||||
$LightGreen-100:#dcedc8;
|
||||
$LightGreen-200:#c5e1a5;
|
||||
$LightGreen-300:#aed581;
|
||||
$LightGreen-400:#9ccc65;
|
||||
$LightGreen-500:#8bc34a;
|
||||
$LightGreen-600:#7cb342;
|
||||
$LightGreen-700:#689f38;
|
||||
$LightGreen-800:#558b2f;
|
||||
$LightGreen-900:#33691e;
|
||||
$LightGreen-A100:#ccff90;
|
||||
$LightGreen-A200:#b2ff59;
|
||||
$LightGreen-A400:#76ff03;
|
||||
$LightGreen-A700:#64dd17;
|
||||
|
||||
$Lime-50:#f9fbe7;
|
||||
$Lime-100:#f0f4c3;
|
||||
$Lime-200:#e6ee9c;
|
||||
$Lime-300:#dce775;
|
||||
$Lime-400:#d4e157;
|
||||
$Lime-500:#cddc39;
|
||||
$Lime-600:#c0ca33;
|
||||
$Lime-700:#afb42b;
|
||||
$Lime-800:#9e9d24;
|
||||
$Lime-900:#827717;
|
||||
$Lime-A100:#f4ff81;
|
||||
$Lime-A200:#eeff41;
|
||||
$Lime-A400:#c6ff00;
|
||||
$Lime-A700:#aeea00;
|
||||
|
||||
$Yellow-50:#fffde7;
|
||||
$Yellow-100:#fff9c4;
|
||||
$Yellow-200:#fff59d;
|
||||
$Yellow-300:#fff176;
|
||||
$Yellow-400:#ffee58;
|
||||
$Yellow-500:#ffeb3b;
|
||||
$Yellow-600:#fdd835;
|
||||
$Yellow-700:#fbc02d;
|
||||
$Yellow-800:#f9a825;
|
||||
$Yellow-900:#f57f17;
|
||||
$Yellow-A100:#ffff8d;
|
||||
$Yellow-A200:#ffff00;
|
||||
$Yellow-A400:#ffea00;
|
||||
$Yellow-A700:#ffd600;
|
||||
|
||||
$Amber-50:#fff8e1;
|
||||
$Amber-100:#ffecb3;
|
||||
$Amber-200:#ffe082;
|
||||
$Amber-300:#ffd54f;
|
||||
$Amber-400:#ffca28;
|
||||
$Amber-500:#ffc107;
|
||||
$Amber-600:#ffb300;
|
||||
$Amber-700:#ffa000;
|
||||
$Amber-800:#ff8f00;
|
||||
$Amber-900:#ff6f00;
|
||||
$Amber-A100:#ffe57f;
|
||||
$Amber-A200:#ffd740;
|
||||
$Amber-A400:#ffc400;
|
||||
$Amber-A700:#ffab00;
|
||||
|
||||
$Orange-50:#fff3e0;
|
||||
$Orange-100:#ffe0b2;
|
||||
$Orange-200:#ffcc80;
|
||||
$Orange-300:#ffb74d;
|
||||
$Orange-400:#ffa726;
|
||||
$Orange-500:#ff9800;
|
||||
$Orange-600:#fb8c00;
|
||||
$Orange-700:#f57c00;
|
||||
$Orange-800:#ef6c00;
|
||||
$Orange-900:#e65100;
|
||||
$Orange-A100:#ffd180;
|
||||
$Orange-A200:#ffab40;
|
||||
$Orange-A400:#ff9100;
|
||||
$Orange-A700:#ff6d00;
|
||||
|
||||
$DeepOrange-50:#fbe9e7;
|
||||
$DeepOrange-100:#ffccbc;
|
||||
$DeepOrange-200:#ffab91;
|
||||
$DeepOrange-300:#ff8a65;
|
||||
$DeepOrange-400:#ff7043;
|
||||
$DeepOrange-500:#ff5722;
|
||||
$DeepOrange-600:#f4511e;
|
||||
$DeepOrange-700:#e64a19;
|
||||
$DeepOrange-800:#d84315;
|
||||
$DeepOrange-900:#bf360c;
|
||||
$DeepOrange-A100:#ff9e80;
|
||||
$DeepOrange-A200:#ff6e40;
|
||||
$DeepOrange-A400:#ff3d00;
|
||||
$DeepOrange-A700:#dd2c00;
|
||||
|
||||
$Brown-50:#efebe9;
|
||||
$Brown-100:#d7ccc8;
|
||||
$Brown-200:#bcaaa4;
|
||||
$Brown-300:#a1887f;
|
||||
$Brown-400:#8d6e63;
|
||||
$Brown-500:#795548;
|
||||
$Brown-600:#6d4c41;
|
||||
$Brown-700:#5d4037;
|
||||
$Brown-800:#4e342e;
|
||||
$Brown-900:#3e2723;
|
||||
|
||||
$Grey-50:#fafafa;
|
||||
$Grey-100:#f5f5f5;
|
||||
$Grey-200:#eeeeee;
|
||||
$Grey-300:#e0e0e0;
|
||||
$Grey-400:#bdbdbd;
|
||||
$Grey-500:#9e9e9e;
|
||||
$Grey-600:#757575;
|
||||
$Grey-700:#616161;
|
||||
$Grey-800:#424242;
|
||||
$Grey-900:#212121;
|
||||
|
||||
$BlueGrey-50:#eceff1;
|
||||
$BlueGrey-100:#cfd8dc;
|
||||
$BlueGrey-200:#b0bec5;
|
||||
$BlueGrey-300:#90a4ae;
|
||||
$BlueGrey-400:#78909c;
|
||||
$BlueGrey-500:#607d8b;
|
||||
$BlueGrey-600:#546e7a;
|
||||
$BlueGrey-700:#455a64;
|
||||
$BlueGrey-800:#37474f;
|
||||
$BlueGrey-900:#263238;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Public+Sans&display=swap');
|
||||
@import "colours.less";
|
||||
@fa-font-path: "../webfonts";
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/less/fontawesome.less";
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/less/solid.less";
|
||||
@import "colours.scss";
|
||||
$fa-font-path: "../webfonts";
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -24,8 +24,8 @@ body {
|
|||
color: #333;
|
||||
}
|
||||
|
||||
::selection{
|
||||
background: @primary;
|
||||
::selection {
|
||||
background: $primary;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
|
@ -39,11 +39,11 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: @primary;
|
||||
color: $primary;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
background: linear-gradient(to bottom, @primary 0%, @primary 0%);
|
||||
background: linear-gradient(to bottom, $primary 0%, $primary 0%);
|
||||
background-position: 0 100%;
|
||||
background-size: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
|
|
@ -56,15 +56,20 @@ a {
|
|||
|
||||
&[href^="http"] {
|
||||
&:after {
|
||||
.fa-icon;
|
||||
.fas;
|
||||
content: @fa-var-external-link-alt;
|
||||
@extend %fa-icon;
|
||||
@extend .fas;
|
||||
content: $fa-var-external-link-alt;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -128,7 +133,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
height: 200px;
|
||||
border: 5px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
|
||||
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 1);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -145,20 +150,21 @@ h1, h2, h3, h4, h5, h6 {
|
|||
|
||||
nav {
|
||||
flex: 0 0 250px;
|
||||
border-left: 1px solid @Grey-400;
|
||||
border-left: 1px solid $Grey-400;
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
#menu-toggle, [for="menu-toggle"] {
|
||||
#menu-toggle,
|
||||
[for="menu-toggle"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-list{
|
||||
.nav-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&__link{
|
||||
&__link {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -176,8 +182,9 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background: @accent;
|
||||
button,
|
||||
.button {
|
||||
background: $accent;
|
||||
border: none;
|
||||
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
|
||||
padding: 10px 20px;
|
||||
|
|
@ -188,7 +195,7 @@ button, .button {
|
|||
|
||||
.round-button {
|
||||
border-radius: 50%;
|
||||
background: @accent;
|
||||
background: $accent;
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -206,7 +213,7 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
@import "blog.less";
|
||||
@import "blog.scss";
|
||||
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
|
|
@ -219,7 +226,7 @@ form {
|
|||
|
||||
nav {
|
||||
flex: 1 1 auto;
|
||||
border:none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
|
||||
|
|
@ -229,7 +236,7 @@ form {
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
#menu-toggle:checked + .nav-container{
|
||||
#menu-toggle:checked+.nav-container {
|
||||
max-height: 1000px;
|
||||
margin-top: 20px;
|
||||
opacity: 1;
|
||||
|
|
@ -239,10 +246,10 @@ form {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.nav-container{
|
||||
.nav-container {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition:all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -252,14 +259,14 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
.header{
|
||||
.header {
|
||||
padding: 20px 10px;
|
||||
|
||||
&__blurb {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
&__headshot{
|
||||
&__headshot {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
max-width: 200px;
|
||||
Loading…
Add table
Add a link
Reference in a new issue