From 94b76c49361ccc2864d37a96d5bb8fa6047b457b Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 14 Jan 2022 17:23:11 +0000
Subject: [PATCH] refactor: add partial scss refactorings
---
assets/scss/partials/components/_sidebar.scss | 70 +++++++++++
assets/scss/partials/vendors/contactform.scss | 70 +++++++++++
assets/scss/partials/vendors/mediumzoom.scss | 35 +++++
layouts/_default/baseof.html | 2
layouts/partials/sidebar.html | 10 -
assets/scss/main.scss | 5
assets/scss/partials/components/_aside.scss | 3
assets/scss/partials/components/_footer.scss | 23 +++
assets/css/style.css | 125 +-------------------
layouts/partials/footer.html | 3
10 files changed, 220 insertions(+), 126 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 06bf3e1..8f38fa9 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -274,10 +274,11 @@
display: initial;
padding-right: 40px;
}
-*/
+
aside {
width: var(--sidebar-width);
}
+*/
/*
Language Switch
@@ -357,6 +358,7 @@
display: block;
}
+/*
.sidebar {
-webkit-background-size: cover;
background-size: cover;
@@ -427,7 +429,7 @@
.sidebar .social-links a:hover {
color: #2660ab;
}
-
+*/
.post {
background-color: var(--bg-color);
margin: 30px;
@@ -681,7 +683,7 @@
margin: 30px;
border-bottom: 1px solid var(--border-color);
}
-
+/*
.footer {
clear: both;
text-align: center;
@@ -714,6 +716,7 @@
padding: 4px;
}
+*/
/*for archive*/
.archive {
width: 100%;
@@ -1113,14 +1116,14 @@
position: fixed;
width: var(--sidebar-width);
}
-
+/*
.sidebar__content {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
-
+*/
.navbar {
display: flex;
flex-direction: column;
@@ -1386,49 +1389,6 @@
}
}
-/* Medium zoom */
-.medium-zoom-overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- opacity: 0;
- transition: opacity 300ms;
- will-change: opacity;
- background: var(--bg-color);
-}
-
-.medium-zoom--opened .medium-zoom-overlay {
- cursor: pointer;
- cursor: zoom-out;
- opacity: 1;
-}
-
-.medium-zoom-image {
- cursor: pointer;
- cursor: zoom-in;
- /*
- The `transition` is marked as "!important" for the animation to happen
- even though it's overriden by another inline `transition` style attribute.
- This is problematic with frameworks that generate inline styles on their
- images (e.g. Gatsby).
- See https://github.com/francoischalifour/medium-zoom/issues/110
- */
- transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
- z-index: 100;
-}
-
-.medium-zoom-image--hidden {
- visibility: hidden;
-}
-
-.medium-zoom-image--opened {
- position: relative;
- cursor: pointer;
- cursor: zoom-out;
- will-change: transform;
-}
/*
@media print {
header {
@@ -1451,73 +1411,4 @@
} */
}
-/* (CONTACT) FORM */
-.contact-form {
- margin-top: 30px;
-}
-.form-style {
- width: 100%;
-}
-.form-style ul {
- padding: 0;
- margin: 0;
- list-style: none;
-}
-.form-style ul li {
- display: block;
- margin-bottom: 10px;
- min-height: 35px;
-}
-.form-style ul li .field-style {
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- font-size: 1.4rem;
- padding: 8px;
- outline: none;
- background-color: var(--bg-color);
- border: 1px solid var(--form-border-color);
- color: var(--body-color);
- font-family: inherit;
-}
-.form-style ul li .field-style:focus {
- box-shadow: 0 0 5px;
- border: 1px solid;
-}
-.form-style ul li .field-split {
- width: 49%;
-}
-.form-style ul li .field-full {
- width: 100%;
-}
-.form-style ul li input.align-left {
- float: left;
-}
-.form-style ul li input.align-right {
- float: right;
-}
-.form-style ul li textarea {
- background-color: var(--bg-color);
- border: 1px solid var(--form-border-color);
- color: var(--body-color);
- width: 100%;
- height: auto;
-}
-.form-style ul li input[type='button'],
-.form-style ul li input[type='submit'] {
- background-color: var(--bg-color);
- border: 1px solid var(--form-border-color);
- display: inline-block;
- cursor: pointer;
- color: var(--body-color);
- text-decoration: none;
- width: 100%;
-}
-.form-style ul li input[type='button']:hover,
-.form-style ul li input[type='submit']:hover {
- background-color: var(--bg-color);
- border: 1px solid var(--form-button-hover-border-color);
-}
-
-/* (CONTACT) FORM END */
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 17d8be5..1b2b10f 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -10,3 +10,8 @@
@import './partials/components/tag';
@import './partials/components/content';
@import './partials/components/wrapper';
+@import './partials/components/aside';
+@import './partials/components/sidebar';
+@import './partials/components/footer';
+@import './partials/vendors/mediumzoom';
+@import './partials/vendors/contactform';
\ No newline at end of file
diff --git a/assets/scss/partials/components/_aside.scss b/assets/scss/partials/components/_aside.scss
new file mode 100644
index 0000000..c1d5f04
--- /dev/null
+++ b/assets/scss/partials/components/_aside.scss
@@ -0,0 +1,3 @@
+.aside {
+ width: $sidebar-width;
+}
\ No newline at end of file
diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
new file mode 100644
index 0000000..79cb670
--- /dev/null
+++ b/assets/scss/partials/components/_footer.scss
@@ -0,0 +1,23 @@
+.footer {
+ 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;
+ }
+ }
\ No newline at end of file
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
new file mode 100644
index 0000000..cf3c317
--- /dev/null
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -0,0 +1,70 @@
+.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);
+
+ &__list {
+ list-style: none;
+ padding: 0;
+ font-size: 1.4rem;
+ text-align: center;
+
+ &-item {
+ display: inline;
+ padding: 0 4px;
+ line-height: 0;
+
+ i {
+ margin-right: 3px;
+ }
+
+ li {
+ display: inline;
+ padding: 0 4px;
+ line-height: 0;
+ }
+ }
+ }
+
+ &__title {
+ top: 40%;
+ text-align: center;
+
+ &-description {
+ font-size: 1.4rem;
+ margin: 0 1em;
+ }
+
+ img {
+ width: 127px;
+ height: 127px;
+ border-radius: 50%;
+ }
+
+ h3 {
+ text-transform: uppercase;
+ font-weight: bold;
+ letter-spacing: 2px;
+ line-height: 1;
+ margin: 1em;
+ }
+ }
+
+ @media screen and (min-width: 961px), print {
+ &__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
+ }
+ }
+
+
+
+
\ No newline at end of file
diff --git a/assets/scss/partials/vendors/contactform.scss b/assets/scss/partials/vendors/contactform.scss
new file mode 100644
index 0000000..9ed1de7
--- /dev/null
+++ b/assets/scss/partials/vendors/contactform.scss
@@ -0,0 +1,70 @@
+/* (CONTACT) FORM */
+
+.contact-form {
+ margin-top: 30px;
+ }
+ .form-style {
+ width: 100%;
+ }
+ .form-style ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+ .form-style ul li {
+ display: block;
+ margin-bottom: 10px;
+ min-height: 35px;
+ }
+ .form-style ul li .field-style {
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ font-size: 1.4rem;
+ padding: 8px;
+ outline: none;
+ background-color: $accent;
+ border: 1px solid $primary-light;
+ color: $body-color;
+ font-family: inherit;
+ }
+ .form-style ul li .field-style:focus {
+ box-shadow: 0 0 5px;
+ border: 1px solid;
+ }
+ .form-style ul li .field-split {
+ width: 49%;
+ }
+ .form-style ul li .field-full {
+ width: 100%;
+ }
+ .form-style ul li input.align-left {
+ float: left;
+ }
+ .form-style ul li input.align-right {
+ float: right;
+ }
+ .form-style ul li textarea {
+ background-color: $accent;
+ border: 1px solid $primary-light;
+ color: $body-color;
+ width: 100%;
+ height: auto;
+ }
+ .form-style ul li input[type='button'],
+ .form-style ul li input[type='submit'] {
+ background-color: $accent;
+ border: 1px solid $primary-light;
+ display: inline-block;
+ cursor: pointer;
+ color: $body-color;
+ text-decoration: none;
+ width: 100%;
+ }
+ .form-style ul li input[type='button']:hover,
+ .form-style ul li input[type='submit']:hover {
+ background-color: $accent;
+ border: 1px solid $primary-light;
+ }
+
+ /* (CONTACT) FORM END */
\ No newline at end of file
diff --git a/assets/scss/partials/vendors/mediumzoom.scss b/assets/scss/partials/vendors/mediumzoom.scss
new file mode 100644
index 0000000..54b8983
--- /dev/null
+++ b/assets/scss/partials/vendors/mediumzoom.scss
@@ -0,0 +1,35 @@
+.medium-zoom-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ transition: opacity 300ms;
+ will-change: opacity;
+ background: $accent;
+ }
+
+ .medium-zoom--opened .medium-zoom-overlay {
+ cursor: pointer;
+ cursor: zoom-out;
+ opacity: 1;
+ }
+
+ .medium-zoom-image {
+ cursor: pointer;
+ cursor: zoom-in;
+ transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
+ z-index: 100;
+ }
+
+ .medium-zoom-image--hidden {
+ visibility: hidden;
+ }
+
+ .medium-zoom-image--opened {
+ position: relative;
+ cursor: pointer;
+ cursor: zoom-out;
+ will-change: transform;
+ }
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 31e2b11..934decd 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -9,7 +9,7 @@
<body class="body">
<header class="header">{{ partial "navbar.html" . }}</header>
<div class="wrapper">
- <aside>
+ <aside class="aside">
{{- partial "sidebar.html" . -}}
</aside>
<main>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 332297f..e0c09ff 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,4 @@
-<footer class="footer footer--{{ .footerClassModifier }}">
- <div class="by_farbox">
+<footer class="footer">
<ul class="footer__list">
<li class="footer__item">
©
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index c7b8360..9bf8c2c 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -8,18 +8,16 @@
{{ end }}"
>
<div class="sidebar__content">
- <div class="logo-title">
- <div class="title">
+ <div class="sidebar__title">
<img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
<h3 title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h3>
- <div class="description">
+ <div class="sidebar__title-description">
<p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
</div>
- </div>
</div>
- <ul class="social-links">
+ <ul class="sidebar__list">
{{ range $item := .Site.Params.socialIcons }}
- <li>
+ <li class="sidebar__list-item">
<a href="{{ $item.url }}" rel="me" aria-label="{{ $item.title }}" title="{{ $item.title }}">
<i class="{{ $item.icon }} fa-2x" aria-hidden="true"></i>
</a>
--
Gitblit v1.10.0