aboutsummaryrefslogtreecommitdiff
path: root/sass/abridge.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/abridge.scss')
-rw-r--r--sass/abridge.scss335
1 files changed, 141 insertions, 194 deletions
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 14a691b..d844403 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -211,13 +211,13 @@ $button: true !default;//Form elements (button)
$form: true !default;//Form elements (non-button)
$top: true !default;//back to top button using CSS
$search: true !default;//search feature
-$toc: true !default;//Table of Contents, page index / recent posts block
+$blocks: true !default;//css classes for block formatting, eg: recent posts, table of contents, series navigation
$modifiers: true !default;//tiny modifier classes for sizing and spacing
$imgswap: true !default;//Image Swap on hover/click
$misc: false !default;
-$grid: false !default;//Infinity Grid, column based layouts.
+$grid: true !default;//Infinity Grid, column based layouts.
$syntax: true !default;//syntax highlighting for code blocks
-$series: true !default;//series of posts
+
/******************************************************************************
* Root element
@@ -440,8 +440,7 @@ $series: true !default;//series of posts
h6 {
padding-left: 0;
color: var(--f2);
- margin-bottom: var(--s1);
- margin-top: var(--s2);
+ margin: var(--s2) 0 var(--s1);
font-weight: var(--fh);
font-size: var(--fs);
line-height: var(--lhh);
@@ -473,7 +472,7 @@ $series: true !default;//series of posts
color: var(--a2);
text-decoration: underline;
}
- h1 a, h2 a, a.si, main nav a, nav > div > a {
+ h1 a, h2 a, main nav a, header span > a {
color: var(--f2);
text-decoration: none;
font-weight: var(--fh);
@@ -545,7 +544,7 @@ $series: true !default;//series of posts
color: var(--f1);
font-style: normal;
font-weight: var(--fw);
- font-size: var(--fs);
+ //font-size: var(--fs);//TODO: This caused the lists to be a different size than the rest of the page, it was quite jarring
}
// Lists
@@ -657,29 +656,71 @@ $series: true !default;//series of posts
}
}
@if $nav {
- //https://github.com/raj457036/attriCSS
- .on,
- .on:visited {//pagination link styling
- font-weight: var(--fh);
- border: .1rem solid var(--c4);
- border-radius: var(--br);
- padding: .1rem var(--s1);
+ header > nav > div {//padding above nav divs in header
+ padding-top: var(--s2);
}
- .on:hover {//makes border of pagination links hover color
- border-color: var(--a3);
- .svgh {
- background: var(--a3);
- opacity: 1;
+ footer > div {//padding above social icons
+ padding-top: var(--s1);
+ }
+ header > nav, header > nav > div:nth-child(2) {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ //margin: 0 auto;
+ h1 {
+ margin: 0;//right margin
+ }
+ span {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
}
}
- nav > div > a, header i, header .dropdown {
- margin-right: .2rem;
- vertical-align: middle;
+
+ header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
+ margin-left: auto;
+ justify-content: center;
+ a, i, .dropdown {
+ margin: 0 var(--s2) 0 0;//right margin
+ }
+ }
+ // mobile first layout.
+ header nav {
+ margin: var(--s1) auto 0; // keeps top menu/search centered in mobile view
+ flex-direction: column;// column layout for mobile view
+ div:nth-child(2) {
+ margin: auto; // keeps top menu/search centered in mobile view
+ }
+ }
+ nav {
+ align-items: center;
+ justify-content: center;//center pagination horizontally
+ display: flex;
+ }
+
+ //dropdown menu used for lang, etc.
+ .dropdown {
+ display: inline-block;
+ position: relative;
+ z-index: 99;
font-weight: var(--fh);
+ font-size: 1.4rem;
}
- main nav {//pagination
- a,span {
- margin: .2rem;
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ z-index: 99;
+ font-weight: var(--fh);
+ font-size: 1.4rem;
+ }
+ .dropdown:hover .dropdown-content {
+ display: block;
+ z-index: 99;
+ a {
+ text-decoration: none;
}
}
article nav {//prev/next page title
@@ -687,7 +728,6 @@ $series: true !default;//series of posts
text-align: right;
}
}
- //footer nav >
footer nav {
a {
margin: .2rem;
@@ -696,46 +736,28 @@ $series: true !default;//series of posts
margin-bottom: .2rem;
}
}
- header > nav > div:first-of-type {//Keep the logo from wrapping
- display: inline;
- min-width: fit-content;
- padding-right: var(--s1);//add some spacing between nav divs
- }
- header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
- margin-left: auto;
- padding-right: var(--s1);//add some spacing between nav divs
- }
- // mobile first layout.
- header nav {
- flex-direction: column;// column layout for mobile view
- h1 {
- margin: var(--s2) 0 var(--s1);//adds more padding above for mobile view
- }
- div {
- margin: auto; // keeps top menu/search centered in mobile view
+
+ //pagination
+ main nav {
+ margin-top: var(--s2);//pagination margin
+ a,span {
+ margin: .2rem;
}
}
- nav > div {
- margin: var(--s1) 0;
+ .on,
+ .on:visited {//pagination link styling
+ font-weight: var(--fh);
+ border: .1rem solid var(--c4);
+ border-radius: var(--br);
+ padding: .1rem var(--s1);
}
- nav {
- align-items: center;
- justify-content: center;//center pagination horizontally
- display: flex;
- div h2 {
- font-size: 1rem;
- &:hover {
- color: var(--a3);
- }
- }
- h1 {
- margin-bottom: 0;
- margin-top: 0.2rem;
+ .on:hover {//makes border of pagination links hover color
+ border-color: var(--a3);
+ .svgh {
+ background: var(--a3);
+ opacity: 1;
}
}
- main nav {
- margin-top: var(--s2);//pagination margin
- }
.outp {
padding: 0 .26rem .2rem;
}
@@ -757,40 +779,17 @@ $series: true !default;//series of posts
.mode:hover, .cnav {
color: var(--a1);//pagination color current page
}
- //dropdown menu used for lang, etc.
- .dropdown {
- display: inline-block;
- position: relative;
- z-index: 99;
- font-weight: var(--fh);
- font-size: 1.4rem;
- }
- .dropdown-content {
- display: none;
- position: absolute;
- z-index: 99;
- font-weight: var(--fh);
- font-size: 1.4rem;
- }
- .dropdown:hover .dropdown-content {
- display: block;
- z-index: 99;
- a {
- text-decoration: none;
- }
- }
+
// breakpoint makes header responsive for desktop layouts
// mobile first is min-width for desktop instead of max-width for mobile
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
- header > nav > div {
- margin: var(--s1) 0;// desktop layout
- }
- header nav {
+ header nav, header > nav > div:nth-child(2) {
flex-direction: row;// row layout for desktop view
- h1 {
- margin: var(--s1) 0;// desktop layout
- }
+ margin: 0 0 0 auto;// desktop layout
+ }
+ header > nav > div {
+ padding-top: var(--s1);
}
}
}
@@ -1153,7 +1152,7 @@ $series: true !default;//series of posts
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
.searchd > input {
- max-width: 15.3rem;
+ max-width: 15rem;
flex-grow: 0;
}
#suggestions {
@@ -1165,52 +1164,49 @@ $series: true !default;//series of posts
}
}
}
-@if $toc {
- main {
- .toc {
- max-width: 15rem;
- min-width: 14rem;
- margin-left: var(--s1);
- }
- .toc-item {
- padding: .4rem 0 0;
- color: var(--f1);
- }
- .toc-item a, .toc-item-child a {
- color: var(--f1);
- &:hover {
- cursor: pointer;
- color: var(--a2);
- text-decoration: underline;
- }
- }
- .toc-item a.active, .toc-item-child a.active {
- color: var(--a2);
- }
- .toc-item-child {
- padding: 0 var(--s1);
- color: var(--f1);
- }
+@if $blocks {
+ .block {
+ max-width: 30rem;
+ margin: var(--s2) auto;
}
- .toc {
- display: none;
+ .sblock {
+ max-width: 15rem;
+ min-width: 14rem;
+ margin-left: var(--s1);
}
- .toc-sticky {
+ .blockdiv {
border-radius: var(--br);
border-top: 5px solid var(--a1);
background-color: var(--c2);
- position: sticky;
- top: var(--s2);
margin-top: var(--s2);
padding: 0 var(--s2) var(--s2);
max-height: 100vh;
overflow: auto;
+ a {
+ color: var(--f1);
+ &:hover {
+ color: var(--a2);
+ }
+ }
+ ol {
+ margin: 0;
+ }
+ }
+ .sticky {
+ position: sticky;
+ top: var(--s2);
+ }
+ .sblock {
+ display: none;//hide in mobile view
}
@if map-get($breakpoints, "md") {
// mobile first is min-width for desktop instead of max-width for mobile
@media (min-width: map-get($breakpoints, "md")) {
- .toc {
- display: unset;
+ .sblock {
+ display: unset;//show in desktop view
+ }
+ .block {
+ display: none;//hide in desktop view, TODO: depending on what blocks get used for, this could be a problem in the future, should be fine for now.
}
}
}
@@ -1247,18 +1243,25 @@ $series: true !default;//series of posts
@if $grid {
// https://github.com/vladocar/Basic.css
[style*="--c:"], section>section {
+ flex: var(--c,1);
+ margin: var(--s1);
color: var(--f2);
padding: var(--s1);
- margin: var(--s1);
text-align: center;
}
section {
display: flex;
flex-flow: row wrap;
- }
- [style*="--c:"], section>section {
- flex:var(--c,1);
- margin:var(--s1);
+ article {
+ div {
+ text-align: center;
+ }
+ h1, h2, h3 {
+ text-align: center;
+ }
+ padding: 20px 30px;
+ min-width: 340px;// limits to 3 columns wide, TODO: solution to limit number of columns
+ }
}
}
@if $enable-icons {
@@ -1345,15 +1348,21 @@ $series: true !default;//series of posts
}
@if $modifiers {
.sum, .sum p {margin: .2rem 0}
+ .s150 {font-size: 1.5em}
+ .s140 {font-size: 1.4em}
+ .s130 {font-size: 1.3em}
+ .s120 {font-size: 1.2em}
+ .s110 {font-size: 1.1em}
.s95 {font-size: .95em}
.s90 {font-size: .90em}
.s85 {font-size: .85em}
.s80 {font-size: .80em}
.s75 {font-size: .75em}
.s70 {font-size: .70em}
- .hpad {padding: 0 .2rem}
- .rpad {padding-right: .2rem}
- .si {font-size: 1.5em}
+ .hpad {padding: 0 var(--s1)}
+ .rpad {padding-right: var(--s1)}
+ .tpad {padding-top: var(--s1)}
+ .b {font-weight: var(--fh)}
}
@if $syntax {
// Unstyled Text Color, and background color
@@ -1555,65 +1564,3 @@ $series: true !default;//series of posts
// color: var(--h1);
//}
}
-
-@if $series {
- .series-mobile {
- max-width: 30rem;
- margin: var(--s2) auto;
- border-radius: var(--br);
- background-color: var(--c2);
- }
-
- .series {
- background-color: var(--c2);
- max-height: 100vh;
- padding: 0 var(--s2) var(--s2);
- border-radius: var(--br);
- border-top: 5px solid var(--a1);
- overflow: auto;
- }
-
- .series h4 a {
- color: var(--f1);
- font-weight: 700;
- &:hover {
- color: var(--a3);
- }
- }
-
- .series ol {
- margin: 0;
- }
-
- .series ol a {
- color: var(--f1);
- &:hover {
- color: var(--a2);
- text-decoration: underline;
- }
- }
-
- .series li {
- font-size: .875rem;
- }
-}
-
-@if $series and $toc {
- .series-toc {
- margin-top: var(--s2);
- max-height: 100vh;
- }
-
- @if map-get($breakpoints, "md") {
- // mobile first is min-width for desktop instead of max-width for mobile
- @media (min-width: map-get($breakpoints, "md")) {
- .series-mobile {
- display: none;
- }
- }
- }
-}
-
-.toc h1 {
- margin: 0;
-} \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-11-08 15:01:52 +0000