vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 11:33:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip(22w7i): hide contact button

Browse source
This commit is contained in:
Victor Westerlund 2022-02-20 16:17:55 +01:00
parent e4d1882cb0
commit aaa8a4d66d
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
public/assets/css/style.css
View file

@ -3,6 +3,7 @@
--color-contrast: 256, 256, 256; --color-contrast: 256, 256, 256;
--padding: clamp(40px, 2vw, 2vw); --padding: clamp(40px, 2vw, 2vw);
--border-size: clamp(4px, .25vw, .25vw);
} }
/* -- Cornerstones -- */ /* -- Cornerstones -- */
@ -68,6 +69,8 @@ body > div {
text-align: center; text-align: center;
user-select: none; user-select: none;
background-color: rgba(var(--color-contrast), .13); background-color: rgba(var(--color-contrast), .13);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
box-shadow: box-shadow:
inset 0 .3vh 1.6vh rgba(0, 0, 0, 0), inset 0 .3vh 1.6vh rgba(0, 0, 0, 0),
0 .1vh .3vh rgba(0, 0, 0, .12), 0 .1vh .3vh rgba(0, 0, 0, .12),
@ -83,9 +86,9 @@ body > div {
#intro a { #intro a {
padding: var(--padding-vert) 2vw; padding: var(--padding-vert) 2vw;
border-radius: 100px; border-radius: 100px;
border: solid clamp(4px, .25vw, .25vw) rgba(var(--color-contrast), .3); border: solid var(--border-size) rgba(var(--color-contrast), 0);
margin: var(--padding) 0; margin: var(--padding) 0;
width: calc(100% - var(--padding)); width: calc(100% - ((var(--padding) / 2) + var(--border-size)));
} }
#intro p { #intro p {
@ -112,6 +115,7 @@ body > div {
border-radius: clamp(18px, 1vw, 1vw); border-radius: clamp(18px, 1vw, 1vw);
backdrop-filter: saturate(100) brightness(.4); backdrop-filter: saturate(100) brightness(.4);
-webkit-backdrop-filter: saturate(100) brightness(.4); -webkit-backdrop-filter: saturate(100) brightness(.4);
border: solid var(--border-size) rgba(var(--color-contrast), .1);
box-shadow: 0 1vh 2vh rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); box-shadow: 0 1vh 2vh rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
} }
@ -120,7 +124,7 @@ body > div {
height: var(--portrait-size); height: var(--portrait-size);
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
top: calc((var(--portrait-size) / 2) * -1); top: calc(((var(--portrait-size) / 2) + var(--border-size)) * -1);
background-color: rgb(var(--color-base)); background-color: rgb(var(--color-base));
box-shadow: 0 1vh 2vh rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23); box-shadow: 0 1vh 2vh rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23);
} }
@ -143,11 +147,15 @@ body > div {
@media (pointer: fine) { @media (pointer: fine) {
:is(#intro, #card) a { :is(#intro, #card) a {
--transition-speed: 200ms; --transition-speed: 200ms;
transition: var(--transition-speed) background-color, var(--transition-speed) box-shadow; transition:
var(--transition-speed) background-color,
var(--transition-speed) box-shadow,
var(--transition-speed) border-color;
} }
:is(#intro, #card) a:hover { :is(#intro, #card) a:hover {
background-color: rgba(var(--color-contrast), .2); background-color: rgba(var(--color-contrast), .2);
border-color: rgba(var(--color-contrast), .2);
box-shadow: box-shadow:
inset 0 .3vh 1.6vh rgba(0, 0, 0, .16), inset 0 .3vh 1.6vh rgba(0, 0, 0, .16),
0 .3vh .6vh rgba(0, 0, 0, .16), 0 .3vh .6vh rgba(0, 0, 0, .16),
@ -159,6 +167,17 @@ body > div {
} }
} }
@media (max-width: 330px) {
p, a {
text-align: left;
font-size: 18px;
}
#card {
padding: calc(var(--padding) / 2);
}
}
@media (min-aspect-ratio: 14/9) and (min-height: 600px) { @media (min-aspect-ratio: 14/9) and (min-height: 600px) {
body { body {
display: grid; display: grid;

2
public/index.html
View file

@ -38,7 +38,7 @@
<div> <div>
<p>...and ☕, full-time</p> <p>...and ☕, full-time</p>
</div> </div>
<a href="contact" data-func>contact me</a> <!--<a href="contact">contact me</a>-->
</div> </div>
</div> </div>
<script type="module" src="assets/js/script.mjs"></script> <script type="module" src="assets/js/script.mjs"></script>