/*
Theme Name: Basic Theme
Theme URI: https://greenbackend.com
Description: A Basic WordPress theme for green people.
Version: 1.0.0
Author: Ahmad Naser
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*
i. On Cascading Style Sheets (CSS)
---
CSS is a language used to style markup. It sets the look and feel of a
website and along with JavaScript controls the user experience of a site.
You'll find it lovely and infuriating.
CSS is laid out in a document like this and then referenced by a website
via a <link> tag in the <head> of a site. (See head.php and index.php).
The browser loads the style sheet and renders the style commands.
There is no specific structure you must follow when you organize CSS.
Most of the time it's personal preference. In the style sheet for this
theme for example, I define the "global" styles first and then write the
styles for the site header (logo, navigation, etc.) and then move to
individual views (article, page).
However, the one thing you must be aware of is the cascade. This is the power
(or bane) of CSS. You'll start to pick up on it as you write CSS, but let me
give you a quick example.
This is a class named "red" that styles text to be the color red:
.red { color: red }
The "." is the operator that targets a class of the same name in the markup.
Like this:
<p class="red">Red text</p>
Let's say we add another class to our CSS:
.red { color: red }
.blue { color: blue }
And then let's say we add this class to our markup we had prior:
<p class="red blue">Purple text?</p>
What color will the text be? The color of this text will be blue. The reason
is because of CSS's cascade. The "blue" class came after the "red" class
therefore overriding the value in ".red".
Make sense? Let's do one more example.
Now we'll add another property to the "red" class:
.red { color: red; font-weight: bold; }
.blue { color: blue }
And our markup remains like so:
<p class="red blue">Blue text</p>
The text color remains blue, but now the text will also be bold. Note how
there is nothing in the "blue" class that would override the bold text.
Don't be discouraged if you don't quite get it yet. All it takes to learn
is to change something in the code and then see what happens.
*/
/*
ii. Webfonts
---
This theme uses "custom" fonts (called webfonts) as part of the design.
What this means is visitors likely will not have these fonts installed
on their computer, so we need to load them as part of the website so
the styles below can reference theme.
This is done using @font-face. With @font-face we specify what the
name of the font family should be (that is, the name that is
referenced with font-family later on in the styles to access the
custom font), the src path to the fonts and then the font-weight
and font-style for the font.
Note how the font-family for each of the four serif fonts is the same.
The specific font is keyed from the font-style and font-weight
properties. So when you set a bold serif for example the font-family
will be "IBMPlexSerif" and the font-weight will be set to bold and
the font style to italic. This is what will tell the CSS to load the
IBMPLexSerif-SemiboldItalic font.
Overall, don't worry if you don't fully understand this section.
Mastering custom webfonts is not necessary at this point.
Source
These fonts were downloaded from Google Fonts:
- https://fonts.google.com/specimen/IBM+Plex+Serif
- https://fonts.google.com/specimen/IBM+Plex+Mono
And the webfonts generated with Font Squirrel's Webfont Generator:
- https://www.fontsquirrel.com/tools/webfont-generator
*/
/*
ii. Reset CSS
---
Browsers add default styles to HTML elements. What this CSS does is reset the
styles for all elements so they have no default styles. This was put together
by Eric Meyer a long time ago and is still the best way to reset browsers.
You can skip over this section. There is no need to change anything here.
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* I added this one for Internet Explorer */
hr {
text-align: left;
}
/*
1.0 GLOBAL STYLES
---
*/
html {
height: 100%;
}
body {
box-sizing: border-box;
height: 100%;
/* This specifics the default font to be the operating system's system font */
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Ubuntu", "Fira Sans", Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #1e1f22;
background-color: #fff;
/*
The "-webkit" is a browser prefix. This is how browser makers first
implement experimental CSS features as they work towards standardization.
They are also used for very specific functionality, like adjusting text
on an iPhone. Don't worry about this for now, just leave it as is.
*/
-webkit-text-size-adjust: 100%;
}
a {
text-decoration: none;
color: navy;
}
a:visited {
color: navy;
}
a:hover,
a:focus {
color: deeppink;
}
::selection {
color: #fff;
background-color: #1e1f22;
}
/*
1.1 Layout
---
.frame is the class that centers the site layout.
.measure sets the standard width for long text content
(always use .measure within .frame)
*/
.frame {
box-sizing: border-box;
display: block;
width: 82%;
margin-right: auto;
margin-left: auto;
position: relative;
}
@media (min-width: 960px) {
.frame {
width: 74%;
}
}
@media (min-width: 1680px) {
.frame {
width: 60.8%;
}
}
@media (min-width: 640px) {
.measure {
width: 95%;
}
}
@media (min-width: 960px) {
.measure {
width: 85%;
/*
calc() is a neat CSS property that calculates the result of the arguments
inside of the parenthesis and uses that as the property value. One of the
great benefits is it allows you to mix units.
Note that there must be a space between the operator.
BAD: calc(10%-50px)
GOOD: calc(10% - 50px)
*/
margin-left: calc(12% - 18px);
}
}
@media (min-width: 1240px) {
.measure {
width: 68%;
max-width: 720px;
margin-left: calc(50% - (720px / 2) - 18px);
}
}
/*
1.2 Site Setup
---
This is what anchors the footer to the bottom of the page.
These properties are part of CSS's Flexbox layout system. It's a newer feature
of CSS and very powerful for layout control. If you're new to CSS don't worry
about it for now, there are simpler aspects to master first.
*/
.site {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*
2.0 HEADER
---
Styles for the site header. Includes the logo and navigation.
*/
.site-header {
padding-top: 24px;
position: relative;
}
.identity {
box-sizing: border-box;
display: inline-block;
max-width: 80%;
/*
The margin and padding pattern below adds an
extra clickable area around the logo.
*/
margin: -10px;
padding: 10px;
font-size: 18px;
font-weight: 900;
line-height: 1.4;
text-transform: uppercase;
border-bottom: 0;
border-radius: 8px;
z-index: 1;
}
.identity:hover,
.identity:focus {
/* RGB color value for CSS keyword 'navy' */
background-color: rgba(0, 0, 128, 0.05);
}
.menu-control {
display: block;
width: 28px;
height: 17px;
margin: -10px;
padding: 10px;
position: absolute;
right: 0;
top: 2px;
z-index: 1;
}
/*
Instead of using an SVG for a menu icon I have created it using borders and
a box shadow on the pseudo element, "after". What this does is add a stylable
text "node" after the .menu-control <a> tag. The text content is set with the
"content" property (in our case set to nothing via "", as opposed to "text")
and is then styled to look like a menu icon.
There is a lot you can do with CSS.
*/
.menu-control:after {
content: "";
display: block;
width: 28px;
height: 4px;
position: absolute;
left: 10px;
top: 10px;
border-top: 3px solid rgba(30, 31, 34, 0.5);
border-bottom: 3px solid rgba(30, 31, 34, 0.5);
box-shadow: 0 4px 0 0 #fff, 0 7px 0 0 rgba(30, 31, 34, 0.5);
}
.menu-control-active:after,
.menu-control:hover:after,
.menu-control:focus:after {
border-color: rgba(30, 31, 34, 0.9);
box-shadow: 0 4px 0 0 #fff, 0 7px 0 0 rgba(30, 31, 34, 0.9);
}
@media (min-width: 960px) {
.menu-control {
display: none;
}
}
/*
2.1 Navigation
---
*/
/*
The "nav-list" class is used for the main navigation and the meta links in the
footer. Properties that are shared between the two are included in the
.nav-list series of rules.
Properties that are unique to each are declared further down the cascade.
When you combine the class names (e.g. <ul class="main-nav-list nav-list">)
the properties are combined to make up the complete styling.
*/
.nav-list {
display: flex;
flex-direction: column;
}
@media (min-width: 960px) {
.nav-list {
flex-direction: row
}
}
.nav-list li {
position: relative;
}
.nav-list li:before {
content: "";
position: absolute;
}
.nav-list li:first-child {
margin-left: 0;
}
.nav-list li:first-child:before {
content: "";
}
@media (min-width: 960px) {
.nav-list li:before {
content: " · "
}
}
/*
2.2 Main Navigation
---
*/
/*
The CSS here hides the main nav menu visually while still
making the navigation available to screen readers.
*/
.main-nav {
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
@media (min-width: 960px) {
/* This reverses the hiding mechanism above to show the main nav */
.main-nav {
width: auto;
height: auto;
position: inherit;
overflow: visible;
clip: auto;
}
}
.main-nav-list {
padding-top: 14px;
}
.main-nav-list li {
line-height: 1.565;
}
.main-nav-list li:before {
margin-top: 2px;
margin-left: -12px;
opacity: 0.25;
}
@media (min-width: 960px) {
.main-nav-list li {
margin-left: 20px;
}
}
.main-nav-list a {
display: block;
width: auto;
margin-bottom: -2px;
padding-bottom: 2px;
font-size: 18px;
line-height: 1.565;
color: #1e1f22;
border-bottom: 2px solid transparent;
opacity: 0.5;
}
.main-nav-list a:visited {
color: #1e1f22;
}
.main-nav-list a:hover,
.main-nav-list a:focus {
opacity: 0.7;
}
@media (min-width: 960px) {
.main-nav-list a:hover,
.main-nav-list a:focus {
border-bottom-color: rgba(30, 31, 34, 0.2);
}
}
/*
Active page styling: WordPress adds the "current-menu-item" class on the
<li> element when the current page is being viewed.
*/
.current-menu-item a,
.current-menu-item a:visited {
font-weight: 700;
}
@media (min-width: 960px) {
.current-menu-item a,
.current-menu-item a:visited {
font-weight: normal;
border-bottom-color: rgba(30, 31, 34, 0.1);
}
}
/*
3.0 FOOTER
---
Styles for the site footer.
*/
.site-footer {
box-sizing: border-box;
padding-top: 68px;
padding-bottom: 48px;
}
.copyright {
font-size: 15px;
line-height: 1.6;
color: rgba(30, 31, 34, 0.5);
}
.meta-links-list {
margin-top: 10px;
}
.meta-links-list li {
line-height: 1.565;
}
.meta-links-list li:before {
margin-top: 1px;
margin-left: -10px;
opacity: 0.25;
}
@media (min-width: 960px) {
.meta-links-list li {
margin-left: 16px;
}
}
.meta-links-list a {
margin-bottom: -2px;
padding-bottom: 2px;
font-size: 15px;
line-height: 1.565;
color: rgba(30, 31, 34, 0.5);
border-bottom: 2px solid transparent;
}
.meta-links-list a:visited {
color: rgba(30, 31, 34, 0.5);
}
.meta-links-list a:hover,
.meta-links-list a:focus {
color: rgba(30, 31, 34, 0.7);
border-bottom-color: rgba(30, 31, 34, 0.22);
}
/*
4.0 HOME PAGE
---
*/
/*
.site-tagline below styles the main lead text on the home page.
The font-size property value is calculated using the base font size of the
body text and then increasing two steps on a perfect fifth scale.
If you're interested, you can start exploring type scales here:
http://type-scale.com
*/
.site-tagline {
margin-top: 51px;
margin-bottom: 18px;
font-weight: 900;
font-size: calc(18px * 1.5 * 1.5);
line-height: 1.125;
text-transform: uppercase;
}
@media (min-width: 640px) {
.site-tagline {
width: 80%;
}
}
@media (min-width: 960px) {
.site-tagline {
width: 68%;
}
}
.entry-block {
margin-top: 48px;
}
/*
The "+" is a CSS operator that targets the entity on the right if it comes
immediately after the entity on the left. So in this case the first
.entry-block will have a top margin of 48px, while all other subsequent
.entry-block's will have a top margin of 10px due to the override here.
This allows us to set a larger margin on the first one to give it visual
separation from the main title above it and then use smaller margins on the
rest to keep them as a coherent unit on the page.
You don't have to do it this way of course. There are many other ways to
accomplish the same visual result. You could keep the top margin of 10px on
all .entry-block's and add a bottom padding of 38px on the main title
for example.
*/
.entry-block+.entry-block {
margin-top: 10px;
}
.entry-link {
color: inherit;
}
.entry-link:visited {
color: inherit;
}
.entry-link:hover .preview-title,
.entry-link:focus .preview-title,
.entry-link:hover .preview-publish-date,
.entry-link:focus .preview-publish-date {
color: deeppink;
opacity: 1.0;
}
/*
5.0 POSTS & PAGES
---
*/
.entry-header {
padding-top: 48px;
}
.entry-link {
color: inherit;
border: 0;
}
.title {
margin-top: 10px;
font-size: calc(18px * 1.5);
font-style: normal;
font-weight: 600;
line-height: 1.2;
}
@media (min-width: 960px) {
.title {
width: 68%;
font-size: calc(19px * 1.5);
}
}
.preview-title {
display: inline;
margin-right: 8px;
font-size: 19px;
font-weight: 500;
line-height: 1.4
}
.publish-date {
font-size: 12px;
font-weight: 700;
line-height: 1.565;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.4;
}
.preview-publish-date {
font-size: 16px;
line-height: 1.565;
opacity: 0.68;
}
.entry-content {
margin-top: 28px;
}
/*
6.0 TYPESET
---
This class is used to "activate" the typesetting rules for
post and page content.
In CSS, to target a child element in the corresponding markup, you just add
it after the parent element or classname with a space between. An example is
less confusing.
.red p { color: red }
<div class="red">This text is not red</div>
<div class="red"><p>This text is red</p></div>
The CSS rule is ultimately targeting <p> tags within the "red" class,
not the "red" class itself.
So adding the "typeset" class to a wrapping element (like a <div>) will then
enable all of these styling rules below.
*/
.typeset p,
.typeset li {
font-family: "IBMPlexSerif", Georgia, serif;
font-size: 18px;
line-height: 1.6;
}
.typeset a {
padding-bottom: 2px;
margin-bottom: -2px;
border-bottom: 2px solid rgba(30, 31, 34, 0.1);
}
.typeset a:hover,
.typeset a:focus {
border-bottom-color: rgba(30, 31, 34, 0.15);
}
/*
With how this theme is setup, <h1> should never be used within
.typeset (i.e. in the post body), but if it is it'll be matched
to the <h2> style.
*/
.typeset h1,
.typeset h2 {
font-size: 23px;
font-weight: 600;
line-height: 1.4;
}
.typeset h3 {
font-size: 21px;
font-weight: 600;
line-height: 1.4;
}
.typeset h4 {
font-size: 17px;
font-weight: 900;
line-height: 1.4;
letter-spacing: 1px;
text-transform: uppercase;
}
.typeset h5 {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
}
.typeset h6 {
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 1.4;
}
.typeset p,
.typeset ul,
.typeset ol,
.typeset blockquote,
.typeset pre,
.typeset div,
.typeset form {
margin-top: 17px;
}
.typeset h1,
.typeset h2,
.typeset h3,
.typeset h4,
.typeset h5,
.typeset h6 {
margin-top: calc(18px * 1.5 * 1.5);
}
.typeset em,
.typeset i {
font-family: "IBMPlexSerif", Georgia, serif;
font-style: italic;
}
.typeset strong,
.typeset b {
font-family: "IBMPlexSerif", Georgia, serif;
font-weight: bold;
}
/* Excerpts */
.typeset blockquote {
padding: 18px;
background-color: rgba(30, 31, 34, 0.05);
}
.typeset blockquote p {
font-size: 16px;
}
.typeset blockquote>p:first-child {
margin-top: 0
}
@media (min-width: 640px) {
.typeset blockquote {
padding: 28px;
}
}
.typeset cite {
display: block;
margin-top: 16px;
font-weight: bold;
color: #5e5f62;
}
/* Code samples */
.typeset pre {
padding: 18px;
overflow: scroll;
font-size: 15px;
/* Monospace font stack */
font-family: "IBMPlexMono", "Roboto Mono", "Source Code Pro", "Menlo", "Consolas", "Liberation Mono", monospace;
line-height: 1.656;
background-color: rgba(30, 31, 34, 0.05);
}
.typeset pre p,
.typeset pre code {
font-family: "IBMPlexMono", "Roboto Mono", "Source Code Pro", "Menlo", "Consolas", "Liberation Mono", monospace;
font-size: 15px;
line-height: 1.656;
}
.typeset code {
padding: 4px;
margin: -2px 0;
font-family: "IBMPlexMono", "Roboto Mono", "Source Code Pro", "Menlo", "Consolas", "Liberation Mono", monospace;
font-size: 15px;
color: steelblue;
background-color: rgba(30, 144, 255, 0.12);
border-radius: 4px;
}
.typeset pre code {
/* Turn "off" text and background color if used in <pre> block */
color: #1e1f22;
background-color: transparent
}
.typeset ul {
list-style-type: square;
}
.typeset ol {
list-style-type: decimal;
}
.typeset li {
margin-top: 10px;
}
.typeset sup {
margin-left: 1px;
position: relative;
top: 1px;
font-size: 54%;
line-height: 100%;
vertical-align: text-top;
opacity: 0.68;
}
.typeset hr {
display: block;
width: 25px;
height: 2px;
margin-top: 48px;
margin-right: 0;
margin-bottom: 28px;
margin-left: 0;
border: 0;
border-bottom: 5px dotted #1e1f22;
background-color: transparent;
}
@media (min-width: 640px) {
.typeset hr {
width: 30px;
border-bottom-width: 6px;
}
}
/*
6.1 Images
---
The classes are automatically inserted via WordPress depending on
how you choose to align them.
*/
.typeset img {
display: block;
max-width: 100%;
height: auto;
margin-top: 17px;
}
.typeset img.aligncenter {
margin: 17px auto;
}
@media (min-width: 640px) {
.typeset img.alignright {
margin: 0 0 17px 20px;
float: right;
}
.typeset img.alignleft {
margin: 0 20px 17px 0;
float: left;
}
}
/*
6.2 Inputs
---
*/
.typeset label {
display: block;
margin-top: 17px;
/*
System font, if not defined explicitly would be overwritten as a
child of a <p> tag.
*/
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Ubuntu", "Fira Sans", Helvetica, Arial, sans-serif;
color: rgba(30, 31, 34, 0.5);
}
.typeset input,
.typeset textarea {
width: 100%;
max-width: 540px;
padding: 10px 7px;
margin-top: 6px;
/*
Setting input font stack explicitly, some browsers will use a
monospaced font as the default otherwise.
*/
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Ubuntu", "Fira Sans", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 1.125;
border: 2px solid rgba(30, 31, 34, 0.1);
border-radius: 5px;
}
.typeset textarea {
min-height: 76px;
padding: 5px 7px;
line-height: 1.4;
}
.typeset input:focus,
.typeset textarea:focus {
outline: 0;
border-color: deeppink;
}
.typeset input::placeholder,
.typeset textarea::placeholder {
color: rgba(30, 31, 34, 0.4);
}
/*
6.3 Tables
---
*/
.typeset table {
display: table;
width: 100%;
table-layout: fixed;
margin-top: 23px;
}
.typeset caption {
padding: 10px 0;
font-size: 17px;
font-weight: 900;
text-align: left;
border-bottom: 2px solid rgba(30, 31, 34, 0.4);
}
.typeset th {
padding: 10px 0;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
}
.typeset td {
padding: 7px 0;
font-size: 17px;
line-height: 1.4;
border-top: 1px solid rgba(30, 31, 34, 0.1);
}
/*
Overrides for larger screens.
When the viewport is equal to or greater than 960px the font size is
increased by 1px.
*/
@media (min-width: 960px) {
.typeset p,
.typeset li {
font-size: 19px;
line-height: 1.65;
}
.typeset h1,
.typeset h2 {
font-size: 24px;
}
.typeset h3 {
font-size: 22px;
}
.typeset h4 {
font-size: 18px;
}
.typeset h5 {
font-size: 19px;
}
.typeset h6 {
font-size: 19px;
}
.typeset blockquote p {
font-size: 17px;
}
.typeset pre,
.typeset pre p,
.typeset pre code {
font-size: 16px;
}
.typeset code {
font-size: 16px;
}
.typeset caption {
font-size: 18px;
}
.typeset th {
font-size: 15px;
}
.typeset td {
font-size: 18px;
}
}
/*
7.0 GENERIC CLASSES
---
These are generic classes that can be used as needed.
We use the "show" class to display the main navigation menu on mobile
when the menu icon is tapped.
*/
.hide {
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.show {
width: auto;
height: auto;
position: inherit;
overflow: visible;
clip: auto;
}
Leave a Reply