xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add new Features:

Browse Source 
- Block Alignments
- Tables
- Media with Links
- Block Sizes
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2021-12-28 19:43:39 +01:00
parent 83febcfc79
commit 6adf42d457
20 changed files with 263 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/_article.scss
+1 -1
View File
@@ -13,7 +13,7 @@ article ~ article {
article > .title {
padding: .25rem 1rem;
margin: 0;
font-size: 1.667em;
font-size: 2.5rem;
font-variant: small-caps;
font-weight: bold;
white-space: normal;
_sass/_base.scss
+11 -2
View File
@@ -12,10 +12,19 @@ $theme-menu-color: hsl($theme-hue, 0%, 85%);
$theme-menu-color-active: hsl($theme-hue, 0%, 100%);
$theme-article-background: hsl($theme-hue, 50%, 10%);
$theme-article-color: $theme-content-color;
$theme-article-link-color: hsl($theme-hue, 50%, 75%);
$theme-article-link-color-active: hsl($theme-hue, 100%, 85%);
$theme-article-title-background: hsl($theme-hue, 60%, 50%);
$theme-article-title-color: hsl($theme-hue, 100%, 100%);
$theme-article-heading-h1-background: hsl($theme-hue, 75%, 30%);
$theme-article-heading-h2-background: hsl($theme-hue, 75%, 15%);
$theme-article-heading-h3-background: transparent;
$theme-article-heading-h4-background: transparent;
$theme-article-heading-h5-background: transparent;
$theme-article-heading-h6-background: transparent;
$theme-article-table-head-background: hsl($theme-hue, 75%, 25%);
$theme-article-table-body-background: hsl($theme-hue, 60%, 15%);
$theme-article-table-body-background-alt: hsl($theme-hue, 60%, 12.5%);
$theme-article-link-color: hsl($theme-hue, 50%, 75%);
$theme-article-link-color-active: hsl($theme-hue, 100%, 85%);
$theme-article-meta-background: hsl($theme-hue, 50%, 7.5%);
$theme-article-meta-color: hsl($theme-hue, 0%, 70%);
$theme-article-meta-link-color: hsl($theme-hue, 100%, 70%);
_sass/_block-heading.scss
+47
View File
@@ -0,0 +1,47 @@
.block-heading {
margin: 0;
margin-top: 1.5rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
padding: 0;
}
.block-heading > .content {
font-variant: small-caps;
font-weight: bold;
padding: 0.5rem 0.75rem;
}
.block-heading > h1.content {
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
.block-heading > h2.content {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
.block-heading > h3.content {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
.block-heading > h4.content {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
.block-heading > h5.content {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
.block-heading > h6.content {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
.block-heading + .block {
margin-top: .25rem;
}
_sass/_block-media.scss
+2
View File
@@ -6,6 +6,7 @@
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
@@ -16,6 +17,7 @@
// --------------------------------------------------------------------------------
// Block: Media > Video
// --------------------------------------------------------------------------------
.block-media > a > video,
.block-media > video {
display: block;
width: 100%;
_sass/_block-table.scss
+55
View File
@@ -0,0 +1,55 @@
// --------------------------------------------------------------------------------
// Block: Table
// --------------------------------------------------------------------------------
.block-table > table {
margin: 0;
padding: 0;
display: table;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.block-table > table > thead > tr,
.block-table > table > tbody > tr {
margin: 0;
padding: 0;
vertical-align: top;
}
.block-table > table > thead > tr {
background: $theme-article-table-head-background;
}
.block-table > table > tbody > tr {
background: $theme-article-table-body-background;
}
.block-table > table > tbody > tr:nth-child(2n) {
background: $theme-article-table-body-background-alt;
}
.block-table > table > thead > tr > th,
.block-table > table > tbody > tr > th {
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: bold;
font-variant: small-caps;
text-align: start;
vertical-align: top;
}
.block-table > table > thead > tr > td,
.block-table > table > tbody > tr > td {
margin: 0;
padding: 0.75rem 1.5rem;
}
.block-table > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
_sass/_blocks.scss
+42 -1
View File
@@ -2,9 +2,10 @@
padding: 0;
margin: 0;
overflow: auto;
text-align: start;
}
.block ~ .block {
.block + .block {
margin-top: 1.25em;
}
@@ -17,12 +18,23 @@
// Float
// --------------------------------------------------------------------------------
.float {}
.float-start {
float: inline-start;
}
.float-end {
float: inline-end;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-clear {
clear: both;
}
@@ -34,6 +46,33 @@
margin-top: 0;
}
// --------------------------------------------------------------------------------
// Align
// --------------------------------------------------------------------------------
.align-start {
text-align: start;
}
.align-end {
text-align: end;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
.align-center {
text-align: center;
}
// --------------------------------------------------------------------------------
// Block: Paragraph
// --------------------------------------------------------------------------------
@@ -81,4 +120,6 @@
// Specialized Blocks
// --------------------------------------------------------------------------------
@import "_block-columns.scss";
@import "_block-heading.scss";
@import "_block-media.scss";
@import "_block-table.scss";