diff --git a/blog/.DS_Store b/blog/.DS_Store new file mode 100755 index 0000000..0453804 Binary files /dev/null and b/blog/.DS_Store differ diff --git a/blog/css/blog.css b/blog/css/blog.css new file mode 100755 index 0000000..de80f5a --- /dev/null +++ b/blog/css/blog.css @@ -0,0 +1,168 @@ +body { + font-family: 'IBM Plex Mono', monospace; + font-family: 'IBM Plex Sans', sans-serif; + margin: 0; + color: white; + background-color: #111; + text-align: left; +} + +.mid { + width: 650px; + margin: auto; + position: relative; +} + +@media screen and (max-width: 650px) { + .mid { + width: 100%; + } +} + +h1 { + text-align: left; + font-size: 3.5rem; +} + +h2 { + text-align: left; + font-size: 2.8rem; +} + +hr { + width: 650px; + color: white; +} + +@media screen and (max-width: 650px) { + hr { + width: 100%; + } +} + +p { + font-size: 1.2rem; +} + +a { + text-decoration: none; + font-size: 1.2rem; +} + + /* unvisited link */ +a:link { + color: white; +} + +/* visited link */ +a:visited { + color: white; +} + +/* mouse over link */ +a:hover { + color: #62bd69; +} + +/* selected link */ +a:active { + color: #62bd69; +} + +ul { + font-size: 1.2rem; + text-align: left; + list-style-position: outside; +} + +.movie-container { + display: flex; + align-items: center; + padding: 20px; + border-radius: 10px; + width: 674px; + margin:20px auto 20px auto; + position: relative; + background-color: #222; +} + +@media screen and (max-width: 650px) { + .movie-container { + width: 100%; + } +} + +.poster { + flex: 0 0 auto; + margin-right: 20px; +} + +.poster img { + width: 200px; + height: 300px; + object-fit: cover; + border-radius: 10px; +} + +.review { + flex: 1 1 auto; +} + +.review h2 { + font-size: 24px; + margin-bottom: 10px; +} + +.review p { + font-size: 16px; + line-height: 1.5; + margin-bottom: 0; +} + +.footer { + margin: auto; + width: 650px; + background: #222; + padding: 2rem; +} + +@media screen and (max-width: 650px) { + .footer { + width: 100%; + } +} + +.social-links { + text-align: center; + display: flex; + justify-content: center; + margin-bottom: 20px; + font-size: 1.2rem; +} + +.social-links a { + color: white; + margin: 0px 5px 0px 5px; + text-decoration: none; + transition: color 0.3s ease; +} + +.social-links p { + margin: 0px 5px 0px 5px; +} + +.social-links a:nth-child(2):hover { + color:#d1479e; +} + +.social-links a:nth-child(3):hover { + color:#4ba2c4; +} + +.social-links a:nth-child(4):hover { + color:#1DB954; +} + +.social-links a:nth-child(5):hover { + color:#d1c649; +} diff --git a/blog/css/style.css b/blog/css/style.css new file mode 100755 index 0000000..82cd4ac --- /dev/null +++ b/blog/css/style.css @@ -0,0 +1,273 @@ +body { + font-family: 'IBM Plex Mono', monospace; + font-family: 'IBM Plex Sans', sans-serif; + margin: 0; + color: white; + background-color: #111; + text-align: left; +} + +.mid { + width: 650px; + margin: auto; + position: relative; +} + +@media screen and (max-width: 650px) { + .mid { + width: 100%; + } +} + +h1 { + text-align: left; + font-size: 3.5rem; +} + +h2 { + text-align: left; + font-size: 2.8rem; +} + +hr { + width: 650px; + color: white; +} + +@media screen and (max-width: 650px) { + hr { + width: 100%; + } +} + +p { + font-size: 1.2rem; +} + +a { + text-decoration: none; + font-size: 1.2rem; +} + + /* unvisited link */ +a:link { + color: white; +} + +/* visited link */ +a:visited { + color: white; +} + +/* mouse over link */ +a:hover { + color: #62bd69; +} + +/* selected link */ +a:active { + color: #62bd69; +} + +ul { + font-size: 1.2rem; + text-align: left; + list-style-position: outside; +} + +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic); +blockquote{ + font-size: 1.4em; + width: 650px; + margin: 50px auto; + font-family: Open Sans; + font-style: italic; + color: darkgray; + padding: 1.2em 30px 1.2em 30px; + border-left: 8px solid #62bd69 ; + line-height: 1.6; + text-align: center; + position: relative; + background: #222; +} + +@media screen and (max-width: 650px) { + blockquote { +width: 100%; + } +} + +blockquote::before{ + font-family: Arial; + content: "\201C"; + color: #62bd69; + font-size: 4em; + position: absolute; + left: 10px; + top: -10px; +} + +blockquote::after{ + content: ''; +} + +blockquote span{ + display: block; + color: white; + font-style: normal; + font-weight: bold; + margin-top: 1em; +} + +.footer { + margin: auto; + width: 650px; + background: #222; + padding: 2rem; +} + +@media screen and (max-width: 650px) { + .footer { + width: 100%; + } +} + +.social-links { + text-align: center; + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.social-links a { + color: white; + margin: 0px 5px 0px 5px; + text-decoration: none; + transition: color 0.3s ease; +} + +.social-links p { + font-size: 1.2rem; + margin: 0px 5px 0px 5px; +} + +.social-links a:nth-child(2):hover { + color:#d1479e; +} + +.social-links a:nth-child(3):hover { + color:#4ba2c4; +} + +.social-links a:nth-child(4):hover { + color:#1DB954; +} + +.social-links a:nth-child(5):hover { + color:#d1c649; +} + +* { + box-sizing: border-box; +} + +img { + vertical-align: middle; +} + +/* Position the image container (needed to position the left and right arrows) */ +.container { + width: 650px; + margin: auto; + position: relative; +} + +@media screen and (max-width: 650px) { + .container { + width: 100%; + } +} + +/* Hide the images by default */ +.mySlides { + display: none; +} + +/* Add a pointer when hovering over the thumbnail images */ +.cursor { + cursor: pointer; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 40%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + background-color: rgba(0, 0, 0, 0.4); + font-weight: bold; + font-size: 20px; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +/* Position the "next/prev button" to the right/left */ +.prev { + left: 0; + border-radius: 3px 0 0 3px; +} + +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +/* Container for image text */ +.caption-container { + text-align: center; + background-color: #222; + padding: 2px 16px; + color: white; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +/* 10 columns side by side */ +.column { + float: left; + width: 10%; +} + +/* Add a transparency effect for thumnbail images */ +.demo { + opacity: 0.3; +} + +.active, +.demo:hover { + opacity: 1; +} diff --git a/blog/favicon/about.txt b/blog/favicon/about.txt new file mode 100755 index 0000000..786ce3b --- /dev/null +++ b/blog/favicon/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following graphics from Twitter Twemoji: + +- Graphics Title: 1f331.svg +- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji) +- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f331.svg +- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/) diff --git a/blog/favicon/android-chrome-192x192.png b/blog/favicon/android-chrome-192x192.png new file mode 100755 index 0000000..ff6f86b Binary files /dev/null and b/blog/favicon/android-chrome-192x192.png differ diff --git a/blog/favicon/android-chrome-512x512.png b/blog/favicon/android-chrome-512x512.png new file mode 100755 index 0000000..886b6fc Binary files /dev/null and b/blog/favicon/android-chrome-512x512.png differ diff --git a/blog/favicon/apple-touch-icon.png b/blog/favicon/apple-touch-icon.png new file mode 100755 index 0000000..b9c252f Binary files /dev/null and b/blog/favicon/apple-touch-icon.png differ diff --git a/blog/favicon/favicon-16x16.png b/blog/favicon/favicon-16x16.png new file mode 100755 index 0000000..dd30e9f Binary files /dev/null and b/blog/favicon/favicon-16x16.png differ diff --git a/blog/favicon/favicon-32x32.png b/blog/favicon/favicon-32x32.png new file mode 100755 index 0000000..af54faa Binary files /dev/null and b/blog/favicon/favicon-32x32.png differ diff --git a/blog/favicon/favicon.ico b/blog/favicon/favicon.ico new file mode 100755 index 0000000..fd97d94 Binary files /dev/null and b/blog/favicon/favicon.ico differ diff --git a/blog/favicon/site.webmanifest b/blog/favicon/site.webmanifest new file mode 100755 index 0000000..45dc8a2 --- /dev/null +++ b/blog/favicon/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/blog/img/.DS_Store b/blog/img/.DS_Store new file mode 100755 index 0000000..5008ddf Binary files /dev/null and b/blog/img/.DS_Store differ diff --git a/blog/img/img1.jpg b/blog/img/img1.jpg new file mode 100755 index 0000000..6df22f7 Binary files /dev/null and b/blog/img/img1.jpg differ diff --git a/blog/img/img10.jpg b/blog/img/img10.jpg new file mode 100755 index 0000000..3ce4e41 Binary files /dev/null and b/blog/img/img10.jpg differ diff --git a/blog/img/img2.jpg b/blog/img/img2.jpg new file mode 100755 index 0000000..115c06b Binary files /dev/null and b/blog/img/img2.jpg differ diff --git a/blog/img/img3.jpg b/blog/img/img3.jpg new file mode 100755 index 0000000..42a2701 Binary files /dev/null and b/blog/img/img3.jpg differ diff --git a/blog/img/img4.jpg b/blog/img/img4.jpg new file mode 100755 index 0000000..fed104f Binary files /dev/null and b/blog/img/img4.jpg differ diff --git a/blog/img/img5.jpg b/blog/img/img5.jpg new file mode 100755 index 0000000..8cddda8 Binary files /dev/null and b/blog/img/img5.jpg differ diff --git a/blog/img/img6.jpg b/blog/img/img6.jpg new file mode 100755 index 0000000..507db49 Binary files /dev/null and b/blog/img/img6.jpg differ diff --git a/blog/img/img7.jpg b/blog/img/img7.jpg new file mode 100755 index 0000000..cc5b74d Binary files /dev/null and b/blog/img/img7.jpg differ diff --git a/blog/img/img8.jpg b/blog/img/img8.jpg new file mode 100755 index 0000000..2983895 Binary files /dev/null and b/blog/img/img8.jpg differ diff --git a/blog/img/img9.jpg b/blog/img/img9.jpg new file mode 100755 index 0000000..e8baded Binary files /dev/null and b/blog/img/img9.jpg differ diff --git a/blog/index.html b/blog/index.html new file mode 100755 index 0000000..77f7ad0 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,191 @@ + + + +ryan's website + + + + + + + + + + + + + + + + + + + +

+ryan's fanclub +

+ +
+

+welcome to my lil' digital garden 🌱 +
+
+i don't really post on my insta so you guys get a website instead. +
+because i'm just a little nerd. +
+that sits in his room all day. +
+sometimes i read books. +
+or watch movies and listen to music. +

+
+ +

+blog +

+ +
+ + +

reviews

+ +
+ +"he's okay occasionally i guess" + +-kristal hui, jan 3. 2022 +
+ +
+ +"so u did not like me for 9 months " + +-alana, mar 4. 2023 +
+ +

pics

+ +
+
+
1 / 10
+ +
+ +
+
2 / 10
+ +
+ +
+
3 / 10
+ +
+ +
+
4 / 10
+ +
+ +
+
5 / 10
+ +
+ +
+
6 / 10
+ +
+ +
+
7 / 10
+ +
+ +
+
8 / 10
+ +
+ +
+
9 / 10
+ +
+ +
+
10 / 10
+ +
+ + + + +
+

+
+ +
+
+ in da pow +
+
+ shining lights +
+
+ tatiana +
+
+ alana's hat +
+
+ teddy +
+
+ uhm.. hi! +
+
+ got new piercings +
+
+ meow +
+
+ travis scott bear +
+
+ my melody girlie +
+
+
+ + + + + diff --git a/blog/script.js b/blog/script.js new file mode 100755 index 0000000..4c70aa2 --- /dev/null +++ b/blog/script.js @@ -0,0 +1,28 @@ +let slideIndex = 1; +showSlides(slideIndex); + +function plusSlides(n) { + showSlides(slideIndex += n); +} + +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(n) { + let i; + let slides = document.getElementsByClassName("mySlides"); + let dots = document.getElementsByClassName("demo"); + let captionText = document.getElementById("caption"); + if (n > slides.length) {slideIndex = 1} + if (n < 1) {slideIndex = slides.length} + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; + captionText.innerHTML = dots[slideIndex-1].alt; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..5194c11 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + Ryan's Blog + + + + + + + + + + + +

My Blog

+

A collection of my posts.

+ +
+
+ +
+
+ + + + +