From 9df825df06bf47bdbb53b67f15601c60f636b898 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sun, 06 Feb 2022 11:22:17 +0000
Subject: [PATCH] refactor: portfolio, alert, 404, TOC and smaller fixes
---
assets/scss/main.scss | 4
assets/scss/partials/components/_footer.scss | 50 +++--
assets/scss/modules/_variables.scss | 2
assets/css/style.css | 37 +-
assets/scss/partials/layout/_header.scss | 2
assets/scss/partials/components/_sidebar.scss | 122 ++++++-----
assets/scss/partials/components/_alert.scss | 23 ++
assets/scss/partials/components/_portfolio.scss | 127 ++++++++++++
assets/scss/partials/vendors/tableofcontents.scss | 23 ++
assets/scss/partials/components/_page404.scss | 4
assets/scss/partials/components/_content.scss | 6
assets/scss/partials/components/_post.scss | 190 ++++++++++---------
assets/scss/partials/components/_languageswitch.scss | 2
13 files changed, 406 insertions(+), 186 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index e84c11d..f962f40 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -749,12 +749,6 @@
font-size: 1.4rem;
}
-.back-button {
- padding-top: 30px;
- max-width: 100px;
- padding-left: 40px;
- float: left;
-}
/*
#fb_comments_container {
@@ -827,7 +821,7 @@
padding: 6px 12px;
}
-/* Portfolio */
+/*
.cta {
padding-bottom: 1em;
}
@@ -875,6 +869,7 @@
.box--right {
margin-top: -24px;
}
+*/
/* Menu */
.menu {
@@ -934,16 +929,16 @@
width: 100px;
float: right;
}
-
+/*
.page_404 {
text-align: center;
padding-top: 50px;
}
-/*
+
.navbar-burger {
display: none;
}
-*/
+
#TableOfContents {
display: block;
@@ -969,6 +964,7 @@
display: inherit;
}
+
.alert {
padding: 1rem;
border-radius: 1 px;
@@ -991,6 +987,7 @@
font-weight: 800;
margin-right: 0.75rem;
}
+*/
@media screen and (min-width: 961px), print {
/* header {
@@ -999,7 +996,7 @@
/* .nav__links li:not(:last-of-type) {
padding-right: 20px;
- } */
+ }
.sidebar {
height: 100vh;
@@ -1008,7 +1005,6 @@
position: fixed;
width: var(--sidebar-width);
}
- /*
.sidebar__content {
display: flex;
flex-direction: column;
@@ -1033,7 +1029,7 @@
.wrapper {
display: flex;
}
-*/
+
.footer--base {
display: none;
@@ -1093,6 +1089,7 @@
.box--right {
margin-left: auto;
}
+ */
}
@media screen and (max-width: 960px) {
@@ -1148,13 +1145,13 @@
max-width: 100%;
margin: 0;
}
- */
+
.footer--sidebar {
display: none;
}
- /* nav {
+ nav {
display: none;
} */
@@ -1233,7 +1230,7 @@
.list-with-title .listing .listing-post a {
width: 80%;
}
-
+/*
.box--right,
.box--left {
border-bottom: 1px solid var(--border-color);
@@ -1251,6 +1248,7 @@
padding-bottom: 0px;
padding-top: 48px;
}
+ */
/*
.triangle {
display: none;
@@ -1287,7 +1285,7 @@
header {
display: none;
}
-} */
+}
@media (min-width: 1921px) {
.sidebar {
@@ -1298,8 +1296,9 @@
.content {
padding-right: 20%;
}
- /* header {
+ header {
position: fixed;
width: var(--content-width);
- } */
+ }
}
+*/
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index b6693f7..0dbc1f3 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -19,5 +19,9 @@
@import './partials/components/comment';
@import './partials/components/languageswitch';
@import './partials/components/post';
+@import './partials/components/alert';
+@import './partials/components/portfolio';
+@import './partials/components/page404';
@import './partials/vendors/mediumzoom';
@import './partials/vendors/contactform';
+@import './partials/vendors/tableofcontents';
diff --git a/assets/scss/modules/_variables.scss b/assets/scss/modules/_variables.scss
index 56a74e3..6284949 100644
--- a/assets/scss/modules/_variables.scss
+++ b/assets/scss/modules/_variables.scss
@@ -5,6 +5,8 @@
$primary-lighter: #eeeeee;
$info: #0366d7;
$shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+$border: 1px solid rgba(0, 0, 0, 0.15);
+$alert: #ffc107;
/* Former variables*/
$secondary-bg-color: #eeeeee;
diff --git a/assets/scss/partials/components/_alert.scss b/assets/scss/partials/components/_alert.scss
new file mode 100644
index 0000000..66fd5c0
--- /dev/null
+++ b/assets/scss/partials/components/_alert.scss
@@ -0,0 +1,23 @@
+.alert {
+ padding: 1rem;
+ border-radius: 1 px;
+ border-style: solid;
+ border-color:$alert;
+ border-radius: 0.25rem;
+ border-width: 2px;
+
+ #indicator {
+ background-color: $alert;
+ display: inline-block;
+ border-radius: 9999px;
+ padding: 0.5rem;
+ height: 1.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ text-align: center;
+ color: $accent;
+ font-weight: 800;
+ margin-right: 0.75rem;
+ }
+ }
+
diff --git a/assets/scss/partials/components/_content.scss b/assets/scss/partials/components/_content.scss
index 16b8a0f..e4010f2 100644
--- a/assets/scss/partials/components/_content.scss
+++ b/assets/scss/partials/components/_content.scss
@@ -2,3 +2,9 @@
height: auto;
margin-top: 80px;
}
+
+@media (min-width: 1921px) {
+ .content {
+ padding-right: 20%;
+ }
+}
diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
index 79cb670..ea197b9 100644
--- a/assets/scss/partials/components/_footer.scss
+++ b/assets/scss/partials/components/_footer.scss
@@ -1,23 +1,33 @@
.footer {
- clear: both;
- text-align: center;
- font-size: 1rem;
- margin: 0 auto;
- bottom: 0;
- width: 100%;
- padding-bottom: 20px;
- flex: 0;
- position: relative;
+ clear: both;
+ text-align: center;
+ font-size: 1rem;
+ margin: 0 auto;
+ bottom: 0;
+ width: 100%;
+ padding-bottom: 20px;
+ flex: 0;
+ position: relative;
- &__list {
- list-style: none;
- padding: 0;
- display: flex;
- justify-content: center;
- }
-
- &__item:not(:first-of-type)::before {
- content: '\00B7';
- padding: 4px;
+ &__list {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ }
+
+ &__item:not(:first-of-type)::before {
+ content: '\00B7';
+ padding: 4px;
+ }
+}
+@media screen and (min-width: 961px), print {
+ .footer {
+ &--base {
+ display: none;
}
- }
\ No newline at end of file
+ &--sidebar {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/scss/partials/components/_languageswitch.scss b/assets/scss/partials/components/_languageswitch.scss
index 90975d8..414e62a 100644
--- a/assets/scss/partials/components/_languageswitch.scss
+++ b/assets/scss/partials/components/_languageswitch.scss
@@ -61,7 +61,7 @@
width: 15px;
transform: rotate(45deg) translateY(0px) translatex(10px);
height: 15px;
- background: $primary-light;
+ background: $accent;
border-radius: 2px 0px 0px 0px;
border-color: $primary;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
diff --git a/assets/scss/partials/components/_page404.scss b/assets/scss/partials/components/_page404.scss
new file mode 100644
index 0000000..d608e96
--- /dev/null
+++ b/assets/scss/partials/components/_page404.scss
@@ -0,0 +1,4 @@
+.page_404 {
+ text-align: center;
+ padding-top: 50px;
+}
\ No newline at end of file
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
new file mode 100644
index 0000000..f16e4b5
--- /dev/null
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -0,0 +1,127 @@
+
+
+ .box-wrapper {
+ padding: 48px;
+ position: relative;
+ z-index: 0;
+ }
+
+ .box-image {
+ display: block;
+ background-color: #fff;
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
+ &--right,
+ &--left {
+ margin-right: auto;
+ margin-left: auto;
+ width: calc(100% - 64px);
+ background-color: $accent;
+ max-width: 400px;
+ z-index: -1;
+ }
+ img {
+ min-width: 100%;
+ box-shadow: #000;
+ overflow: hidden;
+ transition: box-shadow 0.3s ease;
+ object-fit: cover;
+ border-bottom: 0px;
+ display: block;
+ }
+ }
+
+ .box {
+ background-color: $primary-lighter;
+ padding: 32px;
+ &--left, &--right {
+ margin-top: -24px;
+ }
+ }
+
+ .cta {
+ padding-bottom: 1em;
+ }
+
+@media screen and (min-width: 961px), print {
+ .box {
+ padding: 48px;
+ box-shadow: $shadow;
+ background-color: $accent;
+ border-radius: 0.5em;
+
+ &--left,
+ &--right {
+ width: 60%;
+ margin-top: -48px;
+ z-index: 3;
+ background: $primary-lighter;
+ }
+
+ &--right {
+ margin-left: auto;
+ }
+ }
+
+ .box-wrapper::before {
+ border: $border;
+ content: '';
+ z-index: -1;
+ position: absolute;
+ top: 10%;
+ left: 10%;
+ bottom: 10%;
+ right: 10%;
+ background: transparent;
+ border-radius: 0.5em;
+ }
+
+ .box-image{
+ &--right, &--left {
+ width: 60%;
+ object-fit: contain;
+ max-width: none;
+ border-top-right-radius: 0.5em;
+ border-top-left-radius: 0.5em;
+ }
+
+ &--right {
+ margin-right: 0;
+ margin-left: auto;
+ border-bottom-right-radius: 0.5em;
+ }
+
+ &--left {
+ margin-right: auto;
+ margin-left: 0;
+ border-bottom-left-radius: 0.5em;
+ }
+
+ }
+}
+
+@media screen and (max-width: 960px) {
+
+.box {
+ &--right, &--left {
+ border-bottom:$border;
+ }
+}
+
+
+
+ .box-image{
+ &--left, &--right {
+ padding: 32px 32px 0px 32px;
+ max-width: inherit;
+ }
+ }
+
+ .box-wrapper {
+ padding-left: 0px;
+ padding-right: 0px;
+ padding-bottom: 0px;
+ padding-top: 48px;
+ }
+}
\ No newline at end of file
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index 2b6f03d..a1af809 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/assets/scss/partials/components/_post.scss
@@ -27,7 +27,7 @@
font-size: 2.2rem;
margin: 0;
}
- color: var(--heading-color);
+ color: $primary;
&:hover {
text-decoration: underline;
}
@@ -39,11 +39,40 @@
font-weight: 400;
font-size: 1.4rem;
}
+ img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 65%;
+ max-width: 100%;
+ }
+ figure {
+ max-width: 100%;
+ height: auto;
+ margin: 0;
+ text-align: center;
+
+ &.right {
+ float: right;
+ margin-left: 1.5em;
+ max-width: 50%;
+ }
+
+ &.left {
+ float: left;
+ margin-right: 1.5em;
+ max-width: 50%;
+ }
+
+ &.big {
+ max-width: 100vw;
+ }
+ }
}
.post-footer {
padding: 0 0 10px 0;
- border-bottom: 1px solid var(--border-color);
+ border-bottom: $border;
.meta {
max-width: 100%;
display: flex;
@@ -52,112 +81,93 @@
float: left;
font-size: 1.2rem;
margin-bottom: 1em;
- color: var(--body-color);
+ color: $primary;
.date {
margin-right: 10px;
margin-left: 5px;
}
}
+ a {
+ text-decoration: none;
+ color: $primary;
+ &:hover {
+ color: #2660ab;
+ }
+ }
+ i {
+ margin-right: 6px;
+ }
}
.info {
.separator a {
margin-right: 0.2em;
}
}
+ .tags {
+ padding-bottom: 15px;
+ font-size: 1.3rem;
+
+ ul {
+ list-style-type: none;
+ display: inline;
+ margin: 0;
+ padding: 0;
+ }
+
+ ul li {
+ list-style-type: none;
+ margin: 0;
+ padding-right: 5px;
+ display: inline;
+ }
+
+ a {
+ text-decoration: none;
+ color: $primary;
+ font-weight: 400;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
}
- figure {
- max-width: 100%;
- height: auto;
- margin: 0;
- text-align: center;
- &.right {
- float: right;
- margin-left: 1.5em;
- max-width: 50%;
- }
+ .post-thumbnail {
+ width: 100%;
+ padding-bottom: 1em;
+ box-shadow: #000;
+ border-radius: 0.5em;
+ overflow: hidden;
+ transition: box-shadow 0.3s ease;
- &.left {
- float: left;
- margin-right: 1.5em;
- max-width: 50%;
- }
-
- &.big {
- max-width: 100vw;
+ img {
+ width: 100%;
+ height: $thumbnail-height;
+ object-fit: cover;
+ border: $border;
+ border-bottom: 0px;
}
}
}
-
-.post .post-footer .meta a {
- text-decoration: none;
- color: var(--body-color);
-}
-
-.post .post-footer .meta a:hover {
- color: #2660ab;
-}
-
-.post .post-footer .meta i {
- margin-right: 6px;
-}
-
-.post .post-footer .tags {
- padding-bottom: 15px;
- font-size: 1.3rem;
-}
-
-.post .post-footer .tags ul {
- list-style-type: none;
- display: inline;
- margin: 0;
- padding: 0;
-}
-
-.post .post-footer .tags ul li {
- list-style-type: none;
- margin: 0;
- padding-right: 5px;
- display: inline;
-}
-
-.post .post-footer .tags a {
- text-decoration: none;
- color: var(--post-color);
- font-weight: 400;
-}
-
-.post .post-footer .tags a:hover {
- text-decoration: none;
-}
-
-.post .post-thumbnail {
- width: 100%;
- padding-bottom: 1em;
- box-shadow: #000;
- border-radius: 0.5em;
- overflow: hidden;
- transition: box-shadow 0.3s ease;
-}
-
-.post .post-thumbnail img {
- width: 100%;
- height: var(--thumbnail-height);
- object-fit: cover;
- border: 1px solid var(--border-color);
- border-bottom: 0px;
-}
-
@media screen and (max-width: 960px) {
- .post figure.right {
- float: unset;
- max-width: 100%;
- margin: 0;
- }
+ .post {
+ figure {
+ max-width: 100%;
+ height: auto;
+ margin: 0;
+ text-align: center;
- .post figure.left {
- float: unset;
- max-width: 100%;
- margin: 0;
+ &.right {
+ float: unset;
+ max-width: 100%;
+ margin: 0;
+ }
+
+ &.left {
+ float: unset;
+ max-width: 100%;
+ margin: 0;
+ }
+ }
}
}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index cf3c317..e3e3b57 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -1,70 +1,82 @@
.sidebar {
- -webkit-background-size: cover;
- background-size: cover;
- background-color: var(--bg-color);
- height: 100%;
- left: 0;
- z-index: 4;
- border-right: 1px solid var(--border-color);
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-color: var(--bg-color);
+ height: 100%;
+ left: 0;
+ z-index: 4;
+ border-right: 1px solid var(--border-color);
- &__list {
- list-style: none;
- padding: 0;
- font-size: 1.4rem;
- text-align: center;
-
- &-item {
- display: inline;
- padding: 0 4px;
- line-height: 0;
+ &__list {
+ list-style: none;
+ padding: 0;
+ font-size: 1.4rem;
+ text-align: center;
- i {
- margin-right: 3px;
- }
-
- li {
- display: inline;
- padding: 0 4px;
- line-height: 0;
- }
- }
+ &-item {
+ display: inline;
+ padding: 0 4px;
+ line-height: 0;
+
+ i {
+ margin-right: 3px;
}
- &__title {
- top: 40%;
- text-align: center;
+ li {
+ display: inline;
+ padding: 0 4px;
+ line-height: 0;
+ }
+ }
+ }
- &-description {
- font-size: 1.4rem;
- margin: 0 1em;
- }
+ &__title {
+ top: 40%;
+ text-align: center;
- img {
- width: 127px;
- height: 127px;
- border-radius: 50%;
- }
-
- h3 {
- text-transform: uppercase;
- font-weight: bold;
- letter-spacing: 2px;
- line-height: 1;
- margin: 1em;
- }
+ &-description {
+ font-size: 1.4rem;
+ margin: 0 1em;
}
- @media screen and (min-width: 961px), print {
- &__content {
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-grow: 1;
- }
+ img {
+ width: 127px;
+ height: 127px;
+ border-radius: 50%;
+ }
+ h3 {
+ text-transform: uppercase;
+ font-weight: bold;
+ letter-spacing: 2px;
+ line-height: 1;
+ margin: 1em;
}
}
+}
-
\ No newline at end of file
+@media screen and (min-width: 961px), print {
+ .sidebar {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ width: $sidebar-width;
+ &__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ }
+ }
+}
+
+@media (min-width: 1921px) {
+ .sidebar {
+ padding-left: 17%;
+ padding-right: 3%;
+ width: calc(var(--sidebar-width) - 20%);
+ }
+}
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
index 806828f..40cf667 100644
--- a/assets/scss/partials/layout/_header.scss
+++ b/assets/scss/partials/layout/_header.scss
@@ -8,7 +8,7 @@
@media screen and (min-width: 961px), print {
.header {
- border-bottom: 1px solid $primary-light;
+ border-bottom: $border;
}
}
@media screen and (max-width: 960px) {
diff --git a/assets/scss/partials/vendors/tableofcontents.scss b/assets/scss/partials/vendors/tableofcontents.scss
new file mode 100644
index 0000000..4d9592a
--- /dev/null
+++ b/assets/scss/partials/vendors/tableofcontents.scss
@@ -0,0 +1,23 @@
+#TableOfContents {
+ display: block;
+ background: transparent;
+ }
+
+#TableOfContents ul {
+list-style: none;
+line-height: 1.9em;
+margin: 0;
+}
+
+#TableOfContents > ul {
+padding-left: 0;
+}
+
+#TableOfContents li a {
+display: inherit;
+color: var(--link-color);
+}
+
+#TableOfContents li a:hover {
+display: inherit;
+}
\ No newline at end of file
--
Gitblit v1.10.0