Skip to content

GitLab

B
Booth.pub
Commit d4059c6a authored by Zachary Dunn's avatar Zachary Dunn
Browse files
Options

Start migration of CSS rules to BEM methodology

parent 01a1b6d9
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 107 deletions
public/css/article.css
View file @ d4059c6a
......@@ -2,17 +2,15 @@ body:not(.h-feed) {
--scroll-bar-color: var(--primary-color-faded);
}
.h-entry.article header {
.entry--article header {
/* border-bottom: 3px solid var(--tertiary-color-faded); */
}
.h-entry.article .h-card,
.h-entry.article .h-card h4,
.h-entry.article .timestamp {
.entry--article .timestamp {
display: inline;
}
.h-entry.article .p-summary::before {
.entry--article .p-summary::before {
content: "Quick summary ↬ ";
font-family: serif;
font-size: 1rem;
......@@ -24,11 +22,11 @@ body:not(.h-feed) {
margin: 0;
}
.h-entry.article .e-content {
.entry--article .e-content {
text-indent: 2.5rem;
}
.h-entry.article p:first-child::first-letter {
.entry--article p:first-child::first-letter {
font-family: Helvetica serif;
padding: 0 .5rem;
margin: 0 .5rem;
......@@ -51,11 +49,11 @@ body:not(.h-feed) {
}
@supports not (initial-letter) {
.h-entry.article p:first-child {
.entry--article p:first-child {
text-indent: 0;
}
.h-entry.article p:first-child::first-letter {
.entry--article p:first-child::first-letter {
font-size: 5rem;
float: left;
line-height: 5rem;
......@@ -63,7 +61,7 @@ body:not(.h-feed) {
}
@supports (initial-letter) {
.h-entry.article p:first-child::first-letter {
.entry--article p:first-child::first-letter {
initial-letter: 3;
}
}
public/css/index.css
View file @ d4059c6a
......@@ -172,38 +172,38 @@ a:focus {
}
.h-card,
.h-card.extended header {
.h-card--extended header {
display: flex;
}
.h-card.extended {
.h-card--extended {
display: flex;
flex-flow: column nowrap;
}
.h-card .avatar-container {
.h-card__avatar {
max-width: 20%;
}
.h-card .avatar-container,
.h-card .avatar-container a,
.h-card .avatar-container img {
.h-card__avatar,
.h-card__avatar a,
.h-card__avatar img {
width: var(--avatar-width);
height: var(--avatar-height);
}
.h-card .avatar-container a:hover,
.h-card .avatar-container a:focus {
.h-card__avatar a:hover,
.h-card__avatar a:focus {
background: initial;
}
.h-card .avatar-container .u-photo:hover,
.h-card .avatar-container .u-photo:focus,
.h-card .avatar-container a:focus .u-photo {
.h-card__avatar .u-photo:hover,
.h-card__avatar .u-photo:focus,
.h-card__avatar a:focus .u-photo {
filter: drop-shadow(4px 4px 2px var(--secondary-color-faded));
}
.h-card .avatar-container .u-photo {
.h-card__avatar .u-photo {
width: var(--avatar-width);
height: var(--avatar-height);
border-radius: 30%;
......@@ -212,7 +212,7 @@ a:focus {
transition: filter ease 250ms;
}
.h-card .name-container {
.h-card__name {
display: flex;
flex: 1 0 auto;
flex-flow: column nowrap;
......@@ -232,7 +232,7 @@ a:focus {
padding: 0 1rem;
}
.h-entry, .p-note, .bth-form {
.block {
background-color: #ffffff;
border:1px solid var(--border-color);
box-shadow: 3px 3px 0px var(--secondary-color-faded);
......@@ -240,41 +240,49 @@ a:focus {
margin: 10px auto 0px;
}
.entry-inner, .p-note {
.block__inner {
padding: 0 1rem;
}
.h-entry .p-name {
.block--padding {
padding: 1rem;
}
.entry--inline {
display: inline;
}
.entry__name {
display: flex;
flex: 1 0 auto;
align-items: center;
margin: 0;
}
.h-feed .h-entry .p-summary {
.h-feed .entry__summary {
padding: 0 0 0 2rem;
border-left: 2px solid var(--secondary-color);
}
.h-entry .p-summary {
.entry__summary {
font-style: italic;
margin: 1rem auto;
}
.h-entry .timestamp {
.entry__timestamp {
font-size: 12px;
color: var(--secondary-color);
align-self: center;
}
.h-entry > img {
.entry__img {
display: block;
width: 50%;
height: 80%;
margin: 0 auto;
}
.h-entry .u-photo + .p-summary {
.figure__caption {
padding: 0;
border: none;
text-align: center;
......@@ -336,44 +344,40 @@ a:focus {
height: 25px;
}
.like {
.entry--like {
--badge-color: var(--like-color);
--border-color: var(--like-color);
}
.boost {
.entry--boost {
--badge-color: var(--boost-color);
--border-color: var(--boost-color);
}
.reply {
.entry--reply {
--badge-color: var(--reply-color);
--border-color: var(--reply-color);
}
.badged p a {
.entry--has-badge p a {
text-decoration: underline double var(--badge-color);
}
.badge {
.entry__badge {
width: 50px;
height: 50px;
}
.badge > .svg-icon {
.entry__badge > .svg-icon {
transform: translateY(-45px);
fill: white;
}
.badge {
.entry__badge {
border-top: 50px solid var(--badge-color);
border-right: 50px solid transparent;
}
.bth-form {
padding: 1rem;
}
/*** Utility Classes ***/
.primary-color {
color: var(--primary-color);
......
public/css/note.css
View file @ d4059c6a
.h-entry header {
.entry--note header {
display: flex;
flex-flow: row nowrap;
flex: 1 0 auto;
......@@ -7,13 +7,13 @@
text-align: center;
}
.h-entry .timestamp {
.entry--note .timestamp {
align-self: baseline;
margin: 0;
padding: 0.5rem;
}
.h-card.mini {
.h-card--mini {
display: flex;
flex: 1 0 auto;
font-size: 12px;
......@@ -25,7 +25,7 @@
--avatar-height: 45px;
}
.name-container > * {
.h-card__name > * {
margin: 0;
}
public/css/photo.css
View file @ d4059c6a
.h-entry.photo figcaption {
.entry--photo figcaption {
text-align: center;
}
.h-entry header {
.entry--photo header {
display: flex;
flex-flow: row nowrap;
flex: 1 0 auto;
......@@ -11,13 +11,13 @@
text-align: center;
}
.h-entry .timestamp {
.entry--photo .timestamp {
align-self: baseline;
margin: 0;
padding: 0.5rem;
}
.h-card.mini {
.h-card--mini {
display: flex;
flex: 1 0 auto;
font-size: 12px;
......@@ -29,7 +29,7 @@
--avatar-height: 45px;
}
.name-container > * {
.h-card__name > * {
margin: 0;
}
public/css/solarized.css
View file @ d4059c6a
......@@ -74,29 +74,27 @@
text-shadow: 0 0px 1px var(--blue);
}
.solarized-dark .h-card .avatar-container .u-photo:hover,
.solarized-dark .h-card .avatar-container .u-photo:focus,
.solarized-dark .h-card .avatar-container a:focus .u-photo {
.solarized-dark .h-card__avatar .u-photo:hover,
.solarized-dark .h-card__avatar .u-photo:focus,
.solarized-dark .h-card__avatar a:focus .u-photo {
filter: drop-shadow(4px 4px 2px var(--base1));
}
.solarized-dark .h-card .avatar-container .u-photo {
.solarized-dark .h-card__avatar .u-photo {
border-top: 1px outset var(--base01);
border-left: 1px outset var(--base01);
}
.solarized-dark .h-entry,
.solarized-dark .p-note,
.solarized-dark .bth-form {
.solarized-dark .block {
background-color: var(--base02);
box-shadow: 1px 1px 3px 0 var(--border-color);
}
.solarized-dark .h-feed .h-entry .p-summary {
.solarized-dark .h-feed .entry__summary {
border-left: 2px solid var(--green);
}
.solarized-dark .h-entry .timestamp {
.solarized-dark .entry__timestamp {
color: var(--primary-text-color);
}
......
templates/about.html.tera
View file @ d4059c6a
......@@ -2,7 +2,7 @@
{% block head %}
<style>
.h-card .p-note {
.bio-inner {
text-indent: 2.5rem;
}
</style>
......@@ -23,14 +23,15 @@
{% endblock opengraph %}
{% block content %}
<section class="h-card extended">
<section class="h-card h-card--extended">
<header>
<div class="avatar-container">
<a class="u-url" href="{{host}}">
<div class="h-card__avatar">
<a class="u-url" href="{{host}}/about" rel="me"></a>
<a class="u-url" href="{{host}}" rel="me">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
</div>
<div class="name-container">
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
<span class="p-nickname">{{username}}</span>@{{domain}}
......@@ -48,22 +49,30 @@
<section class="bio">
<h2>About Me</h2>
<div class="p-note">
<p>
I'm Zachary Dunn. Blah blah blah. I'm a web developer... blah blah blah. I live in Simpsonville, SC, USA.
<div class="bio-inner block block__inner">
<p class="p-adr h-adr">
I'm Zachary Dunn. Blah blah blah. I'm a web developer... blah blah blah. I live in
<span class="p-locality">Simpsonville</span>,
<abbr class="p-region" title="South Carolina">SC</abbr>,
<abbr class="p-country-name" title="United States of America">USA</abbr>.
Lorem ipsum dolor sit amet and other stuff about me.
</p>
<p>
// TODO: Fill this out some more.
</p>
<p class="employment">
I work at the <span class="p-org">Care Coordination Institute</span> as a <span class="p-job-title">software engineer</span>. My job is <span class="p-role">building tools to help healthcare providers improve the quality of their care.</span>
</p>
<p>
A long time ago, in a galaxy far, far away, I was born. blah blah blah... Here's more about me.
I'm a person who does things. Here are some of those things. You're reading this?
You must be really interested in me.
</p>
<div class="p-note">
<p>
// TODO: Fill this out some more.
</p>
<p class="employment">
I work at the <span class="p-org">Care Coordination Institute</span> as a
<span class="p-job-title">software engineer</span>. My job is
<span class="p-role">building tools to help healthcare providers improve the quality of their care.</span>
</p>
<p>
A long time ago, in a galaxy far, far away, I was born. blah blah blah... Here's more about me.
I'm a person who does things. Here are some of those things. You're reading this?
I didn't expect that. You must be really interested in me.
</p>
</div>
</div>
</section>
</section>
......
templates/partials/entry.html.tera
View file @ d4059c6a
<article class="h-entry
{% if post.like_of %} badged like {% endif %}
{% if post.repost_of %} badged boost {% endif %}
{% if post.in_reply_to %} badged reply {% endif %}
<article class="h-entry entry block
{% if post.like_of %} entry--has-badge entry--like {% endif %}
{% if post.repost_of %} entry--has-badge entry--boost {% endif %}
{% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}
">
{% if post.in_reply_to %}
{% include "partials/reply-context" %}
{% endif %}
<header>
<div class="badge">
<div class="entry__badge">
{% if post.like_of %}
{% include "partials/star" %}
{% endif %}
......@@ -18,10 +18,10 @@
{% include "partials/reply-arrow" %}
{% endif %}
</div>
<h3 class="p-name">
<h3 class="p-name entry__name">
{% if post.name %}<a href="{{post.url}}">{{post.name | title}}</a>{% endif %}
</h3>
<h4 class="timestamp">
<h4 class="timestamp entry__timestamp">
Published on
<a href="{{post.url}}">
<time class="dt-published" datetime="{{post.published}}">
......@@ -31,7 +31,7 @@
</a>
</h4>
</header>
<section class="entry-inner">
<section class="block__inner">
{% if post.like_of %}
<p>
<span>Liked <a href="{{ post.like_of }}" class="u-url">{{ post.like_of }}</a></span>
......@@ -44,9 +44,9 @@
{% endif %}
{% if post.src %} <img src="{{post.src}}" class="u-photo" alt="{{post.content}}" /> {% endif %}
{% if post.summary %}
<p class="p-summary">{{ post.summary | safe }}</p>
<p class="p-summary entry__summary">{{ post.summary | safe }}</p>
{% else %}
<p class="e-content">{{ post.content | safe }}</p>
<p class="e-content entry__content">{{ post.content | safe }}</p>
{% endif %}
{% if post.tags %}
<section class="tags">
......
templates/partials/hcard-mini.html.tera
View file @ d4059c6a
<address class="h-card mini p-author">
<div class="avatar-container">
<address class="h-card h-card--mini p-author">
<div class="h-card__avatar">
<a class="u-url" href="{{host}}/about" rel="me"></a>
<a class="u-url" href="{{host}}">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
</div>
<div class="name-container">
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
<span class="p-nickname">{{username}}</span>@{{domain}}
......
templates/partials/hcard.html.tera
View file @ d4059c6a
<address class="h-card p-author">
<div class="avatar-container">
<div class="h-card__avatar">
<a class="u-url" href="{{host}}/about" rel="me"></a>
<a class="u-url" href="{{host}}">
<img class="u-photo avatar" src="{{host}}/{{avatar_src}}" alt="{{name}}'s avatar" />
</a>
</div>
<div class="name-container">
<div class="h-card__name">
<h1 class="p-name">{{name}}</h1>
<h4>
<span class="p-nickname">{{username}}</span>@{{domain}}
......
templates/posts/article.html.tera
View file @ d4059c6a
......@@ -24,17 +24,17 @@
{% endblock opengraph %}
{% block content %}
<article class="h-entry article {% if post.in_reply_to %} badged reply {% endif %}">
<article class="h-entry block entry entry--article {% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}">
{% if post.in_reply_to %}
{% include "partials/reply-context" %}
{% endif %}
<section class="entry-inner">
<section class="entry-inner block__inner">
<header>
<h2 class="p-name">
<a href="{{post.url}}">{{post.name | title}}</a>
</h2>
<address class="h-card p-author">
<h4>
<address class="h-card p-author entry--inline">
<h4 class="entry--inline">
by <a href="{{host}}/" class="u-url">{{name}}</a>
</h4>
</address>
......
templates/posts/note.html.tera
View file @ d4059c6a
......@@ -21,12 +21,12 @@
{% endblock opengraph %}
{% block content %}
<article class="h-entry note {% if post.in_reply_to %} badged reply {% endif %}">
<article class="h-entry block entry entry--note {% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}">
{% if post.in_reply_to %}
{% include "partials/reply-context" %}
{% endif %}
<header>
<div class="badge">
<div class="entry__badge">
{% if post.in_reply_to %}
{% include "partials/reply-arrow" %}
{% endif %}
......@@ -34,7 +34,7 @@
{% include "partials/hcard-mini" %}
{% include "partials/timestamp" %}
</header>
<section class="entry-inner">
<section class="block__inner">
<p class="e-content">{{post.content | safe}}</p>
{#
<nav class="interactions">
......
templates/posts/photo.html.tera
View file @ d4059c6a
......@@ -22,18 +22,23 @@
{% endblock opengraph %}
{% block content %}
<article class="h-entry photo">
<article class="h-entry block entry entry--photo {% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}">
{% if post.in_reply_to %}
{% include "partials/reply-context" %}
{% endif %}
<section class="entry-inner">
<section class="block__inner">
<header>
<div class="entry__badge">
{% if post.in_reply_to %}
{% include "partials/reply-arrow" %}
{% endif %}
</div>
{% include "partials/hcard-mini" %}
{% include "partials/timestamp" %}
</header>
<figure>
<img class="u-photo" src="{{host}}/{{post.src}}" alt="{{post.content}}" />
<figcaption class="p-summary e-content">{{post.summary}}</figcaption>
<figure class="figure>
<img class="u-photo entry__img figure__img" src="{{host}}/{{post.src}}" alt="{{post.content}}" />
<figcaption class="p-summary e-content figure__caption">{{post.summary}}</figcaption>
</figure>
{% if post.tags %}
<p>
......
templates/settings.html.tera
View file @ d4059c6a
......@@ -16,7 +16,7 @@
{% block content %}
<section class="settings">
<form class="bth-form" action="/settings" method="post">
<form class="block block--padding" action="/settings" method="post">
<fieldset>
<label for="theme">Select A Theme</label>
<select id="theme" name="theme">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment