external-software/github_gohugo_theme_hugo-coder.git

parent: f83b230a | patch | commit | show whitespace

Luiz F. A. de Prá

14.02.2018 94656f4c7929542c1e4b8672e1f8c05fa5fff3bb

Style refactor (#77)

* Change fonts

* Fix colors and sizes

* Fix link colors

* Fix headings and links

* Fix icon size

1 files deleted

6 files modified

1 files added

	assets/scss/_base.scss	121 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/_colors.scss	6 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/_content.scss	22 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/_footer.scss	3 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/_navigation.scss	22 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/_variables.scss	11 ●●●●● patch \| view \| raw \| blame \| history
	assets/scss/coder.scss	12 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/baseof.html	2 ●●●●● patch \| view \| raw \| blame \| history

 assets/scss/_base.scss

@@ -13,20 +13,19 @@
  display:flex;
  color: $fg-color;
  background-color: $bg-color;
    font-family: 'Fira Mono', monospace;
    font-family: $text-font-family;
    font-size: 1.6em;
    font-weight: 400;
    letter-spacing: 0.0625em;
    font-weight: 300;
  line-height: 1.8em;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 1.4em;
  @media only screen and (max-device-width : 768px) {
    font-size: 1.6em;
    line-height: 1.6em;
  }
}

a {
  font-weight: 700;
  color: $alt-fg-color;
  font-weight: 300;
  color: $link-color;
  text-decoration: none;
  &:focus,
  &:hover {
@@ -35,17 +34,7 @@
}

p {
  margin: 1.6rem 0 1.6rem 0;
  a {
    font-weight: 400;
    color: $alt-fg-color;
    text-decoration: underline;
    text-underline-position: under;
    &:focus,
    &:hover {
      color: $link-color;
    }
  }
  margin: 2.0rem 0 2.0rem 0;
}

h1,
@@ -54,73 +43,94 @@
h4,
h5,
h6 {
  font-family: $heading-font-family;
  font-weight: 700;
  color: $alt-fg-color;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  margin: 3.2rem 0 1.6rem 0;
  margin: 6.4rem 0 3.2rem 0;
}

h1 {
  font-size: 3.2rem;
  line-height: 3.2rem;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 2.8rem;
    line-height: 2.8rem;
  line-height: 3.6rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 3.0rem;
    line-height: 3.4rem;
  }
}
h2 {
  font-size: 2.8rem;
  line-height: 2.8rem;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 2.4rem;
    line-height: 2.4rem;
  line-height: 3.2rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 2.6rem;
    line-height: 3.0rem;
  }
}
h3 {
  font-size: 2.4rem;
  line-height: 2.4rem;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 2.0rem;
    line-height: 2.0rem;
  line-height: 2.8rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 2.2rem;
    line-height: 2.6rem;
  }
}
h4 {
  font-size: 2.2rem;
  line-height: 2.2rem;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 1.8rem;
    line-height: 1.8rem;
  line-height: 2.6rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 2.0rem;
    line-height: 2.4rem;
  }
}
h5 {
  font-size: 2.0rem;
  line-height: 2.0rem;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size: 1.6rem;
    line-height: 1.6rem;
  line-height: 2.4rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
h6 {
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-size: 1.8rem;
  line-height: 2.2rem;
  @media only screen and (max-device-width : 768px) {
    font-size: 1.6rem;
    line-height: 2.0rem;
  }
}

b, strong {
  font-weight: 700;
}

pre {
  margin: 1.6rem 0 1.0rem 0;
  padding: 1.6rem;
  display: block;
  font-family: $code-font-family;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.6rem;
  margin: 2.0rem 0 2.0rem 0;
  padding: 2.0rem;
  overflow-x: auto;
  code {
    background-color: inherit;
    color: inherit;
  }
}

code {
  display: inline-block;
  background-color: $alt-fg-color;
  color: $bg-color;
  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  font-family: $code-font-family;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: $alt-bg-color;
  color: $fg-color;
  padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}

blockquote {
  border-left: 2px solid $alt-bg-color;
  padding-left: 1.6rem;
  padding-left: 2.0rem;
  line-height: 2.2rem;
  font-weight: 400;
  font-style: italic;
}

@@ -155,18 +165,27 @@
.wrapper {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 120.0rem;
  max-width: 90.0rem;
  width: 100%;
  padding-left: 2.0rem;
  padding-right: 2.0rem;
}

.fab {
  font-weight: 400;
}

.fas {
  font-weight: 700;
}

.float-right {
  float: right;
}

 assets/scss/_colors.scss

File was deleted

 assets/scss/_content.scss

@@ -4,15 +4,16 @@
  margin-bottom: 3.2rem;
  article {
    header {
      margin-top: 3.2rem;
      margin-top: 6.4rem;
      margin-bottom: 3.2rem;
      h1, h2 {
        margin: 0;
      }
      h2 {
        margin-top: 1.0rem;
        font-size: 1.8rem;
        line-height: 2.2rem;
        color: $fg-color;
        margin-top: 1.8rem;
        @media only screen and (max-device-width : 768px) {
          font-size: 1.6rem;
        }
@@ -38,7 +39,6 @@
    li {
      font-size: 1.6rem;
      @media only screen and (max-device-width : 768px) {
        font-size: 1.4rem;
        margin: 1.6rem 0 1.6rem 0;
      }
      span {
@@ -52,7 +52,14 @@
        }
      }
      a {
        text-transform: uppercase;
        font-size: 1.8rem;
        color: $fg-color;
        font-family: $heading-font-family;
        font-weight: 700;
        &:hover,
        &:focus {
          color: $link-color
        }
      }
    }
  }
@@ -85,15 +92,20 @@
        display: inline-block;
        position: relative;
        a {
          color: $fg-color;
          text-transform: uppercase;
          margin-left: 1.0rem;
          margin-right: 1.0rem;
          font-size: 1.6rem;
          &:hover,
          &:focus {
            color: $link-color;
          }
          @media only screen and (max-device-width : 768px) {
            font-size: 1.4rem;
          }
          i {
            font-weight: 400;
            font-size: 3.2rem;
          }
        }
      }

 assets/scss/_footer.scss

@@ -3,4 +3,7 @@
  text-align: center;
  line-height: 2.0rem;
  margin-bottom:1.0rem;
  a {
    color: $link-color;
  }
}

 assets/scss/_navigation.scss

