diff --git a/src/game.html b/src/game.html new file mode 100644 index 0000000..d14008c --- /dev/null +++ b/src/game.html @@ -0,0 +1,28 @@ + + + + + + + + Game Dev Blog + + +
+ +
+ + +
+ + \ No newline at end of file diff --git a/src/images/icon.png b/src/images/icon.png new file mode 100644 index 0000000..1907d4c Binary files /dev/null and b/src/images/icon.png differ diff --git a/src/other.html b/src/other.html new file mode 100644 index 0000000..4b310de --- /dev/null +++ b/src/other.html @@ -0,0 +1,29 @@ + + + + + + + + Game Dev Blog + + +
+ +
+ + + +
+ + \ No newline at end of file diff --git a/src/personal.html b/src/personal.html new file mode 100644 index 0000000..b76a509 --- /dev/null +++ b/src/personal.html @@ -0,0 +1,56 @@ + + + + + + + + Game Dev Blog + + +
+ +
+ +

Olá Mundo (Hello World)

+ +

Hi, I'm Pedro Goraieb Fernandes. I'll try to make these blog posts short, simple and concise, + but I'm one of those annoying developers that loves talking, so most of the time it'll be + wordy and long... Anyways, some stuff about me:

+ + + +
+ + \ No newline at end of file diff --git a/src/scripts/collapsibles.js b/src/scripts/collapsibles.js new file mode 100644 index 0000000..fa9f315 --- /dev/null +++ b/src/scripts/collapsibles.js @@ -0,0 +1,13 @@ +//toggles collapsible elements + +var coll = document.getElementsByClassName("collapsible"); + +Array.from(coll).forEach(button => { + button.addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + var isExpanded = this.classList.contains("active"); + content.style.maxHeight = isExpanded ? content.scrollHeight + "px" : null; + this.setAttribute("aria-expanded", isExpanded); + }); +}); \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..0b3ac1a --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,336 @@ +/* just be sure the credit is given everywhere: +All the work in this file was done by Kuba Rodak (student id: 24436755) +Thanks for the css Kuba >_< +*/ + +/* Variables */ +:root { + /* Colors */ + --main-blue: #1e155c; /* Muted blue */ + --main-grey: #2e2e2e; /* Dark grey */ + --main-black: #101010; /* Jet black */ + --main-white: #ffffff; /* Pure white */ + + --link-color: #58f9ff; /* Soft blue for links */ + --link-hover: #18bf60; /* Green accent on hover */ + --link-click: #ffdb4d; /* Yellow accent on click */ + + /* Typography */ + --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --font-size-base: 16px; + --font-size-small: 14px; + --line-height: 1.6; + + /* Spacing */ + --spacing-base: 1rem; + --spacing-large: 2rem; + --border-radius: 0.4rem; +} + +/* Global Styles */ +html, body { + margin: 0; + padding: 0; + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + line-height: var(--line-height); + color: var(--main-white); + background-color: var(--main-black); + scroll-behavior: smooth; +} + +body { + max-width: 100vw; + overflow-x: hidden; + animation: fadeIn ease-in-out 2s; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Utility Classes */ +.hidden { + display: none !important; +} + +#container { + padding: var(--spacing-large); + max-width: 1200px; + width: 90%; + margin: 0 auto; +} + +/* Headers and Navigation */ +#header, #footer { + background-color: var(--main-grey); + padding: var(--spacing-base) var(--spacing-large); + border-bottom: 0.1rem solid var(--main-black); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + display: flex; + justify-content: space-between; + align-items: center; +} + +#header ul, #footer ul { + list-style: none; + display: flex; + gap: 1.5rem; + margin: 0; + padding: 0; +} + +#header ul li, #footer ul li { + margin: 0; + padding: 0; +} + +/* Links */ +a { + text-decoration: none; + color: var(--link-color); + font-weight: 500; + position: relative; + transition: color 0.3s ease, transform 0.3s ease; +} + +a:hover { + color: var(--link-hover); + transform: scale(1.05); +} + +a::before { + content: ""; + position: absolute; + bottom: -0.2rem; + left: 0; + width: 100%; + height: 0.2rem; + background-color: var(--link-hover); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; +} + +a:hover::before { + transform: scaleX(1); +} + +a:active { + color: var(--link-click); +} + +a:focus { + outline: 2px dashed var(--link-hover); + outline-offset: 4px; +} + +/* Typography */ +h2 { + font-size: 1.5rem; + margin: 1.5rem 0 1rem; + color: var(--main-white); + border-left: 0.3rem solid var(--main-blue); + padding-left: 1rem; +} + +/* Buttons */ +button { + color: var(--main-white); + background-color: var(--main-blue); + border: none; + border-radius: var(--border-radius); + padding: 0.8rem 1.6rem; + font-size: var(--font-size-base); + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +button:hover { + background-color: #1d3c5a; +} + +button:active { + background-color: #132a3e; + transform: translateY(2px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +button:focus { + outline: 2px solid var(--link-hover); + outline-offset: 3px; +} + +/* Tables */ +table { + border-collapse: collapse; + width: 100%; + margin-top: var(--spacing-base); + background-color: var(--main-grey); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +thead { + background-color: var(--main-blue); + position: sticky; + top: 0; + z-index: 1; +} + +td, th { + padding: 1rem; + text-align: center; + border: 1px solid var(--main-black); + color: var(--main-white); +} + +tr:nth-child(even) { + background-color: #2a2a2a; +} + +tr:hover { + background-color: #444444; +} + +th { + font-weight: bold; +} + +/* Responsive Design */ +@media screen and (max-width: 768px) { + .flex { + flex-direction: column; + align-items: center; + } + + .container { + width: 100%; + padding: var(--spacing-base); + } + + #header ul { + flex-direction: column; + align-items: center; + } + + #header ul li { + margin: 0.5rem 0; + } +} + +/* Image Containers */ +.image-container { + border: 0.1rem solid var(--main-blue); + background-color: var(--main-grey); + padding: var(--spacing-base); + max-width: 600px; + margin: var(--spacing-large) auto; + border-radius: var(--border-radius); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + text-align: center; +} + +.image-container img { + max-width: 100%; + border-radius: var(--border-radius); +} + +.image-container p { + margin: 0.5rem 0 0; + font-size: var(--font-size-small); + color: var(--main-white); +} + +video { + margin: 20px auto; + border: 0.1rem solid var(--main-blue); + background-color: var(--main-grey); + padding: 1rem; + width: 100%; + max-width: 800px; + border-radius: 0.5rem; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + text-align: center; +} + +/* Flex Containers */ +.flex { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-large); + align-items: flex-start; +} + +.flex .text-container { + flex: 2; + max-width: 70%; +} + +.flex .image-container { + flex: 1; + max-width: 30%; +} + +/* Miscellaneous */ +pre { + background-color: gray; + border: 0.1rem solid var(--main-blue); + padding: var(--spacing-base); + border-radius: var(--border-radius); +} + +.collapsible { + background-color: var(--main-blue); + color: white; + cursor: pointer; + margin-top: var(--spacing-base); + padding: 1rem; + width: 100%; + border: none; + text-align: left; + font-size: 15px; + transition: background-color 0.3s ease; + border-radius: var(--border-radius); +} + +.collapsible:hover { + background-color: var(--link-hover); +} + +.hidden-content { + padding: 0 var(--spacing-base); + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-in-out; +} + +.formula { + color: var(--main-white); + background-color: var(--main-white); + padding: 20px; + border: 0.1rem solid var(--main-blue); +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 5px; + font-weight: bold; +} + +input, select, textarea { + margin-bottom: 15px; + padding: 10px; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; +} \ No newline at end of file