complete redesign
20
404.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="huh, you are lost">
|
||||||
|
|
||||||
|
<link rel="shortcut icon" href="assets/logo.png">
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
<title>sador - you are lost</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="centered">
|
||||||
|
<h1>404</h1>
|
||||||
|
<p>huh, you are lost</p>
|
||||||
|
<a href="index.html">go back</a>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
42
assets/script.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
if (typeof age !== 'undefined') {
|
||||||
|
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
|
||||||
|
age.textContent = difference.toFixed(4);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof arrow !== 'undefined') {
|
||||||
|
arrow.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: document.body.scrollHeight,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
|
||||||
|
smoothScrollLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', event => {
|
||||||
|
event.preventDefault();
|
||||||
|
const target = document.querySelector(event.target.hash);
|
||||||
|
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const switchTheme = document.getElementById('switch-theme');
|
||||||
|
const theme = localStorage.getItem('theme');
|
||||||
|
|
||||||
|
switchTheme.addEventListener('click', () => {
|
||||||
|
if (theme === 'dark') {
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.classList.toggle('dark');
|
||||||
|
});
|
||||||
|
|
||||||
|
if (theme === 'dark') {
|
||||||
|
document.body.classList.add('dark');
|
||||||
|
}
|
95
assets/style.css
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
|
||||||
|
|
||||||
|
@import url('style.mobile.css');
|
||||||
|
@import url('style.dark.css');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: 'Inconsolata', monospace;
|
||||||
|
--font-size: 16px;
|
||||||
|
--columns: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
transition: background-color 0.5s, color 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
body#centered {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body>div {
|
||||||
|
display: grid;
|
||||||
|
overflow-y: auto;
|
||||||
|
place-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(100% / var(--columns));
|
||||||
|
}
|
||||||
|
|
||||||
|
body>div:first-child #arrow {
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
body>div>div#inner {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li::before,
|
||||||
|
ol li::before {
|
||||||
|
content: "⮑ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
#age {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
*[data-deprecated] {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
*[data-deprecated]::after {
|
||||||
|
content: " (deprecated)";
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact li:first-child::before {
|
||||||
|
content: "✉ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
#switch-theme {
|
||||||
|
color: blue;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
32
assets/style.dark.css
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
:root {
|
||||||
|
--font: 'Inconsolata', monospace;
|
||||||
|
--font-size: 16px;
|
||||||
|
--columns: 2;
|
||||||
|
|
||||||
|
--background-color: #171616;
|
||||||
|
--color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark>div:first-child #arrow {
|
||||||
|
color: #000;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:first-child #arrow {
|
||||||
|
background-color: var(--color);
|
||||||
|
color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark a {
|
||||||
|
color: var(--color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark #switch-theme {
|
||||||
|
color: var(--color);
|
||||||
|
}
|
9
assets/style.mobile.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
body > div {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:first-child #arrow {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
348
index.html
@ -4,168 +4,220 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="sadorro's personal website!">
|
<meta name="description" content="hii">
|
||||||
|
|
||||||
<link rel="shortcut icon" href="logo.png">
|
<link rel="shortcut icon" href="assets/logo.png">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
<script defer src="assets/script.js"></script>
|
||||||
<script defer src="script.js"></script>
|
<title>sador</title>
|
||||||
<title>sador.me</title>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="box">
|
<div>
|
||||||
<p>Kliknij mnie!</p>
|
<div id="inner">
|
||||||
</div>
|
<h1>sador</h1>
|
||||||
<div id="content">
|
<p><span id="age">?</span> years old boy, who loves to code.</p>
|
||||||
<p id="top-bar">Aby zamknąć bądź otworzyć daną kolumnę, kliknij w jej tło.</p>
|
|
||||||
<div data-closed="false">
|
|
||||||
<h1>Sador</h1>
|
|
||||||
<h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
|
|
||||||
<button onclick="resetPoints()">Resetuj punkty</button>
|
|
||||||
<button onclick="toggleTheme()">Zmień motyw</button>
|
|
||||||
<button><a href="projects.html">Moje projekty</a></button>
|
|
||||||
<button id="swap">Odwróć strony :)</button>
|
|
||||||
</div>
|
|
||||||
<div data-closed="true">
|
|
||||||
<h4>Media społecznościowe/moje konta</h4>
|
|
||||||
<div id="socials">
|
|
||||||
<a class="social" href="https://github.com/sadorowo" target="_blank">
|
|
||||||
<img src="icons/github.png" alt="github">
|
|
||||||
<p>GitHub</p>
|
|
||||||
</a>
|
|
||||||
<a class="social" href="https://instagram.com/sadorowo" target="_blank">
|
|
||||||
<img src="icons/instagram.png" alt="instagram">
|
|
||||||
<p>Instagram</p>
|
|
||||||
</a>
|
|
||||||
<a class="social" href="https://youtube.com/c/Sadorowo" target="_blank">
|
|
||||||
<img src="icons/youtube.png" alt="youtube">
|
|
||||||
<p>YouTube</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>O mnie</h4>
|
<h2>my hobbies</h2>
|
||||||
<p>hej, mam <span id="age">???</span> lat. mieszkam w okolicach Myślenic.</p>
|
|
||||||
<p>moje zainteresowania:</p>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>programowanie</li>
|
<li>programming</li>
|
||||||
<li>stara motoryzacja</li>
|
<li>music</li>
|
||||||
<li>elektronika</li>
|
<li>old automotive</li>
|
||||||
<li>muzyka</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<p>sprzęt/oprogramowanie, który posiadam:</p>
|
|
||||||
<div class="accordion">
|
<h2>my profiles</h2>
|
||||||
<p>sprzęt</p>
|
<ul>
|
||||||
<div class="accordion-content">
|
<li><a href="https://github.com/sadorowo" target="_blank">github</a></li>
|
||||||
<ul>
|
<li><a href="https://instagram.com/sadorowo" target="_blank">instagram</a></li>
|
||||||
<li>CPU: Intel i5-4590</li>
|
</ul>
|
||||||
<li>GPU: NVIDIA GTX 970 + Radeon RX 5500 XT</li>
|
|
||||||
<li>Bluetooth: CSR 4.0</li>
|
<h2>contact</h2>
|
||||||
<li>Wi-Fi: TP-LINK TL-WN722N V2</li>
|
<ul id="contact">
|
||||||
<li>Klawiatura: Microsoft All-In-One Media Keyboard</li>
|
<li><a href="mailto:contact@sador.me">e-mail</a></li>
|
||||||
<li>Mysz: coś z defendera :)</li>
|
</ul>
|
||||||
<li>Słuchawki: Beats Studio Buds</li>
|
|
||||||
<li>Monitor: LG M2450D</li>
|
<h3 id="sections">go to section:</h3>
|
||||||
<li>Płyta główna: ASRock H97M Pro4</li>
|
<ul>
|
||||||
<li>RAM: 16GB DDR3</li>
|
<li><a href="#projects">my projects</a></li>
|
||||||
<li>Dysk: ADATA 500GB</li>
|
<li><a href="#music-taste">my music taste</a></li>
|
||||||
</ul>
|
<li><a href="#hardware">my hardware</a></li>
|
||||||
</div>
|
<li><a href="#software">my software</a></li>
|
||||||
</div>
|
<li><a href="#privacy">privacy</a></li>
|
||||||
<div class="accordion">
|
</ul>
|
||||||
<p>systemy operacyjne</p>
|
|
||||||
<div class="accordion-content">
|
<h2><a href="#projects">go to top</a></h2>
|
||||||
<ul>
|
<h2 id="switch-theme">switch theme</h2>
|
||||||
<li>Hackintosh Sonoma</li>
|
|
||||||
<li>Windows 10 Pro</li>
|
<div id="arrow">▼</div>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion">
|
|
||||||
<p>oprogramowanie</p>
|
|
||||||
<div class="accordion-content">
|
|
||||||
<ul>
|
|
||||||
<li>DaVinci Resolve</li>
|
|
||||||
<li>Firefox</li>
|
|
||||||
<li>GIMP</li>
|
|
||||||
<li>OBS Studio</li>
|
|
||||||
<li>Handbrake</li>
|
|
||||||
<li>VSC (only product from ms trash that I'm using LMAO)</li>
|
|
||||||
<li>BitTorrent Web</li>
|
|
||||||
<li>Apple Music</li>
|
|
||||||
<li>JetBrains IDEs</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion">
|
|
||||||
<p>subskrypcje</p>
|
|
||||||
<div class="accordion-content">
|
|
||||||
<ul>
|
|
||||||
<li>Apple Music Individual</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div data-closed="true">
|
</div>
|
||||||
<p>jestem fanem/po prostu słucham:</p>
|
<div>
|
||||||
<div class="accordion">
|
<div id="inner">
|
||||||
<p>metalu</p>
|
<h2 id="projects">my projects</h2>
|
||||||
<div class="accordion-content">
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li>heavy metalu</li>
|
websites
|
||||||
<li>gothic metalu</li>
|
<ol>
|
||||||
<li>metalu progresywnego</li>
|
<li><a href="https://github.com/sadorowo/personal-website"
|
||||||
<li>nu metalu</li>
|
target="_blank">sadorowo/personal-website</a></li>
|
||||||
</ul>
|
<li><a href="https://github.com/sadorowo/witch-website"
|
||||||
</div>
|
target="_blank">sadorowo/witch-website</a>
|
||||||
</div>
|
</li>
|
||||||
<div class="accordion">
|
<li><a href="https://github.com/sadorowo/draw" target="_blank">sadorowo/draw</a></li>
|
||||||
<p>rocka</p>
|
</ol>
|
||||||
<div class="accordion-content">
|
</li>
|
||||||
<p>szczególnie:</p>
|
<li>
|
||||||
<ul>
|
projects
|
||||||
<li>Foo Fighters</li>
|
<ol>
|
||||||
<li>Evanescence</li>
|
<li><a href="https://github.com/sadorowo/dynamic-content-delivery"
|
||||||
<li>30 Seconds To Mars</li>
|
target="_blank">sadorowo/dynamic-content-delivery</a></li>
|
||||||
<li>HIM</li>
|
<li><a href="https://github.com/sadorowo/dynamic-content-delivery-api"
|
||||||
</ul>
|
target="_blank">sadorowo/dynamic-content-delivery-api</a></li>
|
||||||
</div>
|
<li data-deprecated><a href="https://github.com/sadorowo/dcd-legacy"
|
||||||
</div>
|
target="_blank">sadorowo/dcd-legacy</a></li>
|
||||||
<div class="accordion">
|
<li><a href="https://github.com/sadorowo/wulkanowy-mod"
|
||||||
<p>części amerykańskiego rapu</p>
|
target="_blank">sadorowo/wulkanowy-mod</a>
|
||||||
<div class="accordion-content">
|
</li>
|
||||||
<p>szczególnie:</p>
|
<li><a href="https://github.com/sadorowo/zine-v4" target="_blank">sadorowo/zine-v4</a></li>
|
||||||
<ul>
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
tools
|
||||||
|
<ol>
|
||||||
|
<li><a href="https://github.com/sadorowo/m3u-category-matcher"
|
||||||
|
target="_blank">sadorowo/m3u-category-matcher</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://github.com/sadorowo/m3u-logo-matcher"
|
||||||
|
target="_blank">sadorowo/m3u-logo-matcher</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://github.com/sadorowo/m3u-duplicates-filter"
|
||||||
|
target="_blank">sadorowo/m3u-duplicates-filter</a></li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="music-taste">my music taste</h2>
|
||||||
|
<p>i'm a fan of:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
genres
|
||||||
|
<ol>
|
||||||
|
<li>heavy metal</li>
|
||||||
|
<li>black metal</li>
|
||||||
|
<li>death metal</li>
|
||||||
|
<li>doom metal</li>
|
||||||
|
<li>hard rock</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
rock/metal bands/artists
|
||||||
|
<ol>
|
||||||
|
<li>Draconian</li>
|
||||||
|
<li>Poisonblack</li>
|
||||||
|
<li>To/Die/For</li>
|
||||||
|
<li>For My Pain...</li>
|
||||||
|
<li>Lacrimas Profundere</li>
|
||||||
|
<li>Death</li>
|
||||||
|
<li>Charon</li>
|
||||||
|
<li>Entwine</li>
|
||||||
|
<li>Beseech</li>
|
||||||
|
<li>Slipknot</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
american rap (sometimes, very rarely)
|
||||||
|
<ol>
|
||||||
<li>Lil Peep</li>
|
<li>Lil Peep</li>
|
||||||
<li>Lil Tracy</li>
|
<li>Lil Tracy</li>
|
||||||
<li>XXXTENTACION</li>
|
<li>XXXTENTACION</li>
|
||||||
<li>Juice WRLD</li>
|
<li>Juice WRLD</li>
|
||||||
<li>Mackned</li>
|
<li>Mackned</li>
|
||||||
<li>Fat Nick</li>
|
<li>Fat Nick</li>
|
||||||
</ul>
|
</ol>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="accordion">
|
|
||||||
<p>zespołów/artystów</p>
|
<p>i like these artists, but I can't say I'm a fan of them yet:</p>
|
||||||
<div class="accordion-content">
|
<ul>
|
||||||
<ul>
|
<li>Darkthrone</li>
|
||||||
<li>Slipknot</li>
|
<li>Dark Funeral</li>
|
||||||
<li>Poisonblack</li>
|
<li>Behemoth</li>
|
||||||
<li>Beseech</li>
|
<li>Venom</li>
|
||||||
<li>To/Die/For</li>
|
<li>Deathstars</li>
|
||||||
<li>Entwine</li>
|
<li>Carpatian Forest</li>
|
||||||
<li>Lacrimas Profundere</li>
|
<li>Gorgoroth</li>
|
||||||
<li>For My Pain...</li>
|
<li>Immortal</li>
|
||||||
<li>Draconian</li>
|
<li>Emperor</li>
|
||||||
<li>Charon</li>
|
<li>Imminence</li>
|
||||||
<li>Lil Peep</li>
|
</ul>
|
||||||
<li>Death</li>
|
|
||||||
<li>System of a Down</li>
|
<h2 id="hardware">my hardware</h2>
|
||||||
<li>Evanescence</li>
|
<ul>
|
||||||
</ul>
|
<li>
|
||||||
</div>
|
OSes
|
||||||
</div>
|
<ol>
|
||||||
|
<li>windows 10</li>
|
||||||
|
<li>macOS</li>
|
||||||
|
<li>android (lineageos)</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
in general
|
||||||
|
<ol>
|
||||||
|
<li>cpu: intel i5-4590</li>
|
||||||
|
<li>gpu: radeon rx 5500 xt</li>
|
||||||
|
<li>bluetooth & wi-fi: fenvi t919</li>
|
||||||
|
<li>keyboard: microsoft all-in-one media keyboard</li>
|
||||||
|
<li>headphones: beats studio buds</li>
|
||||||
|
<li>display: lg m2450d</li>
|
||||||
|
<li>motherboard: asrock h97m pro4</li>
|
||||||
|
<li>ram: 16gb ddr3</li>
|
||||||
|
<li>ssd: adata 500gb</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="software">my software</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
recording/editing
|
||||||
|
<ol>
|
||||||
|
<li>obs studio</li>
|
||||||
|
<li>quicktime player</li>
|
||||||
|
<li>gimp</li>
|
||||||
|
<li>davinci resolve</li>
|
||||||
|
<li>handbrake</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
programming
|
||||||
|
<ol>
|
||||||
|
<li>xcode</li>
|
||||||
|
<li>vs code</li>
|
||||||
|
<li>intellij idea</li>
|
||||||
|
<li>pycharm</li>
|
||||||
|
<li>clion</li>
|
||||||
|
<li>android studio</li>
|
||||||
|
<li>webstorm</li>
|
||||||
|
<li>termius</li>
|
||||||
|
<li>postman</li>
|
||||||
|
<li>git</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
internet
|
||||||
|
<ol>
|
||||||
|
<li>firefox</li>
|
||||||
|
<li>bittorrent web</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>music - apple music individual</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="privacy">privacy</h2>
|
||||||
|
<p>i prefer to keep my privacy, so i don't use any social media, except for instagram. i also don't use any
|
||||||
|
of the big tech companies' services, like google, facebook, amazon, etc. i use apple products, because
|
||||||
|
they are the only ones that respect my privacy. i also use a vpn and a password manager.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -1,87 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="pl">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="sadorro's personal website!">
|
|
||||||
|
|
||||||
<link rel="shortcut icon" href="logo.png">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
<script defer src="script.js"></script>
|
|
||||||
<title>sador.me - projekty</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="content">
|
|
||||||
<div id="left-side">
|
|
||||||
<h1>Sador</h1>
|
|
||||||
<button onclick="toggleTheme()">Zmień motyw</button>
|
|
||||||
<button><a href="/">Powrót</a></button>
|
|
||||||
<button id="swap">Odwróć strony :)</button>
|
|
||||||
</div>
|
|
||||||
<div id="right-side">
|
|
||||||
<h4>Moje projekty</h4>
|
|
||||||
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
|
|
||||||
<div id="projects">
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Zine</h3>
|
|
||||||
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/website.png" alt="Website thumbnail" />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Personalna strona</h3>
|
|
||||||
<p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="https://witch.sador.me/">
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail" />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Strona o...</h3>
|
|
||||||
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://sadorowo.github.io/draw">
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/draw.png" alt="Draw website thumbnail" />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Strona do rysowania</h3>
|
|
||||||
<p>Szkolny projekt. Na tej stronie możesz narysować to, co Ci się tylko podoba. Na chwilę
|
|
||||||
obecną nie jest hostowana na mojej domenie.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/sadorowo">
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/github_bg.png" alt="GitHub profile thumbnail" />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Narzędzia do IPTV</h3>
|
|
||||||
<p>Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając
|
|
||||||
README na moim GitHubie.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/sadorowo/wulkanowy-mod">
|
|
||||||
<div class="project-card">
|
|
||||||
<img src="thumbnails/wulkanowy_mod.png" alt="Wulkanowy mod profile thumbnail" />
|
|
||||||
<div class="description">
|
|
||||||
<h3>Zmodyfikowana aplikacja Wulkanowego</h3>
|
|
||||||
<p>Masz wymagających rodziców a nie chcesz męczyć się w szkole? Ta aplikacja jest dla
|
|
||||||
Ciebie! Możesz ukrywać oceny poniżej 3, ustawić fałszywą 100% frekwencję, ukryć uwagi,
|
|
||||||
nieusprawiedliwioną frekwencję za pomocą sekretnego menu.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
125
script.js
@ -1,125 +0,0 @@
|
|||||||
const contentContainer = document.getElementById('content');
|
|
||||||
|
|
||||||
const swapButton = document.getElementById('swap');
|
|
||||||
const ageElement = document.getElementById('age');
|
|
||||||
const points = document.getElementById('points');
|
|
||||||
|
|
||||||
const box = document.getElementById('box');
|
|
||||||
const boxPoints = document.querySelector('#points span');
|
|
||||||
|
|
||||||
let bonusPoints = Number(localStorage.getItem('points') ?? 0);
|
|
||||||
let currentTheme = localStorage.getItem('theme') ?? 'light';
|
|
||||||
|
|
||||||
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms * 1000))
|
|
||||||
async function updateOpacity(block, show) {
|
|
||||||
if (!show) {
|
|
||||||
block.style.opacity = '0';
|
|
||||||
await wait(0.3);
|
|
||||||
block.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
block.style.display = 'flex';
|
|
||||||
await wait(0.3);
|
|
||||||
block.style.opacity = '1';
|
|
||||||
}
|
|
||||||
|
|
||||||
block.classList.toggle('visible');
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleTheme() {
|
|
||||||
document.body.classList.toggle('dark');
|
|
||||||
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
||||||
localStorage.setItem('theme', currentTheme);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetPoints() {
|
|
||||||
localStorage.removeItem('points');
|
|
||||||
bonusPoints = 0;
|
|
||||||
boxPoints.textContent = bonusPoints;
|
|
||||||
}
|
|
||||||
|
|
||||||
function swapContent() {
|
|
||||||
if (window.innerWidth < 768) {
|
|
||||||
contentContainer.style.flexDirection =
|
|
||||||
contentContainer.style.flexDirection === 'column-reverse' ? 'column' : 'column-reverse';
|
|
||||||
} else {
|
|
||||||
contentContainer.style.flexDirection =
|
|
||||||
contentContainer.style.flexDirection === 'row-reverse' ? 'row' : 'row-reverse';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// listeners
|
|
||||||
if (box) box.addEventListener('click', () => {
|
|
||||||
bonusPoints++;
|
|
||||||
localStorage.setItem('points', bonusPoints);
|
|
||||||
boxPoints.textContent = bonusPoints;
|
|
||||||
})
|
|
||||||
|
|
||||||
window.onload = async () => {
|
|
||||||
if (boxPoints) boxPoints.textContent = bonusPoints;
|
|
||||||
if (box) await updateOpacity(box, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// update theme
|
|
||||||
if (currentTheme === 'dark')
|
|
||||||
document.body.classList.add('dark');
|
|
||||||
|
|
||||||
// update age
|
|
||||||
if (ageElement) {
|
|
||||||
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
|
|
||||||
ageElement.innerText = difference.toFixed(4);
|
|
||||||
}
|
|
||||||
|
|
||||||
swapButton.addEventListener('click', swapContent);
|
|
||||||
|
|
||||||
const accordions = document.querySelectorAll('.accordion');
|
|
||||||
|
|
||||||
function closeOtherAccordions(accordion) {
|
|
||||||
accordions.forEach(acc => {
|
|
||||||
if (acc !== accordion) {
|
|
||||||
const panel = accordion.children[1];
|
|
||||||
|
|
||||||
acc.classList.remove('active');
|
|
||||||
panel.style.maxHeight = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openAccordion(accordion) {
|
|
||||||
closeOtherAccordions(accordion);
|
|
||||||
|
|
||||||
const panel = accordion.children[1];
|
|
||||||
accordion.classList.toggle('active');
|
|
||||||
|
|
||||||
console.log(panel, panel.style.maxHeight)
|
|
||||||
if (panel.style.maxHeight)
|
|
||||||
panel.style.maxHeight = null
|
|
||||||
else
|
|
||||||
panel.style.maxHeight = panel.scrollHeight + "px"
|
|
||||||
}
|
|
||||||
|
|
||||||
accordions.forEach(accordion => {
|
|
||||||
accordion.addEventListener('click', () => openAccordion(accordion));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hide or show columns
|
|
||||||
const columns = document.querySelectorAll('#content > div');
|
|
||||||
|
|
||||||
function showColumn(event, column) {
|
|
||||||
// Check if the click was on actual column, not on its children
|
|
||||||
if (event.target !== column) return;
|
|
||||||
|
|
||||||
columns.forEach(col => {
|
|
||||||
if (col === column) return;
|
|
||||||
|
|
||||||
col.dataset.closed = 'true';
|
|
||||||
});
|
|
||||||
|
|
||||||
column.dataset.closed = column.dataset.closed === 'true' ? 'false' : 'true';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply only to desktop
|
|
||||||
if (window.innerWidth > 768) {
|
|
||||||
columns.forEach(column => {
|
|
||||||
column.addEventListener('click', (event) => showColumn(event, column));
|
|
||||||
});
|
|
||||||
}
|
|
355
style.css
@ -1,355 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap');
|
|
||||||
@import url('style.dark.css');
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--info-height: 40px;
|
|
||||||
--size: 100px;
|
|
||||||
--columns: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geologica', sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-bar {
|
|
||||||
background-color: #a4aaff;
|
|
||||||
text-align: center;
|
|
||||||
position: fixed;
|
|
||||||
color: #fff;
|
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
line-height: var(--info-height);
|
|
||||||
height: var(--info-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>* {
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
color: #000;
|
|
||||||
transition: ease-in-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>div {
|
|
||||||
margin-top: var(--info-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="true"] {
|
|
||||||
width: 20%;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #ffd9a4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="true"] * {
|
|
||||||
filter: grayscale();
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="false"] {
|
|
||||||
width: calc(100% - calc((var(--columns) - 1) * 20%))
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #000;
|
|
||||||
text-decoration-color: #000;
|
|
||||||
display: inline-block;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box {
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #000;
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
animation: toRight linear 6.8s infinite alternate, bounce linear 17s infinite alternate;
|
|
||||||
|
|
||||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#box p {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#age {
|
|
||||||
color: #3b3b3b;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: rgb(96, 77, 199);
|
|
||||||
font-family: 'Geologica', sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: rgba(96, 77, 199, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
button a {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 400;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 0 10px 0 10px;
|
|
||||||
background-color: #a4aaff;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
font-family: 'Geologica', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social:hover {
|
|
||||||
background-color: #b5baff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social p {
|
|
||||||
color: #000;
|
|
||||||
margin: 10px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social img {
|
|
||||||
width: auto;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social,
|
|
||||||
button {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#points span {
|
|
||||||
color: #6c3877;
|
|
||||||
font-size: 125%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#projects {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 1px solid #000;
|
|
||||||
background-color: rgb(185, 175, 255);
|
|
||||||
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card img {
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 200px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card img[data-abandoned] {
|
|
||||||
filter: grayscale();
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card .description {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card .description * {
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card .description * {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 10px;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card:hover>.description *:not(a) {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ffd9a4;
|
|
||||||
padding: 10px 0 10px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: ease-in 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion.active, .accordion:hover {
|
|
||||||
background-color: #ffb752;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion>p::after {
|
|
||||||
content: '▼';
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion.active>p::after {
|
|
||||||
content: '▲';
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-content {
|
|
||||||
display: none;
|
|
||||||
padding: 10px 0 10px 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-content > *:is(ol, ul) {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-content > *:is(ol, ul) li::before {
|
|
||||||
content: '•';
|
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion.active>.accordion-content {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ANIMATIONS */
|
|
||||||
@keyframes bounce {
|
|
||||||
0% {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
top: calc(100% - var(--size));
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes toRight {
|
|
||||||
0% {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
left: calc(100% - var(--size));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 798px) {
|
|
||||||
#projects {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
flex-direction: column;
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>* {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#socials {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="true"] {
|
|
||||||
width: auto;
|
|
||||||
cursor: auto;
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="true"] * {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content>*[data-closed="false"] {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-bar {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content>* {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content>*[data-closed="true"] #age {
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,60 +0,0 @@
|
|||||||
body.dark {
|
|
||||||
background-color: #2f3136;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #box {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #box p {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content > *[data-closed="false"] {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content #age {
|
|
||||||
color: #ffd9a4;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content>*[data-closed="true"] #age {
|
|
||||||
color: #2f3136;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .social p {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark a {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .project-card {
|
|
||||||
border: 1px solid #ffd9a4;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .project-card .description * {
|
|
||||||
background-color: #fffdcc;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #socials .social img {
|
|
||||||
filter: invert();
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .accordion {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MOBILE */
|
|
||||||
@media screen and (max-width: 798px) {
|
|
||||||
body.dark #content>* {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark #content>*[data-closed="true"] #age {
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 135 KiB |
Before Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 326 KiB |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 17 KiB |