✨ feat: Info & Social boxes
This commit is contained in:
marleyrae
parent
870a0497f7
commit
0b6809709c
14 changed files with 156 additions and 22 deletions
|
|
@ -1,6 +1,37 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<option name="ignoredUrls">
|
||||
<list>
|
||||
<option value="http://localhost" />
|
||||
<option value="http://127.0.0.1" />
|
||||
<option value="http://0.0.0.0" />
|
||||
<option value="http://www.w3.org/" />
|
||||
<option value="http://json-schema.org/draft" />
|
||||
<option value="http://java.sun.com/" />
|
||||
<option value="http://xmlns.jcp.org/" />
|
||||
<option value="http://javafx.com/javafx/" />
|
||||
<option value="http://javafx.com/fxml" />
|
||||
<option value="http://maven.apache.org/xsd/" />
|
||||
<option value="http://maven.apache.org/POM/" />
|
||||
<option value="http://www.springframework.org/schema/" />
|
||||
<option value="http://www.springframework.org/tags" />
|
||||
<option value="http://www.springframework.org/security/tags" />
|
||||
<option value="http://www.thymeleaf.org" />
|
||||
<option value="http://www.jboss.org/j2ee/schema/" />
|
||||
<option value="http://www.jboss.com/xml/ns/" />
|
||||
<option value="http://www.ibm.com/webservices/xsd" />
|
||||
<option value="http://activemq.apache.org/schema/" />
|
||||
<option value="http://schema.cloudfoundry.org/spring/" />
|
||||
<option value="http://schemas.xmlsoap.org/" />
|
||||
<option value="http://cxf.apache.org/schemas/" />
|
||||
<option value="http://primefaces.org/ui" />
|
||||
<option value="http://tiles.apache.org/" />
|
||||
<option value="http://nerdlistings.info" />
|
||||
</list>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
<inspection_tool class="ReturnFromFinallyBlockJS" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||
<inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
|
||||
<option name="processCode" value="false" />
|
||||
|
|
|
|||
35
dist/index.html
vendored
35
dist/index.html
vendored
|
|
@ -29,7 +29,7 @@
|
|||
<a href="/diary/" class="Nav-link">diary</a>
|
||||
<a href="/links/" class="Nav-link">links</a>
|
||||
|
||||
<hr class="Nav-separator">
|
||||
<hr>
|
||||
|
||||
<a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
|
||||
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
|
||||
|
|
@ -55,11 +55,38 @@
|
|||
</main>
|
||||
|
||||
<aside class="Site-info">
|
||||
|
||||
<b>visitors:</b><br>
|
||||
<b>updated:</b>
|
||||
|
||||
</aside>
|
||||
|
||||
<aside class="Site-social">
|
||||
|
||||
<aside class="Site-social Social">
|
||||
<div class="Social-webring">
|
||||
<a href="https://hotlinewebring.club/punkfairie/previous" class="Social-webringArrow"><<</a>
|
||||
<a href="https://hotlinewebring.club/" target="_blank" class="Social-webringLink">hotline</a>
|
||||
<a href="https://hotlinewebring.club/punkfairie/next" class="Social-webringArrow">>></a>
|
||||
</div>
|
||||
|
||||
<div class="Social-webring">
|
||||
<a href="https://webring.dinhe.net/prev/https://punkfairie.net" class="Social-webringArrow"><<</a>
|
||||
<a href="https://webring.dinhe.net/" target="_blank" class="Social-webringLink">retronaut</a>
|
||||
<a href="https://webring.dinhe.net/next/https://punkfairie.net" class="Social-webringArrow">>></a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<a href="https://keysklubhouse.neocities.org" target="_blank" class="Social-badge">
|
||||
<img src="/img/badges/handcoded.png" alt="Badge with the text hand coded">
|
||||
</a>
|
||||
|
||||
<a href="https://linklane.net" target="_blank" class="Social-badge">
|
||||
<img src="img/badges/linklane.png" title="Link Lane" alt="LinkLane.net">
|
||||
</a>
|
||||
|
||||
<a href="http://nerdlistings.info/" target="_blank" class="Social-badge">
|
||||
<img src="img/badges/nerdlistings.gif" title="Nerd Listings" alt="NerdListings.info">
|
||||
</a>
|
||||
|
||||
</aside>
|
||||
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
|
|
|
|||
0
dist/style/components/Separator.css
vendored
Normal file
0
dist/style/components/Separator.css
vendored
Normal file
1
dist/style/components/Social.css
vendored
Normal file
1
dist/style/components/Social.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.Social{text-align:center}.Social-webringArrow,.Social-webringLink{color:inherit}.Social-webringArrow{-webkit-text-decoration:none;text-decoration:none}@media(prefers-reduced-motion:no-preference){.Social-webringArrow{transition:letter-spacing .2s}.Social-webringArrow:focus,.Social-webringArrow:hover{letter-spacing:2.4px;-webkit-text-decoration:none;text-decoration:none}}.Social hr{margin-bottom:clamp(.75rem,.71rem + .22vw,.88rem);margin-top:clamp(.75rem,.71rem + .22vw,.88rem)}.Social-badge{display:inline-block}:nth-child(7n+1 of .Social-webring){color:#dc2626}:nth-child(7n+2 of .Social-webring){color:#ea580c}:nth-child(7n+3 of .Social-webring){color:#ca8a04}:nth-child(7n+4 of .Social-webring){color:#65a30d}:nth-child(7n+5 of .Social-webring){color:#0892a2}:nth-child(7n+6 of .Social-webring){color:#9333ea}:nth-child(7n+7 of .Social-webring){color:#db2777}
|
||||
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{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{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" 2fr "Site-social Site-content Site-subNav" 3fr "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{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.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{text-align:right}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;text-align:inherit;-webkit-text-decoration:underline;text-decoration:underline;width:100%}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Nav-separator{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}: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}
|
||||
*,: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{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}b{font-weight:400}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}hr{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}a{cursor:pointer;-webkit-text-decoration:underline}a,a:focus,a:hover{text-decoration:underline}a:focus,a:hover{-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{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" 2fr "Site-social Site-content Site-subNav" 3fr "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{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.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{text-align:right}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;text-align:inherit;-webkit-text-decoration:underline;text-decoration:underline;width:100%}.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}.Social{text-align:center}.Social-webringArrow,.Social-webringLink{color:inherit}.Social-webringArrow{-webkit-text-decoration:none;text-decoration:none}@media(prefers-reduced-motion:no-preference){.Social-webringArrow{transition:letter-spacing .2s}.Social-webringArrow:focus,.Social-webringArrow:hover{letter-spacing:2.4px;-webkit-text-decoration:none;text-decoration:none}}.Social hr{margin-bottom:clamp(.75rem,.71rem + .22vw,.88rem);margin-top:clamp(.75rem,.71rem + .22vw,.88rem)}.Social-badge{display:inline-block}:nth-child(7n+1 of .Social-webring){color:#dc2626}:nth-child(7n+2 of .Social-webring){color:#ea580c}:nth-child(7n+3 of .Social-webring){color:#ca8a04}:nth-child(7n+4 of .Social-webring){color:#65a30d}:nth-child(7n+5 of .Social-webring){color:#0892a2}:nth-child(7n+6 of .Social-webring){color:#9333ea}:nth-child(7n+7 of .Social-webring){color:#db2777}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{% include 'site-info' %}
|
||||
</aside>
|
||||
|
||||
<aside class="Site-social">
|
||||
<aside class="Site-social Social">
|
||||
{% include 'site-social' %}
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<a href="/diary/" class="Nav-link">diary</a>
|
||||
<a href="/links/" class="Nav-link">links</a>
|
||||
|
||||
<hr class="Nav-separator">
|
||||
<hr>
|
||||
|
||||
<a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
|
||||
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
<b>visitors:</b><br>
|
||||
<b>updated:</b>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="Social-webring">
|
||||
<a href="https://hotlinewebring.club/punkfairie/previous" class="Social-webringArrow"><<</a>
|
||||
<a href="https://hotlinewebring.club/" target="_blank" class="Social-webringLink">hotline</a>
|
||||
<a href="https://hotlinewebring.club/punkfairie/next" class="Social-webringArrow">>></a>
|
||||
</div>
|
||||
|
||||
<div class="Social-webring">
|
||||
<a href="https://webring.dinhe.net/prev/https://punkfairie.net" class="Social-webringArrow"><<</a>
|
||||
<a href="https://webring.dinhe.net/" target="_blank" class="Social-webringLink">retronaut</a>
|
||||
<a href="https://webring.dinhe.net/next/https://punkfairie.net" class="Social-webringArrow">>></a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<a href="https://keysklubhouse.neocities.org" target="_blank" class="Social-badge">
|
||||
<img src="/img/badges/handcoded.png" alt="Badge with the text hand coded">
|
||||
</a>
|
||||
|
||||
<a href="https://linklane.net" target="_blank" class="Social-badge">
|
||||
<img src="img/badges/linklane.png" title="Link Lane" alt="LinkLane.net">
|
||||
</a>
|
||||
|
||||
<a href="http://nerdlistings.info/" target="_blank" class="Social-badge">
|
||||
<img src="img/badges/nerdlistings.gif" title="Nerd Listings" alt="NerdListings.info">
|
||||
</a>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Global styles. This is the ONLY sheet that is allowed plain HTML tags.
|
||||
* Global styles. This is the ONLY sheet that is allowed plain HTML tags for anything other than margin.
|
||||
*/
|
||||
|
||||
@use 'theme';
|
||||
|
|
@ -19,5 +19,19 @@ body {
|
|||
letter-spacing: theme.$letterSpacing;
|
||||
}
|
||||
|
||||
@include mixins.rainbowify-text('i', 'color');
|
||||
@include mixins.rainbowify-text('b', 'color');
|
||||
b {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@include mixins.rainbowify-text(i, color);
|
||||
@include mixins.rainbowify-text(b, color);
|
||||
|
||||
hr {
|
||||
background-image: theme.$gradient;
|
||||
border: none;
|
||||
block-size: theme.$spacer-4xs;
|
||||
}
|
||||
|
||||
a {
|
||||
@include mixins.link-style;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,3 +18,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin link-style() {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: wavy underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
src/style/components/Social.scss
Normal file
34
src/style/components/Social.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@use '../theme';
|
||||
@use '../mixins';
|
||||
|
||||
.Social {
|
||||
text-align: center;
|
||||
|
||||
&-webringArrow, &-webringLink {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&-webringArrow {
|
||||
text-decoration: none;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: letter-spacing 200ms;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
letter-spacing: theme.$letterSpacing * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block-start: theme.$spacer-s;
|
||||
margin-block-end: theme.$spacer-s;
|
||||
}
|
||||
|
||||
&-badge {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.rainbowify-text('.Social-webring', color);
|
||||
|
|
@ -9,27 +9,17 @@
|
|||
}
|
||||
|
||||
&-link {
|
||||
@include mixins.link-style;
|
||||
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
text-align: inherit;
|
||||
text-decoration: underline;
|
||||
letter-spacing: inherit;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
inline-size: 100%;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: wavy underline;
|
||||
}
|
||||
}
|
||||
|
||||
&-separator {
|
||||
background-image: theme.$gradient;
|
||||
border: none;
|
||||
block-size: theme.$spacer-4xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
@forward 'Site';
|
||||
@forward 'Nav';
|
||||
@forward 'Social';
|
||||
|
|
|
|||
Loading…
Reference in a new issue