jekyll-theme-one 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 033a01d1841f2b7101cea731923963648c158634
4
- data.tar.gz: c822a9093094437f979c61e8d0b3c551b599a4d2
3
+ metadata.gz: 3f39d39b16705c2474b084197a2dd6c94dadd1cf
4
+ data.tar.gz: 501ae9fa325dc124161a72ea1faa2cc19c7d1cd7
5
5
  SHA512:
6
- metadata.gz: d9e79a4c912e1ba60e4869c0c87ef024bcec22b9ee29fe575aa3b7e709fa4bd7e5439e041bb6fdf562103a34dfa4d19c064beb4b267f0eba2b068d23dc1da3c5
7
- data.tar.gz: 249f92da8031843d2826e45b08f05d18806b023af3ae83175d3f042e82e4546510b5ef85dd159aee7a5a1facdb791b23f2471a8e24be4a2a2654c119e281d363
6
+ metadata.gz: 083a41e27d55eba4eb4b059dc41b67fd504185c7fbbe9f403fc7431354bd4fd3b63fb8abd0cd21b3fc1e9b680a9e9076101b0c099a3eac4f690ca85a7d8d97b7
7
+ data.tar.gz: d428545a0414807e95d0189302edc60f33cbc2c0929379e1751bbdf636da64c0dd593ba7cd146543b941d2f3d28656b50f9566e6221b681faf403b9156d896b0
@@ -1,3 +1,5 @@
1
- <footer>
2
- <p><small>Footer</small></p>
1
+ <footer class="bottom-bar">
2
+ <div class="container">
3
+ <p><small>site footer</small></p>
4
+ </div>
3
5
  </footer>
@@ -3,6 +3,5 @@
3
3
  <meta charset="UTF-8">
4
4
  <meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
- <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet">
7
6
  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
8
7
  </head>
@@ -1,3 +1,4 @@
1
- <header>
2
- <h1>One</h1>
1
+ <header class="top-bar">
2
+ <h1><a href="#">One Logo</a></h1>
3
+ <nav><a href="#">Menu</a></nav>
3
4
  </header>
@@ -3,7 +3,55 @@
3
3
  {% include head.html %}
4
4
  <body>
5
5
  {% include header.html %}
6
- {{ content }}
6
+ <div class="hero content is-full is-center is-dark">
7
+ <div class="container">
8
+ <h2>Web Site</h2>
9
+ </div>
10
+ </div>
11
+ <div class="content is-light">
12
+ <div class="content-title">
13
+ <h2>Typography</h2>
14
+ </div>
15
+ <div class="container">
16
+ <h1>Headline</h1>
17
+ <h2>Header Two</h2>
18
+ <h3>Header Three</h3>
19
+ <p class="measure">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium itaque molestiae, eius ut debitis autem reiciendis dolores. Cumque tenetur labore ipsam voluptatibus nesciunt inventore, eveniet doloribus eligendi laudantium excepturi.</p>
20
+ <p> <a href="#">link</a></p>
21
+ <ul>
22
+ <li>List item</li>
23
+ <li>List item</li>
24
+ <li>List item</li>
25
+ </ul>
26
+ </div>
27
+ </div>
28
+ <div class="grid">
29
+ <div class="grid-cell"></div>
30
+ <div class="grid-cell"></div>
31
+ <div class="grid-cell"></div>
32
+ </div>
33
+ <div class="content">
34
+ <div class="container">
35
+ <div class="grid">
36
+ <div class="grid-cell"></div>
37
+ <div class="grid-cell"></div>
38
+ <div class="grid-cell"></div>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <div class="content is-dark">
43
+ <div class="content-title">
44
+ <h2>Section Title</h2>
45
+ </div>
46
+ <div class="card-grid">
47
+ <section>
48
+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, consequuntur aut autem numquam possimus voluptatem quibusdam temporibus pariatur obcaecati accusamus quae culpa illum ipsum minus laudantium provident molestias, dicta veniam!</p>
49
+ </section>
50
+ <section>
51
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quis officia sit praesentium voluptates velit minima, odio minus ab deserunt quibusdam aspernatur aliquam. Nam vel temporibus et eveniet quasi repellendus.</p>
52
+ </section>
53
+ </div>
54
+ </div>
7
55
  {% include footer.html %}
8
56
  </body>
9
57
  </html>
@@ -0,0 +1,7 @@
1
+ // Color Map
2
+
3
+ @function color($color, $tone: "base") {
4
+ @if map-has-key($colorMap, $color) {
5
+ @return map-get(map-get($colorMap, $color), $tone);
6
+ }
7
+ }
@@ -1,20 +1,31 @@
1
+ //
2
+ // O N E
3
+ // v0.0.1
4
+ //
5
+
6
+ // Functions
7
+ @import
8
+ "functions/color-map"
9
+ ;
10
+
11
+ // Variables
1
12
  @import
2
- "normalize",
3
- "rouge-github"
13
+ "variables/colors"
4
14
  ;
5
15
 
6
- * {
7
- box-sizing: border-box
8
- }
16
+ // Mixins
17
+ @import
18
+ "mixins/links"
19
+ ;
9
20
 
10
- body,
11
- html {
12
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
13
- -webkit-font-smoothing: antialiased;
14
- font-size: 14px;
15
- background: #fff;
16
- color: rgb(0,0,0);
17
- line-height: 1;
18
- margin: 0;
19
- padding: 0
20
- }
21
+ // Modules
22
+ @import
23
+ "modules/normalize",
24
+ "modules/global",
25
+ "modules/topbar",
26
+ "modules/hero",
27
+ "modules/grid",
28
+ "modules/content",
29
+ "modules/bottombar",
30
+ "modules/highlight"
31
+ ;
@@ -0,0 +1,10 @@
1
+ // Links
2
+
3
+ @mixin unstyled-link() {
4
+ color: inherit;
5
+ text-decoration: none;
6
+
7
+ &:visited {
8
+ color: inherit;
9
+ }
10
+ }
@@ -0,0 +1,14 @@
1
+ //
2
+ // BOTTOM-BAR
3
+ //
4
+
5
+ .bottom-bar {
6
+ display: flex;
7
+ width: 100%;
8
+ height: 84px;
9
+ padding: 0 2rem;
10
+ color: white;
11
+ background-color: lighten(color(secondary), 7);
12
+
13
+ align-items: center;
14
+ }
@@ -0,0 +1,94 @@
1
+ //
2
+ // CONTENT
3
+ //
4
+
5
+ .content {
6
+ padding: 100px 25px;
7
+ &.is-full {
8
+ max-width: 100%;
9
+ min-height: 100vh;
10
+ }
11
+ &.is-center {
12
+ display: flex;
13
+
14
+ justify-content: center;
15
+ align-items: center;
16
+ }
17
+ &.is-dark {
18
+ color: white;
19
+ background-color: color(secondary);
20
+ }
21
+ &.is-light {
22
+ color: color(secondary);
23
+ background-color: var(--bg);
24
+ }
25
+
26
+ // Content section title
27
+ .content-title {
28
+ margin-bottom: 40px;
29
+ text-align: center;
30
+ @media (min-width: 880px) {
31
+ margin-bottom: 65px;
32
+ }
33
+ h2 {
34
+ margin-top: 0;
35
+ font-size: 49px;
36
+ font-weight: 700;
37
+ line-height: 59px;
38
+ letter-spacing: -.016em;
39
+ }
40
+ }
41
+
42
+ // Content typography
43
+ p {
44
+ line-height: 1.5;
45
+ }
46
+
47
+ h1, h2, h3 {
48
+ margin-top: 24px;
49
+ margin-bottom: 16px;
50
+ line-height: 1.25;
51
+ }
52
+
53
+ h1 {
54
+ font-size: 3rem;
55
+ font-weight: 700;
56
+ letter-spacing: -.016em;
57
+ }
58
+
59
+ h2 {
60
+ font-size: 2rem;
61
+ font-weight: 600;
62
+ }
63
+
64
+ h3 {
65
+ font-size: 1.5rem;
66
+ font-weight: 600;
67
+ }
68
+
69
+ a {
70
+ color: color(primary);
71
+ }
72
+
73
+ ul {
74
+ padding-left: 0;
75
+ line-height: 1.5;
76
+ list-style-type: none;
77
+ li {
78
+ &:before {
79
+ margin-right: .3rem;
80
+ content: '-';
81
+ }
82
+ }
83
+ }
84
+
85
+ p, blockquote, ul, ol, dl, table, pre {
86
+ margin-top: 0;
87
+ margin-bottom: 16px;
88
+ }
89
+
90
+ // Content utilities
91
+ .measure {
92
+ max-width: 34em;
93
+ }
94
+ }
@@ -0,0 +1,72 @@
1
+ //
2
+ // GLOBAL
3
+ //
4
+
5
+ :root {
6
+ --bg: #fff;
7
+ --width: 1160px;
8
+ --width-md: 1040px;
9
+ --font: -apple-system,
10
+ BlinkMacSystemFont,
11
+ "Segoe UI",
12
+ Roboto,
13
+ Helvetica,
14
+ Arial,
15
+ sans-serif,
16
+ "Apple Color Emoji",
17
+ "Segoe UI Emoji",
18
+ "Segoe UI Symbol";
19
+ }
20
+
21
+ //
22
+ // GLOBAL DECLARATIONS
23
+ //
24
+
25
+ :root {
26
+ height: 100%;
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ html {
35
+ line-height: 1.15;
36
+ -webkit-text-size-adjust: 100%;
37
+ -ms-text-size-adjust: 100%;
38
+
39
+ -webkit-font-smoothing: antialiased;
40
+ }
41
+
42
+ body {
43
+ min-height: 100%;
44
+ margin: 0;
45
+ overflow: hidden;
46
+ font-family: var(--font);
47
+ font-size: 16px;
48
+ font-style: normal;
49
+ font-weight: 400;
50
+ color: color(secondary);
51
+ background-color: var(--bg);
52
+ }
53
+
54
+ .container {
55
+ max-width: var(--width);
56
+ margin: 0 auto;
57
+ & > *:first-child {
58
+ margin-top: 0;
59
+ }
60
+ & > *:last-child {
61
+ margin-bottom: 0;
62
+ }
63
+ }
64
+
65
+ a {
66
+ transition: opacity .15s ease-in;
67
+
68
+ @include unstyled-link;
69
+ &:hover {
70
+ opacity: .5;
71
+ }
72
+ }
@@ -0,0 +1,35 @@
1
+ //
2
+ // GRID
3
+ //
4
+
5
+ .grid {
6
+ display: grid;
7
+
8
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
9
+ grid: 1fr / auto-flow 1fr;
10
+ @media screen and (max-width: 768px) {
11
+ display: block;
12
+ }
13
+ .grid-cell {
14
+ height: 50vh;
15
+ background-color: color(secondary, dark);
16
+ &:nth-child(2n) {
17
+ background-color: color(secondary, light);
18
+ }
19
+ }
20
+ }
21
+
22
+ .card-grid {
23
+ display: grid;
24
+ width: 100%;
25
+ max-width: var(--width-md);
26
+ padding: 0 20px;
27
+ margin: 0 auto;
28
+
29
+ grid: auto/1fr;
30
+ grid-gap: 20px 0;
31
+ @media (min-width: 880px) {
32
+ grid: auto/auto-flow 1fr;
33
+ grid-gap: 0 12px;
34
+ }
35
+ }
@@ -0,0 +1,7 @@
1
+ //
2
+ // HERO
3
+ //
4
+
5
+ .hero {
6
+ text-align: center;
7
+ }
@@ -1,3 +1,7 @@
1
+ //
2
+ // HIGHLIGHT
3
+ //
4
+
1
5
  .highlight table td { padding: 5px; }
2
6
  .highlight table pre { margin: 0; }
3
7
  .highlight .cm {
@@ -0,0 +1,29 @@
1
+ //
2
+ // TOPBAR
3
+ //
4
+
5
+ .top-bar {
6
+ display: flex;
7
+ width: 100%;
8
+ height: 84px;
9
+ padding: 0 2rem;
10
+ background-color: color(secondary, dark);
11
+
12
+ align-items: center;
13
+ & > *:first-child {
14
+ margin-top: 0;
15
+ margin-bottom: 0;
16
+ }
17
+ h1 {
18
+ flex: 1;
19
+ }
20
+ nav {
21
+ display: flex;
22
+
23
+ flex: 1;
24
+ justify-content: flex-end;
25
+ }
26
+ a {
27
+ color: white;
28
+ }
29
+ }
@@ -0,0 +1,14 @@
1
+ // Colors
2
+
3
+ $colorMap: (
4
+ primary: (
5
+ base: #2bde73,
6
+ dark: darken(#2bde73, 5),
7
+ light: lighten(#2bde73, 5)
8
+ ),
9
+ secondary: (
10
+ base: #252629,
11
+ dark: darken(#252629, 5),
12
+ light: lighten(#252629, 5)
13
+ )
14
+ );
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-one
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jason Melgoza
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-22 00:00:00.000000000 Z
11
+ date: 2017-09-13 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -67,9 +67,18 @@ files:
67
67
  - _layouts/default.html
68
68
  - _layouts/page.html
69
69
  - _layouts/post.html
70
+ - _sass/functions/_color-map.scss
70
71
  - _sass/jekyll-theme-one.scss
71
- - _sass/normalize.scss
72
- - _sass/rouge-github.scss
72
+ - _sass/mixins/_links.scss
73
+ - _sass/modules/_bottombar.scss
74
+ - _sass/modules/_content.scss
75
+ - _sass/modules/_global.scss
76
+ - _sass/modules/_grid.scss
77
+ - _sass/modules/_hero.scss
78
+ - _sass/modules/_highlight.scss
79
+ - _sass/modules/_normalize.scss
80
+ - _sass/modules/_topbar.scss
81
+ - _sass/variables/_colors.scss
73
82
  - assets/css/style.scss
74
83
  homepage: https://github.com/jasonmelgoza/one
75
84
  licenses: