initial work on themeing

This commit is contained in:
Tobias Brunner 2025-02-24 16:22:52 +01:00
parent 8507c134ca
commit f5aa959f74
No known key found for this signature in database
14 changed files with 12984 additions and 57 deletions

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View file

@ -0,0 +1 @@
(()=>{function g(n){n.directive("collapse",e),e.inline=(t,{modifiers:i})=>{i.includes("min")&&(t._x_doShow=()=>{},t._x_doHide=()=>{})};function e(t,{modifiers:i}){let r=l(i,"duration",250)/1e3,h=l(i,"min",0),u=!i.includes("min");t._x_isShown||(t.style.height=`${h}px`),!t._x_isShown&&u&&(t.hidden=!0),t._x_isShown||(t.style.overflow="hidden");let c=(d,s)=>{let o=n.setStyles(d,s);return s.height?()=>{}:o},f={transitionProperty:"height",transitionDuration:`${r}s`,transitionTimingFunction:"cubic-bezier(0.4, 0.0, 0.2, 1)"};t._x_transition={in(d=()=>{},s=()=>{}){u&&(t.hidden=!1),u&&(t.style.display=null);let o=t.getBoundingClientRect().height;t.style.height="auto";let a=t.getBoundingClientRect().height;o===a&&(o=h),n.transition(t,n.setStyles,{during:f,start:{height:o+"px"},end:{height:a+"px"}},()=>t._x_isShown=!0,()=>{Math.abs(t.getBoundingClientRect().height-a)<1&&(t.style.overflow=null)})},out(d=()=>{},s=()=>{}){let o=t.getBoundingClientRect().height;n.transition(t,c,{during:f,start:{height:o+"px"},end:{height:h+"px"}},()=>t.style.overflow="hidden",()=>{t._x_isShown=!1,t.style.height==`${h}px`&&u&&(t.style.display="none",t.hidden=!0)})}}}}function l(n,e,t){if(n.indexOf(e)===-1)return t;let i=n[n.indexOf(e)+1];if(!i)return t;if(e==="duration"){let r=i.match(/([0-9]+)ms/);if(r)return r[1]}if(e==="min"){let r=i.match(/([0-9]+)px/);if(r)return r[1]}return i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(g)});})();

File diff suppressed because one or more lines are too long

View file

