Try to fix font awesome

This commit is contained in:
L3D 2019-02-12 14:54:29 +01:00
parent b82cc1a1b1
commit c8cbe60102
5 changed files with 192 additions and 239 deletions

View file

@ -3,161 +3,114 @@
html5up.net | @ajlkn html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/ */
/* Basic */ /* Basic */
body {
body { -ms-behavior: url("assets/js/backgroundsize.min.htc"); }
-ms-behavior: url("assets/js/backgroundsize.min.htc");
}
/* Type */ /* Type */
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
border-bottom: solid 2px #ffffff; }
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { blockquote {
border-bottom: solid 2px #ffffff; border-left: solid 4px #ffffff; }
}
blockquote { code {
border-left: solid 4px #ffffff; border: solid 2px #ffffff; }
}
code { hr {
border: solid 2px #ffffff; border-bottom: solid 2px #ffffff; }
}
hr {
border-bottom: solid 2px #ffffff;
}
/* Button */ /* Button */
input[type="submit"],
input[type="submit"], input[type="reset"],
input[type="reset"], input[type="button"],
input[type="button"], button,
button, .button {
.button { position: relative;
position: relative; -ms-behavior: url("assets/js/ie/PIE.htc");
-ms-behavior: url("assets/js/ie/PIE.htc"); border: solid 2px #ffffff; }
border: solid 2px #ffffff; input[type="submit"].special,
} input[type="reset"].special,
input[type="button"].special,
input[type="submit"].special, button.special,
input[type="reset"].special, .button.special {
input[type="button"].special, border: 0; }
button.special,
.button.special {
border: 0;
}
/* Form */ /* Form */
input[type="text"],
input[type="text"], input[type="password"],
input[type="password"], input[type="email"],
input[type="email"], input[type="tel"],
input[type="tel"], select,
select, textarea {
textarea { position: relative;
position: relative; -ms-behavior: url("assets/js/ie/PIE.htc");
-ms-behavior: url("assets/js/ie/PIE.htc"); background: transparent;
background: transparent; border: solid 2px #ffffff; }
border: solid 2px #ffffff;
}
/* Table */ /* Table */
table tbody tr {
border: solid 1px #ffffff;
border-left: 0;
border-right: 0; }
table tbody tr { table.alt tbody tr td {
border: solid 1px #ffffff; border: solid 1px #ffffff;
border-left: 0; border-left-width: 0;
border-right: 0; border-top-width: 0; }
} table.alt tbody tr td:first-child {
border-left-width: 1px; }
table.alt tbody tr td { table.alt tbody tr:first-child td {
border: solid 1px #ffffff; border-top-width: 1px; }
border-left-width: 0;
border-top-width: 0;
}
table.alt tbody tr td:first-child { table.alt thead {
border-left-width: 1px; border-bottom: 0; }
}
table.alt tbody tr:first-child td { table.alt tfoot {
border-top-width: 1px; border-top: 0; }
}
table.alt thead {
border-bottom: 0;
}
table.alt tfoot {
border-top: 0;
}
/* Features */ /* Features */
.features article {
.features article { -ms-behavior: url("assets/js/ie/PIE.htc");
-ms-behavior: url("assets/js/ie/PIE.htc"); position: relative;
position: relative; width: 44%; }
width: 44%; .features article .image {
} margin-top: 0;
margin-left: 0;
.features article .image { width: 100%; }
margin-top: 0;
margin-left: 0;
width: 100%;
}
/* Menu */ /* Menu */
#menu {
#menu { background: #2e3141; }
background: #2e3141; #menu h2 {
} border-bottom: solid 2px #ffffff; }
#menu h2 {
border-bottom: solid 2px #ffffff;
}
/* Header */ /* Header */
#header {
#header { background-color: #353849; }
background-color: #353849;
}
/* Wrapper */ /* Wrapper */
.wrapper {
.wrapper { margin: 0; }
margin: 0; .wrapper:before, .wrapper:after {
} display: none; }
.wrapper.spotlight .image {
.wrapper:before, .wrapper:after { -ms-behavior: url("assets/js/ie/PIE.htc"); }
display: none; .wrapper.spotlight .image img {
} position: relative;
-ms-behavior: url("assets/js/ie/PIE.htc"); }
.wrapper.spotlight .image {
-ms-behavior: url("assets/js/ie/PIE.htc");
}
.wrapper.spotlight .image img {
position: relative;
-ms-behavior: url("assets/js/ie/PIE.htc");
}
/* Banner */ /* Banner */
#banner .logo .icon {
border: solid 2px #ffffff;
-ms-behavior: url("assets/js/ie/PIE.htc"); }
#banner .logo .icon { #banner h2 {
border: solid 2px #ffffff; border-bottom: solid 2px #ffffff; }
-ms-behavior: url("assets/js/ie/PIE.htc");
}
#banner h2 {
border-bottom: solid 2px #ffffff;
}
/* Footer */ /* Footer */
#footer .inner .copyright {
#footer .inner .copyright { border-top: solid 2px #ffffff; }
border-top: solid 2px #ffffff; #footer .inner .copyright li {
} border-left: solid 2px #ffffff; }
#footer .inner .copyright li {
border-left: solid 2px #ffffff;
}

