aboutsummaryrefslogtreecommitdiff
path: root/assets/sass/base
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/base')
-rw-r--r--assets/sass/base/_page.scss159
-rw-r--r--assets/sass/base/_reset.scss76
-rw-r--r--assets/sass/base/_typography.scss101
3 files changed, 336 insertions, 0 deletions
diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss
new file mode 100644
index 0000000..bf69eb8
--- /dev/null
+++ b/assets/sass/base/_page.scss
@@ -0,0 +1,159 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Basic */
+
+ @-ms-viewport {
+ width: device-width;
+ }
+
+ html {
+ height: 100%;
+ }
+
+ // 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);
+ height: 100%;
+ min-width: 320px;
+
+ // Stops initial animations until page loads.
+ &.is-preload {
+ *, *:before, *:after {
+ @include vendor('animation', 'none !important');
+ @include vendor('transition', 'none !important');
+ }
+ }
+
+ }
+
+/* Spinner */
+
+ @include keyframes('spinner-rotate') {
+ 0% { @include vendor('transform', 'scale(1) rotate(0deg)'); }
+ 100% { @include vendor('transform', 'scale(1) rotate(360deg)'); }
+ }
+
+/* Loader */
+
+ @include keyframes('spinner-show') {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @include keyframes('spinner-hide') {
+ 0% {
+ @include vendor('transform', 'scale(1) rotate(0deg)');
+ color: _palette(border);
+ z-index: 100001;
+ }
+
+ 99% {
+ @include vendor('transform', 'scale(0.5) rotate(360deg)');
+ color: _palette(border);
+ z-index: 100001;
+ }
+
+ 100% {
+ @include vendor('transform', 'scale(0.5) rotate(360deg)');
+ color: _palette(border);
+ z-index: -1;
+ }
+ }
+
+ @include keyframes('overlay-hide') {
+ 0% {
+ opacity: 1;
+ z-index: 100000;
+ }
+
+ 15% {
+ opacity: 1;
+ z-index: 100000;
+ }
+
+ 99% {
+ opacity: 0;
+ z-index: 100000;
+ }
+
+ 100% {
+ opacity: 0;
+ z-index: -1;
+ }
+ }
+
+ body {
+ text-decoration: none;
+
+ &:before {
+ @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
+ @include vendor('transform-origin', '50% 50%');
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: none !important;
+ color: _palette(border);
+ content: '\f1ce';
+ cursor: default;
+ display: block;
+ font-size: 2em;
+ height: 2em;
+ left: 50%;
+ line-height: 2em;
+ margin: -1em 0 0 -1em;
+ opacity: 0;
+ position: fixed;
+ text-align: center;
+ top: 50%;
+ width: 2em;
+ z-index: -1;
+ }
+
+ &:after {
+ @include vendor('animation', 'overlay-hide 1.5s ease-in forwards !important');
+ background: #ffffff;
+ content: '';
+ display: block;
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: -1;
+ }
+
+ &.is-preload {
+ &:before {
+ @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
+ z-index: 100001;
+ }
+
+ &:after {
+ @include vendor('animation', 'none !important');
+ opacity: 1;
+ z-index: 100000;
+ }
+ }
+ }
+
+ @media (-webkit-min-device-pixel-ratio: 2) {
+ body:before {
+ line-height: 2.025em;
+ }
+ } \ No newline at end of file
diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss
new file mode 100644
index 0000000..df3e81c
--- /dev/null
+++ b/assets/sass/base/_reset.scss
@@ -0,0 +1,76 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/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;
+ } \ No newline at end of file
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
new file mode 100644
index 0000000..9ff9fcf
--- /dev/null
+++ b/assets/sass/base/_typography.scss
@@ -0,0 +1,101 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Type */
+
+ body, input, textarea, select {
+ font-family: _font(family);
+ font-weight: _font(weight);
+ font-size: 18pt;
+ line-height: 1.75em;
+ color: _palette(fg);
+ letter-spacing: 0.025em;
+
+ @include breakpoint('<=xxlarge') {
+ font-size: 17pt;
+ }
+
+ @include breakpoint('<=xlarge') {
+ font-size: 15pt;
+ }
+
+ @include breakpoint('<=large') {
+ font-size: 13pt;
+ }
+
+ @include breakpoint('<=medium') {
+ font-size: 13pt;
+ }
+
+ @include breakpoint('<=small') {
+ font-size: 12pt;
+ line-height: 1.5em;
+ }
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-weight: _font(weight-bold);
+ color: inherit;
+ letter-spacing: -0.0325em;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+ h2 {
+ font-size: 2.25em;
+ line-height: 1.25em;
+ letter-spacing: -0.05em;
+ }
+
+ @include breakpoint('<=small') {
+ h2 {
+ font-size: 1.5em;
+ }
+ }
+
+ strong, b {
+ font-weight: _font(weight-bold);
+ color: inherit;
+ }
+
+ em, i {
+ font-style: italic;
+ }
+
+ a {
+ @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
+ color: _palette(accent1, bg);
+ }
+
+ sub {
+ position: relative;
+ top: 0.5em;
+ font-size: 0.8em;
+ }
+
+ sup {
+ position: relative;
+ top: -0.5em;
+ font-size: 0.8em;
+ }
+
+ hr {
+ border: 0;
+ border-top: solid 1px _palette(border);
+ }
+
+ blockquote {
+ border-left: solid 0.5em _palette(border);
+ padding: 1em 0 1em 2em;
+ font-style: italic;
+ }
+
+ p, ul, ol, dl, table {
+ margin-bottom: 1em;
+ } \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-06 19:32:53 +0000