Basic WP Theme | Ahmad Naser

back to snippest | Comment | Share

/*
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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

1001

1002

1003

1004

1005

1006

1007

1008

1009

1010

1011

1012

1013

1014

1015

1016

1017

1018

1019

1020

1021

1022

1023

1024

1025

1026

1027

1028

1029

1030

1031

1032

1033

1034

1035

1036

1037

1038

1039

1040

1041

1042

1043

1044

1045

1046

1047

1048

1049

1050

1051

1052

1053

1054

1055

1056

1057

1058

1059

1060

1061

1062

1063

1064

1065

1066

1067

1068

1069

1070

1071

1072

1073

1074

1075

1076

1077

1078

1079

1080

1081

1082

1083

1084

1085

1086

1087

1088

1089

1090

1091

1092

1093

1094

1095

1096

1097

1098

1099

1100

1101

1102

1103

1104

1105

1106

1107

1108

1109

1110

1111

1112

1113

1114

1115

1116

1117

1118

1119

1120

1121

1122

1123

1124

1125

1126

1127

1128

1129

1130

1131

1132

1133

1134

1135

1136

1137

1138

1139

1140

1141

1142

1143

1144

1145

1146

1147

1148

1149

1150

1151

1152

1153

1154

1155

1156

1157

1158

1159

1160

1161

1162

1163

1164

1165

1166

1167

1168

1169

1170

1171

1172

1173

1174

1175

1176

1177

1178

1179

1180

1181

1182

1183

1184

1185

1186

1187

1188

1189

1190

1191

1192

1193

1194

1195

1196

1197

1198

1199

1200

1201

1202

1203

1204

1205

1206

1207

1208

1209

1210

1211

1212

1213

1214

1215

1216

1217

1218

1219

1220

1221

1222

1223

1224

1225

1226

1227

1228

1229

1230

1231

1232

1233

1234

1235

1236

1237

1238

1239

1240

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:

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:

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,

blockquote,

pre,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

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 }

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;

}