extern/vinyl-records-collection-theme
1
0
Fork 1
mirror of https://github.com/Wivik/vinyl-records-collection-theme.git synced 2024-11-29 02:53:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add background image

Browse Source
This commit is contained in:
Wivik 2023-08-19 23:19:30 +02:00
parent 25230e3796
commit 470d6a5d2d
No known key found for this signature in database
GPG Key ID: 4C47CF1D8592D50F
4 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
assets/css/style.css
View File

@ -1,7 +1,7 @@
:root { :root {
/* Set sans-serif & mono fonts */ /* Set sans-serif & mono fonts */
--sans-font: "fira_sansregular", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif; --sans-font: "Droid Sans", Arial, Helvetica, "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */ /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
@ -30,6 +30,11 @@
--disabled: #111; --disabled: #111;
--link-genres: #fff; --link-genres: #fff;
--link-color: #0d517e; --link-color: #0d517e;
--header-title-color: #fff;
--nav-a-color: #fff;
--nav-a-accent-bg: #666;
--bg-header-elements: #b4b4b438;
--footer-text-color: #fff;
} }
@ -48,28 +53,40 @@ body, h1, h2, h3, p, ul, li {
/* Basic styling */ /* Basic styling */
body { body {
font-family: Arial, sans-serif; color: var(--color);
} }
header { header {
background-color: #333;
color: #fff;
text-align: center; text-align: center;
padding: 10px; padding-top: 1.5rem;
padding-bottom: 1.5rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} }
nav ul { header h1 {
list-style-type: none; margin-bottom: 0.5rem;
display: block;
padding: 0.5rem;
color: var(--header-title-color);
background-color: var(--bg-header-elements);
} }
nav li { nav a:link, a:visited {
display: inline;
margin-right: 20px;
}
nav a {
text-decoration: none; text-decoration: none;
color: #fff; color: var(--nav-a-color);
display: inline-block;
margin: 0.4rem;
padding: 0.5rem;
border: 1px solid var(--nav-a-color);
background-color: var(--bg-header-elements);
border-radius: 5px;
transition: all 0.3s ease-in-out;
}
nav a:hover {
background-color: var(--nav-a-accent-bg);
} }
main { main {
@ -276,10 +293,18 @@ a.record-band:hover {
/* footer */ /* footer */
footer { footer {
background-color: #333; color: var(--footer-text-color);
color: #fff; background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 2rem; padding: 2rem;
font-size: smaller; font-size: smaller;
} }
footer a:link, a:visited {
color: var(--nav-a-color);
}
footer a:hover {
text-decoration: none;
}

15
layouts/_default/baseof.html
View File

@ -15,19 +15,8 @@
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title> <title>{{ $title }}</title>
<style> {{ $css := resources.Get "css/style.css" }}
{{ $woff_police := resources.Get "fonts/firasans-regular-webfont.woff" }} <link rel="stylesheet" href="{{ $css.Permalink }}" />
{{ $woff2_police := resources.Get "fonts/firasans-regular-webfont.woff2" }}
@font-face {
font-family: 'fira_sansregular';
src: url('{{ $woff2_police.Permalink }}') format('woff2'),
url('{{ $woff_police.Permalink }}') format('woff');
}
</style>
{{ $main_style := resources.Get "css/simple.css" }}
{{ $custom_style := resources.Get "css/style.css" }}
{{- /* <link rel="stylesheet" href="{{ $main_style.Permalink }}" /> */ -}}
<link rel="stylesheet" href="{{ $custom_style.Permalink }}" />
</head> </head>
<body> <body>
<!-- Begin page content --> <!-- Begin page content -->

5
layouts/partials/footer.html
View File

@ -1,3 +1,4 @@
<footer> {{ $background_footer := resources.Get "img/back-footer.jpg" }}
<p>&copy; 2023 {{ .Site.Title }} - Using Hugo theme Vinyl Records Library</p> <footer style="background-image: url('{{ $background_footer.Permalink }}');">
<p>&copy; 2023 {{ .Site.Title }} - Using Hugo theme <a href="https://github.com/Wivik/vinyl-records-collection-theme" target="_blank">Vinyl Records Library</a></p>
</footer> </footer>

13
layouts/partials/header.html
View File

@ -1,11 +1,10 @@
<header> {{ $background_header := resources.Get "img/back-header.jpg" }}
<header style="background-image: url('{{ $background_header.Permalink }}');">
<h1>{{ .Site.Title }}</h1> <h1>{{ .Site.Title }}</h1>
<nav> <nav>
<ul> <a href="{{ .Site.BaseURL }}">Home</a>
<li><a href="{{ .Site.BaseURL }}">Home</a></li> <a href="band/">Bands</a>
<li><a href="band/">Bands</a></li> <a href="genres/">Genres</a>
<li><a href="genres/">Genres</a></li> <a href="#">still don't know</a>
<li><a href="#">still don't know</a></li>
</ul>
</nav> </nav>
</header> </header>