Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit 2ead46ba authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Decomposition of scss styles into components

parent d7b9d6ff
@import
"elixir/base",
"elixir/cards",
"elixir/footer",
"elixir/header",
"elixir/layout"
;
\ No newline at end of file
;
......@@ -5,9 +5,9 @@ $COLOR_BACKGROUND_HEADER: #023452;
$FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif;
$PADDING_PAGE_LEFT: 13%;
$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%;
$WIDTH_CONTENT: 67%;
$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%;
$WIDTH_CONTENT_NO_COLUMN: 58%;
html {
......
.cards {
display: flex;
flex-wrap: wrap;
.card-id.smaller {
height: 175px;
}
.card-id {
width: 185px;
height: 350px;
border: solid 2px #e6e6e6;
border-radius: 7px 7px 0px 0px;
padding: 8px;
margin: 10px;
.card-id-smallphoto img {
width: auto;
padding-left: 4px;
padding-bottom: 8px;
}
.card-id-photo img {
width: 120px;
padding-left: 4px;
padding-bottom: 8px;
}
.card-id-name {
font-weight: 600;
font-size: 18px;
}
.card-id-description {
font-size: 14px;
}
}
}
#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;
.site-footer-primary-logo {
padding-top: 10px;
padding-bottom: 5px;
}
h3 {
border-bottom: 1px solid #848484;
font-size: 1.15rem;
color: #ebebeb;
transition: color 0.15s;
margin-bottom: 5px;
a {
color: #ebebeb;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: $COLOR_LINK_ELIXIR;
}
}
ul {
padding-inline-start: 0;
margin-block-start: 0;
li {
list-style: none;
width: auto;
float: none;
min-width: 0;
a {
display: inline-block;
zoom: 1;
font-size: 14px;
line-height: 1.1;
color: #ebebeb;
padding: 1px 4px 2px 0;
border-bottom: none;
margin-bottom: 0;
text-decoration: none;
}
a:hover {
text-decoration: none;
transition: color 0.25s;
color: $COLOR_LINK_ELIXIR;
}
}
}
}
}
}
#site-footer-secondary {
#site-footer-secondary-wrapper {
background: #023452;
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;
}
ul {
list-style: none;
padding-inline-start: 0;
padding-right: 100px;
@media only screen and (min-width: 600px) {
li {
display: inline-block;
}
}
@media only screen and (max-width: 600px) {
li {
display: list-item;
margin-top: 7px;
}
}
a {
display: inline-block;
text-decoration: none;
color: #ffffff;
font-weight: 800;
padding-left: 15px;
padding-right: 15px;
}
a:hover {
transition: color 0.25s;
color: orange;
text-decoration: none;
}
}
#address {
color: #888;
font-size: 14px;
padding-top: 14px;
@media only screen and (max-width: 600px) {
width: 90%;
}
}
}
}
#site-header {
background: $COLOR_BACKGROUND_HEADER;
height: 93px;
margin-top: -15px;
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;
ul {
padding-inline-start: 5px;
}
}
.elixir-image {
position: relative;
top: 26px;
float: left;
margin-right: 82px;
img {
width: 150px;
padding-left: 10px;
}
}
.hamburger {
background: none;
input {
display: none;
}
@media only screen and (max-width: 1025px) {
width: 50px;
height: 50px;
border: solid 2px #e6e6e6;
border-radius: 12px;
float: right;
position: relative;
top: 30px;
right: 20px;
z-index: 1;
background-color: #023452;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg==");
background-size: contain;
input {
opacity: 0;
display: block;
width: 50px;
height: 50px;
margin: 0;
z-index: 10;
cursor: pointer;
-webkit-touch-callout: none;
}
input ~ ul {
display: none;
height: 0;
}
input:checked ~ ul {
display: block;
float: left;
background-color: #023452;
width: 150px;
position: relative;
left: -88px;
top: -6px;
padding-bottom: 9px;
height: auto;
padding-right: 5px;
li {
display: contents;
}
}
}
}
ul {
margin-left: 0;
position: relative;
top: 66px;
left: -16px;
li {
list-style: none;
float: left;
margin: 0;
padding: 0;
a {
display: block;
white-space: nowrap;
@media only screen and (max-width: 1025px) {
padding: 12px 16px;
}
padding: 5px 16px;
margin-left: 0;
color: #fefefe;
text-transform: uppercase;
font-size: 0.875rem;
text-decoration: none;
}
a.active {
border-radius: 5px 5px 0 0;
color: #fefefe;
background: $COLOR_LINK_ELIXIR;
}
a.active:hover {
color: #222;
background: #d46d11;
transition: color 0.25s;
}
a:hover {
color: $COLOR_LINK_ELIXIR;
border-color: $COLOR_LINK_ELIXIR;
text-decoration: none;
transition: color 0.25s, background 0.25s;
}
}
}
}
}
#site-header {
background: $COLOR_BACKGROUND_HEADER;
height: 93px;
margin-top: -15px;
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;
ul {
padding-inline-start: 5px;
}
}
.elixir-image {
position: relative;
top: 26px;
float: left;
margin-right: 82px;
img {
width: 150px;
padding-left: 10px;
}
}
.hamburger {
background: none;
input {
display: none;
}
@media only screen and (max-width: 1025px) {
width: 50px;
height: 50px;
border: solid 2px #e6e6e6;
border-radius: 12px;
float: right;
position: relative;
top: 30px;
right: 20px;
z-index: 1;
background-color: #023452;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg==');
background-size: contain;
input {
opacity: 0;
display: block;
width: 50px;
height: 50px;
margin: 0;
z-index: 10;
cursor: pointer;
-webkit-touch-callout: none;
}
input ~ ul {
display: none;
height: 0px;
}
input:checked ~ ul {
display: block;
float: left;
background-color: #023452;
width: 150px;
position: relative;
left: -88px;
top: -6px;
padding-bottom: 9px;
height: auto;
padding-right: 5px;
li {
display: contents;
}
}
}
}
ul {
margin-left: 0;
position: relative;
top: 66px;
left: -16px;
li {
list-style: none;
float: left;
margin: 0;
padding: 0;
a {
display: block;
white-space: nowrap;
@media only screen and (max-width: 1025px) {
padding: 12px 16px;
}
padding: 5px 16px;
margin-left: 0;
color: #fefefe;
text-transform: uppercase;
font-size: 0.875rem;
text-decoration: none;
}
a.active {
border-radius: 5px 5px 0 0;
color: #fefefe;
background: $COLOR_LINK_ELIXIR;
}
a.active:hover {
color: #222;
background: #d46d11;
transition: color 0.25s;
}
a:hover {
color: $COLOR_LINK_ELIXIR;
border-color: $COLOR_LINK_ELIXIR;
text-decoration: none;
transition: color 0.25s, background 0.25s;
}
}
}
}
}
#site-content {
h1.title {
font-size: 37px;
......@@ -148,23 +14,20 @@
}
article {
hr {
border-top: solid 1px #f7f7f7;
}
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%;
......@@ -174,6 +37,7 @@
#left-column {
border-bottom: solid 1px #e6e6e6;
min-width: 92% !important;
ul {
min-width: 92% !important;
}
......@@ -213,7 +77,7 @@
}
.index-photo {
border: solid 0px black;
border: solid 0 black;
flex-grow: 1;
margin-right: 2%;
......@@ -303,150 +167,6 @@
}
}
#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;
.site-footer-primary-logo {
padding-top: 10px;
padding-bottom: 5px;
}
h3 {
border-bottom: 1px solid #848484;
font-size: 1.15rem;
color: #ebebeb;
transition: color 0.15s;
margin-bottom: 5px;
a {
color: #ebebeb;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: $COLOR_LINK_ELIXIR;
}
}
ul {
padding-inline-start: 0px;
margin-block-start: 0px;
li {
list-style: none;
width: auto;
float: none;
min-width: 0;
a {
display: inline-block;
zoom: 1;
font-size: 14px;
line-height: 1.1;
color: #ebebeb;
padding: 1px 4px 2px 0;
border-bottom: none;
margin-bottom: 0;
text-decoration: none;
}
a:hover {
text-decoration: none;
transition: color 0.25s;
color: $COLOR_LINK_ELIXIR;
}
}
}
}
}
}
#site-footer-secondary {
#site-footer-secondary-wrapper {
background: #023452;
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;
}
ul {
list-style: none;
padding-inline-start: 0px;
padding-right: 100px;
@media only screen and (min-width: 600px) {
li {
display: inline-block;
}
}
@media only screen and (max-width: 600px) {
li {
display: list-item;
margin-top: 7px;
}