Skip to content
Snippets Groups Projects
Commit d4346afe authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Make SCSS nicer, part 1

parent 7b65a6b9
No related branches found
No related tags found
3 merge requests!17Develop,!3Develop,!1Cleaner scss
Hide whitespace changes
Inline Side-by-side
Showing
with 128 additions and 101 deletions
_includes/footer.html
+ 2
− 2
View file @ d4346afe
<footer id="site-footer-primary">
<div id="site-footer-primary-wrapper">
<div id="site-footer-primary-wrapper" class="margin-wrapper flex">
<div>
<h3>
<a href="{{ site.baseurl }}/about-node/">About the Node</a>
......@@ -50,7 +50,7 @@
</footer>
<footer id="site-footer-secondary">
<div id="site-footer-secondary-wrapper">
<div id="site-footer-secondary-wrapper" class="margin-wrapper flex">
<div id="copyright">
<ul>
<li>{{- site.footer-copyright | escape -}} &nbsp;{{ 'now' | date: "%Y" }}</li>
......
_includes/header.html
+ 1
− 1
View file @ d4346afe
<header id="site-header" role="banner" aria-label="Site header">
<div id="site-header-wrapper">
<div id="site-header-wrapper" class="margin-wrapper">
<a href="{{ site.baseurl }}/" class="elixir-image">
<img src="{{ site.baseurl }}/assets/ELIXIR_LU.png" title="ELIXIR LU logo" />
</a>
......
_layouts/article.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="margin-wrapper">
<div id="left-column"></div>
......
_layouts/index.html
+ 4
− 2
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="body-wrapper margin-wrapper">
<div id="left-column"></div>
......@@ -53,7 +53,8 @@ layout: default
</div>
</div>
<div>
<div id="right-column">
{% if paginator.posts %}
<h2>Our news</h2>
{% for post in paginator.posts %}
......@@ -69,6 +70,7 @@ layout: default
{% endfor %}
<h3><a href="{{ site.baseurl }}/news/">See more...</a></h3>
{% endif %}
<a class="twitter-timeline" data-lang="en" data-width="380" data-height="800" data-dnt="true" data-theme="light" data-link-color="#B57B00" href="https://twitter.com/elixir_lu?ref_src=twsrc%5Etfw">Tweets by elixir_lu</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
......
_layouts/left_col.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="margin-wrapper">
<div id="left-column">
<h2>{{ page.section }}</h2>
......
_layouts/paginated.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="margin-wrapper">
<div id="left-column">
</div>
......
_layouts/paginated_left_col.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="margin-wrapper">
<div id="left-column">
<h2>{{ page.section }}</h2>
......
_layouts/post.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article class="one_column">
<article class="one_column" class="margin-wrapper">
<div>
<header>
<h1>
......
_layouts/search.html
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
layout: default
---
<article>
<article class="margin-wrapper">
<div id="left-column"></div>
......
_sass/elixir.scss
+ 3
− 1
View file @ d4346afe
......@@ -3,5 +3,7 @@
"elixir/cards",
"elixir/footer",
"elixir/header",
"elixir/layout"
"elixir/helpers",
"elixir/layout",
"elixir/responsive"
;
_sass/elixir/_base.scss
+ 5
− 6
View file @ d4346afe
// VARIABLES
$COLOR_BACKGROUND_HEADER: #023452;
$COLOR_LINK_ELIXIR: #f47d21;
$COLOR_TEXT: #222;
$COLOR_BACKGROUND_HEADER: #023452;
$FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif;
$PADDING_PAGE_LEFT: 13%;
$WIDTH_CONTENT: 67%;
$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%;
$WIDTH_CONTENT_NO_COLUMN: 58%;
$HEADER_RESPONSIVENESS_THRESHOLD: 1025px;
$FOOTER_RESPONSIVENESS_THRESHOLD: 600px;
// GENERIC
html {
overflow-x: hidden;
overflow-y: scroll;
......
_sass/elixir/_footer.scss
+ 4
− 20
View file @ d4346afe
#site-footer-primary {
#site-footer-primary-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: #3e3e3e;
font-size: 0.875rem;
@media only screen and (min-width: 600px) {
padding-left: 22%;
}
@media only screen and (max-width: 600px) {
padding-left: 2%;
}
div {
margin-left: 15px;
margin-right: 15px;
min-width: 200px;
min-width: 15%;
.site-footer-primary-logo {
padding-top: 10px;
......@@ -79,14 +70,7 @@
border-top: 1px solid #333;
color: #ebebeb;
font-size: 0.875rem;
display: flex;
flex-wrap: wrap-reverse;
@media only screen and (min-width: 600px) {
padding-left: 22%;
}
@media only screen and (max-width: 600px) {
padding-left: 2%;
}
div {
margin-left: 15px;
......@@ -96,12 +80,12 @@
list-style: none;
padding-inline-start: 0;
padding-right: 100px;
@media only screen and (min-width: 600px) {
@media only screen and (min-width: $FOOTER_RESPONSIVENESS_THRESHOLD) {
li {
display: inline-block;
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: $FOOTER_RESPONSIVENESS_THRESHOLD) {
li {
display: list-item;
margin-top: 7px;
......@@ -128,7 +112,7 @@
color: #888;
font-size: 14px;
padding-top: 14px;
@media only screen and (max-width: 600px) {
@media only screen and (max-width: $FOOTER_RESPONSIVENESS_THRESHOLD) {
width: 90%;
}
}
......
_sass/elixir/_header.scss
+ 5
− 9
View file @ d4346afe
......@@ -5,12 +5,7 @@
margin-bottom: 37px;
#site-header-wrapper {
@media only screen and (min-width: 1025px) {
padding-left: $PADDING_PAGE_LEFT;
}
@media only screen and (max-width: 1025px) {
padding-left: 5px;
@media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) {
ul {
padding-inline-start: 5px;
}
......@@ -20,7 +15,8 @@
position: relative;
top: 26px;
float: left;
margin-right: 82px;
left: -220px;
width: 0px;
img {
width: 150px;
......@@ -34,7 +30,7 @@
input {
display: none;
}
@media only screen and (max-width: 1025px) {
@media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) {
width: 50px;
height: 50px;
border: solid 2px #e6e6e6;
......@@ -98,7 +94,7 @@
a {
display: block;
white-space: nowrap;
@media only screen and (max-width: 1025px) {
@media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) {
padding: 12px 16px;
}
padding: 5px 16px;
......
_sass/elixir/_helpers.scss 0 → 100644
+ 12
− 0
View file @ d4346afe
.pull-right {
float: right;
color: orange;
font-weight: 700;
font-size: larger;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
_sass/elixir/_layout.scss
+ 9
− 53
View file @ d4346afe
......@@ -8,63 +8,21 @@
}
article.one_column {
padding-left: $PADDING_PAGE_LEFT_NO_COLUMN;
width: $WIDTH_CONTENT_NO_COLUMN;
display: block;
}
article {
hr {
border-top: solid 1px #f7f7f7;
}
@media screen and (orientation: landscape) and (max-width: 820px) {
article {
font-size: 12px;
}
}
@media only screen and (min-width: 1025px) {
padding-left: $PADDING_PAGE_LEFT;
width: $WIDTH_CONTENT;
flex-direction: row;
min-width: 400px;
}
@media only screen and (max-width: 1025px) {
padding-left: 4%;
padding-right: 4%;
width: 92%;
flex-direction: column;
#left-column {
border-bottom: solid 1px #e6e6e6;
min-width: 92% !important;
ul {
min-width: 92% !important;
}
}
}
padding-bottom: 50px;
min-height: 400px;
padding-right: 10px;
margin: 0;
display: flex;
div.narrower-article-div {
@media only screen and (min-width: 1500px) {
width: 70%;
.index-flex {
display: flex;
}
}
@media only screen and (max-width: 1500px) {
width: 90%;
.index-flex {
display: block;
}
}
hr {
border-top: solid 1px #f7f7f7;
}
div.narrower-article-div {
.index-flex {
.index-gray-box {
padding: 20px;
......@@ -118,7 +76,12 @@
max-width: 600px;
}
#right-column {
min-width: 220px;
}
#left-column {
margin-left: 10px;
padding-top: 20px;
padding-right: 20px;
width: 220px;
......@@ -234,10 +197,3 @@ button.search {
height: 50px;
font-size: 20px;
}
.pull-right {
float: right;
color: orange;
font-weight: 700;
font-size: larger;
}
_sass/elixir/_responsive.scss 0 → 100644
+ 76
− 0
View file @ d4346afe
// RESPONSIVENESS OF LAYOUT
.margin-wrapper {
@media only screen and (max-width: 600px) {
padding-left: 2%;
}
@media only screen and (min-width: 600px) {
padding-left: 22%;
}
}
.body-wrapper {
@media only screen and (max-width: 600px) {
padding-left: 2%;
}
@media only screen and (max-width: 1400px) {
padding-left: 8%;
}
@media only screen and (min-width: 1400px) {
padding-left: calc(22% - 220px);
}
}
article {
@media only screen and (max-width: 600px) {
width: 96%;
}
@media only screen and (min-width: 600px) {
padding-left: 66%;
}
@media only screen and (min-width: 1025px) {
flex-direction: row;
min-width: 400px;
width: 80%;
}
@media screen and (orientation: landscape) and (max-width: 820px) {
font-size: 12px;
}
@media only screen and (max-width: 1025px) {
width: 75%;
flex-direction: column;
#left-column {
border-bottom: solid 1px #e6e6e6;
min-width: 92% !important;
ul {
min-width: 92% !important;
}
}
}
div.narrower-article-div {
@media only screen and (min-width: 1500px) {
width: 65%;
padding-right: 20px;
.index-flex {
display: flex;
}
}
@media only screen and (max-width: 1500px) {
width: 90%;
.index-flex {
display: block;
}
}
}
}
elixir-theme.gemspec
+ 1
− 1
View file @ d4346afe
......@@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "jekyll-elixir-theme"
spec.version = "0.5.5"
spec.version = "0.5.6"
spec.authors = ["jacek.lebioda"]
spec.email = ["jacek.lebioda@uni.lu"]
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment