mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Adding css in and formatting a little better.
This commit is contained in:
parent
68828905b3
commit
6ade326c8d
5 changed files with 550 additions and 6 deletions
|
|
@ -1,11 +1,86 @@
|
|||
<script lang="ts">
|
||||
import '../app.postcss';
|
||||
import Header from '$lib/components/header/index.svelte';
|
||||
import Footer from '$lib/components/footer/index.svelte';
|
||||
import '$root/styles/styles.pcss';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
<div class="wrapper">
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
/* .loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
} */
|
||||
|
||||
.background {
|
||||
background: black;
|
||||
opacity: 0.8;
|
||||
cursor: none;
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0rem;
|
||||
max-width: 80vw;
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
word-wrap: normal;
|
||||
font-size: var(--bodyTextSize);
|
||||
color: var(--lightShade);
|
||||
}
|
||||
</style>
|
||||
271
src/styles/global.pcss
Normal file
271
src/styles/global.pcss
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
/* Setup */
|
||||
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
|
||||
|
||||
:root {
|
||||
/* Define Colors as colors */
|
||||
--white: #ffffff;
|
||||
--grey: #efefef;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--black: #2e2e2e;
|
||||
--dark: #000000;
|
||||
--lighterDark: #131415;
|
||||
--shellYellow: #ffc850;
|
||||
--lightGrey: #d8d8d8;
|
||||
--lightShade: #f8f7f5;
|
||||
--darkGrey: #272727;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--black);
|
||||
--danger: var(--grey);
|
||||
--background: var(--lighterDark);
|
||||
--textColor: var(--lightGrey);
|
||||
--buttonTextColor: var(--black);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--darkGrey);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--shellYellow);
|
||||
--lightHairLine: #c5c5c5;
|
||||
|
||||
/* Styles */
|
||||
--line: solid 1px var(--lineColor);
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Fira Code', monospace;
|
||||
--bodyFont: 'Fira Sans', Sans-Serif;
|
||||
--baseFontSize: 100%;
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--h6: 1.8rem;
|
||||
--bodyTextSize: 1.8rem;
|
||||
--smallText: 1.44rem;
|
||||
--lineHeight: 1.75;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 10px;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Cards */
|
||||
--cardHeightMin: 15rem;
|
||||
--cardHeightMax: 50rem;
|
||||
--cardWidthMin: 15rem;
|
||||
|
||||
/* Media Queries - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background) none repeat scroll 0% 0%;
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--lineHeight);
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
body::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--lightGrey) var(--darkGrey);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: var(--darkGrey);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--lightGrey);
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--darkGrey);
|
||||
}
|
||||
|
||||
.gatsby-image-wrapper img[src*='base64\\,'] {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--white);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
a.button,
|
||||
button {
|
||||
background: var(--darkAccent);
|
||||
color: var(--lightShade);
|
||||
border: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
--cast: 2px;
|
||||
box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
|
||||
text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
--cast: 4px;
|
||||
}
|
||||
&:active {
|
||||
--cast: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-color: var(--shellYellow);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--linkHover);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--headingFont);
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: var(--h1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--h2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--h3);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--h4);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--h5);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
nav {
|
||||
a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: -5px;
|
||||
left: 0px;
|
||||
background: var(--linkHover);
|
||||
transition: transform 0.3s ease 0s;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
|
||||
&[aria-current='page'],
|
||||
&.active,
|
||||
&.current-parent {
|
||||
&:after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-inline: 2rem;
|
||||
}
|
||||
|
||||
.emoji:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
background: var(--cardBg);
|
||||
box-shadow: var(--level-3);
|
||||
border-radius: var(--borderRadius);
|
||||
max-width: var(--cardWidthMax);
|
||||
min-width: var(--cardWidthMin);
|
||||
max-height: var(--cardHeightMax);
|
||||
min-height: var(--cardHeightMin);
|
||||
}
|
||||
|
||||
/* First item will never have margin top */
|
||||
.card > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Last item will never have margin bottom */
|
||||
.card > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
58
src/styles/reset.pcss
Normal file
58
src/styles/reset.pcss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
video {
|
||||
width: 100%;
|
||||
border: none;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
3
src/styles/styles.pcss
Normal file
3
src/styles/styles.pcss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'reset.pcss';
|
||||
@import 'global.pcss';
|
||||
/* @import '$root/styles/theme.pcss'; */
|
||||
137
src/styles/theme.pcss
Normal file
137
src/styles/theme.pcss
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
html[data-theme='🌛 Dark'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(173 100% 66%);
|
||||
--clr-txt: hsl(0 0% 98%);
|
||||
--clr-bg: hsl(210 7% 11%);
|
||||
|
||||
--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(0 0% 78%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(180 7% 14%);
|
||||
--clr-menu-border: hsl(0 0% 19%);
|
||||
|
||||
--clr-theme-txt: hsl(177 100% 15%);
|
||||
--clr-theme-active: hsl(177 100% 80%);
|
||||
--clr-switch-on-bg: hsl(0 0% 24%);
|
||||
--clr-switch-off-bg: hsl(0 0% 10%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(174 27% 73%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 21%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
--clr-input-bg: hsl(210 13% 24%);
|
||||
--clr-input-placeholder-txt: hsl(210 13% 50%);
|
||||
--clr-input-border: hsl(0 0% 21%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
|
||||
--clr-card-txt: hsl(0 0% 78%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(0 100% 98%);
|
||||
--clr-link-background: hsl(0 0% 4%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(0 0% 78%);
|
||||
--clr-footer-bg: hsl(210 5% 7%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(173 100% 94%);
|
||||
--post-blockquote-bg: hsl(173 60% 4%);
|
||||
--post-blockquote-border: hsl(173 10% 10%);
|
||||
|
||||
--clr-code-bg: hsl(173 60% 4%);
|
||||
--clr-code-title: hsl(173 100% 94%);
|
||||
--clr-code-border: hsl(173 10% 10%);
|
||||
--clr-code-line-number: hsl(173 20% 20%);
|
||||
--clr-code-line-highlight: hsl(173 40% 8%);
|
||||
--clr-code-inline-txt: hsl(173 100% 94%);
|
||||
--clr-code-inline-bg: hsl(173 60% 4%);
|
||||
|
||||
--clr-token-1: hsl(173 100% 66%);
|
||||
--clr-token-2: hsl(180 60% 80%);
|
||||
--clr-token-3: hsl(173 100% 66%);
|
||||
--clr-token-4: hsl(0 0% 98%);
|
||||
--clr-token-5: hsl(173 10% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
|
||||
/* Button */
|
||||
--warning: hsla(0, 75%, 60%, 0.9);
|
||||
--warning-hover: hsla(0, 75%, 60%, 1);
|
||||
}
|
||||
|
||||
html[data-theme='☀️ Daylight'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
|
||||
/* Button */
|
||||
--warning: hsla(0, 75%, 60%, 0.9);
|
||||
--warning-hover: hsla(0, 75%, 60%, 1);
|
||||
}
|
||||
Loading…
Reference in a new issue