@@ -4,14 +4,21 @@
  a, span {
    display: inline;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: $heading-font-family;
    font-weight: 700;
    line-height: 6.0rem;
    color: $fg-color;
  }
  a {
    &:hover,
    &:focus {
      color: $link-color
    }
  }
  .navigation-title {
    letter-spacing: 0.1rem;
    @media only screen and (max-device-width : 768px) {
      font-size: 1.4rem;
    text-transform: uppercase;
    }
  }

  .navigation-list {
    float: right;
    list-style: none;
@@ -58,7 +65,6 @@
      }
    }
  }

  #menu-toggle {
    display: none;
    @media only screen and (max-device-width : 768px) {
@@ -81,6 +87,10 @@
      line-height: 6.0rem;
      color: $fg-color;
      cursor: pointer;
      &:hover,
      &:focus {
        color: $link-color
      }
    }
  }
}

 assets/scss/_variables.scss

New file
@@ -0,0 +1,11 @@
// Fonts
$text-font-family: Merriweather, Georgia, serif;
$heading-font-family: Lato, Helvetica, sans-serif;
$code-font-family: 'Source Code Pro', 'Lucida Console', monospace;

// Colors
$bg-color: #FAFAFA !default;
$fg-color: #212121 !default;
$alt-bg-color: #E0E0E0 !default;
$alt-fg-color: #000 !default;
$link-color: #1565c0 !default;

 assets/scss/coder.scss

@@ -1,6 +1,6 @@
@import "_colors";
@import "_base";
@import "_content";
@import "_navigation";
@import "_pagination";
@import "_footer";
@import "variables";
@import "base";
@import "content";
@import "navigation";
@import "pagination";
@import "footer";

 layouts/_default/baseof.html

