askclass-home-theme 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,45 @@
1
+ {% assign ach = site.ach %}
2
+ {% assign desc = page.excerpt | default: site.description | strip_html | strip_newlines %}
3
+ {% assign assets = '/assets/' | prepend: site.url %}
4
+ {% assign families = ach.font_families | join: "&family=" %}
5
+ {%- assign og_image = ach.meta.og_image | prepend: '/assets/' %}
6
+
7
+ <meta charset="utf-8" />
8
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
9
+
10
+ <meta name="application-name" content="{{ site.title }}" />
11
+ <meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
12
+
13
+ <meta name="mobile-web-app-capable" content="yes" />
14
+ <meta name="apple-mobile-web-app-capable" content="yes" />
15
+
16
+ <meta name="theme-color" content="{{ ach.color.theme }}" />
17
+ <meta name="apple-mobile-web-app-status-bar-style" content="{{ ach.color.theme }}" />
18
+ <meta name="description" content="{{ desc }}" />
19
+ <meta name="keywords" content="{{ ach.meta.keywords | strip_newlines }}" />
20
+
21
+ <meta property="og:site_name" content="{{ site.title }}" />
22
+ <meta property="og:description" content="{{ desc }}" />
23
+ <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
24
+ <meta property="og:image" content="{{ page.image | default: og_image }}" />
25
+ {% if ach.twitter %}
26
+ <meta name="twitter:site" content="{{ ach.social.twitter }}" />
27
+ <meta name="twitter:card" content="summary_large_image">
28
+ {% endif % %}
29
+
30
+ <link rel="manifest" href="/assets/site.webmanifest" />
31
+ <link rel="preconnect" href="https://cdn.jsdelivr.net" />
32
+ <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
33
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
34
+ <link rel='preconnect' href="https://fonts.googleapis.com" crossorigin />
35
+ <link rel="preload" as="style"
36
+ href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap"
37
+ onload='this.onload=null;this.rel="stylesheet"' />
38
+ <link rel="shortcut icon" href="/assets/{{ ach.meta.shortcut.favicon }}" />
39
+ <link rel="icon" type="{{ ach.meta.shotcut.type }}" href="/assets/{{ ach.meta.shortcut.image }}" />
40
+ <link rel="icon" type="image/svg+xml" href="/assets/{{ ach.logo.alt_image }}" />
41
+
42
+ <link rel="apple-touch-icon" href="/assets/{{ ach.meta.apple_icon }}" />
43
+ {% for size in ach.logo.sizes %}
44
+ <link rel="apple-touch-icon" sizes="{{size}}x{{size}}" href="/assets/logo-square-{{size}}.png" />
45
+ {%- endfor %}
@@ -0,0 +1,10 @@
1
+ {%- if session_data.title -%}
2
+ {%- assign title = session_data.title | append: " &bull; " | append: site.title -%}
3
+ {%- elsif site.title -%}
4
+ <meta property="og:type" content="website" />
5
+ <meta property="og:image:width" content="150" />
6
+ <meta property="og:image:height" content="150" />
7
+ {%- endif -%}
8
+ <title>{{ title | default: site.title }}</title>
9
+ <meta property="og:title" content="{{ title | default: site.title }}" />
10
+ <meta name="author" content="{{ writer | default: site.title }}" />
@@ -0,0 +1,8 @@
1
+ <head>
2
+ {%- include head/meta.html -%}
3
+ {%- include head/common.html -%}
4
+ <link rel="stylesheet" href="{{ 'assets/css/default.css' | relative_url }}" />
5
+ {%- if page.collection == 'modules' -%}
6
+ <link rel="stylesheet" href="{{ 'assets/css/modules.css' | relative_url }}" />
7
+ {%- endif -%}
8
+ </head>
@@ -0,0 +1,3 @@
1
+ <div class='image'>
2
+ <img width='100%' src='{{ include.image.src }}' title='{{ include.image.text }}' alt='{{ include.image.text }}' />
3
+ </div>
@@ -0,0 +1,14 @@
1
+ <section class="center-align">
2
+ <article class="space-between max-width">
3
+ <a href="/">
4
+ <img src="/assets/{{ include.image | default: site.ach.logo.image }}"
5
+ width="{{ include.size | default: site.ach.logo.size }}"
6
+ title="{{ site.title }}" />
7
+ </a>
8
+ <div class='nav-buttons'>
9
+ {%- for button in site.data.nav %}
10
+ <a href="{{ button.url }}" class="a-button">{{ button.text }}</a>
11
+ {%- endfor %}
12
+ </div>
13
+ </article>
14
+ </section>
@@ -0,0 +1,4 @@
1
+ {%- for segment in site.data.main.segments %}
2
+ {%- assign info = site.data.segments[segment] %}
3
+ {%- include boxes/{{ info.type | default: 'fullpage' }}.html data=info %}
4
+ {%- endfor %}
@@ -0,0 +1,5 @@
1
+ <div class='video-player'>
2
+ <video controls>
3
+ <source src='{{ include.src }}' type='video/mp4' />
4
+ </video>
5
+ </div>
@@ -0,0 +1,19 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ {% include header.html %}
4
+ <body>
5
+ {% include logo.html %}
6
+ {% if page.url == '/' %}
7
+ {% include main.html %}
8
+ {% elsif page.url == '/404.html' %}
9
+ <h2 class="center-align">Page not found!</h2>
10
+ {% elsif page.url == '/offline.html' %}
11
+ <h2 class="center-align">You're Currently Offline</h2>
12
+ {% else %}
13
+ {{ content }}
14
+ {% endif %}
15
+ {% include footer.html %}
16
+ {% include foot/pwaupdate.html %}
17
+ </body>
18
+ </html>
19
+
@@ -0,0 +1,14 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ {% include header.html %}
4
+ <body>
5
+ {% include logo.html %}
6
+ <section class="center-align content">
7
+ <article class='max-width'>
8
+ {{ content }}
9
+ </article>
10
+ </section>
11
+
12
+ {%- include footer.html -%}
13
+ </body>
14
+ </html>
data/_sass/_base.scss ADDED
@@ -0,0 +1,208 @@
1
+ :root {
2
+ --font-special: #{$font-special};
3
+ --font-mono: #{$font-mono};
4
+ --font-main: #{$font-main};
5
+ --font-secondary: #{$font-secondary};
6
+ --font-tertiary: #{$font-tertiary};
7
+
8
+ --color-bg: #{$color-bg};
9
+ --color-fg: #{$color-fg};
10
+ --color-primary: #{$color-primary};
11
+ --color-secondary: #{$color-secondary};
12
+ --color-tertiary: #{$color-tertiary};
13
+ --color-link: #{$color-link};
14
+ --color-dark: #{$color-dark};
15
+ --color-theme: #{$color-theme};
16
+ --color-row-odd: #{$color-row-odd};
17
+ --color-row-even: #{$color-row-even};
18
+
19
+ --color-button-fg: #{$color-button-fg};
20
+ --color-button-bg: #{$color-button-bg};
21
+ --color-button2-fg: #{$color-button2-fg};
22
+ --color-button2-bg: #{$color-button2-bg};
23
+ --color-code-bg: #{$color-code-bg};
24
+
25
+ --content-width: #{$content-width};
26
+ }
27
+
28
+ body {
29
+ font-family: var(--font-main);
30
+ font-size: 17px;
31
+ line-height: 1.6;
32
+ background-color: var(--color-bg);
33
+ color: var(--color-fg);
34
+ margin: 0;
35
+ padding: 0;
36
+ &::-webkit-scrollbar {
37
+ width: 6px;
38
+ height: 6px;
39
+ }
40
+ &::-webkit-scrollbar-thumb {
41
+ background-color: rgba(0,0,0,0.2);
42
+ border-radius: 6px;
43
+ }
44
+ &::-webkit-scrollbar-corner {
45
+ background-color: transparent;
46
+ }
47
+ }
48
+
49
+ hr {
50
+ width: 300px;
51
+ margin-bottom: 20px;
52
+ margin-top: 40px;
53
+ border-color: var(--color-bg);
54
+ }
55
+
56
+ a {
57
+ color: var(--color-link);
58
+ text-decoration: none;
59
+ }
60
+
61
+ h1 { font-size: 3.5em }
62
+ h2 { font-size: 2em }
63
+ h3 { font-size: 1.7em }
64
+ h4 { font-size: 1.4em }
65
+ h5 { font-size: 1.2em }
66
+ h6 { font-size: 1em }
67
+
68
+ .special {
69
+ font-family: var(--font-special);
70
+ text-align: center;
71
+ color: var(--color-primary);
72
+ margin: 10px 0 5px 0;
73
+ }
74
+
75
+ code, pre {
76
+ font-family: var(--font-mono);
77
+ }
78
+
79
+ code {
80
+ white-space: pre-wrap;
81
+ color: var(--color-secondary);
82
+ &.rounded {
83
+ border-radius: 5px;
84
+ margin: 0 3px;
85
+ padding: 2px 5px;
86
+ }
87
+ }
88
+
89
+ pre {
90
+ background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
91
+ padding: 10px;
92
+ code {
93
+ color: inherit;
94
+ }
95
+ }
96
+
97
+ sub, sup {
98
+ font-size: small;
99
+ }
100
+ sup {
101
+ vertical-align: 6px;
102
+ }
103
+ sub {
104
+ vertical-align: 0px;
105
+ }
106
+
107
+ .md-18 { font-size: 18px; }
108
+ .md-24 { font-size: 24px; }
109
+ .md-36 { font-size: 36px; }
110
+ .md-48 { font-size: 48px; }
111
+ .md-disabled { color: rgba(0,0,0,0.6); }
112
+
113
+ @mixin margin-top() {
114
+ margin-top: 100px;
115
+ }
116
+
117
+ @mixin align-middle() {
118
+ display: flex;
119
+ align-items: center;
120
+ text-decoration: none;
121
+ text-align: center;
122
+ }
123
+ @mixin align-center() {
124
+ display: flex;
125
+ align-items: center;
126
+ text-decoration: none;
127
+ flex-direction: column;
128
+ }
129
+
130
+ .middle-align {
131
+ @include align-middle();
132
+ }
133
+
134
+ .center-align {
135
+ @include align-center();
136
+ }
137
+
138
+ .space-between {
139
+ display: flex;
140
+ align-items: center;
141
+ text-decoration: none;
142
+ flex-direction: row;
143
+ justify-content: space-between;
144
+ }
145
+
146
+ .spacer {
147
+ margin-top: 100px;
148
+ }
149
+
150
+ .max-width {
151
+ max-width: var(--content-width);
152
+ width: 100%;
153
+ }
154
+
155
+ footer {
156
+ @include margin-top();
157
+ @include align-center();
158
+ color: var(--color-dark);
159
+ font-size: 14px;
160
+ ul {
161
+ padding: 0;
162
+ display: flex;
163
+ li {
164
+ @include align-middle();
165
+ margin: 0 5px;
166
+ a {
167
+ color: var(--color-dark);
168
+ }
169
+ }
170
+ }
171
+ }
172
+
173
+ .a-button {
174
+ font-size: 1em;
175
+ line-height: 1em;
176
+ transition: all .2s ease-in-out;
177
+ border: 2px solid transparent;
178
+ padding: 15px 20px;
179
+ height: auto;
180
+ letter-spacing: .75px;
181
+ display: inline-flex;
182
+ justify-content: center;
183
+ align-items: center;
184
+ box-sizing: border-box;
185
+ border-radius: 5px;
186
+ color: var(--color-button-fg);
187
+ background-color: var(--color-button-bg);
188
+ text-align: center;
189
+ text-transform: uppercase;
190
+ font-weight: bold;
191
+ &:hover {
192
+ opacity: 0.8;
193
+ transform: translateY(-3px);
194
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
195
+ }
196
+ &.link {
197
+ color: var(--color-fg);
198
+ background-color: transparent;
199
+ }
200
+ &.secondary {
201
+ color: var(--color-button2-fg);
202
+ background-color: var(--color-button2-bg);
203
+ }
204
+ }
205
+
206
+ .nav-buttons {
207
+ margin: 0 1em;
208
+ }
@@ -0,0 +1,15 @@
1
+ ol > li {
2
+ ul > li {
3
+ list-style-type: disc;
4
+ }
5
+ ol > li {
6
+ list-style: lower-alpha;
7
+ }
8
+ }
9
+
10
+ ul > li > ul > li {
11
+ list-style-type: square;
12
+ ul > li {
13
+ list-style-type: circle;
14
+ }
15
+ }
@@ -0,0 +1,84 @@
1
+ $color-1: #005F73;
2
+ $color-2: #03989E;
3
+ $color-3: #CA6702;
4
+ $color-4: #EE9B00;
5
+ $color-5: #355691;
6
+ $color-6: #4073A0;
7
+ $color-7: #3C5A14;
8
+ $color-8: #598B2C;
9
+ $color-9: #9B2226;
10
+ $color-10: #B18FCF;
11
+
12
+ html {
13
+ --c1: #{$color-1};
14
+ --c2: #{$color-2};
15
+ --c3: #{$color-3};
16
+ --c4: #{$color-4};
17
+ --c5: #{$color-5};
18
+ --c6: #{$color-6};
19
+ --c7: #{$color-7};
20
+ --c8: #{$color-8};
21
+ --c9: #{$color-9};
22
+ --c10: #{$color-10};
23
+ }
24
+
25
+ @mixin paint($color) {
26
+ background-image: linear-gradient(225deg, $color 50%, transparent 50%);
27
+ border-top-color: $color;
28
+ .control, .header {
29
+ a {
30
+ color: $color;
31
+ }
32
+ .button {
33
+ background-color: $color;
34
+ }
35
+ }
36
+ .body {
37
+ h3, h3 a, .item small:not(.due) {
38
+ color: $color;
39
+ }
40
+ code, .due {
41
+ color: white;
42
+ background-color: $color;
43
+ }
44
+ .item:not(:first-child) {
45
+ border-color: $color;
46
+ }
47
+ }
48
+ &.current {
49
+ .control {
50
+ background-color: $color;
51
+ }
52
+ }
53
+ }
54
+
55
+ .c1 {
56
+ @include paint($color-1);
57
+ }
58
+ .c2 {
59
+ @include paint($color-2);
60
+ }
61
+ .c3 {
62
+ @include paint($color-3);
63
+ }
64
+ .c4 {
65
+ @include paint($color-4);
66
+ }
67
+ .c5 {
68
+ @include paint($color-5);
69
+ }
70
+ .c6 {
71
+ @include paint($color-6);
72
+ }
73
+ .c7 {
74
+ @include paint($color-7);
75
+ }
76
+ .c8 {
77
+ @include paint($color-8);
78
+ }
79
+ .c9 {
80
+ @include paint($color-9);
81
+ }
82
+ .c10 {
83
+ @include paint($color-10);
84
+ }
data/_sass/_media.scss ADDED
@@ -0,0 +1,18 @@
1
+ .video-player {
2
+ position: relative;
3
+ padding-bottom: 56.25%; /* 16:9 */
4
+ height: 0;
5
+ video, iframe {
6
+ border-radius: 1em;
7
+ position: absolute;
8
+ top: 0;
9
+ left: 0;
10
+ width: 100%;
11
+ height: 100%;
12
+ }
13
+ }
14
+
15
+ .image img {
16
+ width: 100%;
17
+ border-radius: 1em;
18
+ }
data/_sass/_post.scss ADDED
@@ -0,0 +1,109 @@
1
+ @mixin boxed() {
2
+ margin-top: 100px;
3
+ border-radius: 5px;
4
+ padding: 2px 5px;
5
+ background-color: var(--color-code-bg);
6
+ }
7
+
8
+ .content {
9
+ padding: 1em;
10
+ }
11
+
12
+ article {
13
+ width: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow-wrap: break-word;
17
+ word-break: break-word;
18
+ p {
19
+ font-family: var(--font-secondary);
20
+ }
21
+ h1, h2, h3, h4 {
22
+ margin-bottom: 0;
23
+ }
24
+ h1 {
25
+ & + time {
26
+ color: var(--color-dark);
27
+ font-size: 15px;
28
+ }
29
+ }
30
+ h1, h2, h3, h4 {
31
+ & + * {
32
+ margin-top: 0.5em;
33
+ }
34
+ & > code {
35
+ font-size: 0.8em;
36
+ }
37
+ }
38
+ code {
39
+ @include boxed();
40
+ }
41
+ pre {
42
+ margin: 0;
43
+ width: 100%;
44
+ overflow-x: auto;
45
+ code {
46
+ border: 0;
47
+ background-color: inherit;
48
+ border-radius: 0;
49
+ padding: 0;
50
+ margin: 0;
51
+ }
52
+ }
53
+ p:has(> sub) {
54
+ margin: 1em 0 0 0;
55
+ sub {
56
+ font-family: var(--font-special);
57
+ color: var(--color-tertiary);
58
+ font-size: 0.9rem;
59
+ }
60
+ & + h1, & + h2, & + h3, & + h4 {
61
+ margin-top: 0;
62
+ }
63
+ }
64
+ address {
65
+ font-style: normal;
66
+ font-family: var(--font-secondary);
67
+ margin-top: 1.5em;
68
+ font-size: 1.4em;
69
+ a {
70
+ color: var(--color-tertiary);
71
+ }
72
+ }
73
+ .text > p:first-child {
74
+ font-size: 25px;
75
+ line-height: 1.3;
76
+ }
77
+ .tags {
78
+ small {
79
+ font-family: var(--font-secondary);
80
+ color: var(--color-dark);
81
+ }
82
+ }
83
+ .source {
84
+ color: var(--color-dark);
85
+ font-size: 13px;
86
+ & > * {
87
+ margin-left: 10px;
88
+ }
89
+ }
90
+ }
91
+
92
+ blockquote {
93
+ border-left: 5px solid var(--color-dark);
94
+ padding-left: 10px;
95
+ margin: 0 10px 0 20px;
96
+ font-family: var(--font-special);
97
+ font-size: 19px;
98
+ p {
99
+ margin: 0;
100
+ }
101
+ & + blockquote {
102
+ margin-bottom: 2em;
103
+ }
104
+ }
105
+
106
+ @import
107
+ "bullets",
108
+ "table",
109
+ "colors";
@@ -0,0 +1,136 @@
1
+ .animated {
2
+ margin: 0;
3
+ line-height: 1.2;
4
+ animation-name: taglineEmerge;
5
+ animation-fill-mode: forwards;
6
+ animation-duration: 1400ms;
7
+ opacity: 0;
8
+ transform: translateY(50px);
9
+ }
10
+
11
+ @keyframes taglineEmerge {
12
+ 0% {
13
+ transform: translateY(50px);
14
+ opacity: 0;
15
+ }
16
+ 100% {
17
+ transform: translateY(0px);
18
+ opacity: 1;
19
+ }
20
+ }
21
+
22
+ article {
23
+ .max-width {
24
+ display: flex;
25
+ flex-direction: column;
26
+ align-items: center;
27
+ justify-content: space-between;
28
+ .media {
29
+ width: 100%;
30
+ }
31
+ .image-overlay {
32
+ margin-bottom: 20px;
33
+ img {
34
+ border-radius: 1em;
35
+ }
36
+ }
37
+ }
38
+
39
+ &.fullpage {
40
+ padding: 1em;
41
+ display: flex;
42
+ flex-direction: column;
43
+ align-items: center;
44
+ box-sizing: border-box;
45
+ padding: 4em 1em;
46
+
47
+ .media + .text {
48
+ margin-top: 20px;
49
+ }
50
+
51
+ h1.smaller {
52
+ text-transform: uppercase;
53
+ }
54
+ h4 {
55
+ margin: 0;
56
+ padding: 0;
57
+ text-transform: uppercase;
58
+ color: var(--color-dark);
59
+ }
60
+ p {
61
+ font-family: var(--font-secondary);
62
+ color: var(--color-dark);
63
+ }
64
+ }
65
+
66
+ &.rounded {
67
+ display: flex;
68
+ justify-content: center;
69
+ .max-width {
70
+ align-items: flex-start;
71
+ padding: 0 1em;
72
+ width: 100%;
73
+ }
74
+ .box {
75
+ width: 100%;
76
+ box-sizing: border-box;
77
+ border-radius: 2em;
78
+ padding: 2em;
79
+ margin: 1em 0;
80
+ h1 {
81
+ text-transform: uppercase;
82
+ margin: 0;
83
+ line-height: 1;
84
+ }
85
+ p {
86
+ font-family: var(--font-secondary);
87
+ }
88
+ }
89
+ }
90
+
91
+ @mixin xlarge() {
92
+ h1 { font-size: 80px; }
93
+ h1.smaller { font-size: 70px; }
94
+ h4, p { font-size: 35px; }
95
+ }
96
+
97
+ @mixin large() {
98
+ h1 { font-size: 60px; }
99
+ h1.smaller { font-size: 50px; }
100
+ h4, p { font-size: 30px; }
101
+ }
102
+
103
+ @mixin medium() {
104
+ h1 { font-size: 50px; }
105
+ h1.smaller { font-size: 40px; }
106
+ h4, p { font-size: 24px; }
107
+ }
108
+
109
+ @mixin small() {
110
+ h1 { font-size: 40px; }
111
+ h1.smaller { font-size: 30px; }
112
+ h4, p { font-size: 18px; }
113
+ }
114
+
115
+ @media screen and (min-width:1024px) {
116
+ @include xlarge();
117
+ }
118
+
119
+ @media screen and (min-width:767px) {
120
+ @include large();
121
+ .max-width.split-content {
122
+ flex-direction: row;
123
+ &.align-right {
124
+ flex-direction: row-reverse;
125
+ }
126
+ .box, .media, .text {
127
+ flex: 0 0 49%;
128
+ }
129
+ }
130
+ }
131
+ @media screen and (max-width:767px) { @include medium(); }
132
+ @media screen and (max-width:600px) { @include small(); }
133
+
134
+ &.rounded .max-width,
135
+ .split-content { @include medium(); }
136
+ }