Skip to content

Commit

Permalink
Header Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@AareFabrik
AareFabrik committed Dec 12, 2024
1 parent 80eb883 commit 134d232
Show file tree
Hide file tree
Showing 20 changed files with 912 additions and 494 deletions.
44 changes: 39 additions & 5 deletions next/app/(main)/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
font-feature-settings: "tnum" on;
}

html,
body {
font-feature-settings: 'tnum';
}

#inputID::placeholder {
color: #000000;
opacity: 1;
Expand All @@ -20,3 +15,42 @@ body {
color: inherit !important;
line-height: inherit !important;
} /* Fix for tiptap renderer of child nodes */


html,
body,
#__next {
width: 100%;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
margin: 0px;
padding: 0px;
/* Allows content to fill the viewport and go beyond the bottom */
min-height: 100%;
}
#__next {
flex-shrink: 0;
flex-basis: auto;
flex-direction: column;
flex-grow: 1;
display: flex;
flex: 1;
}
html {
scroll-behavior: smooth;
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-webkit-text-size-adjust: 100%;
font-feature-settings: 'tnum';
height: 100%;
}
body {
display: flex;
flex-direction: column;
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
85 changes: 44 additions & 41 deletions next/app/(main)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import type { Metadata } from "next";
import "./globals.css";
import Header from "@/components/Header";
import Header from "@/components/Header/Header";
import { FontBold, FontRegular } from "@/lib/Fonts";
import { AudioPlayerProvider } from "@/context/audio-player-context";
import Footer from "@/components/Footer";
import Metrics from "@/lib/Metrics";
require("moment/locale/de.js");
import { draftMode } from "next/headers";
import { RNMQProvider } from "@/context/RNMQProvider";
import HeaderOffset from "@/components/HeaderOffset";

export const metadata: Metadata = {
title: "Radio Bern - Das Berner Kulturradio",
Expand Down Expand Up @@ -38,49 +40,50 @@ export default function RootLayout({
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
</head>
<AudioPlayerProvider>
<body className={`${FontRegular.variable} ${FontBold.variable}`}>
{isEnabled && (
<div
style={{
display: "flex",
width: "100%",
backgroundColor: "#ff7777",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "fixed",
height: 30,
zIndex: 998,
}}
>
<div style={{ paddingRight: Metrics.halfBaseMargin }}>
Draft mode
<RNMQProvider>
<AudioPlayerProvider>
<body className={`${FontRegular.variable} ${FontBold.variable}`}>
{isEnabled && (
<div
style={{
display: "flex",
width: "100%",
backgroundColor: "#ff7777",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "fixed",
height: 30,
zIndex: 998,
}}
>
<div style={{ paddingRight: Metrics.halfBaseMargin }}>
Preview mode
</div>
<form method="POST" action="/api/draft">
<button>End preview</button>
</form>
</div>
<form method="POST" action="/api/draft">
<button>End preview</button>
</form>
)}
{isEnabled && (
<div
style={{
height: 30,
}}
></div>
)}
<div>
<Header />
</div>
)}
{isEnabled && (
<div
style={{
height: 30,
}}
></div>
)}
<div>
<Header />
</div>
<HeaderOffset />

<div style={{ width: "100%", aspectRatio: 100 / 5 }}></div>

<div>{children}</div>
<div>
<Footer />
</div>
</body>
</AudioPlayerProvider>
<div>{children}</div>
<div>
<Footer />
</div>
</body>
</AudioPlayerProvider>
</RNMQProvider>
</html>
);
}
65 changes: 59 additions & 6 deletions next/assets/svg/NavRabeLargeText.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,65 @@
import * as React from "react";
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" {...props}>
<path
fill={props.color}
d="M205.143 13.548h2.3V4.069l7.348 9.479h1.959V.229h-2.3v9.212L207.311.229h-2.168Zm-22.4-6.714V2.361h3.407c1.732 0 2.76.78 2.76 2.207v.038c0 1.352-1.066 2.228-2.741 2.228Zm-2.338 6.714h2.338V8.904h2.93l3.279 4.644h2.76l-3.6-5.043a4 4 0 0 0 3.178-4.036v-.038a4.027 4.027 0 0 0-1.1-2.874 5.361 5.361 0 0 0-3.845-1.333h-5.939Zm-23.771 0h9.973v-2.094h-7.633V7.876h6.681V5.782h-6.681V2.318h7.538V.224h-9.878Zm-22.531-2.07V7.824h3.712c1.846 0 2.741.666 2.741 1.789v.038c0 1.2-.971 1.827-2.569 1.827Zm0-5.634v-3.54h3.37c1.5 0 2.342.647 2.342 1.694v.038c0 1.217-1.009 1.808-2.512 1.808Zm-2.3 7.709h6.166c2.97 0 4.931-1.276 4.931-3.654v-.04c0-1.808-1.087-2.7-2.646-3.235a3.171 3.171 0 0 0 1.9-2.968v-.038a2.991 2.991 0 0 0-.894-2.209A4.812 4.812 0 0 0 137.777.23h-5.976Zm-30.815-1.921a4.566 4.566 0 0 1-4.53-4.74v-.044a4.5 4.5 0 0 1 4.492-4.7 4.565 4.565 0 0 1 4.53 4.74v.038a4.5 4.5 0 0 1-4.492 4.7m-.038 2.151a6.826 6.826 0 0 0 6.985-6.891v-.038a6.967 6.967 0 0 0-13.933.038v.038a6.763 6.763 0 0 0 6.948 6.853m-23.565-.229h2.342V.229h-2.342Zm-23.923-2.132v-9.06h2.628a4.372 4.372 0 0 1 4.625 4.53v.038a4.342 4.342 0 0 1-4.625 4.492Zm-2.34 2.132h4.967c4.187 0 7.08-2.911 7.08-6.662v-.038c0-3.75-2.893-6.624-7.08-6.624h-4.967ZM28.767 8.257l2.285-5.329 2.3 5.329Zm-4.624 5.291h2.4l1.371-3.216h6.3l1.349 3.216h2.474L32.174.13h-2.169Zm-21.8-6.714V2.361h3.4c1.732 0 2.76.78 2.76 2.207v.038c0 1.352-1.066 2.228-2.741 2.228ZM0 13.548h2.343V8.904h2.93l3.27 4.644h2.76l-3.6-5.043a4 4 0 0 0 3.178-4.036v-.038a4.027 4.027 0 0 0-1.1-2.874A5.364 5.364 0 0 0 5.943.229H0Z"
data-name="Path 372"
/>
<svg xmlns="http://www.w3.org/2000/svg" width={325} height={14} {...props}>
<defs>
<clipPath id="a">
<path fill="#00635f" d="M0 0h325v13.579H0z" data-name="Rectangle 749" />
</clipPath>
</defs>
<g data-name="Group 2139">
<g fill="#00635f" clipPath="url(#a)" data-name="Group 2138">
<path
d="M0 .225h5.852A5.288 5.288 0 0 1 9.64 1.538a4 4 0 0 1 1.088 2.832v.038a3.942 3.942 0 0 1-3.114 3.976l3.545 4.97H8.421L5.2 8.777H2.307v4.576H0Zm5.683 6.508c1.651 0 2.7-.844 2.7-2.195v-.037c0-1.425-.994-2.175-2.719-2.175H2.307v4.407Z"
data-name="Path 404"
/>
<path
d="M29.472.131h2.138l5.773 13.221h-2.438l-1.331-3.17h-6.208l-1.351 3.17h-2.363Zm3.3 8.008L30.5 2.888l-2.251 5.251Z"
data-name="Path 405"
/>
<path
d="M50.89.225h4.895c4.126 0 6.977 2.832 6.977 6.526v.038c0 3.694-2.851 6.564-6.977 6.564H50.89Zm2.307 2.1v8.927h2.588a4.279 4.279 0 0 0 4.557-4.426v-.037a4.308 4.308 0 0 0-4.557-4.464Z"
data-name="Path 406"
/>
<path d="M76.945.225h2.307v13.128h-2.307z" data-name="Rectangle 748" />
<path
d="M93.433 6.827V6.79A6.738 6.738 0 0 1 100.316 0a6.664 6.664 0 0 1 6.845 6.752v.038a6.738 6.738 0 0 1-6.883 6.789 6.664 6.664 0 0 1-6.845-6.752m11.309 0V6.79a4.471 4.471 0 0 0-4.464-4.652 4.42 4.42 0 0 0-4.426 4.614v.038a4.471 4.471 0 0 0 4.464 4.651 4.42 4.42 0 0 0 4.426-4.614"
data-name="Path 407"
/>
<path
d="M130.593.225h5.889a4.66 4.66 0 0 1 3.433 1.163 2.97 2.97 0 0 1 .882 2.175v.038a3.106 3.106 0 0 1-1.882 2.926c1.557.544 2.607 1.388 2.607 3.188v.038c0 2.344-1.932 3.6-4.857 3.6h-6.076Zm7.9 3.714c0-1.05-.806-1.669-2.307-1.669h-3.32v3.488h3.149c1.5 0 2.476-.581 2.476-1.782Zm.732 5.533c0-1.125-.881-1.763-2.7-1.763h-3.657v3.6h3.826c1.575 0 2.532-.6 2.532-1.8Z"
data-name="Path 408"
/>
<path
d="M155.391.224h9.734v2.063h-7.427v3.414h6.583v2.082h-6.583v3.507h7.521v2.063h-9.827Z"
data-name="Path 409"
/>
<path
d="M179.214.225h5.852a5.288 5.288 0 0 1 3.792 1.313 4 4 0 0 1 1.088 2.832v.038a3.942 3.942 0 0 1-3.113 3.976l3.544 4.97h-2.738l-3.226-4.576h-2.888v4.576h-2.307Zm5.683 6.508c1.651 0 2.7-.844 2.7-2.195v-.037c0-1.425-.994-2.175-2.719-2.175h-3.357v4.407Z"
data-name="Path 410"
/>
<path
d="M204.031.224h2.138l7.033 9.077V.224h2.269v13.129h-1.932l-7.239-9.34v9.34h-2.269Z"
data-name="Path 411"
/>
<path
d="M239.483.225h5.851a5.288 5.288 0 0 1 3.789 1.313 4 4 0 0 1 1.084 2.832v.038a3.943 3.943 0 0 1-3.113 3.976l3.545 4.97h-2.732l-3.226-4.576h-2.888v4.576h-2.307Zm5.683 6.508c1.65 0 2.7-.844 2.7-2.195v-.037c0-1.425-.994-2.175-2.719-2.175h-3.357v4.407Z"
data-name="Path 412"
/>
<path
d="M268.951.131h2.138l5.777 13.221h-2.438l-1.331-3.17h-6.209l-1.35 3.17h-2.36Zm3.3 8.008-2.273-5.251-2.251 5.251Z"
data-name="Path 413"
/>
<path
d="M290.378.225h5.889a4.659 4.659 0 0 1 3.432 1.163 2.968 2.968 0 0 1 .882 2.175v.038a3.105 3.105 0 0 1-1.875 2.926c1.557.544 2.607 1.388 2.607 3.188v.038c0 2.344-1.932 3.6-4.857 3.6h-6.078Zm7.9 3.714c0-1.05-.806-1.669-2.307-1.669h-3.32v3.488h3.151c1.5 0 2.476-.581 2.476-1.782Zm.732 5.533c0-1.125-.882-1.763-2.7-1.763h-3.657v3.6h3.827c1.575 0 2.531-.6 2.531-1.8Z"
data-name="Path 414"
/>
<path
d="M315.173.224h9.734v2.063h-7.427v3.414h6.583v2.082h-6.583v3.507h7.517v2.063h-9.827Z"
data-name="Path 415"
/>
</g>
</g>
</svg>
);
export default SvgComponent;
2 changes: 1 addition & 1 deletion next/assets/svg/NavRabeMediumText.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" {...props}>
<svg xmlns="http://www.w3.org/2000/svg" width={217} height={14} {...props}>
<path
fill={props.color}
d="M205.143 13.548h2.3V4.069l7.348 9.479h1.959V.229h-2.3v9.212L207.311.229h-2.168Zm-22.4-6.714V2.361h3.407c1.732 0 2.76.78 2.76 2.207v.038c0 1.352-1.066 2.228-2.741 2.228Zm-2.338 6.714h2.338V8.904h2.93l3.279 4.644h2.76l-3.6-5.043a4 4 0 0 0 3.178-4.036v-.038a4.027 4.027 0 0 0-1.1-2.874 5.361 5.361 0 0 0-3.845-1.333h-5.939Zm-23.771 0h9.973v-2.094h-7.633V7.876h6.681V5.782h-6.681V2.318h7.538V.224h-9.878Zm-22.531-2.07V7.824h3.712c1.846 0 2.741.666 2.741 1.789v.038c0 1.2-.971 1.827-2.569 1.827Zm0-5.634v-3.54h3.37c1.5 0 2.342.647 2.342 1.694v.038c0 1.217-1.009 1.808-2.512 1.808Zm-2.3 7.709h6.166c2.97 0 4.931-1.276 4.931-3.654v-.04c0-1.808-1.087-2.7-2.646-3.235a3.171 3.171 0 0 0 1.9-2.968v-.038a2.991 2.991 0 0 0-.894-2.209A4.812 4.812 0 0 0 137.777.23h-5.976Zm-30.815-1.921a4.566 4.566 0 0 1-4.53-4.74v-.044a4.5 4.5 0 0 1 4.492-4.7 4.565 4.565 0 0 1 4.53 4.74v.038a4.5 4.5 0 0 1-4.492 4.7m-.038 2.151a6.826 6.826 0 0 0 6.985-6.891v-.038a6.967 6.967 0 0 0-13.933.038v.038a6.763 6.763 0 0 0 6.948 6.853m-23.565-.229h2.342V.229h-2.342Zm-23.923-2.132v-9.06h2.628a4.372 4.372 0 0 1 4.625 4.53v.038a4.342 4.342 0 0 1-4.625 4.492Zm-2.34 2.132h4.967c4.187 0 7.08-2.911 7.08-6.662v-.038c0-3.75-2.893-6.624-7.08-6.624h-4.967ZM28.767 8.257l2.285-5.329 2.3 5.329Zm-4.624 5.291h2.4l1.371-3.216h6.3l1.349 3.216h2.474L32.174.13h-2.169Zm-21.8-6.714V2.361h3.4c1.732 0 2.76.78 2.76 2.207v.038c0 1.352-1.066 2.228-2.741 2.228ZM0 13.548h2.343V8.904h2.93l3.27 4.644h2.76l-3.6-5.043a4 4 0 0 0 3.178-4.036v-.038a4.027 4.027 0 0 0-1.1-2.874A5.364 5.364 0 0 0 5.943.229H0Z"
Expand Down
2 changes: 1 addition & 1 deletion next/assets/svg/NavRabeSmallText.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" {...props}>
<svg xmlns="http://www.w3.org/2000/svg" width={75} height={12} {...props}>
<defs>
<clipPath id="a">
<path
Expand Down
35 changes: 19 additions & 16 deletions next/assets/svg/Pausebutton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import * as React from "react";
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={64 * (props.scale as number)}
height={64 * (props.scale as number)}
{...props}
>
<path
fill={props.color}
transform={`scale(${props.scale})`}
d="M32 64A32.008 32.008 0 0 1 19.544 2.515a32.008 32.008 0 0 1 24.912 58.97A31.8 31.8 0 0 1 32 64Zm3.592-46.735v30.613h8.5V17.265Zm-15.306 0v30.613h8.5V17.265Z"
data-name="Subtraction 3"
/>
</svg>
);

