eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Update favicons and touch icons

Browse source
This commit is contained in:
Eryn Wells 2022-11-24 08:29:59 -05:00
parent 88476a707e
commit f0931bd9d1
7 changed files with 45 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

54
logo.html
View file

@ -1,8 +1,13 @@
<!doctype html>
<html>
<body>
<h1>Site Logo</h1>
<div id="logo">E</div>
<header>
<h1>Site Logo</h1>
</header>
<main>
<div class="logo" id="touchicon"><span>E</span></div>
<div class="logo" id="favicon"><span>E</span></div>
</main>
</body>
<style>
@font-face {
@ -19,28 +24,32 @@
--purple: rgb(161, 49, 232);
--lilac: rgb(187, 121, 245);
}
* { box-sizing: border-box; }
body {
align-items: center;
color: #222;
padding-block-start: 6vmin;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding-block-start: 6vmin;
font-family: "Museo_Slab";
}
#logo {
main {
align-items: center;
display: flex;
gap: 2rem;
margin: 0 auto;
}
.logo {
border: 1px dotted #aaa;
color: transparent;
border: 0.5rem solid #222;
border-radius: 6px;
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: blue;
text-align: center;
line-height: 1;
}
.logo > span {
display: block;
position: relative;
background:
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
@ -49,9 +58,22 @@ body {
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
background-clip: text;
}
#touchicon {
font-size: 600px;
text-align: center;
line-height: 0.8;
width: 512px;
height: 512px;
}
#touchicon > span {
top: 15px;
}
#favicon {
font-size: 24px;
width: 24px;
height: 24px;
}
#favicon > span {
top: 0.5px;
}
</style>
</html>