From a0cd967f0a4fab5dbbabb7a19fc1e59a2b74725c Mon Sep 17 00:00:00 2001
From: Justin Edmund <383021+jedmund@users.noreply.github.com>
Date: Fri, 12 Jul 2024 03:37:29 -0400
Subject: [PATCH] Basic styles
---
src/lib/styles/fonts.css | 27 ++++++
src/lib/styles/globals.scss | 2 +
src/lib/styles/mixins.scss | 68 +++++++++++++++
src/lib/styles/reset.css | 153 ++++++++++++++++++++++++++++++++++
src/lib/styles/themes.scss | 10 +++
src/lib/styles/variables.scss | 115 +++++++++++++++++++++++++
src/routes/+layout.svelte | 36 ++++++++
7 files changed, 411 insertions(+)
create mode 100644 src/lib/styles/fonts.css
create mode 100644 src/lib/styles/globals.scss
create mode 100644 src/lib/styles/mixins.scss
create mode 100644 src/lib/styles/reset.css
create mode 100644 src/lib/styles/themes.scss
create mode 100644 src/lib/styles/variables.scss
create mode 100644 src/routes/+layout.svelte
diff --git a/src/lib/styles/fonts.css b/src/lib/styles/fonts.css
new file mode 100644
index 0000000..8fb9f8a
--- /dev/null
+++ b/src/lib/styles/fonts.css
@@ -0,0 +1,27 @@
+@font-face {
+ font-family: 'cstd';
+ src: url('../fonts/DwMbyrnCMiZMVFXBZkwz.eot'); /* IE9 Compat Modes */
+ src:
+ url('../fonts/DwMbyrnCMiZMVFXBZkwz.eot?#iefix') format('embedded-opentype'),
+ /* IE6-IE8 */ url('../fonts/DwMbyrnCMiZMVFXBZkwz.woff') format('woff'),
+ /* Modern Browsers */ url('../fonts/DwMbyrnCMiZMVFXBZkwz.ttf') format('truetype'),
+ /* Safari, Android, iOS */
+ url('../fonts/DwMbyrnCMiZMVFXBZkwz.svg#dd452d63ae05ddb466f19713a7d09fd5') format('svg'); /* Legacy iOS */
+
+ font-style: normal;
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: 'cstd';
+ src: url('../fonts/xFErEAWaEHlAopmQYjAg.eot'); /* IE9 Compat Modes */
+ src:
+ url('../fonts/xFErEAWaEHlAopmQYjAg.eot?#iefix') format('embedded-opentype'),
+ /* IE6-IE8 */ url('../fonts/xFErEAWaEHlAopmQYjAg.woff') format('woff'),
+ /* Modern Browsers */ url('../fonts/xFErEAWaEHlAopmQYjAg.ttf') format('truetype'),
+ /* Safari, Android, iOS */
+ url('../fonts/xFErEAWaEHlAopmQYjAg.svg#a81919819e5d11fb78ee7eadc8883b0d') format('svg'); /* Legacy iOS */
+
+ font-style: normal;
+ font-weight: 500;
+}
diff --git a/src/lib/styles/globals.scss b/src/lib/styles/globals.scss
new file mode 100644
index 0000000..57bda9b
--- /dev/null
+++ b/src/lib/styles/globals.scss
@@ -0,0 +1,2 @@
+@import 'variables.scss';
+@import 'themes.scss';
diff --git a/src/lib/styles/mixins.scss b/src/lib/styles/mixins.scss
new file mode 100644
index 0000000..ab85738
--- /dev/null
+++ b/src/lib/styles/mixins.scss
@@ -0,0 +1,68 @@
+// use with @include
+@mixin breakpoint($breakpoint) {
+ $phone-width: 450px;
+ $phone-height: 1280px;
+
+ $small-tablet-width: 750px;
+ $small-tablet-height: 1024px;
+
+ $tablet-width: 1024px;
+ $tablet-height: 1024px;
+
+ @if $breakpoint == tablet {
+ // prettier-ignore
+ @media only screen
+ and (max-width: $tablet-width)
+ and (max-height: $tablet-height)
+ and (-webkit-min-device-pixel-ratio: 2) {
+ @content;
+ }
+ }
+
+ @if $breakpoint == small-tablet {
+ // prettier-ignore
+ @media only screen
+ and (max-width: $small-tablet-width)
+ and (max-height: $small-tablet-height)
+ and (-webkit-min-device-pixel-ratio: 2) {
+ @content;
+ }
+ }
+
+ @if $breakpoint == phone {
+ // prettier-ignore
+ @media only screen
+ and (max-width: $phone-width)
+ and (max-height: $phone-height)
+ and (-webkit-min-device-pixel-ratio: 2) {
+ @content;
+ }
+ }
+}
+
+@mixin hidpiImage($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
+ background: url($image + '.' + $extension) $repeat $position;
+ background-size: $width $height;
+
+ @media screen and (-webkit-min-device-pixel-ratio: 2),
+ screen and (min--moz-device-pixel-ratio: 2),
+ screen and (-moz-min-device-pixel-ratio: 2),
+ screen and (-o-min-device-pixel-ratio: 2/1),
+ screen and (min-device-pixel-ratio: 2),
+ screen and (min-resolution: 192dpi),
+ screen and (min-resolution: 2dppx) {
+ background: url($image + '@2x' + '.' + $extension) $repeat $position;
+ background-size: $width $height;
+ }
+
+ @media screen and (-webkit-min-device-pixel-ratio: 3),
+ screen and (min--moz-device-pixel-ratio: 3),
+ screen and (-moz-min-device-pixel-ratio: 3),
+ screen and (-o-min-device-pixel-ratio: 3/1),
+ screen and (min-device-pixel-ratio: 3),
+ screen and (min-resolution: 216dpi),
+ screen and (min-resolution: 3dppx) {
+ background: url($image + '@3x' + '.' + $extension) $repeat $position;
+ background-size: $width $height;
+ }
+}
diff --git a/src/lib/styles/reset.css b/src/lib/styles/reset.css
new file mode 100644
index 0000000..6ce8940
--- /dev/null
+++ b/src/lib/styles/reset.css
@@ -0,0 +1,153 @@
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ background: transparent;
+ border: 0;
+ font-size: 100%;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+a {
+ background: transparent;
+ color: inherit;
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ text-decoration: none;
+ vertical-align: baseline;
+}
+abbr[title],
+dfn[title] {
+ border-bottom: 1px dotted;
+ cursor: help;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: none;
+}
+body {
+ line-height: 1;
+}
+nav ul {
+ list-style: none;
+}
+input:focus,
+button:focus {
+ outline: none;
+}
+ins {
+ background-color: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+mark {
+ background-color: #ff9;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+del {
+ text-decoration: line-through;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+hr {
+ display: block;
+ border: 0;
+ border-top: 1px solid #ccc;
+ height: 1px;
+ margin: 1em 0;
+ padding: 0;
+}
+input,
+select {
+ vertical-align: middle;
+}
diff --git a/src/lib/styles/themes.scss b/src/lib/styles/themes.scss
new file mode 100644
index 0000000..8293a15
--- /dev/null
+++ b/src/lib/styles/themes.scss
@@ -0,0 +1,10 @@
+:root {
+ --bg-color: #{$grey-80};
+ --page-color: #{$grey-100};
+ --card-color: #{$grey-90};
+
+ --text-color: #{$grey-20};
+}
+
+[data-theme='dark'] {
+}
diff --git a/src/lib/styles/variables.scss b/src/lib/styles/variables.scss
new file mode 100644
index 0000000..b8908c9
--- /dev/null
+++ b/src/lib/styles/variables.scss
@@ -0,0 +1,115 @@
+@import 'mixins.scss';
+
+/* Atomic Unit
+ * -------------------------------------------------------------------------- */
+
+$page-width: 784px;
+
+$unit: 8px;
+$margin: $unit * 5;
+
+$unit-fourth: calc($unit / 4);
+$unit-half: calc($unit / 2);
+$unit-three-fourth: calc($unit / 4) * 3;
+$unit-2x: $unit * 2;
+$unit-3x: $unit * 3;
+$unit-4x: $unit * 4;
+$unit-5x: $unit * 5;
+$unit-6x: $unit * 6;
+$unit-8x: $unit * 8;
+$unit-10x: $unit * 10;
+$unit-12x: $unit * 12;
+$unit-14x: $unit * 14;
+$unit-20x: $unit * 20;
+
+/* Page properties
+ * -------------------------------------------------------------------------- */
+$page-corner-radius: $unit;
+
+$page-top-margin: $unit-6x;
+
+$page-vert-padding: $unit-6x;
+$page-horz-padding: $unit-5x;
+
+$page-fourth: ($page-width - $margin * 5) / 4;
+$page-third: ($page-width - $margin * 5) / 3;
+$page-half: ($page-fourth * 2) + $margin;
+
+$card-height: $unit-14x;
+$mention-padding: $unit-3x;
+
+/* Typography
+ * -------------------------------------------------------------------------- */
+
+$font-stack: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+$font-unit: 14px;
+
+$font-size-small: 0.7rem; // 10
+$font-size: 1rem; // 14
+$font-size-med: 1.25rem; // 16
+$font-size-large: 1.4rem; // 18
+$font-size-xlarge: 1.65rem; // 22
+
+$font-weight: 400;
+$font-weight-med: 500;
+$font-weight-bold: 600;
+
+$line-height: 1.3;
+
+$letter-spacing: -0.02em;
+
+/* Colors
+ * -------------------------------------------------------------------------- */
+$grey-100: #ffffff;
+$grey-90: #f7f7f7;
+$grey-80: #e8e8e8;
+$grey-50: #b2b2b2;
+$grey-20: #666666;
+$grey-00: #333333;
+
+$red-80: #ff6a54;
+$red-60: #e33d3d;
+$red-40: #d31919;
+$red-00: #3d0c0c;
+
+$bg-color: #e8e8e8;
+$page-color: #ffffff;
+$card-color: #f7f7f7;
+
+$text-color-light: #b2b2b2;
+$text-color-body: #666666;
+
+$accent-color: #e33d3d;
+$grey-color: #f0f0f0;
+
+$image-border-color: rgba(0, 0, 0, 0.03);
+
+$facebook-color: #3b5998;
+$twitter-color: #55acee;
+$instagram-color: #3f729b;
+$pinterest-color: #bd061c;
+$github-color: #6cc644;
+$cmu-color: #fe6420;
+$quip-color: #ae4830;
+
+$twitter-button-color: #6cc0ff;
+$twitter-text-color: #0f5f9b;
+
+/* Images
+ * -------------------------------------------------------------------------- */
+$corner-radius: $unit-2x;
+$mobile-corner-radius: $unit-2x;
+
+/* Avatar header
+ * -------------------------------------------------------------------------- */
+$avatar-radius: 2rem;
+$avatar-url: url('images/header.png');
+
+/* Media queries breakpoints
+ * These needs to be revisited
+ * -------------------------------------------------------------------------- */
+
+$screen-sm-min: 768px;
+$screen-md-min: 992px;
+$screen-lg-min: 1200px;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..4e369a0
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,36 @@
+
+
+
+ @jedmund
+
+
+
+
+
+
+
+