design
This commit is contained in:
bkfox
@ -149,36 +149,6 @@ a.navbar-item.is-active {
|
||||
}
|
||||
}
|
||||
|
||||
//-- page
|
||||
/*
|
||||
.page {
|
||||
& > .cover {
|
||||
float: right;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 1.4em;
|
||||
padding: 0.2em 0em;
|
||||
}
|
||||
|
||||
p { padding: 0.4em 0em; }
|
||||
hr { background-color: $grey-light; }
|
||||
|
||||
.page-content {
|
||||
h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
//-- player
|
||||
.player {
|
||||
@ -247,18 +217,31 @@ a.navbar-item.is-active {
|
||||
|
||||
}
|
||||
|
||||
//-- media
|
||||
.media {
|
||||
.subtitle {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.media-content .headline {
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
//-- general
|
||||
:root {
|
||||
--text-color: black;
|
||||
--highlight-color: rgba(255, 255, 0, 1);
|
||||
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
|
||||
--highlight-color-2: rgb(0, 0, 254);
|
||||
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
|
||||
|
||||
--header-height: 30em;
|
||||
|
||||
--heading-height: 30em;
|
||||
--heading-title-bg-color: rgba(255, 255, 0, 1);
|
||||
--heading-bg-color: var(--highlight-color);
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
|
||||
--preview-media-height: 10em;
|
||||
--preview-media-cover-size: 10em;
|
||||
|
||||
--preview-cover-size: 24em;
|
||||
--preview-cover-small-size: 10em;
|
||||
|
||||
--heading-font-family: default;
|
||||
}
|
||||
|
||||
//-- general
|
||||
|
||||
body {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
@ -295,31 +278,6 @@ aside {
|
||||
}
|
||||
|
||||
|
||||
// -- layout
|
||||
:root {
|
||||
--text-color: black;
|
||||
--highlight-color: rgba(255, 255, 0, 1);
|
||||
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
|
||||
--highlight-color-2: rgb(0, 0, 254);
|
||||
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
|
||||
|
||||
--header-height: 30em;
|
||||
|
||||
--heading-height: 30em;
|
||||
--heading-title-bg-color: rgba(255, 255, 0, 1);
|
||||
--heading-bg-color: var(--highlight-color);
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
|
||||
--preview-media-height: 10em;
|
||||
--preview-media-cover-size: 10em;
|
||||
|
||||
--preview-cover-size: 24em;
|
||||
--preview-cover-small-size: 10em;
|
||||
|
||||
--heading-font-family: default;
|
||||
}
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
font-family: var(--heading-font-family);
|
||||
@ -333,6 +291,25 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
color: var(--highlight-color-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: $text-size-big;
|
||||
}
|
||||
|
||||
section.container {
|
||||
padding-top: $mp-6;
|
||||
|
||||
> .title {
|
||||
margin-top: unset;
|
||||
padding-top: unset !important;
|
||||
margin-bottom: $mp-4;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $mp-6;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -396,12 +373,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
|
||||
|
||||
.heading, .headings-container > * {
|
||||
.heading {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
@ -458,7 +430,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
|
||||
&.primary {
|
||||
.navbar-brand {
|
||||
.nav-brand {
|
||||
display: inline-block;
|
||||
margin-right: $mp-3;
|
||||
padding: $mp-3;
|
||||
@ -468,7 +440,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -497,11 +469,17 @@ nav li {
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- detail
|
||||
.page-content {
|
||||
margin-top: $mp-6;
|
||||
margin-bottom: $mp-6;
|
||||
}
|
||||
|
||||
// ---- ---- previews & page items
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
margin-bottom: calc($mp-3);
|
||||
margin-bottom: $mp-4 !important;
|
||||
|
||||
&.preview-card {
|
||||
&:not(.wide) {
|
||||
@ -514,7 +492,8 @@ nav li {
|
||||
}
|
||||
|
||||
&.columns, .headings.columns {
|
||||
margin: 0em;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
.column { padding: 0em; }
|
||||
}
|
||||
|
||||
@ -557,7 +536,7 @@ nav li {
|
||||
|
||||
.headings {
|
||||
padding-top: 0em;
|
||||
margin-bottom: $mp-3 !important;
|
||||
margin-bottom: $mp-4 !important;
|
||||
background-color: var(--heading-bg-color);
|
||||
}
|
||||
|
||||
@ -568,16 +547,17 @@ nav li {
|
||||
.media-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: var(--preview-cover-small-size);
|
||||
|
||||
.list-item:not(.no-cover) & {
|
||||
height: var(--preview-cover-small-size);
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.content { flex-grow: 1; }
|
||||
|
||||
.actions {
|
||||
flex-grow: 0;
|
||||
flex-grow: unset;
|
||||
text-align: right;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -594,7 +574,7 @@ nav li {
|
||||
& .headings {
|
||||
width: var(--preview-cover-size);
|
||||
flex-grow: 0;
|
||||
margin-right: $mp-3;
|
||||
margin-right: $mp-4;
|
||||
}
|
||||
|
||||
& .content {
|
||||
|
||||
Reference in New Issue
Block a user