View file

@ -3,87 +3,63 @@
html5up.net | @ajlkn html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/ */
/* Basic */ /* Basic */
body {
body { background-color: #2e3141;
background-color: #2e3141; background-image: url("../../images/bg.jpg");
background-image: url("../../images/bg.jpg"); background-size: cover;
background-size: cover; background-attachment: fixed;
background-attachment: fixed; background-position: center; }
background-position: center; body:before {
} background: rgba(46, 49, 65, 0.8);
content: '';
body:before { display: block;
background: rgba(46, 49, 65, 0.8); height: 100%;
content: ''; left: 0;
display: block; position: fixed;
height: 100%; top: 0;
left: 0; width: 100%; }
position: fixed; body > * {
top: 0; position: relative;
width: 100%; z-index: 1; }
}
body > * {
position: relative;
z-index: 1;
}
/* Features */ /* Features */
.features article {
.features article { display: inline-block;
display: inline-block; width: 45%; }
width: 45%;
}
/* Menu */ /* Menu */
#menu .inner {
#menu .inner { margin: 4em auto; }
margin: 4em auto;
}
/* Wrapper */ /* Wrapper */
#wrapper > header {
background: none !important; }
#wrapper > header { .wrapper.spotlight .inner {
background: none !important; text-align: left !important; }
}
.wrapper.spotlight .inner { .wrapper.spotlight .image {
text-align: left !important; display: inline-block;
} margin: 0 3em 2em 0 !important;
vertical-align: middle;
width: 24%; }
.wrapper.spotlight .image { .wrapper.spotlight .content {
display: inline-block; display: inline-block;
margin: 0 3em 2em 0 !important; vertical-align: middle;
vertical-align: middle; width: 70%; }
width: 24%;
}
.wrapper.spotlight .content {
display: inline-block;
vertical-align: middle;
width: 70%;
}
/* Banner */ /* Banner */
#banner {
#banner { background: none !important; }
background: none !important;
}
/* Footer */ /* Footer */
#footer {
#footer { background: none !important; }
background: none !important; #footer .inner form {
} display: inline-block;
width: 45%; }
#footer .inner form { #footer .inner .contact {
display: inline-block; display: inline-block;
width: 45%; width: 45%; }
}
#footer .inner .contact {
display: inline-block;
width: 45%;
}

View file

