Disroot-themes/grav-theme-disroot
Disroot-themes
/
grav-theme-disroot
7
2
Fork 0
Code Pull Requests Releases Activity

New layout for NC clients for each app

This commit is contained in:
meaz 2019-12-26 18:49:24 +01:00
parent 689bac3d8a
commit 0144d23b76
4 changed files with 183 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
css/media-queries.css
View File

@ -282,13 +282,35 @@ div#nav-logo {
/* clients
------------------------------------*/
.NCcontainer {
grid-template-rows: 40% 30% 30%;
}
.NCimage {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 4;
justify-self: center;
}
.NCtext {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
align-self: start;
}
.NCservices {
grid-row-start: 3;
grid-row-end: 4;
}
.clients .row {
display: block;
}
.client-item {
position: relative;
width: 280px !important;
margin-left: auto;
margin-right: auto;
@ -300,19 +322,11 @@ div#nav-logo {
font-size: 20px;
}
.client-item br { display: none; }
.client-item a { position: relative; display: block; width: 100%; }
.client-item .platforms { float: right; }
.clients i:first-of-type {
margin: 0;
}
.clients img {
height: 2em;
width: 2em;
margin: 2% 5%;
filter: grayscale(40%);
}
}
/* mobile narrow
@ -355,9 +369,17 @@ div#nav-logo {
/* clients
------------------------------------*/
.NCcontainer {
display: block;
}
.clients h6 {
font-size: 100%;
}
.client-item {
position: relative;
max-width: 80%;
width: 80% !important;
}
#boxtitle {
@ -377,7 +399,6 @@ div#nav-logo {
font-size:55px;
}
#goaltitle {
padding-left:20px;
font-size: 35px !important;

55
css/style.css
View File

@ -754,7 +754,8 @@ ul#nav li a:hover .ul#nav li ul {
border: none;
box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
margin: 2%;
background-color: #ffffff
background-color: #ffffff;
text-align: center;
}
.client-item h3 {
@ -764,7 +765,6 @@ ul#nav li a:hover .ul#nav li ul {
.clients img {
width: 70%;
margin-left: 15%;
filter: grayscale(100%);
}
@ -776,6 +776,7 @@ ul#nav li a:hover .ul#nav li ul {
display: inline-block;
margin: 0 0 0 2%;
padding: 0;
font-size: 60%;
}
.tooltiptext {
@ -813,6 +814,56 @@ ul#nav li a:hover .ul#nav li ul {
opacity: 1;
}
/* NC clients
--------------------------------------*/
.NCcontainer {
display: grid;
grid-template-rows: 60% 40%;
grid-template-columns: 49% 2% 49%;
}
.NCservices h2 {
text-align: center;
}
.NCclients {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 4;
}
.NCimage_right {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
align-self: center;
}
.NCtext_right {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 4;
align-self: start;
}
.NCtext_left {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
align-self: center;
}
.NCimage_left {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 4;
align-self: start;
}
/* Contact
--------------------------------------*/

48
templates/modular/cloudclient-left.html.twig Normal file
View File

@ -0,0 +1,48 @@
{% block content %}
<section id="{{ page.slug }}">
<div class="fullbar" style="background-color:{{ page.header.bgcolor }};">
<div class="fullbar-content" style="color:{{ page.header.fontcolor }}; text-align:{{ page.header.text_align }};">
<div class="NCcontainer">
<div class="NCtext_left">
<h1>{{ page.header.title }}</h1>
<p>{{ page.header.text }}</p>
</div>
<div class="NCimage_left">
<img src="{{ page.url }}/{{ page.header.image }}">
</div>
<div class="NCclients">
<h2>{{ page.header.text2 }}</h2>
<div class="clients">
{% for item in page.header.clients %}
<div class="client-item columns">
<a href="{{ item.link }}" target="_blank">
<br>
<img src="{{ page.url }}/{{ item.logo }}">
<br>
<h6>{{ item.title }}</h6>
<div class=platforms>
<i class="fa {{ item.platforms[0] }}"></i>
<i class="fa {{ item.platforms[1] }}"></i>
<i class="fa {{ item.platforms[2] }}"></i>
<i class="fa {{ item.platforms[3] }}"></i>
</div>
</a>
{% if item.text %}
<div class="tooltiptext">{{ item.text }}</div>
{% endif %}
</div>
{% endfor %}
</div>
{{ page.content }}
</div>
</div>
</div>
</div>
</section>
{% endblock %}

48
templates/modular/cloudclient-right.html.twig Normal file
View File

@ -0,0 +1,48 @@
{% block content %}
<section id="{{ page.slug }}">
<div class="fullbar" style="background-color:{{ page.header.bgcolor }};">
<div class="fullbar-content" style="color:{{ page.header.fontcolor }}; text-align:{{ page.header.text_align }};">
<div class="NCcontainer">
<div class="NCtext_right">
<h1>{{ page.header.title }}</h1>
<p>{{ page.header.text }}</p>
</div>
<div class="NCimage_right">
<img src="{{ page.url }}/{{ page.header.image }}">
</div>
<div class="NCclients">
<h2>{{ page.header.text2 }}</h2>
<div class="clients">
{% for item in page.header.clients %}
<div class="client-item columns">
<a href="{{ item.link }}" target="_blank">
<br>
<img src="{{ page.url }}/{{ item.logo }}">
<br>
<h6>{{ item.title }}</h6>
<div class=platforms>
<i class="fa {{ item.platforms[0] }}"></i>
<i class="fa {{ item.platforms[1] }}"></i>
<i class="fa {{ item.platforms[2] }}"></i>
<i class="fa {{ item.platforms[3] }}"></i>
</div>
</a>
{% if item.text %}
<div class="tooltiptext">{{ item.text }}</div>
{% endif %}
</div>
{% endfor %}
</div>
{{ page.content }}
</div>
</div>
</div>
</div>
</section>
{% endblock %}