lheor/Sykorax.eu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated css

Browse source
This commit is contained in:
ahzek 2025-04-07 20:01:23 +02:00
parent bb9fa97b56
commit b2915353c6
3 changed files with 323 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

336
css/styles.css
View file

@ -1,11 +1,14 @@
:root { :root {
--nord0: #2E3440; /* Tokyo Night Storm Color Palette */
--nord1: #3B4252; --bg: #24283b;
--nord2: #434C5E; --bg-dark: #1f2335;
--nord3: #4C566A; --bg-soft: #292e42;
--text-primary: #ECEFF4; --surface: #343b58;
--text-secondary: #D8DEE9; --text: #c0caf5;
--accent: #88C0D0; --text-dark: #a9b1d6;
--accent: #7aa2f7;
--accent2: #9ece6a;
--accent3: #bb9af7;
} }
* { * {
@ -15,23 +18,41 @@
} }
body { body {
background-color: var(--nord0); background-color: var(--bg);
color: var(--text-primary); color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
} }
.container { .container {
max-width: 1200px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
} }
header { header {
background-color: var(--nord1); background-color: var(--surface);
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 10;
}
header .container {
padding: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
header h1 {
margin-bottom: 0;
font-size: 1.5rem;
}
header p {
margin: 0;
font-size: 0.875rem;
} }
.header-top { .header-top {
@ -59,19 +80,19 @@
} }
h1 { h1 {
color: var(--text-primary); color: var(--text);
font-size: 2.5rem; font-size: 2.5rem;
margin: 0; margin: 0;
} }
h2 { h2 {
color: var(--text-primary); color: var(--text);
font-size: 2rem; font-size: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
h3 { h3 {
color: var(--text-primary); color: var(--text);
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -96,12 +117,12 @@
} }
.contact-links a:hover { .contact-links a:hover {
color: var(--text-primary); color: var(--text);
background-color: var(--nord2); background-color: var(--surface);
} }
.section { .section {
background-color: var(--nord1); background-color: var(--surface);
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -127,16 +148,16 @@
} }
.skills-category { .skills-category {
background-color: var(--nord2); background-color: var(--bg-soft);
border-radius: 6px; border-radius: 6px;
padding: 1.5rem; padding: 1.5rem;
} }
.skills-category h3 { .skills-category h3 {
color: var(--text-primary); color: var(--text);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 2px solid var(--nord3); border-bottom: 2px solid var(--bg-dark);
} }
.skills { .skills {
@ -147,7 +168,7 @@
.skill-tag { .skill-tag {
background-color: var(--accent); background-color: var(--accent);
color: var(--nord0); color: var(--bg);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
@ -161,21 +182,21 @@
} }
.skill-tag.next-semester { .skill-tag.next-semester {
background-color: var(--nord2); background-color: var(--bg-soft);
color: var(--text-secondary); color: var(--text-dark);
border: 1px solid var(--nord3); border: 1px solid var(--bg-dark);
} }
.skill-tag.self-learning { .skill-tag.self-learning {
background-color: var(--nord2); background-color: var(--bg-soft);
color: var(--text-secondary); color: var(--text-dark);
border: 1px dashed var(--accent); border: 1px dashed var(--accent);
} }
.education-item { .education-item {
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 1.5rem; padding: 1.5rem;
background-color: var(--nord2); background-color: var(--bg-soft);
border-radius: 6px; border-radius: 6px;
} }
@ -189,7 +210,7 @@
.education-item p:last-child { .education-item p:last-child {
margin-bottom: 0; margin-bottom: 0;
color: var(--text-secondary); color: var(--text-dark);
} }
.projects-container { .projects-container {
@ -198,7 +219,7 @@
} }
.project { .project {
background-color: var(--nord2); background-color: var(--bg-soft);
border-radius: 6px; border-radius: 6px;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -235,8 +256,8 @@
} }
.portfolio-link:hover { .portfolio-link:hover {
color: var(--text-primary); color: var(--text);
background-color: var(--nord2); background-color: var(--bg-soft);
} }
ul { ul {
@ -247,6 +268,259 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--surface);
color: var(--accent);
padding: 1rem;
border-radius: 0.5rem;
transition: all 0.3s;
font-size: 1.5rem;
height: 150px;
display: flex;
align-items: center;
opacity: 0.2;
z-index: 10;
}
.nav-button:hover {
background-color: var(--accent);
color: var(--bg-dark);
opacity: 1;
}
.nav-button.prev {
left: -50px;
}
.nav-button.next {
right: -50px;
}
.project-card {
background-color: var(--surface);
display: flex;
flex-direction: column;
}
.source-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.responsive-container {
max-width: 800px;
max-height: 800px;
overflow: hidden;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.responsive-container img,
.responsive-container video {
object-fit: contain;
width: 100%;
height: auto;
}
.slide-description {
text-align: center;
padding: 0.5rem;
color: var(--text);
font-size: 1.2rem;
margin: 0.5rem 0;
}
.image-box {
width: 100%;
height: 750px;
background-color: var(--bg-dark);
border-radius: 0.5rem;
overflow: hidden;
}
.image-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container h3 {
text-align: center;
color: var(--accent);
font-size: 2rem;
margin-top: 0.5rem;
}
.paragraph-section {
font-size: 1.2rem;
line-height: 1.5;
color: var(--text);
margin-bottom: 0.5rem;
}
.thank-you-slide {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
height: auto;
}
.thank-you-text {
text-align: center;
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
}
.image-container {
display: flex;
flex-direction: column;
}
main {
padding-top: 2.5rem;
}
.project-card .flex-col.md\:flex-row {
min-height: 600px;
}
.project-card .md\:w-1\/3 img {
height: 100%;
object-fit: cover;
}
.project-card:nth-child(3) .responsive-container {
width: 100%;
height: 90vh;
}
.project-card:nth-child(3) .responsive-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
.project-card:nth-child(4) .flex-col.md\:flex-row {
height: 90vh;
}
.project-card:nth-child(4) .md\:w-1\/3 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-card:nth-child(6) .responsive-container {
width: 100%;
height: 90vh;
}
.project-card:nth-child(6) .responsive-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
.project-card:nth-child(3),
.project-card:nth-child(4),
.project-card:nth-child(6) {
margin-bottom: 1rem;
}
.project-card:nth-child(2) .container {
max-width: 1200px !important;
padding-left: 6rem !important;
padding-right: 6rem !important;
margin: 0 auto;
}
#slideContainer2 {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
#slideContainer2::-webkit-scrollbar {
display: none !important;
}
.nav-button.prev {
left: 1rem !important;
z-index: 20 !important;
}
.nav-button.next {
right: 1rem !important;
z-index: 20 !important;
}
.project-card:nth-child(4) .md\:w-1\/3 {
width: 65% !important;
}
.project-card:nth-child(2) .slide-description {
font-size: 1.1rem !important;
line-height: 1.25 !important;
max-width: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#slideContainer2 .slide-description {
font-size: 1.1rem !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.image-container h3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.project-card:nth-child(2) .image-box img {
cursor: pointer !important;
}
#slideContainer7 .slide:last-child .image-container {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
padding: 2rem;
}
#slideContainer7 .slide:last-child .image-box {
width: 100%;
height: 70vh;
}
#slideContainer7 .slide:last-child img {
width: 100%;
height: 100%;
object-fit: contain;
}
#slideContainer7 .slide:last-child .slide-description {
margin-top: 1rem;
}
@media (max-width: 1400px) {
.nav-button.prev {
left: 1rem !important;
}
.nav-button.next {
right: 1rem !important;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
padding: 1rem; padding: 1rem;

12
en.html
View file

@ -61,8 +61,8 @@
<span class="skill-tag">C#</span> <span class="skill-tag">C#</span>
<span class="skill-tag">Python</span> <span class="skill-tag">Python</span>
<span class="skill-tag">Kotlin</span> <span class="skill-tag">Kotlin</span>
<span class="skill-tag self-learning">Rust (self-taught)</span> <span class="skill-tag">Rust</span>
<span class="skill-tag self-learning">Ruby (self-taught)</span> <span class="skill-tag">Ruby</span>
</div> </div>
</div> </div>
<div class="skills-category"> <div class="skills-category">
@ -72,9 +72,9 @@
<span class="skill-tag">Unity</span> <span class="skill-tag">Unity</span>
<span class="skill-tag">MSSQL</span> <span class="skill-tag">MSSQL</span>
<span class="skill-tag">Android Studio</span> <span class="skill-tag">Android Studio</span>
<span class="skill-tag self-learning">Git (self-taught)</span> <span class="skill-tag">Git</span>
<span class="skill-tag self-learning">Docker/Podman (self-taught)</span> <span class="skill-tag">Docker/Podman</span>
<span class="skill-tag self-learning">Nginx (self-taught)</span> <span class="skill-tag">Nginx</span>
</div> </div>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
<span class="skill-tag">Windows</span> <span class="skill-tag">Windows</span>
<span class="skill-tag">Linux (Ubuntu)</span> <span class="skill-tag">Linux (Ubuntu)</span>
<span class="skill-tag">Android</span> <span class="skill-tag">Android</span>
<span class="skill-tag self-learning">Linux (openSUSE/Arch) (self-taught)</span> <span class="skill-tag">Linux (openSUSE/Arch)</span>
</div> </div>
</div> </div>
<div class="skills-category"> <div class="skills-category">

18
index.html
View file

@ -61,8 +61,8 @@
<span class="skill-tag">C#</span> <span class="skill-tag">C#</span>
<span class="skill-tag">Python</span> <span class="skill-tag">Python</span>
<span class="skill-tag">Kotlin</span> <span class="skill-tag">Kotlin</span>
<span class="skill-tag self-learning">Rust (samouk)</span> <span class="skill-tag">Rust</span>
<span class="skill-tag self-learning">Ruby (samouk)</span> <span class="skill-tag">Ruby</span>
</div> </div>
</div> </div>
<div class="skills-category"> <div class="skills-category">
@ -72,9 +72,9 @@
<span class="skill-tag">Unity</span> <span class="skill-tag">Unity</span>
<span class="skill-tag">MSSQL</span> <span class="skill-tag">MSSQL</span>
<span class="skill-tag">Android Studio</span> <span class="skill-tag">Android Studio</span>
<span class="skill-tag self-learning">Git (samouk)</span> <span class="skill-tag">Git</span>
<span class="skill-tag self-learning">Docker/Podman (samouk)</span> <span class="skill-tag">Docker/Podman</span>
<span class="skill-tag self-learning">Nginx (samouk)</span> <span class="skill-tag">Nginx</span>
</div> </div>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
<span class="skill-tag">Windows</span> <span class="skill-tag">Windows</span>
<span class="skill-tag">Linux (Ubuntu)</span> <span class="skill-tag">Linux (Ubuntu)</span>
<span class="skill-tag">Android</span> <span class="skill-tag">Android</span>
<span class="skill-tag self-learning">Linux (openSUSE) (samouk)</span> <span class="skill-tag">Linux (openSUSE)</span>
</div> </div>
</div> </div>
<div class="skills-category"> <div class="skills-category">
@ -218,5 +218,11 @@
</ul> </ul>
</section> </section>
</div> </div>
<footer style="background-color: var(--bg-dark)">
<div class="container mx-auto px-4 py-6 text-center" style="color: var(--text-dark)">
<p>© 2024 Bartłomiej Piekarski</p>
</div>
</footer>
</body> </body>
</html> </html>