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

💄 oops again

Browse source
This commit is contained in:
marleyrae 2023-06-04 21:19:52 -07:00
parent 0dfebdc6bc
commit 326a826a95
11 changed files with 119 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.idea/webResources.xml Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="WebResourcesPaths">
<contentEntries>
<entry url="file://$PROJECT_DIR$">
<entryData>
<resourceRoots>
<path value="file://$PROJECT_DIR$/src" />
<path value="file://$PROJECT_DIR$/dist" />
</resourceRoots>
</entryData>
</entry>
</contentEntries>
</component>
</project>

1
.stylelintrc.json
View file

@ -14,6 +14,7 @@
"selector-class-pattern": null,
"value-keyword-case": null,
"scss/dollar-variable-pattern": null,
"scss/percent-placeholder-pattern": null,
"rem-over-px/rem-over-px": [
true,
{

21
dist/index.html vendored
View file

@ -14,8 +14,25 @@
<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 class="Site">
<h1 class="Site-title">punkfairie.net</h1>
<nav class="Site-nav">
</nav>
<main class="Site-content">
</main>
<aside class="Site-info">
</aside>
<aside class="Site-social">
</aside>
</body>
</html>

0
dist/style/components/SiteContent.css vendored Normal file
View file

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}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}
*,: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;overflow:hidden}body{font-family:Handlee,handwriting;font-size:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.Site-content,.Site-info,.Site-nav,.Site-social{background-color:hsla(0,0%,98%,.5);margin:clamp(.31rem,.31rem + 0vw,.31rem)}.Site{display:grid;grid-template:"Site-info Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 4fr "Site-title Site-title Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.65rem + 1.74vw,10rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.8rem,2.45rem + 1.77vw,3.82rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.Site-nav{grid-area:Site-nav}.Site-content{grid-area:Site-content}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}

23
src/_includes/layout.liquid
View file

@ -14,8 +14,25 @@
<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 class="Site">
<h1 class="Site-title">punkfairie.net</h1>
<nav class="Site-nav">
</nav>
<main class="Site-content">
{{ content }}
</main>
<aside class="Site-info">
</aside>
<aside class="Site-social">
</aside>
</body>
</html>

3
src/style/_base.scss
View file

@ -5,12 +5,13 @@
@use 'theme';
html {
overflow: hidden;
background-image: theme.$gradient;
min-block-size: 100vb;
min-inline-size: 100vi;
}
body {
font-size: theme.$fontSize-0;
font-family: theme.$fontFamily--body;
font-size: theme.$fontSize-0;
}

7
src/style/_theme.scss
View file

@ -23,6 +23,9 @@ $purple-400: rgb(192 132 252 / 100%);
/* pinks */
$pink-400: rgb(244 114 182 / 100%);
/* neutrals */
$neutral-50: rgb(250 250 250);
/* 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%);
@ -45,7 +48,7 @@ $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
* @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|8,s-l&g=s,l,xl,12
*/
$spacer-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
@ -57,6 +60,7 @@ $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);
$spacer-4xl: clamp(9.00rem, calc(8.65rem + 1.74vw), 10.00rem);
/* One-up pairs */
$spacer-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
@ -67,6 +71,7 @@ $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);
$spacer-3xl-4xl: clamp(6.75rem, calc(5.62rem + 5.65vw), 10.00rem);
/* Custom pairs */
$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);

54
src/style/components/_Site.scss Normal file
View file

@ -0,0 +1,54 @@
@use 'sass:color';
@use '../theme';
%_SiteContent {
$_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);
margin: theme.$spacer-3xs;
background-color: $_SiteContent-backgroundColor;
}
.Site {
display: grid;
grid-template:
'Site-info Site-content Site-nav' 2fr
'Site-social Site-content Site-nav' 4fr
'Site-title Site-title Site-title' 2fr
/ 1fr 3fr 1fr;
inline-size: 100%;
block-size: 100%;
padding: theme.$spacer-4xl;
&-title {
grid-area: Site-title;
justify-self: end;
padding-inline-end: theme.$spacer-s;
font-family: theme.$fontFamily--display;
font-size: theme.$fontSize-5;
font-weight: normal;
}
&-nav {
@extend %_SiteContent;
grid-area: Site-nav;
}
&-content {
@extend %_SiteContent;
grid-area: Site-content;
}
&-info {
@extend %_SiteContent;
grid-area: Site-info;
}
&-social {
@extend %_SiteContent;
grid-area: Site-social;
}
}

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

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

2
src/style/components/_index.scss
View file

@ -1 +1 @@
@forward 'SiteTitle';
@forward 'Site';