Browse Source

Cleanup, shrink images, etc

master
Charlie Ritter 1 week ago
parent
commit
6febba4fca
7 changed files with 17 additions and 48 deletions
  1. BIN
      images/lily-i-s.webp
  2. BIN
      images/lily-s.webp
  3. BIN
      images/lily-z-s.webp
  4. +1
    -1
      index.html
  5. +8
    -35
      lily.js
  6. +0
    -3
      prince/index.html
  7. +8
    -9
      styles.css

BIN
images/lily-i-s.webp View File

Before After

BIN
images/lily-s.webp View File

Before After

BIN
images/lily-z-s.webp View File

Before After

+ 1
- 1
index.html View File

@ -11,7 +11,7 @@
</head>
<body>
<header>
<h1>Welcome to My Website!<img src="images/lily.webp" id="lily" alt="Lily Hoshikawa from Zombieland Saga"></h1>
<h1>Welcome to My Website!<img src="images/lily-s.webp" id="lily" alt="Lily Hoshikawa from Zombieland Saga"></h1>
</header>
<main>
<section>

+ 8
- 35
lily.js View File

@ -1,39 +1,12 @@
// Copyright 2020 Charlie Ritter
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions
// are met:
// 1. Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// 2. Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following
// disclaimer in the documentation and/or other materials provided
// with the distribution.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
// FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
// COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
// INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
// (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
// HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
// OF THE POSSIBILITY OF SUCH DAMAGE.
document.addEventListener('DOMContentLoaded', () => {
const lily = document.getElementById('lily')
lily.addEventListener('mouseenter', () => {
lily.src = 'images/lily-z.webp'
document.addEventListener('DOMContentLoaded', function() {
var lily = document.getElementById('lily')
lily.addEventListener('mouseenter', function() {
lily.src = 'images/lily-z-s.webp'
})
lily.addEventListener('mouseleave', () => {
lily.src = 'images/lily .webp'
lily.addEventListener('mouseleave', function() {
lily.src = 'images/lily-s.webp'
})
lily.addEventListener('mousedown', () => {
lily.src = 'images/lily-i .webp'
lily.addEventListener('mousedown', function() {
lily.src = 'images/lily-i-s.webp'
})
})

+ 0
- 3
prince/index.html View File

@ -82,8 +82,5 @@
</ol>
</section>
</main>
<footer>
<p>Copyright &copy; Charlie Ritter 2020</p>
</footer>
</body>
</html>

+ 8
- 9
styles.css View File

@ -2,7 +2,6 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 110%;
line-height: 1.4;
--main-color: #da2f1e;
box-sizing: border-box;
overflow-x: hidden;
text-rendering: optimizeLegibility;
@ -18,13 +17,13 @@ h1 {
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
margin-top: 2em;
margin-bottom: 0.25em;
margin-top: 1.75em;
/* text-transform: lowercase; */
}
h1 {
margin-top: 1em;
margin-top: 0.5em;
}
h1 a {
@ -50,9 +49,10 @@ main p:nth-of-type(n + 2) {
body {
margin: auto;
padding: 1em;
padding: 0 1em 1em 1em;
max-width: 35rem;
background-color: lightgrey;
color: #050e0e;
}
.mono, code {
@ -79,6 +79,7 @@ p code {
ol, ul {
padding-left: 0;
margin: 0;
}
ul {
@ -86,7 +87,7 @@ ul {
}
a {
color: var(--main-color);
color: red;
}
img {
@ -100,9 +101,8 @@ img.license {
#lily {
box-shadow: none;
filter: drop-shadow(0 0 5px grey);
filter: drop-shadow(0 0 3px grey);
display: inline;
height: 5.5em;
}
@media (max-width: 600px) {
@ -112,7 +112,6 @@ img.license {
}
blockquote {
border-left: 0.25rem solid var(--main-color);
margin: 0 0 1em 0;
padding: 1em 2em 0 2em;
}

Loading…
Cancel
Save