Skip to content

Commit

Permalink
optomize mobil version
Browse files Browse the repository at this point in the history
  • Loading branch information
DasUnicorn committed Jan 25, 2024
1 parent 3fc163a commit e5e522a
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 101 deletions.
25 changes: 21 additions & 4 deletions src/components/CallToAction.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@

<div class="bg-primary p-5">
<div class="container">
<div class="d-flex flex-row align-items-center justify-content-center">
<div class="d-flex flex-column align-items-center justify-content-center sm-flex-row">
<div class="d-flex flex-column">
<h2 class="text-white">Noch Fragen?</h2>
<a href="/faq/" class="btn bg-white font-weight-bold">Zum FAQ</a>
</div>
<div class="d-flex flex-column border-white thick-border-left ms-5 ps-5">
<hr class="sm-visually-hidden">
<div class="d-flex flex-column sm-border-white-left sm-ms-5 sm-ps-5">
<h2 class="text-white">Überzeugt?</h2>
<a href="#" class="btn bg-white font-weight-bold">Jetzt anmelden</a>
</div>
Expand All @@ -18,7 +19,23 @@
</div>

<style lang="scss">
.thick-border-left {
border-left: 3px solid;
@include media-breakpoint-up(sm) {
.sm-border-white-left {
border-left: 5px solid white;
}
.sm-visually-hidden {
display: hidden;
}

.sm-flex-row {
flex-direction: row !important;
}

.sm-ms-5 {
margin-left: 30px;
}
.sm-ps-5 {
padding-left: 30px;
}
}
</style>
25 changes: 23 additions & 2 deletions src/components/Hero.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>
<div class="row">
<div class="col title">
<a href="#" class="btn btn-primary row w-25">Jetzt Anmelden</a>
<a href="#" class="btn btn-primary row w-75 button">Jetzt Anmelden</a>
</div>
</div>
</div>
Expand All @@ -23,7 +23,7 @@ header {
background-size: cover;
background-position: top;
background-repeat: no-repeat;
height: 75vh;
height: 700px;

--mask:
radial-gradient(111.80px at 50% calc(100% - 150.00px),#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
Expand Down Expand Up @@ -64,4 +64,25 @@ header {
}
}
}

@include media-breakpoint-up(sm) {
.button {
width: 25% !important;
}
}

@include media-breakpoint-up(sm) {
header {
height: 540px;
}

header {
.title {
h1 {
margin-top: 13rem;
}
}
}

}
</style>
47 changes: 31 additions & 16 deletions src/components/Social.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,41 @@ import Insta from '../../public/icons/instagram-50.svg'
import Masto from '../../public/icons/mastodon-64.svg'
import YouTube from '../../public/icons/youtube-50.svg'
---

<div class="bg-primary p-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-3">
<div class="d-flex order justify-content-evenly">
<div class="">
<button class="btn bg-white font-weight-bold">Newsletter zum Event abbonieren</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-3">
<h2 class="text-white">Dem ABC Folgen:</h2>
</div>
<div class="col-md-1">
<a href="https://www.instagram.com/abc_huell/" target=”_blank”><img src={Insta} alt="Icon Instagram"></a>
</div>
<div class="col-md-1">
<a href="https://bildung.social/@abc" target=”_blank”><img src={Masto} alt="Icon Mastodon"></a>
</div>
<div class="col-md-1">
<a href="https://www.youtube.com/c/abchuell" target=”_blank”><img src={YouTube} alt="Icon YouTube"></a>
<h2 class="text-white pt-4 margin-left md-remove-padding">Dem ABC Folgen:</h2>
<div class="mt-2 d-flex flex-row align-items-center">
<div class="m-1">
<a href="https://www.instagram.com/abc_huell/" target=”_blank”><img src={Insta} alt="Icon Instagram"></a>
</div>
<div class="m-1">
<a href="https://bildung.social/@abc" target=”_blank”><img src={Masto} alt="Icon Mastodon"></a>
</div>
<div class="m-1">
<a href="https://www.youtube.com/c/abchuell" target=”_blank”><img src={YouTube} alt="Icon YouTube"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<style lang="scss">
.order {
flex-direction: column;
}
@include media-breakpoint-up(md) {
.order {
flex-direction: row;
align-items: center;
}
.margin-left{
margin-left: 40px;
}
.md-remove-padding {
padding: 0px !important;
}
}
</style>
158 changes: 87 additions & 71 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
@@ -1,91 +1,107 @@
---
export interface Props {
title: string;
title: string;
}
const { title } = Astro.props;
import "bootstrap/dist/css/bootstrap.min.css";
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js?url";
---

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/Alpaka-head.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<nav class="navbar fixed-top-lg navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="/">HüPC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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 active" aria-current="page" href="/infos/">Organisatorisches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/vor-ort/">Ort</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq/">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/code-of-conduct/">CoC</a>
</li>
<li class="nav-item">
<a class="nav-link bg-primary text-white rounded ms-2" href="#">Anmelden</a>
</li>
</ul>
</div>
</div>
</nav>
<script src={bootstrap}></script>

<slot />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/Alpaka-head.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>

<footer class="bg-light mt-4 py-3">
<div class="container">
Made with ❤️ in Kiel, Hamburg &amp; Mannheim
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="/">HüPC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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" aria-current="page" href="/infos/">Organisatorisches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/vor-ort/">Ort</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq/">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/code-of-conduct/">CoC</a>
</li>
<li class="nav-item sm-ms-2">
<a class="nav-link btn m-0 bg-primary text-white rounded button" href="#">Anmelden</a>
</li>
</ul>
</div>
</footer>
</body>
</div>
</nav>
<slot />
<footer class="bg-light mt-4 py-3">
<div class="container">
Made with ❤️ in Kiel, Hamburg &amp; Mannheim
</div>
</footer>
</body>

</html>
<style is:global lang="scss">
@import "@fontsource/arsenal";
@import "@fontsource/arsenal/700";
@import "@fontsource/fira-sans";
@import "@fontsource/fira-sans/600";
@import "@fontsource/arsenal";
@import "@fontsource/arsenal/700";
@import "@fontsource/fira-sans";
@import "@fontsource/fira-sans/600";

@import "bootstrap/scss/reboot";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";


@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

:root h1,h2 {
--bs-heading-color: #1A073B;
}
:root h1,
h2 {
--bs-heading-color: #1A073B;
}

h1, h2 {
font-family: "Sigmar", sans-serif;
}
h1,
h2 {
font-family: "Sigmar", sans-serif;
}

h3, h4, h5, h6 {
font-family: "Arsenal", $font-family-sans-serif;
}
h3,
h4,
h5,
h6 {
font-family: "Arsenal", $font-family-sans-serif;
}

.navbar {
background: #F8BC72;
}
.navbar {
background: #F8BC72;
}

</style>
.button {
width: 90px;
}

@include media-breakpoint-up(sm) {
.sm-ms-2 {
margin-left: 1.5rem !important;
}
}
</style>
37 changes: 29 additions & 8 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,22 @@ import * as mainInfo from '../content/main-infos.md';

<section>
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-md-7">
<div class="row align-items-center reverse">
<div class="col-md-4 mb-4">
<img src={HuePC22} class="mw-100 margin margin-right margin-left" alt="Eine Gruppe von Menschen sitzt unter einem Baum in Klappstühlen.">
</div>
<div class="col-md-8 pb-4">
<h2 class="text-primary">{introText.frontmatter.title}</h2>
<p set:html={introText.compiledContent()}/>
<a href="/infos/" class="btn btn-secondary">Alles Organisatorische</a>
</div>
<div class="col-md-4">
<img src={HuePC22} class="mw-100 p-md-5" alt="Eine Gruppe von Menschen sitzt unter einem Baum in Klappstühlen.">
</div>
</div>
</div>

<div class="container my-4">
<div class="row align-items-center">
<div class="col-md-5">
<img src={Huell} aria-hidden="true" class="mw-100 p-md-5" alt="Zwei alte Fachwerkhäuser mit Reetdach, hinter einer Weide." />
<img src={Huell} aria-hidden="true" class="mw-100 margin margin-right" alt="Zwei alte Fachwerkhäuser mit Reetdach, hinter einer Weide." />
</div>
<div class="col-md-7 p-4">
<h2 class="text-primary">{locationText.frontmatter.title}</h2>
Expand All @@ -66,13 +66,13 @@ import * as mainInfo from '../content/main-infos.md';

<div class="container my-4">
<div class="row align-items-center">
<div class="col-md-8">
<div class="col-md-8 mb-4">
<h2 class="text-primary">{actionText.frontmatter.title}</h2>
<p set:html={actionText.compiledContent()}/>
<button class="btn btn-primary">Anmelden</button>
</div>
<div class="col-md-4">
<img src={Paper} class="mw-100 p-md-5" alt="Blick über die Schulter einer Person, welche auf dem Rasen liegt und auf einem Blatt Papier Notizen zum Thema 'Polarisierung' verfasst.">
<img src={Paper} class="mw-100 margin margin-right margin-left" alt="Blick über die Schulter einer Person, welche auf dem Rasen liegt und auf einem Blatt Papier Notizen zum Thema 'Polarisierung' verfasst.">
</div>
</div>
</div>
Expand All @@ -81,3 +81,24 @@ import * as mainInfo from '../content/main-infos.md';
<Social />
</main>
</Layout>

<style lang="scss">
@include media-breakpoint-up(sm) {
.reverse{
display: flex;
flex-direction: row-reverse;
}
}

@include media-breakpoint-up(lg) {
.margin {
margin: 15px 0px;
}
.margin-left{
margin-left: 30px;
}
.margin-right{
margin-right: 30px;
}
}
</style>

0 comments on commit e5e522a

Please sign in to comment.