diff --git a/code_export.txt b/code_export.txt index 0457533..ac8f239 100644 --- a/code_export.txt +++ b/code_export.txt @@ -1,3 +1,9 @@ +"./README.md" : +""" +msos spletna stran +""" + + "./css/base/_base.css" : """ /* ========================================================================== @@ -1521,6 +1527,8 @@ footer hr { "./css/pages/_article.css" : """ +/* css/pages/_article.css */ + /* ========================================================================== Single Article/Project Page Specific Styles ========================================================================== */ @@ -1529,29 +1537,138 @@ footer hr { * Ta datoteka vsebuje stile, ki se uporabljajo izključno na strani s * posameznim člankom ali projektom. * - * 1. Glavna postavitev strani članka - * 2. Glava članka (naslov, podnaslov, datum) - * 3. Glavna slika in slike v vsebini - * 4. Telo članka (vsebina, tipografija, citati) - * 5. Noga članka (avtor, deljenje) - * 6. Poziv k prijavi na novice (CTA) - * 7. Stili za stran s člankom na mobilnih napravah + * 1. Glavna postavitev strani članka (z levo navigacijo) + * 2. Lepljiva leva navigacija (Scrollspy - Desktop) + * 3. Lepljiva zgornja vrstica z naslovom in progress barom (Mobile) + * 4. Glava članka (naslov, podnaslov, datum) + * 5. Glavna slika in slike v vsebini + * 6. Telo članka (vsebina, tipografija, citati) + * 7. Noga članka (avtor, deljenje) + * 8. Poziv k prijavi na novice (CTA) + * 9. Stili za stran s člankom na mobilnih napravah */ -/* 1. Glavna postavitev strani članka */ +/* ========================================================================== + 1. Glavna postavitev strani članka + ========================================================================== */ .article-page { padding-top: 80px; background: #FFFFFF; } -.article-container { - max-width: 1024px; +.article-layout-container { + display: flex; + max-width: 1280px; margin: 0 auto; - padding: 96px 32px; + padding: 0 32px; + gap: 64px; + /* Pomembno: poravna elemente na vrh, kar omogoča pravilno delovanje sticky */ + align-items: flex-start; } -/* 2. Glava članka */ +.article-container { + flex-grow: 1; + min-width: 0; /* Prepreči, da bi vsebina potisnila sidebar */ + padding: 96px 0; +} + +/* ========================================================================== + 2. Lepljiva leva navigacija (Scrollspy - Desktop) + ========================================================================== */ + +.article-sidebar { + width: 256px; + flex-shrink: 0; + /* Celoten sidebar postane lepljiv */ + position: sticky; + top: 120px; /* 80px (header) + 40px (razmik) */ + /* Določimo višino, da se omogoči notranje drsenje, če je potrebno */ + height: calc(100vh - 140px); +} + +.scrollspy-nav { + /* Navigacija zapolni celotno višino lepljivega sidebar-a */ + height: 100%; + overflow-y: auto; /* Doda drsnik, samo če je vsebina daljša od višine */ +} + +.scrollspy-nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 16px; + border-left: 2px solid #EAECF0; +} + +.scrollspy-nav li a { + display: block; + padding: 8px 16px; + text-decoration: none; + font-size: 14px; + font-weight: 500; + color: #667085; + border-left: 2px solid transparent; + margin-left: -2px; + transition: all 0.2s ease-in-out; +} + +.scrollspy-nav li a:hover { + color: #101828; + background-color: #F9FAFB; +} + +.scrollspy-nav li a.active { + color: #2D738C; + font-weight: 600; + border-left-color: #2D738C; + background-color: transparent; +} + +/* ========================================================================== + 3. Lepljiva zgornja vrstica (Mobile) + ========================================================================== */ +.mobile-article-header { + display: none; + position: sticky; + top: 60px; + background-color: #FFFFFF; + z-index: 900; + border-bottom: 1px solid #EAECF0; + padding: 12px 24px; +} + +#mobile-article-title { + font-size: 14px; + font-weight: 600; + color: #101828; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.progress-bar-container { + width: 100%; + height: 3px; + background-color: #EAECF0; + position: absolute; + bottom: -1px; + left: 0; +} + +.progress-bar { + width: 0%; + height: 100%; + background-color: #2D738C; + transition: width 0.1s linear; +} + + +/* ========================================================================== + 4. Glava članka + ========================================================================== */ .article-header { text-align: center; @@ -1584,7 +1701,9 @@ footer hr { margin-right: auto; } -/* 3. Glavna slika in slike v vsebini */ +/* ========================================================================== + 5. Glavna slika in slike v vsebini + ========================================================================== */ .article-main-image { margin: 0 0 64px 0; @@ -1618,7 +1737,9 @@ footer hr { text-align: center; } -/* 4. Telo članka */ +/* ========================================================================== + 6. Telo članka + ========================================================================== */ .article-body { max-width: 720px; @@ -1641,6 +1762,7 @@ footer hr { line-height: 38px; color: #101828; margin: 16px 0; + scroll-margin-top: 120px; } .article-body ol { @@ -1650,7 +1772,6 @@ footer hr { gap: 12px; } -/* Stil za citat */ .article-quote { margin: 16px 0; padding-left: 20px; @@ -1680,7 +1801,9 @@ footer hr { background: transparent; } -/* 5. Noga članka */ +/* ========================================================================== + 7. Noga članka + ========================================================================== */ .article-footer { max-width: 720px; @@ -1732,7 +1855,9 @@ footer hr { gap: 12px; } -/* 6. Poziv k prijavi na novice (CTA) */ +/* ========================================================================== + 8. Poziv k prijavi na novice (CTA) + ========================================================================== */ .newsletter-cta { padding: 0 32px 96px 32px; @@ -1799,15 +1924,28 @@ footer hr { /* ========================================================================== - Mobile Article Page Styles + 9. Mobile Article Page Styles ========================================================================== */ @media (max-width: 768px) { - .article-page { padding-top: 60px; } + .article-layout-container { + flex-direction: column; + padding: 0; + gap: 0; + } + + .article-sidebar { + display: none; + } + + .mobile-article-header { + display: block; + } + .article-container { padding: 48px 24px; } @@ -1850,6 +1988,7 @@ footer hr { .article-body h2 { font-size: 24px; line-height: 32px; + scroll-margin-top: 80px; } .article-quote p { @@ -1909,13 +2048,14 @@ footer hr { * Ta datoteka vsebuje stile, ki se uporabljajo izključno na domači strani. * * 1. Hero Section - * 2. Meet the Team Section - * 3. Activities Section - * 4. Latest News Section - * 5. Testimonials Section - * 6. Become Part Section (vključno z obrazcem) - * 7. FAQ Section - * 8. Stili za domačo stran na mobilnih napravah + * 2. Partners Section + * 3. Meet the Team Section + * 4. Activities Section + * 5. Latest News Section + * 6. Testimonials Section + * 7. Become Part Section (vključno z obrazcem) + * 8. FAQ Section + * 9. Stili za domačo stran na mobilnih napravah */ /* 1. Hero Section */ @@ -1936,35 +2076,21 @@ footer hr { width: 100%; height: 100%; z-index: 1; + background: url('../../images/HeroSection-img1.JPG') no-repeat center center/cover; + filter: blur(2px); } .hero-image-left, .hero-image-right { - position: absolute; - top: -150px; - height: 1030px; - width: 50%; - background-size: cover; - background-position: center; -} - -.hero-image-left { - left: 0; - transform: matrix(-1, 0, 0, 1, 0, 0); -} - -.hero-image-right { - right: 0; + display: none; } .hero-overlay { position: absolute; - top: 79px; + top: 0; left: 0; - height: 801px; - width: 56.74%; - background: linear-gradient(122.4deg, rgba(19, 49, 60, 0.92) 35.41%, rgba(39, 77, 90, 0.08) 92.92%); - border-radius: 0px 40px 40px 0px; - backdrop-filter: blur(12px); + height: 100%; + width: 100%; + background: rgba(45, 115, 140, 0.64); z-index: 2; } @@ -1972,23 +2098,26 @@ footer hr { position: relative; z-index: 3; color: #FFFFFF; - padding-left: 120px; - width: 605px; + width: 100%; + max-width: 1000px; + margin: 0 auto; + text-align: center; + padding: 0 24px; } .hero-content .badge-group { display: inline-flex; align-items: center; - padding: 6px 16px; + padding: 8px 24px; gap: 12px; background: rgba(255, 255, 255, 0.4); - border-radius: 16px; + border-radius: 24px; margin-bottom: 32px; } .hero-content .message { - font-weight: 500; - font-size: 14px; + font-weight: 400; + font-size: 18px; } .hero-content h1 { @@ -2005,7 +2134,28 @@ footer hr { margin: 0 0 72px 0; } -/* 2. Meet the Team Section */ +/* 2. Partners Section */ +.partners-section { + background: #FFFFFF; + padding: 64px 0; +} +.partners-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 24px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 64px; + flex-wrap: wrap; +} +.partners-container img { + max-height: 56px; + width: auto; + object-fit: contain; +} + +/* 3. Meet the Team Section */ .meet-the-team-section { display: flex; @@ -2060,7 +2210,7 @@ footer hr { margin: 0 0 56px 0; } -/* 3. Activities Section */ +/* 4. Activities Section */ .activities-section { padding: 128px 80px; @@ -2154,7 +2304,7 @@ footer hr { border-radius: 24px; } -/* 4. Latest News Section */ +/* 5. Latest News Section */ .latest-news-section { padding: 128px 0; @@ -2190,7 +2340,7 @@ footer hr { margin-bottom: 64px; } -/* 5. Testimonials Section */ +/* 6. Testimonials Section */ .testimonials-section { padding: 128px 80px; @@ -2246,7 +2396,7 @@ footer hr { margin-top: 80px; } -/* 6. Become Part Section */ +/* 7. Become Part Section */ .become-part-section { padding: 128px 0; @@ -2282,7 +2432,6 @@ footer hr { display: block; } -/* Stili za obrazec znotraj sekcije */ .contact-form-container { max-width: 800px; margin: 0 auto; @@ -2372,7 +2521,7 @@ footer hr { font-size: 16px; } -/* 7. FAQ Section */ +/* 8. FAQ Section */ .faq-section { padding: 128px 0; @@ -2488,7 +2637,7 @@ footer hr { /* ========================================================================== - Mobile Home Page Styles + 9. Mobile Home Page Styles ========================================================================== */ @media (max-width: 768px) { @@ -2499,25 +2648,9 @@ footer hr { margin-top: 0; align-items: flex-start; } - - .hero-overlay, .hero-image-left, .hero-image-right { - display: none; - } - .hero-background { - background: url('../images/2.hero.jpg') no-repeat center center/cover; + background: url('../../images/HeroSection-img1.JPG') no-repeat center center/cover; } - - .hero-background::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(122.4deg, rgba(19, 49, 60, 0.92) 35.41%, rgba(39, 77, 90, 0.08) 92.92%); - } - .hero-content { padding: 64px 24px; width: 100%; @@ -2537,6 +2670,19 @@ footer hr { border-radius: 37px; } + /* Mobile Partners Section */ + .partners-section { + padding: 40px 24px; + } + .partners-container { + gap: 32px; + justify-content: center; + } + .partners-container img { + max-height: 40px; + flex-basis: 40%; + } + /* Mobile Meet the Team Section */ .meet-the-team-section { flex-direction: column; @@ -3224,6 +3370,411 @@ footer hr { Macedonian Student Organisation in Slovenia Logo + +
+ +
+ + +
+
+ + EN + +
+
+ Slovenščina (SI) + English (EN) + Македонски (MK) +
+
+
+
+ + +
+ + +
+ + + + +
+ +
+ + +
+ +
+
+
+ + +
+
+
+

Select Language

+ +
+
+ Slovenščina (SI) + English (EN) + Македонски (MK) +
+
+
+ + +
+ +
+
+ About us +

Our team, mission, vision & core values

+

MSOS is more than an organization - it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.

+
+
+ + +
+
+

Leadership team

+
+
+ +
+
+
+ + + +
+
+

Kristijan Popovski

+

FOUNDER AND PRESIDENT

+
+
+
+ +
+
+
+ + + +
+
+

Lea Janachkovska

+

HUMAN RESOURCES

+
+
+
+ +
+
+
+ + + +
+
+

Marko Arsov

+

EVENT MANAGER

+
+
+
+ +
+
+
+ + + +
+
+

Marija Koshtrevska

+

IT COORDINATOR

+
+
+
+ +
+
+
+ + + +
+
+

Monika Velinova

+

SECRETARY

+
+
+
+
+
+ + +
+
+

Our core values

+

Our shared values keep us connected and guide us as one team.

+
+
+
+
+

Volunteer spirit

+

The strength of MSOS comes from giving our time and energy selflessly. Every project, event, and idea in MSOS is built on the hard work of our amazing volunteers. Our volunteer spirit is a testament to the dedication, passion, and collaborative energy of our community and the reason why we grow stronger together.

+
+
+ A group of volunteers working together with positive energy. +
+
+
+
+ Students supporting each other in a friendly and caring manner. +
+
+

Solidarity & care for each other

+

We are more than a group of students, but a family. We look after one another and support each other not just with studies, but also with everyday challenges. We are here to listen, help, and celebrate successes together. It's about giving without expecting anything in return and creating a safe, warm, and uplifting environment where everyone feels they belong.

+
+
+
+
+

Love for our roots & ambition for the future

+

We are proud of where we come from and carry our Macedonian heritage with us, while striving for a brighter future. Our roots give us strength, and our ambition pushes us forward. Our ambition drives us to be professional, innovative, and influential leaders and role models in our host country.

+
+
+ A blend of traditional Macedonian culture and modern ambitious students. +
+
+
+
+ + +
+
+

Mission and Vision

+
+
+ +
+
+

The mission of MSOS is to represent the interests, improve the lives, and ease the studies of Macedonian students in the Republic of Slovenia.

+
+
+ Mission Icon +
+
+ +
+
+

The vision of the MSOS is to provide a voice, a home, and support for Macedonian students in the Republic of Slovenia, while encouraging their active involvement in projects of common interest.

+
+
+ Vision Icon +
+
+
+
+ + +
+
+
+ Avatar of Marija + Avatar of Kristijan + Avatar of Lea +
+

Have any questions?

+

Can't find the answer you're looking for? Please chat to our friendly team.

+ See all FAQs +
+
+
+ + + + + + + +""" + + +"./en/about-us/index.html.bak" : +""" + + + + + + Our Team, Mission, Vision & Core Values - MSOS + + + + + + + + + + + + + + + +
+
+ + + Macedonian Student Organisation in Slovenia Logo + +