svg ornament for headlines and lists. refine basic styles. header styles

This commit is contained in:
ut 2018-10-30 17:35:22 +01:00
parent d0bfff9ff2
commit 703faf9e4b
3 changed files with 122 additions and 15 deletions

View file

@ -14,7 +14,7 @@
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='stylesheet' id='fonts-css' href='/wp-content/themes/FoundationPress/dist/assets/fonts/HKGrotesk/stylesheet.css' type='text/css' media='all' />
<link rel='stylesheet' id='fonts-css' href='/wp-content/themes/hamburg-freifunk-wp-theme/dist/assets/fonts/HKGrotesk/stylesheet.css' type='text/css' media='all' />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

View file

@ -0,0 +1,21 @@
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="9.7919159mm"
height="9.3790073mm"
viewBox="0 0 9.7919159 9.3790073"
version="1.1"
id="svg4573">
<g
id="layer1"
transform="translate(-102.99615,-74.523803)">
<path
transform="matrix(0.58347846,-0.54846595,0.51986949,0.55305645,65.205892,67.191764)"
style="fill:#ffcc33;fill-opacity:1"
d="m 26,56 h 5 l 6,-6 -6,-6 h -5 l 4,4 h -8 v 4 h 8 z"
id="polygon825-8-44-1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 680 B

View file

@ -13,15 +13,69 @@ body {
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: hk_groteskbold, "Helvetica Neue", sans-serif;
}
h6 {
font-family: hk_groteskbold, "Helvetica Neue", sans-serif;
text-transform: uppercase;
font-weight: normal;
}
.title-bar-left {
padding-left: 10px;
.menu-icon {
width: 18px;
}
a {
font-size: 1.2rem;
}
}
.title-bar-title {
padding-left: 5px;
}
.top-bar {
.menu {
margin-right: 1rem;
li, li:not(:last-child) {
border-right: 0px solid #4e4e4e;
margin: 1rem 0;
a {
color: #e6e6e6;
padding: 1rem;
font-weight: normal;
font-size: 18px;
line-height: 1;
}
a::before {
content: url('../images/freifunk_pfeil.svg');
display: inline-block;
color: #ffb400;
line-height: 0;
transform: scale(0.6);
vertical-align: -10px;
width: 38px;
@media screen and (max-width: 39.9375em) {
transform: scale(0.5);
vertical-align: -10px;
width: 42px;
}
}
}
}
}
p, li, blockquote {
margin-bottom: 1rem;
font-size: inherit;
line-height: 1.6;
text-rendering: optimizeLegibility;
font-size: 20px;
@media screen and (max-width: 39.9375em) {
line-height: 1.5;
font-size: 18px;
}
}
.main-container {
a {
color: $freifunk-color-magenta;
@ -37,28 +91,29 @@ p, li, blockquote {
}
}
h1.entry-title, h2.entry-title {
margin-left: -30px;
margin-left: -16px;
color: $freifunk-color-magenta;
@media screen and (max-width: 39.9375em) {
font-size: 1.55rem;
margin-left: -10px;
margin-left: -8px;
}
}
h1.entry-title::before,
h2.entry-title::before {
content: "";
content: url('../images/freifunk_pfeil.svg');
display: inline-block;
padding-left: 0;
height: 0;
width: 0;
color: rgb(255,180,0);
transform: rotate(-45deg);
line-height: 1;
padding-right: 60px;
color: #ffb400;
line-height: 0;
transform: scale(0.7);
vertical-align: -5px;
width: 48px;
@media screen and (max-width: 39.9375em) {
font-size: 1.55rem;
padding-right: 36px;
transform: scale(0.55);
vertical-align: -10px;
width: 42px;
}
}
@ -84,9 +139,15 @@ p, li, blockquote {
color: #644;
border-bottom: 2px solid #644;
}
a:hover {
color: #644;
border-bottom: 4px solid #644;
}
}
aside.sidebar .menu {
aside.sidebar .menu,
aside.sidebar .widget
{
-webkit-flex-wrap: unset;
-ms-flex-wrap: unset;
flex-wrap: unset;
@ -97,8 +158,33 @@ p, li, blockquote {
ul {
list-style-type: none;
margin-left: 0;
li {
margin: 1.5rem 0;
}
li::before {
a {
padding: 1rem;
border-bottom: none;
}
a:hover {
background-color: #e0e0f0;
background-color: #e6e6f0;
}
a::before {
content: url('../images/freifunk_pfeil.svg');
display: inline-block;
color: #ffb400;
line-height: 0;
transform: scale(0.6);
vertical-align: -10px;
width: 38px;
@media screen and (max-width: 39.9375em) {
transform: scale(0.5);
vertical-align: -10px;
width: 42px;
}
}
}
li::beforeX {
content: "";
display: inline-block;
padding-left: 0;