function SvgComponent(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={64}
height={64}
viewBox="0 0 64 64"
{...props}
>
<path
data-name="Subtraction 3"
d="M32 64A32.008 32.008 0 0119.544 2.515a32.008 32.008 0 0124.912 58.97A31.8 31.8 0 0132 64zm3.592-46.735v30.613h8.5V17.265zm-15.306 0v30.613h8.5V17.265z"
fill={props.color}
/>
</svg>
);
}

export default SvgComponent;
39 changes: 22 additions & 17 deletions next/assets/svg/Playbutton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import * as React from "react";
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={64 * (props.scale as number)}
height={64 * (props.scale as number)}
data-name="Component 9 \u2013 1"
{...props}
>
<path
fill={props.color}
transform={`scale(${props.scale})`}
d="M32 64A32.008 32.008 0 0 1 19.544 2.515a32.008 32.008 0 0 1 24.912 58.97A31.8 31.8 0 0 1 32 64Zm-8.348-45.913v27.827L47.3 32Z"
data-name="Subtraction 2"
/>
</svg>
);

function SvgComponent(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
{...props}
>
<g data-name="Group 2132">
<path
data-name="Subtraction 2"
d="M19 38a19.005 19.005 0 01-7.4-36.507 19 19 0 0114.8 35.014A18.881 18.881 0 0119 38zm-4.957-27.261v16.522L28.087 19z"
transform="translate(0 -.019) translate(0 .019)"
fill={props.color}
/>
</g>
</svg>
);
}

export default SvgComponent;
Loading

0 comments on commit 134d232

Please sign in to comment.