holm/vinyl-records-collection-theme
1
0
Fork 0
forked from extern/vinyl-records-collection-theme
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add css customization

Browse Source
This commit is contained in:
Wivik 2023-08-20 21:45:42 +02:00
parent f1d584a2bb
commit 99e8bec5f7
No known key found for this signature in database
GPG Key ID: 4C47CF1D8592D50F
2 changed files with 63 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/custom.css Normal file
View File

@ -0,0 +1,39 @@
:root {
/* Set sans-serif & mono fonts */
--sans-font: "Droid Sans", Arial, Helvetica, "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
--base-fontsize: 1.15rem;
/* Major third scale progression - see https://type-scale.com/ */
--header-scale: 1.25;
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
/* Default (light) theme */
/* inverted both becase I prefer dark theme by default */
--bg: #212121;
--bg-transparent: #2f2f2f41;
--bg-album-transparent: #2f2f2fe5;
--bg-genres: #0d517e;
--accent-bg: #2B2B2B;
--text: #000000;
--text-light: #ABABAB;
--border: #666;
--accent: #0099ff;
--accent-light: #FFECB3;
--code: #F06292;
--preformatted: #CCC;
--disabled: #111;
--link-genres: #fff;
--link-color: #0d517e;
--header-title-color: #fff;
--nav-a-color: #fff;
--nav-a-accent-bg: #666;
--bg-header-elements: #b4b4b438;
--footer-text-color: #fff;
}

35
assets/css/style.css
View File

@ -5,7 +5,7 @@
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
--base-fontsize: 1.15rem;
--base-fontsize: 1rem;
/* Major third scale progression - see https://type-scale.com/ */
--header-scale: 1.25;
@ -35,6 +35,7 @@
--nav-a-accent-bg: #666;
--bg-header-elements: #b4b4b438;
--footer-text-color: #fff;
--bg-album-card: #dad9d9;
}
@ -147,6 +148,7 @@ a.album-info:hover {
ul > li {
list-style-type: none;
font-size: smaller;
margin: 0.1rem;
}
@ -163,11 +165,16 @@ main.album-list {
flex: 25%;
/* border: 1px solid black; */
min-height: 250px;
margin: 1rem;
margin: 0.2rem;
background-repeat: no-repeat;
background-position: left;
background-size: 250px;
padding-left: 255px;
padding-top: 0.1rem;
padding-right: 0.1rem;
padding-bottom: 0.1rem;
background-color: var(--bg-album-card);
border-radius: 5px;
}
@ -192,7 +199,7 @@ main.album-list {
}
}
a.album-band:link, a.album-band:visited {
a.album-artist:link, a.album-artist:visited {
text-decoration: none;
font-size: large;
font-weight: bold;
@ -203,7 +210,7 @@ a.album-band:link, a.album-band:visited {
color: var(--link-color);
}
a.album-band:hover {
a.album-artist:hover {
color: var(--accent)
}
@ -221,7 +228,7 @@ a.album-title:hover {
}
p.album-genres {
font-size: smaller;
font-size: small;
margin: 0.5rem;
}
@ -254,6 +261,16 @@ section.record > div > h1 {
margin-bottom: 1rem;
}
section.record > div > h1.album-title {
font-size: xx-large;
}
section.record img,
section.record-pictures img {
max-width: 250px;
}
section.record-pictures {
flex: 100%;
padding: 1rem;
@ -267,17 +284,13 @@ section.record-pictures summary {
font-size: larger;
}
section.record-pictures img {
max-width: 250px;
}
section.content {
flex: 100%;
padding: 1rem;
border: 1px solid var(--border);
}
a.record-band:link, a.record-band:visited {
a.record-artist:link, a.record-artist:visited {
text-decoration: none;
font-size: large;
font-weight: bold;
@ -286,7 +299,7 @@ a.record-band:link, a.record-band:visited {
color: var(--link-color);
}
a.record-band:hover {
a.record-artist:hover {
color: var(--accent)
}