Finished Redesign
This commit is contained in:
Hendrik Blöß committed
1 parent
197f0ee302
commit
faf4f36a00
9 files changed
+233
-236
No files matched your search
+4
-4
@@ -1,14 +1,14 @@
|
||||
[{
|
||||
"title": "Download",
|
||||
"icon": "music",
|
||||
"description": "Find more than 18.000 songs on USDB, from real classics to the latest hits.",
|
||||
"url_text": "usdb.animux.de",
|
||||
"description": "Find more than 18.000 songs on USDB, from real classics to the latest hits on usdb.animux.de.",
|
||||
"url_text": "Get Songs",
|
||||
"url": "http://usdb.animux.de"
|
||||
},
|
||||
{
|
||||
"title": "Create your own",
|
||||
"title": "Create",
|
||||
"icon": "file-text-o",
|
||||
"description": "Your favourite song isn't available? Just try to make your own songs for Vocaluxe.",
|
||||
"description": "Your favourite song isn't available? Just try to make your own songs for Vocaluxe by following this tutorial.",
|
||||
"url_text": "Tutorial",
|
||||
"url": "http://www.ultraguide.net/songcreation.php"
|
||||
}]
|
||||
@@ -6,11 +6,24 @@
|
||||
{{ page.content | markdownify }}
|
||||
<div class="flex-box-row">
|
||||
{% for contribute in site.data.contribute %}
|
||||
<div class="col-md-4 flex-box-col">
|
||||
<h2 class="flex00a">{{ contribute.title }}</h2>
|
||||
<span class="contribute-icon fa fa-{{ contribute.icon }} flex00a" aria-hidden="true"></span>
|
||||
<p class="flex11100">{{ contribute.description }}</p>
|
||||
<p><a class="btn flex00a" href="{{ contribute.url }}">{{ contribute.url_text }}</a></p>
|
||||
<div class="col-md-4 flex-box-col card hover-card dark-text">
|
||||
<div class="flex-box-row">
|
||||
<div class="col-md-3 flex-box-col">
|
||||
<span class="contribute-icon fa fa-{{ contribute.icon }} flex00a" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="col-md-9 flex-box-col contribute-text">
|
||||
<h2 class="flex00a">{{ contribute.title }}</h2>
|
||||
<p class="flex11100">{{ contribute.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hover-overlay blue-bg">
|
||||
<div class="overlay-background">
|
||||
<div class="overlay-content">
|
||||
<p><span class="contribute-icon fa fa-{{ contribute.icon }} flex00a" aria-hidden="true"></span></p>
|
||||
<p><a href="{{ contribute.url }}" class="btn btn-primary btn-lg">{{ contribute.url_text }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.
|
||||
</p>
|
||||
<div class="release-section">
|
||||
<div class="col-md-4 flex-box-col card nightly">
|
||||
<div class="col-md-4 flex-box-col card dark-bg">
|
||||
<h2 class="flex00a">Nightly</h2>
|
||||
<p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
|
||||
{% if release_nightly != nil %}
|
||||
@@ -39,7 +39,7 @@
|
||||
<p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-4 flex-box-col card pre-release">
|
||||
<div class="col-md-4 flex-box-col card red-bg">
|
||||
<h2 class="flex00a">Pre Release</h2>
|
||||
<p class="flex11a">Should be almost stable, but you might experience some bugs here.</p>
|
||||
{% if release_pre != nil %}
|
||||
@@ -57,7 +57,7 @@
|
||||
<p class="flex11100 no-release-text">There isn't any pre release yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-4 flex-box-col card stable">
|
||||
<div class="col-md-4 flex-box-col card blue-bg">
|
||||
<h2 class="flex00a">Stable Release</h2>
|
||||
<p class="flex11a">The latest release.</p>
|
||||
{% if release_stable != nil %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
|
||||
{% endif %}
|
||||
{% if include.arch == "x86" %}
|
||||
<span>{{include.title}} (x32)</span>
|
||||
<span>{{include.title}} (x86)</span>
|
||||
{% else %}
|
||||
<span>{{include.title}} (x64)</span>
|
||||
{% endif %}
|
||||
|
||||
+18
-5
@@ -6,11 +6,24 @@
|
||||
<p style="text-align:center">{{ page.content | markdownify }}</p>
|
||||
<div class="flex-box-row">
|
||||
{% for help in site.data.help %}
|
||||
<div class="col-md-4 flex-box-col">
|
||||
<h2 class="flex00a">{{ help.title }}</h2>
|
||||
<span class="contribute-icon fa fa-{{ help.icon }} flex00a" aria-hidden="true"></span>
|
||||
<p class="flex11100">{{ help.description }}</p>
|
||||
<p><a class="btn flex00a" href="{{ help.url }}">{{ help.url_text }}</a></p>
|
||||
<div class="col-md-4 flex-box-col card hover-card dark-text">
|
||||
<div class="flex-box-row">
|
||||
<div class="col-md-3 flex-box-col">
|
||||
<span class="help-icon fa fa-{{ help.icon }} flex00a" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="col-md-9 flex-box-col help-text">
|
||||
<h2 class="flex00a">{{ help.title }}</h2>
|
||||
<p class="flex11100">{{ help.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hover-overlay">
|
||||
<div class="overlay-background blue-bg">
|
||||
<div class="overlay-content">
|
||||
<p><span class="contribute-icon fa fa-{{ help.icon }} flex00a" aria-hidden="true"></span></p>
|
||||
<p><a href="{{ help.url }}" class="btn btn-primary btn-lg">{{ help.url_text }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<h1 class="title">{{site.title}}</h1>
|
||||
<h2 class="subtitle">{{site.subtitle}}</h2>
|
||||
<p>{{ site.description }}</p>
|
||||
<a href="#download" class="btn btn-primary btn-lg">Download Now!</a>
|
||||
<a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
|
||||
<a href="#about" class="btn btn-common btn-lg">Learn More</a>
|
||||
</div>
|
||||
|
||||
|
||||
+3
-3
@@ -15,7 +15,7 @@
|
||||
{{ post_1.content | split:'<!--more-big-->' | first | markdownify}}
|
||||
<a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
|
||||
{% else %}
|
||||
{{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }}
|
||||
{{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }}
|
||||
{% if (post_1.content | number_of_words) > site.big-post-preview-words %}
|
||||
<a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
|
||||
{% endif %}
|
||||
@@ -31,7 +31,7 @@
|
||||
{{ post_2.content | split:'<!--more-->' | first | markdownify}}
|
||||
<a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
|
||||
{% else %}
|
||||
{{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }}
|
||||
{{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }}
|
||||
{% if (post_2.content | number_of_words) > site.post-preview-words %}
|
||||
<a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
|
||||
{% endif %}
|
||||
@@ -46,7 +46,7 @@
|
||||
{{ post_3.content | split:'<!--more-->' | first | markdownify}}
|
||||
<a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
|
||||
{% else %}
|
||||
{{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }}
|
||||
{{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }}
|
||||
{% if (post_3.content | number_of_words) > site.post-preview-words %}
|
||||
<a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
|
||||
{% endif %}
|
||||
|
||||
+20
-7
@@ -2,15 +2,28 @@
|
||||
<section id="{{ page.section-type }}" class="content-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1 class="title">{{ page.title }}</h1>
|
||||
<h1 class="title">{{ page.title }}</h1>
|
||||
{{ page.content | markdownify }}
|
||||
<div class="flex-box-row">
|
||||
{% for song in site.data.songs %}
|
||||
<div class="col-md-6 flex-box-col" >
|
||||
<h2 class="flex00a">{{ song.title }}</h2>
|
||||
<span class="contribute-icon fa fa-{{ song.icon }} flex00a" aria-hidden="true"></span>
|
||||
<p class="flex11100">{{ song.description }}</p>
|
||||
<p><a class="btn flex00a" href="{{ song.url }}">{{ song.url_text }}</a></p>
|
||||
{% for song in site.data.songs %}
|
||||
<div class="col-md-6 flex-box-col card hover-card dark-text">
|
||||
<div class="flex-box-row">
|
||||
<div class="col-md-3 flex-box-col">
|
||||
<span class="song-icon fa fa-{{ song.icon }} flex00a" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="col-md-9 flex-box-col song-text">
|
||||
<h2 class="flex00a">{{ song.title }}</h2>
|
||||
<p class="flex11100">{{ song.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hover-overlay red-bg">
|
||||
<div class="overlay-background">
|
||||
<div class="overlay-content">
|
||||
<p><span class="song-icon fa fa-{{ song.icon }} flex00a" aria-hidden="true"></span></p>
|
||||
<p><a href="{{ song.url }}" class="btn btn-primary btn-lg">{{ song.url_text }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
+165
-207
@@ -1,14 +1,87 @@
|
||||
/******COLORS******/
|
||||
/* Blue * #428bca */
|
||||
/* Red * #E74C3C */
|
||||
/* Dark * #2C3E50 */
|
||||
/******************/
|
||||
/****COLORS****/
|
||||
.blue-text {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.blue-bg {
|
||||
background-color: #428bca !important;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.red-bg {
|
||||
background-color: #E74C3C;
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
color: #2C3E50 !important;
|
||||
}
|
||||
|
||||
.dark-bg {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
|
||||
/**************/
|
||||
|
||||
/****Cards****/
|
||||
|
||||
.card {
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.hover-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hover-card .hover-overlay {
|
||||
position: absolute;
|
||||
top: calc(100% - 8px);
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
-ms-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
left: -5px;
|
||||
height: calc(100% + 10px);
|
||||
width: calc(100% + 10px);
|
||||
}
|
||||
|
||||
.hover-card:hover .hover-overlay {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hover-card .overlay-background {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hover-card .overlay-content {
|
||||
color: #fff;
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
/*************/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 14pt;
|
||||
font-weight: 400;
|
||||
color: #2C3E50
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
@@ -34,12 +107,19 @@ a:hover {
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
border-radius: 25px;
|
||||
}
|
||||
@@ -50,11 +130,6 @@ a:hover {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.btn-common:hover {
|
||||
border-color: #428bca;
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
@@ -70,6 +145,11 @@ a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#about,
|
||||
#songs {
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**Navigation**/
|
||||
|
||||
@@ -100,13 +180,15 @@ a:hover {
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav li a,
|
||||
.navbar-default .navbar-nav li a:hover {
|
||||
.navbar-default .navbar-nav li a:hover,
|
||||
.navbar-default .navbar-nav li a:focus {
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>.active,
|
||||
.navbar-default .navbar-nav li:hover {
|
||||
.navbar-default .navbar-nav li:hover,
|
||||
.navbar-default .navbar-nav li:focus {
|
||||
border-bottom: 3px solid #428bca;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -242,158 +324,6 @@ a:hover {
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
#services h3 {
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
color: #2576E5;
|
||||
}
|
||||
|
||||
|
||||
/*Portfolio*/
|
||||
|
||||
#portfolio {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
|
||||
/*Portfolio Overlay */
|
||||
|
||||
.portfolio-item {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.portfolio-item img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portfolio-item .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.portfolio-item .icons .preview {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 40%;
|
||||
color: #fff;
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.portfolio-item .icons .preview i {
|
||||
color: #2576E5;
|
||||
}
|
||||
|
||||
#clients {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#about {
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#contact ::-webkit-input-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact :-moz-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact ::-moz-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact :-ms-input-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact .social i {
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
margin-right: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
background: #34495e;
|
||||
}
|
||||
|
||||
#contact .social .social-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-facebook:hover {
|
||||
background: #3b5998;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-twitter:hover {
|
||||
background: #00CAFB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-google-plus:hover {
|
||||
background: #D23A1D;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-linkedin:hover {
|
||||
background: #007bb6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-dribbble:hover {
|
||||
background: #ea4c89;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-github:hover {
|
||||
background: #171515;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .contact-info {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#contact .contact-info p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#contact .contact-form .form-control {
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/*Scroll Top*/
|
||||
|
||||
.to-top i {
|
||||
@@ -413,6 +343,11 @@ a:hover {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
#download,
|
||||
#help {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
background: #F1F1F1;
|
||||
color: #333;
|
||||
@@ -519,12 +454,6 @@ a:hover {
|
||||
transition: all 0.27s ease-in-out;
|
||||
}
|
||||
|
||||
.contribute-icon {
|
||||
font-size: 65px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -532,50 +461,30 @@ a:hover {
|
||||
|
||||
/*Download Section*/
|
||||
|
||||
#download,
|
||||
#help {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border-radius: 10px;
|
||||
#download .card {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
#download .card h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
#download .card p {
|
||||
font-size: 14pt;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 100;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.nightly {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
|
||||
.nightly .release-date a {
|
||||
.dark-bg .release-date a {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.pre-release {
|
||||
background-color: #E74C3C;
|
||||
}
|
||||
|
||||
.pre-release .release-date a {
|
||||
.red-bg .release-date a {
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
.stable {
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.stable .release-date a {
|
||||
.blue-bg .release-date a {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
@@ -591,18 +500,10 @@ a:hover {
|
||||
|
||||
.btnDownload {
|
||||
margin: 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btnDownload:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btnDownloadIcon {
|
||||
/*flex: 0 0 auto;*/
|
||||
padding-right: 5px;
|
||||
/*font-size: 1em;*/
|
||||
}
|
||||
|
||||
.release-section {
|
||||
@@ -616,7 +517,7 @@ a:hover {
|
||||
.release-section {
|
||||
flex-direction: row;
|
||||
}
|
||||
.card {
|
||||
#download .card {
|
||||
max-width: 27%;
|
||||
min-width: 27%;
|
||||
}
|
||||
@@ -631,7 +532,7 @@ a:hover {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex00a {
|
||||
@@ -650,6 +551,63 @@ a:hover {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/*****Help*****/
|
||||
|
||||
#help .card,
|
||||
#contribute .card,
|
||||
#songs .card {
|
||||
border: 1px solid #2C3E50;
|
||||
background-color: #fff;
|
||||
margin: 15px;
|
||||
padding: 15px 5px 15px 5px;
|
||||
min-height: 175px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#help .card,
|
||||
#contribute .card,
|
||||
#songs .card {
|
||||
width: 29%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.help-text p,
|
||||
.contribute-text p,
|
||||
.song-text p {
|
||||
font-size: 12pt;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.help-text h2,
|
||||
.contribute-text h2,
|
||||
.song-text h2 {
|
||||
margin-top: 0pt;
|
||||
margin-bottom: 15pt;
|
||||
font-size: 24pt;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.help-icon,
|
||||
.contribute-icon,
|
||||
.song-icon {
|
||||
font-size: 26pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hover-overlay .help-icon,
|
||||
.hover-overlay .contribute-icon,
|
||||
.hover-overlay .song-icon {
|
||||
font-size: 45pt;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/**************/
|
||||
|
||||
/*****Songs****/
|
||||
|
||||
|
||||
/**************/
|
||||
.stamp {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
Reference in new issue
Block a user