@@ -14,7 +14,7 @@

    <link rel="canonical" href="{{ .Permalink }}">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Merriweather:300,700|Source+Code+Pro:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />

			@@ -13,20 +13,19 @@
			display:flex;
			color: $fg-color;
			background-color: $bg-color;
			font-family: 'Fira Mono', monospace;
			font-family: $text-font-family;
			font-size: 1.6em;
			font-weight: 400;
			letter-spacing: 0.0625em;
			font-weight: 300;
			line-height: 1.8em;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 1.4em;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.6em;
			line-height: 1.6em;
			}
			}

			a {
			font-weight: 700;
			color: $alt-fg-color;
			font-weight: 300;
			color: $link-color;
			text-decoration: none;
			&:focus,
			&:hover {
			@@ -35,17 +34,7 @@
			}

			p {
			margin: 1.6rem 0 1.6rem 0;
			a {
			font-weight: 400;
			color: $alt-fg-color;
			text-decoration: underline;
			text-underline-position: under;
			&:focus,
			&:hover {
			color: $link-color;
			}
			}
			margin: 2.0rem 0 2.0rem 0;
			}

			h1,
			@@ -54,73 +43,94 @@
			h4,
			h5,
			h6 {
			font-family: $heading-font-family;
			font-weight: 700;
			color: $alt-fg-color;
			text-transform: uppercase;
			letter-spacing: 0.0625em;
			margin: 3.2rem 0 1.6rem 0;
			margin: 6.4rem 0 3.2rem 0;
			}

			h1 {
			font-size: 3.2rem;
			line-height: 3.2rem;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 2.8rem;
			line-height: 2.8rem;
			line-height: 3.6rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 3.0rem;
			line-height: 3.4rem;
			}
			}
			h2 {
			font-size: 2.8rem;
			line-height: 2.8rem;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 2.4rem;
			line-height: 2.4rem;
			line-height: 3.2rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 2.6rem;
			line-height: 3.0rem;
			}
			}
			h3 {
			font-size: 2.4rem;
			line-height: 2.4rem;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 2.0rem;
			line-height: 2.0rem;
			line-height: 2.8rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 2.2rem;
			line-height: 2.6rem;
			}
			}
			h4 {
			font-size: 2.2rem;
			line-height: 2.2rem;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 1.8rem;
			line-height: 1.8rem;
			line-height: 2.6rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 2.0rem;
			line-height: 2.4rem;
			}
			}
			h5 {
			font-size: 2.0rem;
			line-height: 2.0rem;
			@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
			font-size: 1.6rem;
			line-height: 1.6rem;
			line-height: 2.4rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.8rem;
			line-height: 2.2rem;
			}
			}
			h6 {
			font-size: 1.4rem;
			line-height: 1.4rem;
			font-size: 1.8rem;
			line-height: 2.2rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.6rem;
			line-height: 2.0rem;
			}
			}

			b, strong {
			font-weight: 700;
			}

			pre {
			margin: 1.6rem 0 1.0rem 0;
			padding: 1.6rem;
			display: block;
			font-family: $code-font-family;
			font-size: 1.6rem;
			font-weight: 400;
			line-height: 2.6rem;
			margin: 2.0rem 0 2.0rem 0;
			padding: 2.0rem;
			overflow-x: auto;
			code {
			background-color: inherit;
			color: inherit;
			}
			}

			code {
			display: inline-block;
			background-color: $alt-fg-color;
			color: $bg-color;
			padding: 0.4rem 0.8rem 0.4rem 0.8rem;
			font-family: $code-font-family;
			font-size: 1.6rem;
			font-weight: 400;
			background-color: $alt-bg-color;
			color: $fg-color;
			padding: 0.2rem 0.4rem 0.2rem 0.4rem;
			}

			blockquote {
			border-left: 2px solid $alt-bg-color;
			padding-left: 1.6rem;
			padding-left: 2.0rem;
			line-height: 2.2rem;
			font-weight: 400;
			font-style: italic;
			}

			@@ -155,18 +165,27 @@
			.wrapper {
			display: flex;
			flex-direction: column;

			min-height: 100vh;
			width: 100%;
			}

			.container {
			margin: 0 auto;
			max-width: 120.0rem;
			max-width: 90.0rem;
			width: 100%;
			padding-left: 2.0rem;
			padding-right: 2.0rem;
			}

			.fab {
			font-weight: 400;
			}

			.fas {
			font-weight: 700;
			}

			.float-right {
			float: right;
			}

			@@ -4,15 +4,16 @@
			margin-bottom: 3.2rem;
			article {
			header {
			margin-top: 3.2rem;
			margin-top: 6.4rem;
			margin-bottom: 3.2rem;
			h1, h2 {
			margin: 0;
			}
			h2 {
			margin-top: 1.0rem;
			font-size: 1.8rem;
			line-height: 2.2rem;
			color: $fg-color;
			margin-top: 1.8rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.6rem;
			}
			@@ -38,7 +39,6 @@
			li {
			font-size: 1.6rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.4rem;
			margin: 1.6rem 0 1.6rem 0;
			}
			span {
			@@ -52,7 +52,14 @@
			}
			}
			a {
			text-transform: uppercase;
			font-size: 1.8rem;
			color: $fg-color;
			font-family: $heading-font-family;
			font-weight: 700;
			&:hover,
			&:focus {
			color: $link-color
			}
			}
			}
			}
			@@ -85,15 +92,20 @@
			display: inline-block;
			position: relative;
			a {
			color: $fg-color;
			text-transform: uppercase;
			margin-left: 1.0rem;
			margin-right: 1.0rem;
			font-size: 1.6rem;
			&:hover,
			&:focus {
			color: $link-color;
			}
			@media only screen and (max-device-width : 768px) {
			font-size: 1.4rem;
			}
			i {
			font-weight: 400;
			font-size: 3.2rem;
			}
			}
			}

			@@ -3,4 +3,7 @@
			text-align: center;
			line-height: 2.0rem;
			margin-bottom:1.0rem;
			a {
			color: $link-color;
			}
			}

			@@ -4,14 +4,21 @@
			a, span {
			display: inline;
			font-size: 1.6rem;
			text-transform: uppercase;
			font-family: $heading-font-family;
			font-weight: 700;
			line-height: 6.0rem;
			color: $fg-color;
			}
			a {
			&:hover,
			&:focus {
			color: $link-color
			}
			}
			.navigation-title {
			letter-spacing: 0.1rem;
			@media only screen and (max-device-width : 768px) {
			font-size: 1.4rem;
			text-transform: uppercase;
			}
			}

			.navigation-list {
			float: right;
			list-style: none;
			@@ -58,7 +65,6 @@
			}
			}
			}

			#menu-toggle {
			display: none;
			@media only screen and (max-device-width : 768px) {
			@@ -81,6 +87,10 @@
			line-height: 6.0rem;
			color: $fg-color;
			cursor: pointer;
			&:hover,
			&:focus {
			color: $link-color
			}
			}
			}
			}

New file
			@@ -0,0 +1,11 @@
			// Fonts
			$text-font-family: Merriweather, Georgia, serif;
			$heading-font-family: Lato, Helvetica, sans-serif;
			$code-font-family: 'Source Code Pro', 'Lucida Console', monospace;

			// Colors
			$bg-color: #FAFAFA !default;
			$fg-color: #212121 !default;
			$alt-bg-color: #E0E0E0 !default;
			$alt-fg-color: #000 !default;
			$link-color: #1565c0 !default;

			@@ -1,6 +1,6 @@
			@import "_colors";
			@import "_base";
			@import "_content";
			@import "_navigation";
			@import "_pagination";
			@import "_footer";
			@import "variables";
			@import "base";
			@import "content";
			@import "navigation";
			@import "pagination";
			@import "footer";

			@@ -14,7 +14,7 @@

			<link rel="canonical" href="{{ .Permalink }}">

			<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
			<link href="https://fonts.googleapis.com/css?family=Lato:400,700\|Merriweather:300,700\|Source+Code+Pro:400,700" rel="stylesheet">
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />