mirror of
https://github.com/lavafroth/lavafroth.github.io.git
synced 2026-06-07 10:01:15 -03:00
feat: revamp header graphic
This commit is contained in:
Himadri Bhattacharjee
@@ -4,7 +4,7 @@
|
||||
--wide: 140rem;
|
||||
--narrow: 80rem;
|
||||
--side: calc((var(--wide) - var(--narrow)) / 2);
|
||||
--header: 8rem;
|
||||
--header: 10rem;
|
||||
--footer: calc(8rem + var(--safe-bottom));
|
||||
--code-bg: #282828;
|
||||
|
||||
@@ -137,6 +137,9 @@ body {
|
||||
background: var(--white);
|
||||
transition: background 0.4s ease-out;
|
||||
}
|
||||
.not-ready .header:after {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.not-ready {
|
||||
@@ -155,6 +158,7 @@ body > * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
html {
|
||||
font-size: 7px;
|
||||
@@ -240,31 +244,35 @@ img {
|
||||
font-family: LeagueGothic;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1rem;
|
||||
display: flex;
|
||||
max-width: var(--wide);
|
||||
margin-top: var(--gap);
|
||||
height: var(--header);
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
border: .25rem solid rgb(var(--dark), .2);
|
||||
place-content: space-between;
|
||||
position: relative;
|
||||
padding: var(--gap);
|
||||
}
|
||||
|
||||
.header:after {
|
||||
z-index: -100;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-image: url('header.svg');
|
||||
transition: opacity 400ms ease-out;
|
||||
background-size: 24rem;
|
||||
}
|
||||
|
||||
.header a {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
z-index: 1000;
|
||||
margin-top: 5rem;
|
||||
margin-left: var(--gap);
|
||||
display: flex;
|
||||
min-width: var(--side);
|
||||
padding-right: var(--gap);
|
||||
}
|
||||
|
||||
.site-name {
|
||||
padding-bottom: 0.3rem;
|
||||
overflow: auto;
|
||||
font-size: 3.4rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -296,17 +304,16 @@ img {
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
flex-shrink: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social a {
|
||||
@@ -322,27 +329,15 @@ img {
|
||||
animation: outline 1s forwards;
|
||||
}
|
||||
|
||||
.dark .social a {
|
||||
.dark .social a, .dark .header:after {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.logo {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
[data-menu='true'] {
|
||||
--header: 16rem;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header > * {
|
||||
height: calc(var(--header) / 2);
|
||||
}
|
||||
|
||||
[data-menu='true'] .menu {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
@@ -350,7 +345,7 @@ img {
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 0 !important;
|
||||
padding-top: var(--gap) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -359,22 +354,19 @@ img {
|
||||
.main {
|
||||
max-width: var(--narrow);
|
||||
min-height: calc(100% - var(--header) - var(--footer));
|
||||
padding-top: var(--y-gap);
|
||||
padding-top: var(--gap);
|
||||
padding-bottom: var(--y-gap);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin-bottom: calc(var(--y-gap) + 1rem);
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: var(--lit);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.coalesce {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
font-size: 1.8rem;
|
||||
line-height: 5.5rem;
|
||||
@@ -762,80 +754,6 @@ img {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ricing
|
||||
--------------------------------------------------- */
|
||||
body .lava {
|
||||
z-index: 1;
|
||||
--lava-background: var(--black);
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-height: 14rem;
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lavasource {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: var(--black);
|
||||
}
|
||||
body .lava .bubbles {
|
||||
position: absolute;
|
||||
top: 12.5rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1rem;
|
||||
background: var(--lava-background);
|
||||
filter: url("#blob");
|
||||
}
|
||||
body .lava .bubbles .bubble {
|
||||
position: absolute;
|
||||
left: var(--position, 50%);
|
||||
background: var(--lava-background);
|
||||
border-radius: 100%;
|
||||
-webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
|
||||
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
|
||||
transform: translate(-50%, 100%);
|
||||
}
|
||||
@-webkit-keyframes bubble-size {
|
||||
0%, 75% {
|
||||
width: var(--size, 4rem);
|
||||
height: var(--size, 4rem);
|
||||
}
|
||||
100% {
|
||||
width: 0rem;
|
||||
height: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble-size {
|
||||
0%, 75% {
|
||||
width: var(--size, 4rem);
|
||||
height: var(--size, 4rem);
|
||||
}
|
||||
100% {
|
||||
width: 0rem;
|
||||
height: 0rem;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bubble-move {
|
||||
0% {
|
||||
bottom: -4rem;
|
||||
}
|
||||
100% {
|
||||
bottom: var(--distance, 10rem);
|
||||
}
|
||||
}
|
||||
@keyframes bubble-move {
|
||||
0% {
|
||||
bottom: -4rem;
|
||||
}
|
||||
100% {
|
||||
bottom: var(--distance, 10rem);
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: LeagueGothic;
|
||||
src: url(LeagueGothic.ttf);
|
||||
|
||||
@@ -1,640 +0,0 @@
|
||||
- size: 3.1573520635288297rem
|
||||
distance: 9.777460616790547rem
|
||||
position: 79.82351594640258%
|
||||
time: 2.119561966408366s
|
||||
delay: -2.511069904370182s
|
||||
- size: 5.464382923434847rem
|
||||
distance: 8.202204257500235rem
|
||||
position: 73.05291394812365%
|
||||
time: 2.8163650791714443s
|
||||
delay: -2.10834069552337s
|
||||
- size: 5.54171635032949rem
|
||||
distance: 7.21628154079756rem
|
||||
position: 3.5185273501097587%
|
||||
time: 3.315974703485457s
|
||||
delay: -3.990557496815194s
|
||||
- size: 5.0780408722783115rem
|
||||
distance: 7.9062882665654115rem
|
||||
position: 96.75584737203708%
|
||||
time: 2.9935278687454545s
|
||||
delay: -3.4097998510686813s
|
||||
- size: 2.451790257749897rem
|
||||
distance: 9.375064105953562rem
|
||||
position: 28.633085440410255%
|
||||
time: 2.692548467667867s
|
||||
delay: -2.555074529650302s
|
||||
- size: 5.585816850593148rem
|
||||
distance: 6.9600422960042865rem
|
||||
position: 72.51244146669855%
|
||||
time: 3.483246137208243s
|
||||
delay: -3.326136738066893s
|
||||
- size: 2.7392297893119135rem
|
||||
distance: 8.030468953788962rem
|
||||
position: 8.86445777813215%
|
||||
time: 2.889575913936971s
|
||||
delay: -2.146827283616331s
|
||||
- size: 4.171962693508177rem
|
||||
distance: 7.211002745280388rem
|
||||
position: 58.2711084896879%
|
||||
time: 2.716958408694885s
|
||||
delay: -3.296786648250234s
|
||||
- size: 4.532330684666543rem
|
||||
distance: 8.578254049517938rem
|
||||
position: 0.565927638475408%
|
||||
time: 2.2846750146942254s
|
||||
delay: -3.4959322437591482s
|
||||
- size: 4.556463823827298rem
|
||||
distance: 7.094090631014913rem
|
||||
position: 70.39822723543791%
|
||||
time: 3.624537503862896s
|
||||
delay: -2.857420933636443s
|
||||
- size: 5.07603378328206rem
|
||||
distance: 6.645037412951618rem
|
||||
position: 8.652005686621889%
|
||||
time: 2.698244199090787s
|
||||
delay: -2.527616744094707s
|
||||
- size: 3.118201429900723rem
|
||||
distance: 8.143294120584633rem
|
||||
position: 64.35281134429346%
|
||||
time: 2.2798669446425186s
|
||||
delay: -2.1420127307963344s
|
||||
- size: 3.418153008888427rem
|
||||
distance: 9.064629817008509rem
|
||||
position: 52.44283935234534%
|
||||
time: 3.5827037199475575s
|
||||
delay: -2.995911643153717s
|
||||
- size: 2.191671240434883rem
|
||||
distance: 8.944809822901478rem
|
||||
position: 49.096851163552614%
|
||||
time: 2.6651233627364372s
|
||||
delay: -3.300002230918009s
|
||||
- size: 3.369853326930267rem
|
||||
distance: 6.331290194753575rem
|
||||
position: 104.21704424457798%
|
||||
time: 3.8955228568460027s
|
||||
delay: -3.4855417485078464s
|
||||
- size: 5.5113557063736245rem
|
||||
distance: 8.568147573044554rem
|
||||
position: 98.2498321096982%
|
||||
time: 3.278666488584876s
|
||||
delay: -2.3468950982430616s
|
||||
- size: 5.672304818021649rem
|
||||
distance: 9.782337765105405rem
|
||||
position: 32.67241762023444%
|
||||
time: 2.2703169650802293s
|
||||
delay: -3.9645713700523983s
|
||||
- size: 3.9388421289276483rem
|
||||
distance: 7.218402286241155rem
|
||||
position: 25.252599878511358%
|
||||
time: 3.061152350442821s
|
||||
delay: -2.0708403071805406s
|
||||
- size: 2.206141240805235rem
|
||||
distance: 7.760669925358866rem
|
||||
position: 1.4597033545946854%
|
||||
time: 3.969581249858505s
|
||||
delay: -2.2487091839080553s
|
||||
- size: 2.589806449494878rem
|
||||
distance: 6.079178451528124rem
|
||||
position: 56.42959891728088%
|
||||
time: 2.9194662555481306s
|
||||
delay: -2.515893631902179s
|
||||
- size: 4.916044498049767rem
|
||||
distance: 6.8458708795549095rem
|
||||
position: 52.90949158878315%
|
||||
time: 2.5752577719013083s
|
||||
delay: -3.6656718499279526s
|
||||
- size: 4.710265252521078rem
|
||||
distance: 9.065982215990093rem
|
||||
position: 62.232586785691396%
|
||||
time: 3.63261593199919s
|
||||
delay: -2.0799296560779794s
|
||||
- size: 4.80868502150219rem
|
||||
distance: 9.31843825728931rem
|
||||
position: 52.33077257309814%
|
||||
time: 3.1052043107141287s
|
||||
delay: -2.1829374129358485s
|
||||
- size: 4.60673963425293rem
|
||||
distance: 8.84329033694339rem
|
||||
position: 4.61870339863248%
|
||||
time: 3.5258904404870326s
|
||||
delay: -3.7259085270061183s
|
||||
- size: 2.30776598310732rem
|
||||
distance: 9.34563069282983rem
|
||||
position: 86.81246243436092%
|
||||
time: 3.3785018210778133s
|
||||
delay: -3.8884245347339097s
|
||||
- size: 3.771325201902952rem
|
||||
distance: 7.537743036639792rem
|
||||
position: 99.83782131571066%
|
||||
time: 2.9795293630719635s
|
||||
delay: -2.0440255508279725s
|
||||
- size: 3.515905905101607rem
|
||||
distance: 9.123800105025058rem
|
||||
position: 52.27887455419%
|
||||
time: 2.4743305426931745s
|
||||
delay: -2.1668790994717293s
|
||||
- size: 3.349975346700309rem
|
||||
distance: 6.099525580933591rem
|
||||
position: 86.19226178189942%
|
||||
time: 3.73351241604457s
|
||||
delay: -3.7277466742109526s
|
||||
- size: 2.594203315627623rem
|
||||
distance: 9.481507372000836rem
|
||||
position: 48.478568433922725%
|
||||
time: 2.001355560993734s
|
||||
delay: -2.873348731141025s
|
||||
- size: 4.208475535168454rem
|
||||
distance: 7.949479398044607rem
|
||||
position: 15.12817215146464%
|
||||
time: 2.8775747141619057s
|
||||
delay: -2.44697699668547s
|
||||
- size: 4.808679093865685rem
|
||||
distance: 8.35512071159537rem
|
||||
position: 20.77592767701002%
|
||||
time: 2.2941807591177183s
|
||||
delay: -2.0117738543581565s
|
||||
- size: 2.9094100558844787rem
|
||||
distance: 8.658895286915223rem
|
||||
position: 75.01431085194308%
|
||||
time: 3.337416107927284s
|
||||
delay: -2.329229409935038s
|
||||
- size: 4.916550270723802rem
|
||||
distance: 8.991371244178316rem
|
||||
position: 88.16428124678242%
|
||||
time: 3.543887527881868s
|
||||
delay: -3.117597716172686s
|
||||
- size: 4.183719518254308rem
|
||||
distance: 6.036664021374489rem
|
||||
position: 5.242327215616964%
|
||||
time: 3.680410804784464s
|
||||
delay: -2.1979710698033066s
|
||||
- size: 2.195201281915745rem
|
||||
distance: 7.54167483656756rem
|
||||
position: 100.82583136288696%
|
||||
time: 2.136409883934854s
|
||||
delay: -3.989942097610389s
|
||||
- size: 2.372472748316257rem
|
||||
distance: 8.971269770130899rem
|
||||
position: 35.22138774545767%
|
||||
time: 3.504781994206962s
|
||||
delay: -3.569878419825069s
|
||||
- size: 4.1960151286835945rem
|
||||
distance: 6.1215578387345095rem
|
||||
position: 46.31269673675248%
|
||||
time: 3.4151434354130674s
|
||||
delay: -2.387604702108186s
|
||||
- size: 2.196732774678229rem
|
||||
distance: 8.804848936451702rem
|
||||
position: 45.39987050964828%
|
||||
time: 3.316683633487673s
|
||||
delay: -3.1981971902884685s
|
||||
- size: 2.0529976835521486rem
|
||||
distance: 8.600957982798818rem
|
||||
position: 41.37759553673493%
|
||||
time: 3.2740925387984974s
|
||||
delay: -3.905976112047844s
|
||||
- size: 5.376914279513754rem
|
||||
distance: 7.407085630853494rem
|
||||
position: 63.24201611997715%
|
||||
time: 2.1264285640291862s
|
||||
delay: -3.051025398511498s
|
||||
- size: 3.7450799812351994rem
|
||||
distance: 9.27365599692357rem
|
||||
position: 59.16835173165882%
|
||||
time: 2.219333023219039s
|
||||
delay: -3.316382525233861s
|
||||
- size: 4.786605846571324rem
|
||||
distance: 7.578229664193804rem
|
||||
position: 60.6427424182681%
|
||||
time: 2.8273438402809394s
|
||||
delay: -3.455732177447113s
|
||||
- size: 2.938278644808678rem
|
||||
distance: 9.938293208055786rem
|
||||
position: 76.67119791168354%
|
||||
time: 2.103244616802722s
|
||||
delay: -3.9704952976762997s
|
||||
- size: 5.012613389182628rem
|
||||
distance: 9.810547260738733rem
|
||||
position: 19.822190366974635%
|
||||
time: 2.0906950847679164s
|
||||
delay: -3.778541998909121s
|
||||
- size: 2.352723596034365rem
|
||||
distance: 8.397253238309649rem
|
||||
position: -2.3316241256657855%
|
||||
time: 3.518616763158588s
|
||||
delay: -2.7090310143181644s
|
||||
- size: 2.560757032134992rem
|
||||
distance: 7.465288707793678rem
|
||||
position: 59.52289816263949%
|
||||
time: 2.3372893042504406s
|
||||
delay: -2.6207518451312732s
|
||||
- size: 5.764928617835869rem
|
||||
distance: 7.038862224644299rem
|
||||
position: 16.721242071278617%
|
||||
time: 2.141182276317782s
|
||||
delay: -2.8786872186742465s
|
||||
- size: 5.822991651957761rem
|
||||
distance: 8.095925336593208rem
|
||||
position: 43.22787179511871%
|
||||
time: 2.8490098963477255s
|
||||
delay: -2.7222347863832947s
|
||||
- size: 4.690866285770111rem
|
||||
distance: 9.582968751042802rem
|
||||
position: 9.034439977199735%
|
||||
time: 3.1395412275822516s
|
||||
delay: -2.746787293711964s
|
||||
- size: 3.40545539505801rem
|
||||
distance: 8.669729554506162rem
|
||||
position: -3.321193044421753%
|
||||
time: 3.24881749500489s
|
||||
delay: -2.174245724907715s
|
||||
- size: 2.172294383071536rem
|
||||
distance: 7.627910355839513rem
|
||||
position: 92.16608231592369%
|
||||
time: 2.047980200652401s
|
||||
delay: -3.862421045452209s
|
||||
- size: 2.425515628392274rem
|
||||
distance: 7.609422479470836rem
|
||||
position: 97.54851972848475%
|
||||
time: 2.5336071978279824s
|
||||
delay: -2.9319860615603712s
|
||||
- size: 4.777143245059128rem
|
||||
distance: 6.443914820662836rem
|
||||
position: 90.52922244564954%
|
||||
time: 3.3213063283891793s
|
||||
delay: -3.8505805988603834s
|
||||
- size: 3.072189810464895rem
|
||||
distance: 7.263219342754864rem
|
||||
position: 8.283420371048717%
|
||||
time: 3.699352106176918s
|
||||
delay: -2.9613689746478737s
|
||||
- size: 4.228476129628428rem
|
||||
distance: 6.36981004892698rem
|
||||
position: 36.436296361102784%
|
||||
time: 3.327948300393536s
|
||||
delay: -2.7019225510747096s
|
||||
- size: 4.745380579657766rem
|
||||
distance: 6.655268131779713rem
|
||||
position: 46.237833943953405%
|
||||
time: 3.4810790747966522s
|
||||
delay: -3.440845596373659s
|
||||
- size: 2.492986251507652rem
|
||||
distance: 8.850291761655484rem
|
||||
position: 38.54527449053424%
|
||||
time: 3.9459534084061887s
|
||||
delay: -3.2609494301905166s
|
||||
- size: 5.852520791787054rem
|
||||
distance: 8.611646147069422rem
|
||||
position: -2.112337659082899%
|
||||
time: 2.323082097601607s
|
||||
delay: -3.4305342668413266s
|
||||
- size: 4.712295628789016rem
|
||||
distance: 7.608690016853551rem
|
||||
position: -0.70572452280945%
|
||||
time: 2.5965373845022657s
|
||||
delay: -3.7992221451492902s
|
||||
- size: 2.9051516428147313rem
|
||||
distance: 7.402827513210772rem
|
||||
position: 23.977327965505314%
|
||||
time: 3.9382729257289633s
|
||||
delay: -2.9478878399723887s
|
||||
- size: 5.37854688142705rem
|
||||
distance: 8.550119881249136rem
|
||||
position: 54.19156364567646%
|
||||
time: 3.7770680873747033s
|
||||
delay: -3.5196870939784084s
|
||||
- size: 3.527712941562201rem
|
||||
distance: 6.062329591706292rem
|
||||
position: -2.89796421492563%
|
||||
time: 2.238022589528245s
|
||||
delay: -3.147375710595563s
|
||||
- size: 3.200640083274175rem
|
||||
distance: 7.859513120786255rem
|
||||
position: 13.747596391489125%
|
||||
time: 3.387430173535349s
|
||||
delay: -2.508616413150541s
|
||||
- size: 2.163960447441803rem
|
||||
distance: 8.778841962547915rem
|
||||
position: 95.94500362059767%
|
||||
time: 2.660417809838789s
|
||||
delay: -3.6130288690993306s
|
||||
- size: 3.156951339828767rem
|
||||
distance: 9.956599461412498rem
|
||||
position: 48.71783219463389%
|
||||
time: 2.0794702862063223s
|
||||
delay: -3.998680242326202s
|
||||
- size: 3.7964213024842985rem
|
||||
distance: 8.396204509710422rem
|
||||
position: 72.59901296142988%
|
||||
time: 2.7736924428434513s
|
||||
delay: -3.4193337878555097s
|
||||
- size: 5.15366941586544rem
|
||||
distance: 7.442379170996494rem
|
||||
position: 100.42443025305154%
|
||||
time: 3.9160173799259588s
|
||||
delay: -2.5350633304517403s
|
||||
- size: 2.379578429213379rem
|
||||
distance: 6.75740977433995rem
|
||||
position: 6.071825202433391%
|
||||
time: 2.7409259000987523s
|
||||
delay: -3.061518371851812s
|
||||
- size: 2.7161326200879365rem
|
||||
distance: 7.443012696347425rem
|
||||
position: 94.54154664489576%
|
||||
time: 2.252009059953056s
|
||||
delay: -2.850428025421688s
|
||||
- size: 5.338213729194962rem
|
||||
distance: 7.8296097748068245rem
|
||||
position: 104.31815394727944%
|
||||
time: 2.5181076015598363s
|
||||
delay: -2.792889558963517s
|
||||
- size: 4.677613519962753rem
|
||||
distance: 7.547053659581501rem
|
||||
position: 62.79503545575673%
|
||||
time: 3.9798958335619075s
|
||||
delay: -2.642889547046062s
|
||||
- size: 4.600841539587519rem
|
||||
distance: 7.111264085633966rem
|
||||
position: 32.93333286860395%
|
||||
time: 2.0995891279538843s
|
||||
delay: -2.82337099091355s
|
||||
- size: 4.937156614156352rem
|
||||
distance: 8.141423872810948rem
|
||||
position: 64.76377512989443%
|
||||
time: 3.878011907641161s
|
||||
delay: -2.0776515861838476s
|
||||
- size: 5.464209147082656rem
|
||||
distance: 6.16168015844219rem
|
||||
position: 81.9093862477641%
|
||||
time: 2.36096642742533s
|
||||
delay: -3.201129315223698s
|
||||
- size: 3.0638718374292786rem
|
||||
distance: 8.339518681300468rem
|
||||
position: 40.561492517815786%
|
||||
time: 3.971239093589107s
|
||||
delay: -3.3289101684961806s
|
||||
- size: 3.7095814852639535rem
|
||||
distance: 8.669471468140257rem
|
||||
position: 34.09311265803539%
|
||||
time: 2.430594868258288s
|
||||
delay: -3.287405916659933s
|
||||
- size: 2.9258659641866rem
|
||||
distance: 8.87926442884251rem
|
||||
position: 50.58373940219579%
|
||||
time: 3.4807962221846354s
|
||||
delay: -3.59856198756007s
|
||||
- size: 2.066940049404841rem
|
||||
distance: 8.748804284675305rem
|
||||
position: 96.8971395843717%
|
||||
time: 2.7453570642388048s
|
||||
delay: -3.0433424038921815s
|
||||
- size: 5.327630546150689rem
|
||||
distance: 7.3836875147364625rem
|
||||
position: 65.80986112208456%
|
||||
time: 2.164964416386732s
|
||||
delay: -3.136378080242951s
|
||||
- size: 3.9306688638454874rem
|
||||
distance: 9.944216015487171rem
|
||||
position: 16.696802138049012%
|
||||
time: 3.2471910283896617s
|
||||
delay: -2.798464726573834s
|
||||
- size: 2.0191221100891443rem
|
||||
distance: 7.599369051527898rem
|
||||
position: 68.0759833194086%
|
||||
time: 3.78513125348422s
|
||||
delay: -2.731704015074298s
|
||||
- size: 4.709476032752907rem
|
||||
distance: 8.592300096819226rem
|
||||
position: 101.56836072747207%
|
||||
time: 3.357821688195889s
|
||||
delay: -3.464741213898109s
|
||||
- size: 3.3015552870719986rem
|
||||
distance: 8.186281390229443rem
|
||||
position: 76.91449568684521%
|
||||
time: 2.239942114775954s
|
||||
delay: -3.8058407969687678s
|
||||
- size: 2.3303913710914212rem
|
||||
distance: 7.798936130721566rem
|
||||
position: 17.863987177199412%
|
||||
time: 2.569608702313029s
|
||||
delay: -2.6784270210611973s
|
||||
- size: 5.554787154774565rem
|
||||
distance: 8.592136414160255rem
|
||||
position: 89.18111414761651%
|
||||
time: 2.8800003662802327s
|
||||
delay: -2.2567149506099313s
|
||||
- size: 2.874849035422754rem
|
||||
distance: 9.102583798938209rem
|
||||
position: 87.9256543749225%
|
||||
time: 2.2168054627967226s
|
||||
delay: -3.805079017356886s
|
||||
- size: 4.472091382328382rem
|
||||
distance: 9.004045355075995rem
|
||||
position: 4.854675674342824%
|
||||
time: 3.8531075079215604s
|
||||
delay: -2.79800835062909s
|
||||
- size: 3.5726260835226924rem
|
||||
distance: 8.477994255893933rem
|
||||
position: 72.46149584193786%
|
||||
time: 3.979622326518513s
|
||||
delay: -2.061230017760451s
|
||||
- size: 4.163706989554627rem
|
||||
distance: 9.47489849437773rem
|
||||
position: 13.871782420024594%
|
||||
time: 2.3515400527428927s
|
||||
delay: -2.0995962728471347s
|
||||
- size: 5.548356420073219rem
|
||||
distance: 8.892675084107134rem
|
||||
position: 46.11933460856142%
|
||||
time: 3.545334586973909s
|
||||
delay: -3.3801543745894644s
|
||||
- size: 4.39219185055803rem
|
||||
distance: 7.933095131117099rem
|
||||
position: 47.221752007803346%
|
||||
time: 2.366338056378407s
|
||||
delay: -2.4633871132846257s
|
||||
- size: 4.869873825638225rem
|
||||
distance: 6.602238972606432rem
|
||||
position: 8.008413506612953%
|
||||
time: 2.2417693494331896s
|
||||
delay: -2.653305108946213s
|
||||
- size: 2.609803871778203rem
|
||||
distance: 6.465015130775617rem
|
||||
position: 98.45267853838197%
|
||||
time: 3.2582634203691807s
|
||||
delay: -2.5469765884864146s
|
||||
- size: 3.692170879348117rem
|
||||
distance: 6.148846216102932rem
|
||||
position: 42.598683207916814%
|
||||
time: 3.590027493217046s
|
||||
delay: -2.458627372938123s
|
||||
- size: 3.13371931340167rem
|
||||
distance: 8.629774977369975rem
|
||||
position: 8.26584091101138%
|
||||
time: 3.4632516036299292s
|
||||
delay: -2.4428047213945976s
|
||||
- size: 5.3337351507338rem
|
||||
distance: 9.514150167012112rem
|
||||
position: 82.45272269713838%
|
||||
time: 2.3798811696416964s
|
||||
delay: -2.7840053134258858s
|
||||
- size: 4.9046296721854405rem
|
||||
distance: 8.604974499035588rem
|
||||
position: 59.283370927934484%
|
||||
time: 2.8248091589138493s
|
||||
delay: -3.5693285957321708s
|
||||
- size: 2.6672752126499217rem
|
||||
distance: 8.387208213353594rem
|
||||
position: 13.267155378078542%
|
||||
time: 3.7363103446115558s
|
||||
delay: -2.910351872656129s
|
||||
- size: 2.2051971696247907rem
|
||||
distance: 7.2819438794174625rem
|
||||
position: 27.976116944859648%
|
||||
time: 3.350821422712959s
|
||||
delay: -3.547854220935776s
|
||||
- size: 5.428924414714262rem
|
||||
distance: 6.583819493754497rem
|
||||
position: 99.8398036887203%
|
||||
time: 2.4936663895530957s
|
||||
delay: -2.1438767599437383s
|
||||
- size: 2.0230413305356647rem
|
||||
distance: 9.43453826170662rem
|
||||
position: 12.213961398059165%
|
||||
time: 3.0772160237064186s
|
||||
delay: -3.0795424392120987s
|
||||
- size: 2.063930526108078rem
|
||||
distance: 9.558462346937564rem
|
||||
position: 68.07796995584836%
|
||||
time: 3.56929838791893s
|
||||
delay: -3.824027429996162s
|
||||
- size: 3.257099363627222rem
|
||||
distance: 6.621327219169994rem
|
||||
position: 92.33362842888727%
|
||||
time: 2.0517956650841005s
|
||||
delay: -3.4422427087546907s
|
||||
- size: 2.1171301477954065rem
|
||||
distance: 9.719096813129642rem
|
||||
position: 70.08436689879504%
|
||||
time: 3.7384308858183797s
|
||||
delay: -3.0706710752075197s
|
||||
- size: 5.112779410037207rem
|
||||
distance: 7.695429389814016rem
|
||||
position: -2.14966602682227%
|
||||
time: 3.57642299707581s
|
||||
delay: -2.4034192878360265s
|
||||
- size: 5.162675470130112rem
|
||||
distance: 9.212118723148667rem
|
||||
position: 3.0984197952934505%
|
||||
time: 3.2589513048824457s
|
||||
delay: -2.5093381281915423s
|
||||
- size: 2.7246674568463787rem
|
||||
distance: 9.12745268544741rem
|
||||
position: 49.120294680111435%
|
||||
time: 3.1762564511300977s
|
||||
delay: -3.832886220770901s
|
||||
- size: 5.349026043476247rem
|
||||
distance: 8.790374067372515rem
|
||||
position: 54.54843430655645%
|
||||
time: 2.0700772264716036s
|
||||
delay: -3.975720761844946s
|
||||
- size: 5.127729051171082rem
|
||||
distance: 6.142194386232878rem
|
||||
position: 71.97016585088087%
|
||||
time: 2.312705653014668s
|
||||
delay: -2.350598744844194s
|
||||
- size: 2.0201015578317145rem
|
||||
distance: 9.75675051990936rem
|
||||
position: 8.020062789238711%
|
||||
time: 3.0732904442207842s
|
||||
delay: -3.4598954151773706s
|
||||
- size: 2.9164605310296974rem
|
||||
distance: 8.41873984544106rem
|
||||
position: 51.612260976605086%
|
||||
time: 2.142616282498704s
|
||||
delay: -2.3847920007587478s
|
||||
- size: 3.5032717049186415rem
|
||||
distance: 6.582979418765931rem
|
||||
position: -3.076434382195019%
|
||||
time: 3.874670459658509s
|
||||
delay: -2.515671411117263s
|
||||
- size: 2.141933748277137rem
|
||||
distance: 8.59581371621693rem
|
||||
position: 33.93429226358781%
|
||||
time: 3.6454031897063164s
|
||||
delay: -2.7940742798554132s
|
||||
- size: 3.345442714426433rem
|
||||
distance: 9.044260951535312rem
|
||||
position: -4.650294346217494%
|
||||
time: 2.0736419664755537s
|
||||
delay: -2.778792241654439s
|
||||
- size: 2.1263129168062553rem
|
||||
distance: 7.3913517942503875rem
|
||||
position: 31.45504027436062%
|
||||
time: 2.4466944233932817s
|
||||
delay: -3.7532376177265623s
|
||||
- size: 5.241379779224864rem
|
||||
distance: 6.259437679330544rem
|
||||
position: 102.1413894444833%
|
||||
time: 3.8907656928301555s
|
||||
delay: -3.3447980056450124s
|
||||
- size: 2.331998964957984rem
|
||||
distance: 9.094390629027135rem
|
||||
position: -2.6908383211867837%
|
||||
time: 2.8453745091133786s
|
||||
delay: -3.198027357641816s
|
||||
- size: 3.8204190766849466rem
|
||||
distance: 6.442443820718948rem
|
||||
position: 12.413067933385648%
|
||||
time: 2.7830902741696306s
|
||||
delay: -3.1672753932191284s
|
||||
- size: 4.529982717229779rem
|
||||
distance: 9.37007755632819rem
|
||||
position: 100.37896472152282%
|
||||
time: 2.569522003146849s
|
||||
delay: -2.2551840817951367s
|
||||
- size: 5.92838696231237rem
|
||||
distance: 6.7301106256864545rem
|
||||
position: 32.34812216630464%
|
||||
time: 3.9023927560222624s
|
||||
delay: -2.255056982682299s
|
||||
- size: 4.699351072125338rem
|
||||
distance: 6.766442174868489rem
|
||||
position: 16.470785618032696%
|
||||
time: 2.9972294563183746s
|
||||
delay: -2.3732040837342128s
|
||||
- size: 4.249420105641767rem
|
||||
distance: 9.041961853600057rem
|
||||
position: 38.606346517159736%
|
||||
time: 2.373142369175816s
|
||||
delay: -2.6151599921478534s
|
||||
- size: 2.344663842468246rem
|
||||
distance: 7.759965494391591rem
|
||||
position: 65.474437910675%
|
||||
time: 3.971142330142072s
|
||||
delay: -3.229227249606911s
|
||||
- size: 2.422280062220338rem
|
||||
distance: 7.543330618328514rem
|
||||
position: 81.87537876523214%
|
||||
time: 2.3733202285494865s
|
||||
delay: -2.924996274989179s
|
||||
- size: 2.0125967736893333rem
|
||||
distance: 9.770773664089738rem
|
||||
position: 64.36956820131321%
|
||||
time: 2.210066626569258s
|
||||
delay: -2.2942771000992472s
|
||||
- size: 4.566565802402101rem
|
||||
distance: 6.704230153890237rem
|
||||
position: 62.113076351236%
|
||||
time: 2.5804502921480745s
|
||||
delay: -3.529413243520293s
|
||||
- size: 2.910533286234803rem
|
||||
distance: 8.80350651389128rem
|
||||
position: 59.47561542831464%
|
||||
time: 3.433471577337245s
|
||||
delay: -3.491075664457081s
|
||||
- size: 2.5176134863940742rem
|
||||
distance: 9.543890232600983rem
|
||||
position: 2.633638418719375%
|
||||
time: 3.9236323881961654s
|
||||
delay: -2.8545051911876764s
|
||||
@@ -1,72 +1,56 @@
|
||||
<header class="header">
|
||||
<div class="lava">
|
||||
<div class="logo">
|
||||
<h1>
|
||||
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a>
|
||||
</h1>
|
||||
<svg version="1.1" class="btn-dark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
|
||||
<path class="circle" d="M30,16c7.73,0,14,6.27,14,14c0,3.81-1.53,7.27-4,9.8c-2.54,2.59-6.08,4.2-10,4.2c-7.73,0-14-6.27-14-14C16,22.27,22.27,16,30,16z"></path>
|
||||
<g class="rays" data-svg-origin="30 30">
|
||||
<line class="line" x1="30" y1="11" x2="30" y2="7"></line>
|
||||
<line class="line" x1="43.44" y1="16.57" x2="46.26" y2="13.74" ></line>
|
||||
<line class="line" x1="49" y1="30" x2="53" y2="30"></line>
|
||||
<line class="line" x1="43.43" y1="43.44" x2="46.26" y2="46.26"></line>
|
||||
<line class="line" x1="30" y1="49" x2="30" y2="53"></line>
|
||||
<line class="line" x1="16.56" y1="43.43" x2="13.74" y2="46.26"></line>
|
||||
<line class="line" x1="11" y1="30" x2="7" y2="30"></line>
|
||||
<line class="line" x1="16.57" y1="16.56" x2="13.74" y2="13.74"></line>
|
||||
</g>
|
||||
</svg>
|
||||
<nav class="social">
|
||||
{{ range .Site.Params.socials }}
|
||||
<a
|
||||
class="{{ .platform }}"
|
||||
style="--url: url(./{{ .platform }}.svg)"
|
||||
href="{{ .url }}"
|
||||
aria-label="{{ .platform }}"
|
||||
target="_blank"
|
||||
></a>
|
||||
{{ end }}
|
||||
{{ $page := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<a
|
||||
{{ if in $page.RelPermalink .URL }}
|
||||
class="active"
|
||||
{{ end }}
|
||||
href="{{ .URL }}"
|
||||
aria-label="{{ .Name }}"
|
||||
style="--url: url(./{{ .Name }}.svg)"
|
||||
></a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<script>
|
||||
const bodyClx = document.body.classList;
|
||||
const btnDark = document.querySelector('.btn-dark');
|
||||
const sysDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const darkVal = localStorage.getItem('dark');
|
||||
|
||||
const setDark = isDark => (bodyClx.toggle('dark', isDark), localStorage.setItem('dark', isDark));
|
||||
|
||||
setDark(darkVal ? darkVal === 'true' : sysDark.matches);
|
||||
requestAnimationFrame(() => bodyClx.remove('not-ready'));
|
||||
|
||||
btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
|
||||
sysDark.addEventListener('change', ({ matches }) => setDark(matches));
|
||||
</script>
|
||||
</div>
|
||||
<div class="bubbles">
|
||||
{{ range .Site.Data.bubbles }}
|
||||
<div class="bubble" style="--size:{{ .size }}; --distance:{{ .distance }}; --position:{{ .position }}; --time:{{ .time }}; --delay:{{ .delay }};"></div>
|
||||
{{ end }}
|
||||
<div class="lavasource"></div>
|
||||
</div>
|
||||
<svg>
|
||||
<defs>
|
||||
<filter id="blob">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
|
||||
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<div class="coalesce">
|
||||
<h1>
|
||||
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a>
|
||||
</h1>
|
||||
<svg version="1.1" class="btn-dark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
|
||||
<path class="circle" d="M30,16c7.73,0,14,6.27,14,14c0,3.81-1.53,7.27-4,9.8c-2.54,2.59-6.08,4.2-10,4.2c-7.73,0-14-6.27-14-14C16,22.27,22.27,16,30,16z"></path>
|
||||
<g class="rays" data-svg-origin="30 30">
|
||||
<line class="line" x1="30" y1="11" x2="30" y2="7"></line>
|
||||
<line class="line" x1="43.44" y1="16.57" x2="46.26" y2="13.74" ></line>
|
||||
<line class="line" x1="49" y1="30" x2="53" y2="30"></line>
|
||||
<line class="line" x1="43.43" y1="43.44" x2="46.26" y2="46.26"></line>
|
||||
<line class="line" x1="30" y1="49" x2="30" y2="53"></line>
|
||||
<line class="line" x1="16.56" y1="43.43" x2="13.74" y2="46.26"></line>
|
||||
<line class="line" x1="11" y1="30" x2="7" y2="30"></line>
|
||||
<line class="line" x1="16.57" y1="16.56" x2="13.74" y2="13.74"></line>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="social">
|
||||
{{ range .Site.Params.socials }}
|
||||
<a
|
||||
class="{{ .platform }}"
|
||||
style="--url: url(./{{ .platform }}.svg)"
|
||||
href="{{ .url }}"
|
||||
aria-label="{{ .platform }}"
|
||||
target="_blank"
|
||||
></a>
|
||||
{{ end }}
|
||||
{{ $page := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<a
|
||||
{{ if in $page.RelPermalink .URL }}
|
||||
class="active"
|
||||
{{ end }}
|
||||
href="{{ .URL }}"
|
||||
aria-label="{{ .Name }}"
|
||||
style="--url: url(./{{ .Name }}.svg)"
|
||||
></a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<script>
|
||||
const bodyClx = document.body.classList;
|
||||
const btnDark = document.querySelector('.btn-dark');
|
||||
const sysDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const darkVal = localStorage.getItem('dark');
|
||||
|
||||
const setDark = isDark => (bodyClx.toggle('dark', isDark), localStorage.setItem('dark', isDark));
|
||||
|
||||
setDark(darkVal ? darkVal === 'true' : sysDark.matches);
|
||||
requestAnimationFrame(() => bodyClx.remove('not-ready'));
|
||||
|
||||
btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
|
||||
sysDark.addEventListener('change', ({ matches }) => setDark(matches));
|
||||
</script>
|
||||
</header>
|
||||
|
||||
1
themes/paprika/static/header.svg
Normal file
1
themes/paprika/static/header.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
Reference in New Issue
Block a user