chore: never did like those class conventions
This commit is contained in:
Cory Dransfeldt
parent
40a873a354
commit
9317a760b0
63 changed files with 247 additions and 256 deletions
|
|
@ -25,6 +25,6 @@ window.onload = () => {
|
|||
})
|
||||
}
|
||||
|
||||
const buttonSets = document.querySelectorAll('.now__section--header-buttons')
|
||||
const buttonSets = document.querySelectorAll('.now-header-buttons')
|
||||
buttonSets.forEach(initializeButtonSet)
|
||||
}
|
||||
|
|
@ -99,9 +99,9 @@ a,
|
|||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main__title, footer nav:last-child) a:hover,
|
||||
:is(.main__title, footer nav:last-child) a:focus,
|
||||
:is(.main__title, footer nav:last-child) a:active {
|
||||
:is(.main-title, footer nav:last-child) a:hover,
|
||||
:is(.main-title, footer nav:last-child) a:focus,
|
||||
:is(.main-title, footer nav:last-child) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition-property: color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
|
|
@ -137,7 +137,7 @@ hr {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
hr.large__spacing {
|
||||
hr.large-spacing {
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ th {
|
|||
}
|
||||
|
||||
/* header */
|
||||
.main__title {
|
||||
.main-title {
|
||||
width: 100%;
|
||||
padding-top: var(--sizing-3xl);
|
||||
display: flex;
|
||||
|
|
@ -198,7 +198,7 @@ th {
|
|||
}
|
||||
|
||||
/* nav */
|
||||
nav.menu__primary {
|
||||
nav.menu-primary {
|
||||
gap: var(--sizing-md);
|
||||
|
||||
& a,
|
||||
|
|
@ -248,11 +248,11 @@ nav ul li .active svg:hover {
|
|||
.rss svg { stroke: var(--brand-rss) !important; }
|
||||
|
||||
/* layout */
|
||||
.default__wrapper {
|
||||
.default-wrapper {
|
||||
padding-top: var(--sizing-3xl);
|
||||
}
|
||||
|
||||
.main__wrapper {
|
||||
.main-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -266,13 +266,13 @@ main {
|
|||
}
|
||||
|
||||
/* now */
|
||||
.now__topper,
|
||||
.now-topper,
|
||||
article {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
.now__topper p:first-child {
|
||||
.now-topper p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -303,7 +303,7 @@ footer nav:last-child {
|
|||
}
|
||||
}
|
||||
|
||||
:is(.main__title, footer nav:last-child) a {
|
||||
:is(.main-title, footer nav:last-child) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -373,12 +373,12 @@ svg {
|
|||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
.icon--small > svg {
|
||||
.icon-small > svg {
|
||||
width: var(--sizing-lg);
|
||||
height: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.icon--center__vertical > svg {
|
||||
.icon-center-vertical > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -395,7 +395,7 @@ li {
|
|||
margin-bottom: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.link__list {
|
||||
.link-list {
|
||||
margin-bottom: 0;
|
||||
|
||||
& li {
|
||||
|
|
@ -408,12 +408,12 @@ li {
|
|||
}
|
||||
}
|
||||
|
||||
.link__list--header {
|
||||
.link-list-header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image__banner {
|
||||
.image-banner {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
height: auto;
|
||||
|
|
@ -428,7 +428,7 @@ li {
|
|||
}
|
||||
|
||||
/* pages */
|
||||
.page__header {
|
||||
.page-header {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
margin-top: 0;
|
||||
|
|
@ -496,38 +496,38 @@ select-pagination::after {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.text--centered {
|
||||
.text-centered {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text--small {
|
||||
.text-small {
|
||||
font-size: var(--font-size-sm) !important;
|
||||
line-height: var(--line-height-sm) !important;
|
||||
}
|
||||
|
||||
.flex--centered {
|
||||
.flex-centered {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify--centered {
|
||||
.justify-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex--wrap {
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
/* screens: md */
|
||||
@media screen and (min-width: 768px) {
|
||||
.main__title {
|
||||
.main-title {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main__title h1 {
|
||||
.main-title h1 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -535,8 +535,8 @@ select-pagination::after {
|
|||
max-width: 768px;
|
||||
}
|
||||
|
||||
.main__title h1,
|
||||
.page__header {
|
||||
.main-title h1,
|
||||
.page-header {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-3xl);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.addon-links__wrapper {
|
||||
.addon-links {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
margin-top: var(--sizing-base);
|
||||
}
|
||||
|
||||
&.link__list {
|
||||
&.link-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.addon-links__wrapper {
|
||||
.addon-links {
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
|
||||
& div:first-of-type {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.badge__grid {
|
||||
.badge-grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-md);
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.badge__grid {
|
||||
.badge-grid {
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
|
|
@ -3,107 +3,107 @@
|
|||
--grid-vertical: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.now__section--header {
|
||||
.now-header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.now__section--header-buttons {
|
||||
.now-header-buttons {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
|
||||
& > button {
|
||||
margin-bottom: var(--sizing-sm) !important;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.now__section--header-wrapper {
|
||||
.now-header-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.now__section--header-buttons > button {
|
||||
margin-bottom: var(--sizing-sm) !important;
|
||||
}
|
||||
|
||||
.now__section--header-buttons > button:last-of-type {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.media__grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
}
|
||||
|
||||
.media__grid.square {
|
||||
grid-template-columns: var(--grid-square);
|
||||
}
|
||||
&.square {
|
||||
grid-template-columns: var(--grid-square);
|
||||
|
||||
.media__grid.vertical {
|
||||
grid-template-columns: var(--grid-vertical);
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media__grid .item__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
&.vertical {
|
||||
grid-template-columns: var(--grid-vertical);
|
||||
|
||||
.media__grid .item__wrapper.shadow picture::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 1px;
|
||||
border-radius: calc(var(--sizing-xs) * .85);
|
||||
box-shadow: inset 0 -70px 50px -40px #000;
|
||||
width: 100%;
|
||||
height: calc(100% - 1px);
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.media__grid a:hover img,
|
||||
.media__grid a:focus img,
|
||||
.media__grid a:active img {
|
||||
border-color: var(--accent-color-hover)
|
||||
}
|
||||
& .item__wrapper {
|
||||
position: relative;
|
||||
|
||||
.media__grid .item__meta-text {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 0 var(--sizing-sm);
|
||||
bottom: var(--sizing-sm);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.shadow picture::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 1px;
|
||||
border-radius: calc(var(--sizing-xs) * .85);
|
||||
box-shadow: inset 0 -70px 50px -40px #000;
|
||||
width: 100%;
|
||||
height: calc(100% - 1px);
|
||||
}
|
||||
|
||||
.media__grid .item__meta-text .header,
|
||||
.media__grid .item__meta-text .subheader {
|
||||
color: var(--color-lightest);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
& picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.media__grid .item__meta-text .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
& a:hover img,
|
||||
& a:focus img,
|
||||
& a:active img {
|
||||
border-color: var(--accent-color-hover)
|
||||
}
|
||||
|
||||
.media__grid img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
transition-property: border-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
& .meta-text {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 0 var(--sizing-sm);
|
||||
bottom: var(--sizing-sm);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.media__grid.square img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
& .header,
|
||||
& .subheader {
|
||||
color: var(--color-lightest);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
|
||||
.media__grid.vertical img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
.media__grid .item__wrapper picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
& img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
transition-property: border-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
|
@ -112,15 +112,15 @@
|
|||
--grid-vertical: repeat(6,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.now__section--header-wrapper {
|
||||
.now-header-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.now__section--header-buttons {
|
||||
.now-header-buttons {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.now__section--header-buttons > button {
|
||||
margin-bottom: 0 !important;
|
||||
& > button {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
.post-graph {
|
||||
margin-top: var(--sizing-base);
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
.post-graph__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--sizing-3xl);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
}
|
||||
& .wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--sizing-3xl);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
|
||||
.post-graph__progress {
|
||||
background-color: var(--accent-color);
|
||||
height: 100%;
|
||||
}
|
||||
& .year {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.post-graph__year {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
& .progress {
|
||||
background-color: var(--accent-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-graph__progress,
|
||||
.post-graph__data {
|
||||
margin-left: var(--sizing-sm);
|
||||
& .progress,
|
||||
& .data {
|
||||
margin-left: var(--sizing-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
.four-oh-four__wrapper {
|
||||
& .image__banner {
|
||||
.four-oh-four-wrapper {
|
||||
& .image-banner {
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
& .page__header {
|
||||
& .page-header {
|
||||
margin-bottom: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,15 +2,15 @@
|
|||
--avatar-size: 16rem;
|
||||
}
|
||||
|
||||
.avatar__wrapper {
|
||||
.avatar-wrapper {
|
||||
margin-bottom: var(--sizing-xl);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
& .avatar__wrapper--interior {
|
||||
& .interior {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);;
|
||||
height: var(--avatar-size);
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.blog--roll__icons {
|
||||
.blog-roll-icons {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
gap: var(--sizing-xs);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.contact__wrapper {
|
||||
.contact-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -7,24 +7,24 @@
|
|||
resize: none;
|
||||
}
|
||||
|
||||
& .column.contact__description p:first-child {
|
||||
& .column.description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__success--header {
|
||||
.contact-success-header {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.contact__wrapper {
|
||||
.contact-wrapper {
|
||||
flex-direction: row;
|
||||
|
||||
& .column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
& .column.contact__description {
|
||||
& .column.description {
|
||||
padding-right: var(--sizing-xl);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.default__wrapper > .link__list {
|
||||
.default-wrapper > .link-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--sizing-3xl);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/* now */
|
||||
.now__section--text {
|
||||
.now-text {
|
||||
padding-left: var(--sizing-base);
|
||||
|
||||
& p {
|
||||
|
|
@ -14,20 +14,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.now__section--header {
|
||||
.now-header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.default__wrapper > .now__section--header:first-of-type {
|
||||
.default-wrapper > .now-header:first-of-type {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.link__list {
|
||||
.link-list {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.now__explainer {
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
.now-explainer {
|
||||
padding-top: var(--sizing-lg);
|
||||
}
|
||||
Reference in a new issue