mirror of
https://github.com/KevinMidboe/planetposen.git
synced 2025-10-29 17:50:32 +00:00
Extended scss files.
This commit is contained in:
@@ -1,4 +1,49 @@
|
||||
@import './frontend/styles/variables';
|
||||
@import 'frontend/styles/variables';
|
||||
|
||||
@font-face {
|
||||
font-family: "Mabry";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("/frontend/assets/fonts/mabry/Mabry-Regular-Pro.woff") format("woff");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Mabry", sans-serif;
|
||||
background-color: #19171A;
|
||||
color: white;
|
||||
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--text-xxl);
|
||||
|
||||
@include mobile {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--text-lg);
|
||||
|
||||
@include mobile {
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
|
||||
&.h3-alt {
|
||||
font-size: calc(0.785 * var(--text-lg));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
@@ -17,6 +62,11 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
@@ -28,3 +78,82 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.col-wrap {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
|
||||
@include tablet {
|
||||
padding: 0 48px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.max-width {
|
||||
max-width: 1520px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.top-show {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: var(--space-xxl);
|
||||
padding-top: var(--space-xxxxl);
|
||||
|
||||
&-sm {
|
||||
padding-top: var(--space-xxl);
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding-top: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.accent--xl {
|
||||
font-size:calc(1.375 * var(--text-base-size))
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.accent--xl {
|
||||
font-size:calc(1.25 * var(--text-base-size))
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.accent--xl {
|
||||
font-size:calc(1.125 * var(--text-base-size))
|
||||
}
|
||||
}
|
||||
|
||||
.accent--lg {
|
||||
font-size:calc(1.25 * var(--text-base-size))
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.accent--lg {
|
||||
font-size:calc(1.125 * var(--text-base-size))
|
||||
}
|
||||
}
|
||||
|
||||
.accent--md {
|
||||
font-size:calc(1.125 * var(--text-base-size))
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.accent--md {
|
||||
font-size:calc(1 * var(--text-base-size))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import './frontend/assets/fonts/planetposen-icons/style.scss';
|
||||
@import 'frontend/assets/fonts/planetposen-icons/style.scss';
|
||||
|
||||
11
frontend/styles/normalize.scss
vendored
11
frontend/styles/normalize.scss
vendored
@@ -2,5 +2,14 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: unset;
|
||||
}
|
||||
265
frontend/styles/spacing.scss
Normal file
265
frontend/styles/spacing.scss
Normal file
@@ -0,0 +1,265 @@
|
||||
:root {
|
||||
--space-unit: 1.125em;
|
||||
--space-xxs: calc(0.25 * var(--space-unit));
|
||||
--space-xs: calc(0.5 * var(--space-unit));
|
||||
--space-sm: calc(0.75 * var(--space-unit));
|
||||
--space: calc(1 * var(--space-unit));
|
||||
--space-md: calc(1.25 * var(--space-unit));
|
||||
--space-lg: calc(2 * var(--space-unit));
|
||||
--space-xl: calc(3.25 * var(--space-unit));
|
||||
--space-xxl: calc(5.25 * var(--space-unit));
|
||||
--space-xxxl: calc(8.5 * var(--space-unit));
|
||||
--space-xxxxl: calc(12 * var(--space-unit));
|
||||
--component-padding: var(--space-xl)
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
:root {
|
||||
--space-unit: 1em;
|
||||
--component-padding: var(--space-lg)
|
||||
}
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top:var(--space)
|
||||
}
|
||||
|
||||
.margin-top--xs {
|
||||
margin-top:var(--space-sm)
|
||||
}
|
||||
|
||||
.margin-top--sm {
|
||||
margin-top:var(--space-md)
|
||||
}
|
||||
|
||||
.margin-top--md {
|
||||
margin-top:var(--space-lg)
|
||||
}
|
||||
|
||||
.margin-top--lg {
|
||||
margin-top:var(--space-xl)
|
||||
}
|
||||
|
||||
.margin-top--xl {
|
||||
margin-top:var(--space-xxl)
|
||||
}
|
||||
|
||||
.margin-top--xxl {
|
||||
margin-top:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.margin-top--xxxl {
|
||||
margin-top:var(--space-xxxxl)
|
||||
}
|
||||
|
||||
.margin-bottom--xs {
|
||||
margin-bottom:var(--space-sm)
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom:var(--space)
|
||||
}
|
||||
|
||||
.margin-bottom--sm {
|
||||
margin-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.margin-bottom--md {
|
||||
margin-bottom:var(--space-lg)
|
||||
}
|
||||
|
||||
.margin-bottom--lg {
|
||||
margin-bottom:var(--space-xl)
|
||||
}
|
||||
|
||||
.margin-bottom--xl {
|
||||
margin-bottom:var(--space-xxl)
|
||||
}
|
||||
|
||||
.margin-bottom--xxl {
|
||||
margin-bottom:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.margin-bottom--xxxl {
|
||||
margin-bottom:var(--space-xxxxl)
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top:var(--space)
|
||||
}
|
||||
|
||||
.padding-top--xs {
|
||||
padding-top:var(--space-sm)
|
||||
}
|
||||
|
||||
.padding-top--sm {
|
||||
padding-top:var(--space-md)
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top:var(--space-lg)
|
||||
}
|
||||
|
||||
.padding-top--lg {
|
||||
padding-top:var(--space-xl)
|
||||
}
|
||||
|
||||
.padding-top--xl {
|
||||
padding-top:var(--space-xxl)
|
||||
}
|
||||
|
||||
.padding-top--xxl {
|
||||
padding-top:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.padding-top--xxxl {
|
||||
padding-top:var(--space-xxxxl)
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom:var(--space)
|
||||
}
|
||||
|
||||
.padding-bottom--xs {
|
||||
padding-bottom:var(--space-sm)
|
||||
}
|
||||
|
||||
.padding-bottom--sm {
|
||||
padding-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.padding-bottom--md {
|
||||
padding-bottom:var(--space-lg)
|
||||
}
|
||||
|
||||
.padding-bottom--lg {
|
||||
padding-bottom:var(--space-xl)
|
||||
}
|
||||
|
||||
.padding-bottom--xl {
|
||||
padding-bottom:var(--space-xxl)
|
||||
}
|
||||
|
||||
.padding-bottom--xxl {
|
||||
padding-bottom:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.padding-bottom--xxxl {
|
||||
padding-bottom:var(--space-xxxxl)
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.margin-top--xs {
|
||||
margin-top:var(--space-xs)
|
||||
}
|
||||
|
||||
.margin-top, .margin-top--md {
|
||||
margin-top:var(--space-md)
|
||||
}
|
||||
|
||||
.margin-top--sm {
|
||||
margin-top:var(--space-sm)
|
||||
}
|
||||
|
||||
.margin-top--lg {
|
||||
margin-top:var(--space-lg)
|
||||
}
|
||||
|
||||
.margin-top--xl {
|
||||
margin-top:var(--space-xl)
|
||||
}
|
||||
|
||||
.margin-top--xxl {
|
||||
margin-top:var(--space-xxl)
|
||||
}
|
||||
|
||||
.margin-top--xxxl {
|
||||
margin-top:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.margin-bottom--xs {
|
||||
margin-bottom:var(--space-xs)
|
||||
}
|
||||
|
||||
.margin-bottom, .margin-bottom--md {
|
||||
margin-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.margin-bottom--sm {
|
||||
margin-bottom:var(--space-sm)
|
||||
}
|
||||
|
||||
.margin-bottom--lg {
|
||||
margin-bottom:var(--space-lg)
|
||||
}
|
||||
|
||||
.margin-bottom--xl {
|
||||
margin-bottom:var(--space-xl)
|
||||
}
|
||||
|
||||
.margin-bottom--xxl {
|
||||
margin-bottom:var(--space-xxl)
|
||||
}
|
||||
|
||||
.margin-bottom--xxxl {
|
||||
margin-bottom:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.padding-top--xs {
|
||||
padding-top:var(--space-xs)
|
||||
}
|
||||
|
||||
.padding-top, .padding-top--md {
|
||||
padding-top:var(--space-md)
|
||||
}
|
||||
|
||||
.padding-top--sm {
|
||||
padding-top:var(--space-sm)
|
||||
}
|
||||
|
||||
.padding-top--lg {
|
||||
padding-top:var(--space-lg)
|
||||
}
|
||||
|
||||
.padding-top--xl {
|
||||
padding-top:var(--space-xl)
|
||||
}
|
||||
|
||||
.padding-top--xxl {
|
||||
padding-top:var(--space-xxl)
|
||||
}
|
||||
|
||||
.padding-top--xxxl {
|
||||
padding-top:var(--space-xxxl)
|
||||
}
|
||||
|
||||
.padding-bottom--xs {
|
||||
padding-bottom:var(--space-xs)
|
||||
}
|
||||
|
||||
.padding-bottom, .padding-bottom--md {
|
||||
padding-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.padding-bottom--sm {
|
||||
padding-bottom:var(--space-sm)
|
||||
}
|
||||
|
||||
.padding-bottom--lg {
|
||||
padding-bottom:var(--space-lg)
|
||||
}
|
||||
|
||||
.padding-bottom--xl {
|
||||
padding-bottom:var(--space-xl)
|
||||
}
|
||||
|
||||
.padding-bottom--xxl {
|
||||
padding-bottom:var(--space-xxl)
|
||||
}
|
||||
|
||||
.padding-bottom--xxxl {
|
||||
padding-bottom:var(--space-xxxl)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,71 @@
|
||||
|
||||
$green: #5cdb95;
|
||||
$green: #3b945e;
|
||||
$text-color: #05386B;
|
||||
|
||||
$tablet-width: 1200px;
|
||||
$mobile-width: 768px;
|
||||
|
||||
:root {
|
||||
--color-highlight: #D5F5E3;
|
||||
|
||||
--color-green: #28B463;
|
||||
--color-pink: #F0729F;
|
||||
--color-yellow: #F4D03F;
|
||||
--color-blue: #77A5BD;
|
||||
|
||||
--color-background-pink: #F8CED1;
|
||||
--color-background-yellow: #F9E79F;
|
||||
--color-background-green: #D5F5E3;
|
||||
--color-background-blue: #BBD2DE;
|
||||
|
||||
--color-background: #19171A;
|
||||
--color-background-highlight: #272527;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-primary: 'Mabry', sans-serif;
|
||||
--font-secondary: serif;
|
||||
--text-base-size: 1em;
|
||||
--text-scale-ratio: 1.45;
|
||||
--text-xs: calc(1em /(var(--text-scale-ratio) * var(--text-scale-ratio)));
|
||||
--text-sm: calc(1em / var(--text-scale-ratio));
|
||||
--text-md: calc(1em * var(--text-scale-ratio));
|
||||
--text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
|
||||
--text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
|
||||
--text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
|
||||
--text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
|
||||
--heading-line-height: 1.2;
|
||||
--body-line-height: 1.4;
|
||||
}
|
||||
:root {
|
||||
--btn-font-size: 1.125em;
|
||||
--btn-sm: calc(var(--btn-font-size) - 0.1em);
|
||||
--btn-md: calc(var(--btn-font-size) + 0.2em);
|
||||
--btn-lg: calc(var(--btn-font-size) + 0.4em);
|
||||
--btn-radius: 4px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--space-unit: 1.125em;
|
||||
--space-xxs: calc(0.25 * var(--space-unit));
|
||||
--space-xs: calc(0.5 * var(--space-unit));
|
||||
--space-sm: calc(0.75 * var(--space-unit));
|
||||
--space: calc(1 * var(--space-unit));
|
||||
--space-md: calc(1.25 * var(--space-unit));
|
||||
--space-lg: calc(2 * var(--space-unit));
|
||||
--space-xl: calc(3.25 * var(--space-unit));
|
||||
--space-xxl: calc(5.25 * var(--space-unit));
|
||||
--space-xxxl: calc(8.5 * var(--space-unit));
|
||||
--space-xxxxl: calc(12 * var(--space-unit));
|
||||
--component-padding: var(--space-xl)
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (max-width: #{$tablet-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: #{$mobile-width}) {
|
||||
@content;
|
||||
|
||||
Reference in New Issue
Block a user