aboutsummaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/_text.scss12
-rw-r--r--sass/juice.scss132
2 files changed, 128 insertions, 16 deletions
diff --git a/sass/_text.scss b/sass/_text.scss
index 329017b..eb52d51 100644
--- a/sass/_text.scss
+++ b/sass/_text.scss
@@ -1,14 +1,16 @@
.heading-text {
font-family: "Fira Sans", sans-serif;
- font-size: 32px;
+ font-size: 2em;
font-weight: 600;
+ line-height: 1.2em;
padding: 10px 0 25px 0;
color: var(--secondary-text-color);
}
h1, .title-text {
font-family: "Fira Sans", sans-serif;
- font-size: 25px;
+ font-size: 1.8em;
+ line-height: 1.2em;
font-weight: 500;
color: var(--secondary-text-color);
border-left: var(--primary-color) 8px solid;
@@ -17,7 +19,7 @@ h1, .title-text {
h2, .title-text {
font-family: "Fira Sans", sans-serif;
- font-size: 25px;
+ font-size: 1.5em;
font-weight: 500;
color: var(--secondary-text-color);
border-left: #aaa 8px solid;
@@ -26,14 +28,14 @@ h2, .title-text {
h3, .subtitle-text {
font-family: "Fira Sans", sans-serif;
- font-size: 20px;
+ font-size: 1.3em;
font-weight: 500;
color: var(--secondary-text-color);
}
.text {
font-family: "Fira Sans", sans-serif;
- font-size: 18px;
+ font-size: 16px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.2px;
diff --git a/sass/juice.scss b/sass/juice.scss
index 04136a1..2e2d5e3 100644
--- a/sass/juice.scss
+++ b/sass/juice.scss
@@ -38,9 +38,20 @@ header {
justify-content: space-between;
}
+header ul {
+ margin: 0px;
+ padding: 0px;
+ list-style: none;
+}
+
+header ul li {
+ display: inline;
+
+}
+
.logo {
font-family: Georgia, DejaVu Serif, Norasi, serif;
- font-size: 32px;
+ font-size: 28px;
color: var(--primary-text-color);
font-weight: 500;
display: flex;
@@ -56,7 +67,6 @@ header {
.nav-item {
margin: 0 10px;
text-decoration: none;
- font-size: 18px;
font-weight: bold;
color: var(--primary-text-color);
@@ -83,10 +93,12 @@ header {
}
}
+
main {
display: flex;
- padding: 50px 100px;
flex-grow: 1;
+ padding: 50px 100px;
+ margin: 0;
.toc {
max-width: 260px;
@@ -123,7 +135,6 @@ main {
padding: 0 30px 5px;
color: #424242;
}
-
}
.toc-sticky {
@@ -156,20 +167,36 @@ footer {
}
}
+main details#navigation-toggle summary {
+ display: none;
+}
+
@media screen and (min-width: 1280px) {
+ .logo {
+ font-size: 32px;
+ }
.content {
max-width: 60%;
min-width: 800px;
overflow: hidden;
}
+ .text {
+ font-size: 18px;
+ }
}
@media screen and (max-width: 768px) {
header {
- padding: 10px 30px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ padding: 10px 20px;
+ display: block;
+ }
+
+ header nav {
+ display: none;
+ }
+
+ header ul li {
+ display: block;
}
.logo {
@@ -184,7 +211,7 @@ footer {
.nav-item {
margin: 0 5px;
- font-size: 14px;
+ font-size: 1em;
}
.hero {
@@ -192,15 +219,98 @@ footer {
}
main {
- padding: 30px;
+ display: block;
+ padding: 0px;
+ }
+
+
+ main .toc {
+ margin: 0px;
+ width: 100%;
+ max-width: none;
+ border: 0px;
+ }
+ main .toc-sticky {
+ border: 0px;
+ }
+
+ main .content {
+ margin: 15px;
}
.content {
padding: 0;
+ display: block;
}
- .explore-more, .toc {
+ .explore-more {
display: none;
}
+
+}
+
+
+/* *********** */
+
+
+.menu-button-container {
+ display: none;
}
+
+#menu-toggle {
+ display: none;
+}
+
+.menu-button,
+.menu-button::before,
+.menu-button::after {
+ display: block;
+ background-color: #fff;
+ position: absolute;
+ height: 4px;
+ width: 30px;
+ transition: transform 400ms ease;
+ border-radius: 2px;
+}
+
+.menu-button::before {
+ content: '';
+ transform: translate(0, -8px);
+}
+
+.menu-button::after {
+ content: '';
+ transform: translate(0, 8px);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::before {
+ margin-top: 0px;
+ transform: rotate(45deg);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button {
+ background: transparent;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::after {
+ margin-top: 0px;
+ transform: rotate(-45deg);
+}
+
+@media (max-width: 768px) {
+ .menu-button-container {
+ position: absolute;
+ display: block;
+ height: 32px;
+ width: 32px;
+ top: 40px;
+ right: 24px;
+ }
+ #menu-toggle ~ .toc {
+ display: none;
+ }
+ #menu-toggle:checked ~ .toc {
+ display: block;
+ }
+} \ No newline at end of file