@ -5,60 +5,176 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servala - The Cloud Native Services Hub</title>
<link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}">
<link rel="stylesheet" href='{% static "css/bootstrap-icons.min.css" %}'>
<link rel="stylesheet" type="text/css" href='{% static "css/bootstrap.min.css" %}'>
<style>
.rich-text-content {
overflow-wrap: break-word;
word-wrap: break-word;
}
.rich-text-content img {
max-width: 100%;
height: auto;
}
.description-preview img {
max-width: 100%;
height: auto;
}
</style>
<link rel="stylesheet" type="text/css" href='{% static "css/servala-main.css" %}'>
{% block extra_css %}{% endblock %}
<script defer data-domain="serva.la" src="https://plausible.io/js/script.outbound-links.tagged-events.js"></script>
<script defer src="{% static "js/alpine-collapse.min.js" %}"></script>
<script defer src="{% static "js/servala-main.js" %}"></script>
{% block extra_js %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'services:homepage' %}">Servala</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'services:service_list' %}active{% endif %}"
href="{% url 'services:service_list' %}">Services</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'services:offering_list' %}active{% endif %}"
href="{% url 'services:offering_list' %}">Service Offerings</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'services:provider_list' %}active{% endif %}"
href="{% url 'services:provider_list' %}">Cloud Providers</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'services:partner_list' %}active{% endif %}"
href="{% url 'services:partner_list' %}">Consulting Partners</a>
</li>
</ul>
<div class="overflow-hidden">
<header x-data="{sideNav: false, atTop: true}" class="site-header position-relative">
<div class="header-nav" :class="{ 'header-nav--top': atTop, 'header-nav--fixed': !atTop }"
x-on:scroll.window="atTop = (window.pageYOffset > 200) ? false : true;">
<div class="container-xl mx-auto px-3 px-lg-0 position-relative">
<div class="nav__wrapper d-flex justify-content-between align-items-center">
<div class="nav__brand logo">
<a class="navbar__logo" href="" title="logo">
<img src="{% static "img/header-logo.png" %}" alt="Servala Logo">
</a>
</div>
<div x-cloak class="nav__menu" :class="sideNav ? 'nav__menu-active' : 'nav__menu-hidden'">
<nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
<ul class="navbar__menu menu mr-lg-27">
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:offering_list' %}">Service Offerings</a></li>
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
</ul>
</nav>
</div>
<div class="nav__toggle">
<button @click="sideNav = !sideNav" name="menu" class="nav__button" role="button">
<svg class="nav__button-svg" width="22" height="24">
<line class="button-svg__line" :class="{ 'svg-line-top': sideNav === true }" id="top" x1="0" x2="22"
y1="6" y2="6"></line>
<line class="button-svg__line" :class="{ 'svg-line-center': sideNav === true }" id="middle" x1="0"
x2="22" y1="12" y2="12">
</line>
<line class="button-svg__line" :class="{ 'svg-line-bottom': sideNav === true }" id="bottom" x1="0"
x2="22" y1="18" y2="18"></line>
</svg>
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="container mt-4">
</div>
</header>
{% block content %}
{% endblock %}
</div>
<script src="{% static "js/bootstrap.bundle.min.js" %}"></script>
<footer>
<section>
<div class="container mx-auto px-20 px-lg-0 py-36 border-y">
<div class="row">
<div class="col-12 col-lg-4 mb-60 mb-lg-0">
<div class="mb-10">
<a href="">
<img class="img-fluid" src="{% static "img/footer-logo.png" %}" alt="Servala by VSHN Logo">
</a>
</div>
<div class="fs-14 fw-semibold">
<p>Unlock the Power of Cloud Native Applications.</p>
</div>
<div class="d-flex align-items-center space-x-20">
<a href="https://www.linkedin.com/company/5395280/">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.5831 0.631348C21.2609 0.631348 21.9109 0.900593 22.3902 1.37985C22.8694 1.85911 23.1387 2.50913 23.1387 3.1869V21.0758C23.1387 21.7536 22.8694 22.4036 22.3902 22.8828C21.9109 23.3621 21.2609 23.6313 20.5831 23.6313H2.69423C2.01645 23.6313 1.36644 23.3621 0.887177 22.8828C0.407917 22.4036 0.138672 21.7536 0.138672 21.0758V3.1869C0.138672 2.50913 0.407917 1.85911 0.887177 1.37985C1.36644 0.900593 2.01645 0.631348 2.69423 0.631348H20.5831ZM19.9442 20.4369V13.6647C19.9442 12.5599 19.5054 11.5004 18.7242 10.7192C17.943 9.93799 16.8834 9.49912 15.7787 9.49912C14.6926 9.49912 13.4276 10.1636 12.8142 11.1602V9.7419H9.24923V20.4369H12.8142V14.1375C12.8142 13.1536 13.6065 12.3486 14.5903 12.3486C15.0648 12.3486 15.5198 12.537 15.8553 12.8725C16.1908 13.208 16.3792 13.663 16.3792 14.1375V20.4369H19.9442ZM5.09645 7.73579C5.66578 7.73579 6.21179 7.50963 6.61437 7.10705C7.01695 6.70447 7.24312 6.15846 7.24312 5.58913C7.24312 4.40079 6.28478 3.42968 5.09645 3.42968C4.52373 3.42968 3.97447 3.65719 3.56949 4.06217C3.16452 4.46714 2.93701 5.01641 2.93701 5.58913C2.93701 6.77746 3.90812 7.73579 5.09645 7.73579ZM6.87256 20.4369V9.7419H3.33312V20.4369H6.87256Z"
fill="#4B5563" />
</svg>
</a>
</div>
</div>
<div class="col-12 col-lg-2 mb-60 mb-lg-0">
<div class="space-y-20">
<h4 class="fs-base fw-semibold">Contents</h4>
<ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
<li><a href="{% url 'services:homepage' %}">Home</a></li>
<li><a href="{% url 'services:service_list' %}">Services</a></li>
<li><a href="{% url 'services:offering_list' %}">Service Offerings</a></li>
<li><a href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
<li><a href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
</ul>
</div>
</div>
<div class="col-12 col-lg-2 mb-60 mb-lg-0">
<div class="space-y-20">
<h4 class="fs-base fw-semibold">Company</h4>
<ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
<li><a href="https://www.vshn.ch/en/about/">About Us</a></li>
<li><a href="https://products.vshn.ch/legal/gtc_en.html">Terms & Conditions</a></li>
<li><a href="https://products.vshn.ch/legal/privacy_policy_en.html">Privacy Policy</a></li>
<li><a href="https://products.vshn.ch/legal/dpa_en.html">Data Processing Agreement</a></li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="space-y-20 w-lg-90">
<h4 class="fs-base fw-semibold">Contact</h4>
<ul class="list-unstyled space-y-20 fs-base fw-medium ps-0">
<li>
<a class="d-flex align-items-center" href="tel:+41445455300">
<span class="pr-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.984 15.5283C17.8172 14.5982 16.6332 14.0349 15.4808 14.9635L14.7927 15.5248C14.2892 15.9322 13.3531 17.8358 9.73382 13.9555C6.11531 10.0801 8.26863 9.47668 8.77286 9.07277L9.46475 8.51081C10.6111 7.58006 10.1785 6.40838 9.3517 5.20228L8.85275 4.47173C8.02217 3.26844 7.11773 2.47818 5.96834 3.40752L5.3473 3.91328C4.8393 4.25819 3.41933 5.37929 3.07489 7.50912C2.66036 10.0646 3.96803 12.991 6.96398 16.2019C9.95617 19.4142 12.8858 21.0277 15.6609 20.9996C17.9672 20.9765 19.3601 19.823 19.7957 19.4037L20.419 18.8972C21.5654 17.9686 20.8531 17.0231 19.6857 16.0909L18.984 15.5283Z"
fill="#9A63EC" />
</svg>
</span>
<span>+41 44 545 53 00</span>
</a>
</li>
<li>
<a class="d-flex align-items-center" href="mailto:hi@serva.la">
<span class="pr-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_3315_428" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_3315_428)">
<path
d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L20 8V6L12 11L4 6V8L12 13Z"
fill="#9A63EC" />
</g>
</svg>
</span>
<span>hi@serva.la</span>
</a>
</li>
<li>
<a class="d-flex align-items-center" href="https://www.openstreetmap.org/node/3666762517">
<span class="pr-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3315_433)">
<path
d="M12 0C7.038 0 3 4.066 3 9.065C3 16.168 11.154 23.502 11.501 23.81C11.644 23.937 11.822 24 12 24C12.178 24 12.356 23.937 12.499 23.811C12.846 23.502 21 16.168 21 9.065C21 4.066 16.962 0 12 0ZM12 14C9.243 14 7 11.757 7 9C7 6.243 9.243 4 12 4C14.757 4 17 6.243 17 9C17 11.757 14.757 14 12 14Z"
fill="#9A63EC" />
</g>
<defs>
<clipPath id="clip0_3315_433">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span>Neugasse 10, 8005 Zurich, Switzerland</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="container mx-auto px-20 px-lg-0 pt-36 pb-40">
<div class="text-center fs-base fw-medium">
<p class="mb-0">© 2025 VSHN. All rights reserved.</p>
</div>
</div>
</footer>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long