@ -1069,12 +1069,9 @@ a {
margin: 0 0 2em 0; margin: 0 0 2em 0;
text-transform: uppercase; } text-transform: uppercase; }
a.special:not(.button):before { a.special:not(.button):before {
-moz-osx-font-smoothing: grayscale; font-family: "Font Awesome 5 Free";
-webkit-font-smoothing: antialiased; font-weight: 400;
font-family: FontAwesome; }
font-style: normal;
font-weight: normal;
text-transform: none !important; }
a.special:not(.button):before { a.special:not(.button):before {
-moz-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out;
@ -1262,11 +1259,16 @@ textarea {
display: block; display: block;
position: relative; } position: relative; }
.select-wrapper:before { .select-wrapper:before {
font-family: "Font Awesome 5 Free";
/* updated font-family */
font-weight: 400;
/* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
*/
text-transform: none !important; } text-transform: none !important; }
.select-wrapper:before { .select-wrapper:before {
color: rgba(255, 255, 255, 0.125); color: rgba(255, 255, 255, 0.125);
@ -1324,11 +1326,16 @@ input[type="radio"] {
position: relative; } position: relative; }
input[type="checkbox"] + label:before, input[type="checkbox"] + label:before,
input[type="radio"] + label:before { input[type="radio"] + label:before {
font-family: "Font Awesome 5 Free";
/* updated font-family */
font-weight: 400;
/* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
*/
text-transform: none !important; } text-transform: none !important; }
input[type="checkbox"] + label:before, input[type="checkbox"] + label:before,
input[type="radio"] + label:before { input[type="radio"] + label:before {
@ -1401,11 +1408,16 @@ input[type="radio"] + label:before {
border-bottom: none; border-bottom: none;
position: relative; } position: relative; }
.icon:before { .icon:before {
font-family: "Font Awesome 5 Free";
/* updated font-family */
font-weight: 400;
/* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
*/
text-transform: none !important; } text-transform: none !important; }
.icon > .label { .icon > .label {
display: none; } display: none; }
@ -1543,11 +1555,16 @@ ul {
padding: 0 0 0 3.25em; padding: 0 0 0 3.25em;
position: relative; } position: relative; }
ul.contact li:before { ul.contact li:before {
font-family: "Font Awesome 5 Free";
/* updated font-family */
font-weight: 400;
/* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
*/
text-transform: none !important; } text-transform: none !important; }
ul.contact li:before { ul.contact li:before {
border-radius: 100%; border-radius: 100%;
@ -1880,11 +1897,16 @@ button,
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
padding: 0 1.35em; } padding: 0 1.35em; }
#header nav a[href="#menu"]:before { #header nav a[href="#menu"]:before {
font-family: "Font Awesome 5 Free";
/* updated font-family */
font-weight: 400;
/* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
*/
text-transform: none !important; } text-transform: none !important; }
#header nav a[href="#menu"]:before { #header nav a[href="#menu"]:before {
content: '\f0c9'; } content: '\f0c9'; }

View file

@ -11,12 +11,14 @@
content: $content; content: $content;
} }
font-family: "Font Awesome 5 Free"; /* updated font-family */
font-weight: 400; /* regular style/weight */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; /* font-family: "Font Awesome 5 Free";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
text-transform: none !important; */ text-transform: none !important;
} }

View file

@ -86,14 +86,14 @@
<form> <form>
<img src="{{ '/images/c3woc.svg'|url }}" style="width: 100%;"/> <img src="{{ '/images/c3woc.svg'|url }}" style="width: 100%;"/>
</form> </form>
<ul class="contact"> <ul class="contact">{%
{% for icon, link, name in [ for icon, link, name in [
['fa-envelope', 'mailto:waffel@c3woc.de', 'mail'], ['fas fa-envelope', 'mailto:waffel@c3woc.de', 'mail'],
['fa-hashtag', 'ircs://irc.hackint.org/#waffel', 'irc'], ['fas fa-hashtag', 'ircs://irc.hackint.org/#waffel', 'irc'],
['fa-hashtag', 'https://webirc.hackint.org/#irc://irc.hackint.org/#waffel', 'webirc'], ['fab fa-slack', 'https://webirc.hackint.org/#irc://irc.hackint.org/#waffel', 'webirc'],
['fa-twitter', 'https://twitter.com/@c3WOC', 'twitter'], ['fab fa-mastodon', 'https://chaos.social/@c3WOC', 'mastodon'],
['fa-comments', 'https://chaos.social/@c3WOC', 'mastodon'], ['fab fa-twitter', 'https://twitter.com/@c3WOC', 'twitter'],
['fa-user-plus', '/mitmachen/'|url , 'invite'] ['fas fa-handshake', '/mitmachen/'|url , 'invite']
] %} ] %}
<li class="{{ icon }}"><a href="{{ link }}">{% if bag('translate', this.alt, name) %}{{ bag('translate', this.alt, name) }}{% <li class="{{ icon }}"><a href="{{ link }}">{% if bag('translate', this.alt, name) %}{{ bag('translate', this.alt, name) }}{%
else %}{{ name }}{% endif %}</a></li>{% else %}{{ name }}{% endif %}</a></li>{%