💄 feat: Workin on nav
This commit is contained in:
marleyrae
parent
0dacb1eeea
commit
5f84b0dd75
10 changed files with 104 additions and 43 deletions
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
3
dist/index.html
vendored
3
dist/index.html
vendored
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- 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"/>
|
||||
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|imprima:400" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="Site">
|
||||
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
|
||||
<nav class="Site-nav Nav">
|
||||
<a href="/" class="Nav-link">index</a>
|
||||
<a href="/update-archive/" class="Nav-link">update archive</a>
|
||||
<button class="Nav-link">collections</button>
|
||||
<a href="/about/" class="Nav-link">about</a>
|
||||
<a href="/manifesto/" class="Nav-link">manifesto</a>
|
||||
|
|
|
|||
2
dist/style/style.css
vendored
2
dist/style/style.css
vendored
|
|
@ -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;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}
|
||||
*,: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:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}.Site-content,.Site-info,.Site-nav,.Site-social{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.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.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{grid-area:Site-nav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav-link{background-color:transparent;border:none;color:inherit;display:block;letter-spacing:inherit;margin:0;padding:0;-webkit-text-decoration:underline;text-decoration:underline}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- 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"/>
|
||||
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|imprima:400" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="Site">
|
||||
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
|
||||
<nav class="Site-nav Nav">
|
||||
<a href="/" class="Nav-link">index</a>
|
||||
<a href="/update-archive/" class="Nav-link">update archive</a>
|
||||
<button class="Nav-link">collections</button>
|
||||
<a href="/about/" class="Nav-link">about</a>
|
||||
<a href="/manifesto/" class="Nav-link">manifesto</a>
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ html {
|
|||
body {
|
||||
font-family: theme.$fontFamily--body;
|
||||
font-size: theme.$fontSize-0;
|
||||
letter-spacing: theme.$letterSpacing;
|
||||
}
|
||||
|
|
|
|||
20
src/style/_mixins.scss
Normal file
20
src/style/_mixins.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@use 'sass:list';
|
||||
@use 'theme';
|
||||
|
||||
@mixin flow($space: 1em) {
|
||||
& > * + * {
|
||||
margin-block-start: $space;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rainbowify-text($elem, $props...) {
|
||||
$colors-length: list.length(theme.$text-colors);
|
||||
|
||||
@for $i from 1 through $colors-length {
|
||||
:nth-child(#{$colors-length}n + #{$i} of #{$elem}) {
|
||||
@each $prop in $props {
|
||||
#{$prop}: list.nth(theme.$text-colors, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,25 +3,32 @@
|
|||
*/
|
||||
|
||||
/* reds */
|
||||
$red-400: rgb(248 113 113 / 100%);
|
||||
$red-400: rgb(248 113 113);
|
||||
$red-600: rgb(220 38 38);
|
||||
|
||||
/* oranges */
|
||||
$orange-400: rgb(251 146 60 / 100%);
|
||||
$orange-400: rgb(251 146 60);
|
||||
$orange-600: rgb(234 88 12);
|
||||
|
||||
/* yellows */
|
||||
$yellow-400: rgb(250 204 21 / 100%);
|
||||
$yellow-400: rgb(250 204 21);
|
||||
$yellow-600: rgb(202 138 4);
|
||||
|
||||
/* greens */
|
||||
$green-400: rgb(163 230 53 / 100%);
|
||||
$green-400: rgb(163 230 53);
|
||||
$green-600: rgb(101 163 13);
|
||||
|
||||
/* blues */
|
||||
$blue-400: rgb(57 208 221 / 100%);
|
||||
$blue-400: rgb(57 208 221);
|
||||
$blue-600: rgb(8 146 162);
|
||||
|
||||
/* purples */
|
||||
$purple-400: rgb(192 132 252 / 100%);
|
||||
$purple-400: rgb(192 132 252);
|
||||
$purple-600: rgb(147 51 234);
|
||||
|
||||
/* pinks */
|
||||
$pink-400: rgb(244 114 182 / 100%);
|
||||
$pink-400: rgb(244 114 182);
|
||||
$pink-600: rgb(219 39 119);
|
||||
|
||||
/* neutrals */
|
||||
$neutral-50: rgb(250 250 250);
|
||||
|
|
@ -29,49 +36,53 @@ $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%);
|
||||
|
||||
/* text color iterator */
|
||||
$text-colors: $red-600, $orange-600, $yellow-600, $green-600, $blue-600, $purple-600, $pink-600;
|
||||
|
||||
/* typography */
|
||||
$fontFamily--display: 'Bungee Shade', display;
|
||||
$fontFamily--body: 'Handlee', handwriting;
|
||||
$fontFamily--body: 'Imprima', handwriting;
|
||||
$letterSpacing: .6px;
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1240,14,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);
|
||||
$fontSize-0: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
|
||||
$fontSize-1: clamp(0.90rem, calc(0.83rem + 0.34vw), 1.09rem);
|
||||
$fontSize-2: clamp(1.08rem, calc(0.98rem + 0.50vw), 1.37rem);
|
||||
$fontSize-3: clamp(1.30rem, calc(1.15rem + 0.72vw), 1.71rem);
|
||||
$fontSize-4: clamp(1.56rem, calc(1.35rem + 1.01vw), 2.14rem);
|
||||
$fontSize-5: clamp(1.87rem, calc(1.59rem + 1.40vw), 2.67rem);
|
||||
$fontSize-6: clamp(2.24rem, calc(1.86rem + 1.91vw), 3.34rem);
|
||||
|
||||
/**
|
||||
* 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|8,s-l&g=s,l,xl,12
|
||||
* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,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);
|
||||
$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);
|
||||
$spacer-4xl: clamp(9.00rem, calc(8.65rem + 1.74vw), 10.00rem);
|
||||
$spacer-3xs: clamp(0.19rem, calc(0.17rem + 0.11vw), 0.25rem);
|
||||
$spacer-2xs: clamp(0.38rem, calc(0.35rem + 0.11vw), 0.44rem);
|
||||
$spacer-xs: clamp(0.56rem, calc(0.52rem + 0.22vw), 0.69rem);
|
||||
$spacer-s: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
|
||||
$spacer-m: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
|
||||
$spacer-l: clamp(1.50rem, calc(1.41rem + 0.43vw), 1.75rem);
|
||||
$spacer-xl: clamp(2.25rem, calc(2.12rem + 0.65vw), 2.63rem);
|
||||
$spacer-2xl: clamp(3.00rem, calc(2.83rem + 0.87vw), 3.50rem);
|
||||
$spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem);
|
||||
$spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.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);
|
||||
$spacer-3xl-4xl: clamp(6.75rem, calc(5.62rem + 5.65vw), 10.00rem);
|
||||
$spacer-3xs-2xs: clamp(0.19rem, calc(0.10rem + 0.43vw), 0.44rem);
|
||||
$spacer-2xs-xs: clamp(0.38rem, calc(0.27rem + 0.54vw), 0.69rem);
|
||||
$spacer-xs-s: clamp(0.56rem, calc(0.45rem + 0.54vw), 0.88rem);
|
||||
$spacer-s-m: clamp(0.75rem, calc(0.55rem + 0.98vw), 1.31rem);
|
||||
$spacer-m-l: clamp(1.13rem, calc(0.91rem + 1.09vw), 1.75rem);
|
||||
$spacer-l-xl: clamp(1.50rem, calc(1.11rem + 1.96vw), 2.63rem);
|
||||
$spacer-xl-2xl: clamp(2.25rem, calc(1.82rem + 2.17vw), 3.50rem);
|
||||
$spacer-2xl-3xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem);
|
||||
$spacer-3xl-4xl: clamp(4.50rem, calc(2.41rem + 10.43vw), 10.50rem);
|
||||
|
||||
/* Custom pairs */
|
||||
$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);
|
||||
$spacer-s-l: clamp(0.75rem, calc(0.40rem + 1.74vw), 1.75rem);
|
||||
|
|
|
|||
21
src/style/components/_Nav.scss
Normal file
21
src/style/components/_Nav.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@use '../theme';
|
||||
@use '../mixins';
|
||||
|
||||
.Nav {
|
||||
&-link {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
letter-spacing: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: wavy underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.rainbowify-text('.Nav-link', 'color');
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
@use 'sass:color';
|
||||
@use '../theme';
|
||||
@use '../mixins';
|
||||
|
||||
%_SiteContent {
|
||||
$_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);
|
||||
|
||||
padding: theme.$spacer-s;
|
||||
margin: theme.$spacer-3xs;
|
||||
background-color: $_SiteContent-backgroundColor;
|
||||
}
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
justify-self: end;
|
||||
padding-inline-end: theme.$spacer-s;
|
||||
font-family: theme.$fontFamily--display;
|
||||
font-size: theme.$fontSize-5;
|
||||
font-size: theme.$fontSize-6;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -36,8 +38,10 @@
|
|||
|
||||
&-content {
|
||||
@extend %_SiteContent;
|
||||
@include mixins.flow;
|
||||
|
||||
grid-area: Site-content;
|
||||
padding: theme.$spacer-m;
|
||||
}
|
||||
|
||||
&-info {
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@forward 'Site';
|
||||
@forward 'Nav';
|
||||
|
|
|
|||
Loading…
Reference in a new issue