Better responsiveness (#3)
* Better layout (I think ;) * Better responsiveness, espacially in mobile view. Co-authored-by: meaz <meaz@disroot.org> Co-authored-by: antilopa <antilopa@disroot.org> Reviewed-on: #3 Co-authored-by: meaz <meaz@no-reply@disroot.org> Co-committed-by: meaz <meaz@no-reply@disroot.org>
This commit is contained in:
parent
10dc61a756
commit
396e9d0a74
|
|
@ -0,0 +1,3 @@
|
|||
.vagrant
|
||||
.vagrant/*
|
||||
*log
|
||||
|
|
@ -10,6 +10,7 @@ dash_asset_host_dirname: 'files/assets'
|
|||
dash_asset_dirname: 'assets' # change this according to the folder's name you have in files/
|
||||
dash_bgimage: 'bgimage.jpg'
|
||||
dash_logo: 'logo.png'
|
||||
dash_icons_or_fontawesome: 'fontawesome' # Choose if you prefer to deploy your own icons or fontawesome ones
|
||||
dash_font_awesome_version: 5.15.3
|
||||
dash_style_bgimage: "/{{ dash_asset_dirname }}/{{ dash_bgimage }}"
|
||||
|
||||
|
|
@ -18,16 +19,19 @@ dash_services:
|
|||
- name: 'mail'
|
||||
link: 'mail.example.org'
|
||||
icon: 'fa-envelope'
|
||||
icon_png: ''
|
||||
caption: 'E-MAIL'
|
||||
deploy: 'true'
|
||||
- name: 'cloud'
|
||||
link: 'cloud.example.org'
|
||||
icon: 'fa-cloud'
|
||||
icon_png: ''
|
||||
caption: 'CLOUD'
|
||||
deploy: 'true'
|
||||
- name: 'pod'
|
||||
link: 'pod.example.org'
|
||||
icon: 'fa-asterisk'
|
||||
icon_png: ''
|
||||
caption: 'DIASPORA'
|
||||
deploy: 'true'
|
||||
|
||||
|
|
|
|||
|
|
@ -16,3 +16,4 @@
|
|||
version: "{{ dash_font_awesome_version }}"
|
||||
become: yes
|
||||
become_user: "{{ dash_user }}"
|
||||
when: dash_icons_or_fontawesome == 'fontawesome'
|
||||
|
|
|
|||
|
|
@ -1,29 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" type="text/css" href="mobile.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/{{ dash_asset_dirname }}/font-awesome-{{ dash_font_awesome_version }}/css/all.min.css">
|
||||
<title>{{ dash_companyname }}'s Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="{{ dash_website_link}}">
|
||||
<div id="logo">
|
||||
</div>
|
||||
</a>
|
||||
<div id="wrapper">
|
||||
<div id="all-links">
|
||||
<div id="logo_div">
|
||||
<a href="{{ dash_website_link}}"><img src="{{ dash_asset_dirname }}/{{ dash_logo }}" alt="Disroot Logo" id="logo"/></a>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
{% for item in dash_services %}
|
||||
{% if item.deploy == 'true' %}
|
||||
<div class="grid-item">
|
||||
<a class="link" href="{{ item.link }}" target=_blank>
|
||||
<div id="link-to-{{ item.name }}" class="img-link">
|
||||
{% if dash_icons_or_fontawesome == 'fontawesome' %}
|
||||
<i class="fa {{ item.icon }} fa-5x" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
{% if dash_icons_or_fontawesome == 'icons' %}
|
||||
<img src="{{ dash_asset_dirname }}/{{ item.icon_png }}" alt="{{ item.name }}">
|
||||
{% endif %}
|
||||
<p class="link-text"> {{ item.caption }} </p>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,58 @@
|
|||
body {
|
||||
background-color: #123456;
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
.grid-container {
|
||||
grid-template-columns: 28% 28% 28%;
|
||||
}
|
||||
|
||||
#all-links {
|
||||
position: relative;
|
||||
width: 600;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.img-link {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
#logo {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-family: "Monospace";
|
||||
font-size: 1.3em;
|
||||
text-decoration:none;
|
||||
margin: 40px;
|
||||
/*.link {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
padding: 20px;
|
||||
padding-top: 2%;
|
||||
.link:hover {
|
||||
font-size: 0.9em;
|
||||
}*/
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 40%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
padding: 5%;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*.link {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
font-size: 0.7em;
|
||||
}*/
|
||||
|
||||
#logo {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.link img {
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
|
||||
.link:hover img {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,93 @@
|
|||
body {
|
||||
background-color: #123456;
|
||||
background: url("{{ dash_style_bgimage }}") no-repeat center center fixed;
|
||||
background-color: #50162D;
|
||||
background-image: url("{{ dash_style_bgimage }}");
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 130px;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 15% 15% 15% 15%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
padding: 5% 0;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
/*background-color: #ffffff14;*/
|
||||
}
|
||||
|
||||
#logo_div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background: url("/{{ dash_asset_dirname }}/{{ dash_logo }}") no-repeat;
|
||||
background-size: auto 45px;
|
||||
height: 45px;
|
||||
margin-top: 20px;
|
||||
margin-left: 15%;
|
||||
height: 50px;
|
||||
padding-top: 0.5em;
|
||||
filter: invert(100%) sepia(95%) saturate(19%) hue-rotate(338deg) brightness(105%) contrast(104%) drop-shadow(1px 1px 3px #000) ;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: 0;
|
||||
#logo:hover {
|
||||
filter: invert(100%) sepia(95%) saturate(19%) hue-rotate(338deg) brightness(105%) contrast(104%) drop-shadow(1px 1px 2px #fff);
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
#all-links {
|
||||
width: 100%;
|
||||
}
|
||||
.link i {
|
||||
-webkit-text-stroke-width: 0.5px;
|
||||
-webkit-text-stroke-color: #555;
|
||||
}
|
||||
|
||||
.img-link {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.link img {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
filter: drop-shadow(1px 1px 0 white)
|
||||
drop-shadow(-1px 1px 0 white)
|
||||
drop-shadow(1px -1px 0 white)
|
||||
drop-shadow(-1px -1px 0 white);
|
||||
-webkit-filter: drop-shadow(1px 1px 0 white)
|
||||
drop-shadow(-1px 1px 0 white)
|
||||
drop-shadow(1px -1px 0 white)
|
||||
drop-shadow(-1px -1px 0 white);
|
||||
}
|
||||
|
||||
.link:hover img {
|
||||
width: 28%;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-family: "Source-Sans-Pro",sans-serif;
|
||||
font-size: 0.7em;
|
||||
text-decoration:none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: #a33;
|
||||
font-size: 0.65em;
|
||||
filter: brightness(150%);
|
||||
color: #3c3b50;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-link {
|
||||
margin: 30px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue