punkfairie/punkfairie-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

💄 oops

Browse source
This commit is contained in:
marleyrae 2023-06-04 20:07:31 -07:00
parent 054bddecc4
commit 0dfebdc6bc
10 changed files with 158 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.idea/punkfairie-site.iml
View file

@ -1,7 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/archive" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>

6
dist/index.html vendored
View file

@ -7,9 +7,15 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>punkfairie.net</title>
<!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="/style/style.css">
<!-- Bunny Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|handlee:400" rel="stylesheet"/>
</head>
<body>
<h1 class="SiteTitle">punkfairie.net</h1>
</body>
</html>

2
dist/style/style.css vendored
View file

@ -1 +1 @@
*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}body:not(#\#){background-color:#fff888}
*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi}body{font-family:Handlee,handwriting;font-size:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.SiteTitle{font-family:Bungee Shade,display;font-weight:400}

6
src/_includes/layout.liquid
View file

@ -7,9 +7,15 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% unless title %}punkfairie.net{% endunless %}</title>
<!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="/style/style.css">
<!-- Bunny Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|handlee:400" rel="stylesheet"/>
</head>
<body>
<h1 class="SiteTitle">punkfairie.net</h1>
{{ content }}
</body>
</html>

12
src/style/_base.scss
View file

@ -5,8 +5,12 @@
@use 'theme';
html {
background-color: #fff;
background-image: theme.$c-gradient;
min-height: 100vh;
min-width: 100vw;
background-image: theme.$gradient;
min-block-size: 100vb;
min-inline-size: 100vi;
}
body {
font-size: theme.$fontSize-0;
font-family: theme.$fontFamily--body;
}

116
src/style/_reset.scss
View file

@ -1,60 +1,58 @@
@layer reset {
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-block-size: 100vb;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-inline-size: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-block-size: 100vb;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-inline-size: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

69
src/style/_theme.scss
View file

@ -2,4 +2,71 @@
* Global variables.
*/
$c-gradient: linear-gradient(90deg, rgba(248,113,113,1) 0%, rgba(251,146,60,1) 17%, rgba(250,204,21,1) 33%, rgba(163,230,53,1) 50%, rgba(57,208,221,1) 67%, rgba(192,132,252,1) 83%, rgba(244,114,182,1) 100%);
/* reds */
$red-400: rgb(248 113 113 / 100%);
/* oranges */
$orange-400: rgb(251 146 60 / 100%);
/* yellows */
$yellow-400: rgb(250 204 21 / 100%);
/* greens */
$green-400: rgb(163 230 53 / 100%);
/* blues */
$blue-400: rgb(57 208 221 / 100%);
/* purples */
$purple-400: rgb(192 132 252 / 100%);
/* pinks */
$pink-400: rgb(244 114 182 / 100%);
/* gradient */
$gradient: linear-gradient(90deg, $red-400 0%, $orange-400 17%, $yellow-400 33%, $green-400 50%, $blue-400 67%, $purple-400 83%, $pink-400 100%);
/* typography */
$fontFamily--display: 'Bungee Shade', display;
$fontFamily--body: 'Handlee', handwriting;
/**
* Fluid type scale
* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
*/
$fontSize-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
$fontSize-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
$fontSize-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
$fontSize-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
$fontSize-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
$fontSize-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
$fontSize-6: clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem);
/**
* Fluid spacing scale
* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
*/
$spacer-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
$spacer-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
$spacer-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
$spacer-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
$spacer-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
$spacer-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
$spacer-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
$spacer-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
$spacer-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);
/* One-up pairs */
$spacer-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
$spacer-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
$spacer-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
$spacer-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
$spacer-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
$spacer-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
$spacer-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
$spacer-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);
/* Custom pairs */
$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);

6
src/style/components/_SiteTitle.scss Normal file
View file

@ -0,0 +1,6 @@
@use '../theme';
.SiteTitle {
font-family: theme.$fontFamily--display;
font-weight: normal;
}

1
src/style/components/_index.scss Normal file
View file

@ -0,0 +1 @@
@forward 'SiteTitle';

2
src/style/style.scss
View file

@ -1 +1,3 @@
@use 'reset';
@use 'base';
@use 'components';