Basic styles
This commit is contained in:
Justin Edmund
parent
f952bab7bc
commit
a0cd967f0a
7 changed files with 411 additions and 0 deletions
27
src/lib/styles/fonts.css
Normal file
27
src/lib/styles/fonts.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
2
src/lib/styles/globals.scss
Normal file
2
src/lib/styles/globals.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'variables.scss';
|
||||
@import 'themes.scss';
|
||||
68
src/lib/styles/mixins.scss
Normal file
68
src/lib/styles/mixins.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
153
src/lib/styles/reset.css
Normal file
153
src/lib/styles/reset.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
10
src/lib/styles/themes.scss
Normal file
10
src/lib/styles/themes.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
:root {
|
||||
--bg-color: #{$grey-80};
|
||||
--page-color: #{$grey-100};
|
||||
--card-color: #{$grey-90};
|
||||
|
||||
--text-color: #{$grey-20};
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
}
|
||||
115
src/lib/styles/variables.scss
Normal file
115
src/lib/styles/variables.scss
Normal file
|
|
@ -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;
|
||||
36
src/routes/+layout.svelte
Normal file
36
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts">
|
||||
import '$lib/styles/reset.css'
|
||||
import '$lib/styles/fonts.css'
|
||||
import '$lib/styles/globals.scss'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>@jedmund</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Justin Edmund is a software designer based in San Francisco, California."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<section class="page">
|
||||
<slot />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
:global(html) {
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: var(--page-color);
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
margin: 48px auto 48px;
|
||||
padding: 40px;
|
||||
width: 784px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue