- ⚠️ These styles will change before the 1.0.0 release ⚠️
+
+ ⚠️ These styles require a special workaround to work properly ⚠️
Stylish table
- Tables can quickly be styled by simply using the following classes:
+ Tables can quickly be styled by simply using the .table-stylish class.
-
- - stylish - Adds colors to cells and makes headers bold
- - table-p-xs - Adds a xs padding to all cells
- - table-p-s - Adds an s padding to all cells
- - table-h-p-s - Adds an s padding to the header cells
-
-
-
+
+ However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.
+ Therefore, the .o-hidden is automatically applied to the table itself.
+ A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
+
+
+
Head 1 |
Head 2 |
-
+
+
Cell 1.1 |
Cell 1.2 |
@@ -41,12 +41,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Cell 2.1 |
Cell 2.2 |
+
- table.stylish.table-p-s.border
- th>td*2
- tr*2>td*2
+ table.table-stylish.table-p-s.border.o-hidden
+ thead>th>td*2
+ tbody>tr*2>td*2
-
+
\ No newline at end of file
diff --git a/htdocs/parts/text_alignment.php b/htdocs/parts/text_alignment.php
index aa69663..8c95e15 100644
--- a/htdocs/parts/text_alignment.php
+++ b/htdocs/parts/text_alignment.php
@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Example |
diff --git a/htdocs/parts/text_links.php b/htdocs/parts/text_links.php
index 0507f58..8788165 100644
--- a/htdocs/parts/text_links.php
+++ b/htdocs/parts/text_links.php
@@ -12,7 +12,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Regular anchors
-
+
Example |
Source |
@@ -30,7 +30,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Bland anchors
-
+
Example |
Source |
@@ -48,7 +48,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Hidden anchors
-
+
Example |
Source |
diff --git a/htdocs/parts/text_misc.php b/htdocs/parts/text_misc.php
index 4b1ef0a..8c49a66 100644
--- a/htdocs/parts/text_misc.php
+++ b/htdocs/parts/text_misc.php
@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Example |
diff --git a/htdocs/parts/text_modifiers.php b/htdocs/parts/text_modifiers.php
index 95f6016..91d0d44 100644
--- a/htdocs/parts/text_modifiers.php
+++ b/htdocs/parts/text_modifiers.php
@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Original |
diff --git a/htdocs/parts/text_styles.php b/htdocs/parts/text_styles.php
index f91290d..b685628 100644
--- a/htdocs/parts/text_styles.php
+++ b/htdocs/parts/text_styles.php
@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Example |
diff --git a/htdocs/parts/text_weights.php b/htdocs/parts/text_weights.php
index 3198611..2f4fdb0 100644
--- a/htdocs/parts/text_weights.php
+++ b/htdocs/parts/text_weights.php
@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Example |
@@ -30,7 +30,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
+
Style |
Example |
diff --git a/scss/site/borders.scss b/scss/site/borders.scss
index 8a85824..575f18e 100644
--- a/scss/site/borders.scss
+++ b/scss/site/borders.scss
@@ -26,7 +26,7 @@ table.stylish {
// It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently.
// I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit.
&.border {
- background-color: #{$color-border-main};
+ //background-color: #{$color-border-main};
}
}
diff --git a/scss/site/table.scss b/scss/site/table.scss
index 21f79e2..8e42766 100644
--- a/scss/site/table.scss
+++ b/scss/site/table.scss
@@ -2,7 +2,10 @@
/* Site > Tables */
-table.stylish {
+.table-stylish {
+ border-collapse: separate;
+ overflow: hidden;
+
th {
font-weight: bold;
}
@@ -10,7 +13,7 @@ table.stylish {
tr {
background-color: #{$color-background-table-dual};
}
-
+
tr:not(:last-of-type), th {
border-bottom: 1.5px solid #{$color-table-border};
}
@@ -22,6 +25,7 @@ table.stylish {
td:not(:last-of-type), th:not(:last-of-type) {
border-right: 1.5px solid #{$color-table-border};
}
-
- // See 'site/border.scss' for border fix.
+
+ // Remark: Tables can be rounded if their parent is.
+ // Thank the modern web for that...
}