refactor css
This commit is contained in:
Robert Kaussow
parent
e58c165488
commit
74f98d2e2f
@ -2,30 +2,34 @@
|
||||
<html lang="de">
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
<header class="main">
|
||||
<div class="banner">
|
||||
<span class="icon"><i class="fas fa-flask"></i></span>
|
||||
<span class="title">Geeklabor</span>
|
||||
<span class="underline">Linux und Open Source Blog</span>
|
||||
<header>
|
||||
<div class="site-header">
|
||||
<span class="site-header__icon test"><i class="fas fa-flask"></i></span>
|
||||
<span class="site-header__title">Geeklabor</span>
|
||||
<span class="site-header__description">Linux und Open Source Blog</span>
|
||||
</div>
|
||||
<div class="mobile" onclick="toogleClass('default-menu');"><span>Menu</span></div>
|
||||
<nav id="default-menu" class="default">
|
||||
<ul id="all-tags">
|
||||
|
||||
<div class="site-nav__mobile" onclick="toogleClass('default-menu');">
|
||||
<span class="site-nav__btn">Menu</span>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<ul class="site-nav__list">
|
||||
{{ $currentPage := .Permalink }}
|
||||
<li><a {{ if eq $currentPage (printf "%s" .Site.BaseURL) }}class="active"{{ end }} href="{{ .Site.BaseURL }}">Blog</a></li>
|
||||
<li><a class="site-nav__btn {{- if eq $currentPage (printf "%s" .Site.BaseURL) }} active {{- end }}" href="{{ .Site.BaseURL }}">Blog</a></li>
|
||||
{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
|
||||
{{ with $.Site.GetPage (printf "/categories/%s" $name) }}
|
||||
<li><a {{ if eq $currentPage .Permalink }}class="active"{{ end }} href="{{ .Permalink }}">{{ $name }}</a></li>
|
||||
<li><a class="site-nav__btn {{ if eq $currentPage .Permalink }} active {{ end }}" href="{{ .Permalink }}">{{ $name }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="content" class="container-centered">
|
||||
<div class="site-wrapper">
|
||||
<main class="site-content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
{{ define "main" }}
|
||||
<main class="content" role="main">
|
||||
{{ $paginator := .Paginate (where .Pages "Type" "post") }}
|
||||
{{ range $paginator.Pages }}
|
||||
<article class="blog-entry">
|
||||
<header>
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<article class="post">
|
||||
<header class="post__header">
|
||||
<h2 class="post__title"><a class="post__header--link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
</header>
|
||||
|
||||
<div class="entry-body">
|
||||
<section class="post__content">
|
||||
{{ .Summary }}
|
||||
{{ if .Truncated }}
|
||||
<div>
|
||||
<br><a class="read_more block_level" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen </a>
|
||||
<br><a class="post__content--more" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen </a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span class="break-wordwrap outline">
|
||||
@ -48,5 +47,4 @@
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ partial "pagination.html" . }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{ define "main" }}
|
||||
<main class="content" role="main">
|
||||
<article class="post page">
|
||||
<header class="post-header">
|
||||
<h2 class="post-title">{{ .Title }}</h2>
|
||||
<article class="post">
|
||||
<header>
|
||||
<h2 class="title">{{ .Title }}</h2>
|
||||
</header>
|
||||
<section class="post-content">
|
||||
<section class="content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<footer id="footer">
|
||||
<footer class="footer">
|
||||
{{ .Site.RSSLink }}
|
||||
<div class="container-centered">
|
||||
<div class="footer__block">
|
||||
{{ with .OutputFormats.Get "atom" -}}
|
||||
<span class="quickmenu-icon"><i class="fas fa-rss"></i> <a href="{{ .Permalink }}">Feed</a></span>
|
||||
<span class="footer__btn"><i class="fas fa-rss"></i> <a class="footer__btn--link" href="{{ .Permalink }}">Feed</a></span>
|
||||
{{ end }}
|
||||
<span class="quickmenu-icon"><i class="fas fa-envelope"></i> <a href="#">Kontakt</a></span>
|
||||
<span class="quickmenu-icon"><i class="fas fa-user-lock"></i> <a href="#">Impressum/Datenschutz</a></span>
|
||||
<span>Artikel unter <a class="cc-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> BY-NC-SA 4.0</a></span>
|
||||
<span class="footer__btn"><i class="fas fa-envelope"></i> <a class="footer__btn--link" href="#">Kontakt</a></span>
|
||||
<span class="footer__btn"><i class="fas fa-user-lock"></i> <a class="footer__btn--link" href="#">Impressum/Datenschutz</a></span>
|
||||
<span>Artikel unter <a class="footer__btn--link" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></span>
|
||||
</div>
|
||||
<div class="container-centered">
|
||||
Build with <a href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/>
|
||||
Hosted on <a href="https://uberspace.de/">Uberspace</a>
|
||||
<div class="footer__block">
|
||||
Build with <a class="footer__btn--link" href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/>
|
||||
Hosted on <a class="footer__btn--link" href="https://uberspace.de/">Uberspace</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -28,19 +28,9 @@ html{
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Global Helper Classes
|
||||
*/
|
||||
.serendipity_edit_nugget{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.container-centered{
|
||||
margin:0 auto;
|
||||
width:80%;
|
||||
max-width:980px;
|
||||
}
|
||||
.table{
|
||||
display:table;
|
||||
}
|
||||
@ -54,77 +44,49 @@ html{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
span#mailinvite::before,
|
||||
span#mailinvite:before{
|
||||
content: "mail\40";
|
||||
}
|
||||
span#mailinvite::after,
|
||||
span#mailinvite:after{
|
||||
content: ".de";
|
||||
}
|
||||
#badmail,
|
||||
.serendipity_comment_s9ymarkup,
|
||||
.serendipity_comment_emoticate,
|
||||
.serendipity_comment_spamblock,
|
||||
.serendipity_comment_gravatar,
|
||||
.serendipity_comment_markdown,
|
||||
.comment_phone_input
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
.comment_avatar{
|
||||
border-radius: 50%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
#trackbacks a {
|
||||
white-space: nowrap;
|
||||
margin: 0.5em 0 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Global Blog Header
|
||||
*/
|
||||
header.main .banner {
|
||||
.site-header {
|
||||
background: #4186C9;
|
||||
padding: 2em 0;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
header.main .icon {
|
||||
.site-header__icon {
|
||||
font-size: 2.5em;
|
||||
background: #FFF;
|
||||
padding: 0 0.25em;
|
||||
border-radius: 50%;
|
||||
color: #4186C9;
|
||||
}
|
||||
header.main .title {
|
||||
.site-header__title {
|
||||
font-size: 2.5em;
|
||||
font-family:CreteRound;
|
||||
font-weight: normal;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
header.main .underline {
|
||||
.site-header__description {
|
||||
display: block;
|
||||
margin: 0.8em 0 0.5em;
|
||||
}
|
||||
header.main nav,
|
||||
header.main div.mobile {
|
||||
.site-nav,
|
||||
.site-nav__mobile {
|
||||
background: #2F333E;
|
||||
text-align: center;
|
||||
color: #D9D9D9;
|
||||
}
|
||||
header.main nav.default,
|
||||
header.main nav.default.visible {
|
||||
.site-nav {
|
||||
display: block;
|
||||
}
|
||||
header.main div.mobile {
|
||||
.site-nav__mobile {
|
||||
display: none;
|
||||
}
|
||||
header.main a,
|
||||
div.mobile span{
|
||||
.site-nav__mobile span {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
.site-nav__btn{
|
||||
color: #D9D9D9;
|
||||
text-decoration: none;
|
||||
padding: 0.2em 0.5em;
|
||||
@ -132,82 +94,57 @@ div.mobile span{
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
header.main a:hover,
|
||||
header.main a.active,
|
||||
div.mobile span:hover {
|
||||
.site-nav__btn:hover,
|
||||
.site-nav__btn.active {
|
||||
background: #3D4352;
|
||||
cursor: pointer;
|
||||
}
|
||||
header.main nav ul{
|
||||
.site-nav__list{
|
||||
margin:0;
|
||||
padding: 0.8em 0;
|
||||
}
|
||||
header.main nav ul li {
|
||||
.site-nav__list li {
|
||||
display:inline-block;
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
|
||||
div.mobile span {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
#mobile-menu{
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Content Section
|
||||
*/
|
||||
#wrapper {
|
||||
.site-wrapper {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
}
|
||||
#content{
|
||||
padding-bottom:110px;
|
||||
.site-content,
|
||||
.footer__block {
|
||||
margin:0 auto;
|
||||
width:80%;
|
||||
max-width:980px;
|
||||
}
|
||||
#content .blog-entry:first-child{
|
||||
border:0;
|
||||
}
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.blog-entry,
|
||||
#entry-comment{
|
||||
|
||||
.post {
|
||||
word-wrap: break-word;
|
||||
border-top:1px dashed #959595;
|
||||
padding:1.5em 0;
|
||||
margin: 1.5em 2em;
|
||||
}
|
||||
.serendipity_staticpage {
|
||||
border: none;
|
||||
.post:first-child{
|
||||
border:0;
|
||||
}
|
||||
.blog-entry,
|
||||
#entry-comment,
|
||||
#pagenav{
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.blog-entry img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.blog-entry header a{
|
||||
.post__header--link {
|
||||
color:#000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.blog-entry header a:hover{
|
||||
.post__header--link:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
.post__title {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.blog-entry .entry-body a,
|
||||
.blog-entry .entry-body-extended a,
|
||||
.blog-entry .entry-extended a,
|
||||
.blog-entry footer a,
|
||||
.serendipity_staticpage a,
|
||||
#entry-comment a{
|
||||
.post__content--more,
|
||||
.blog-entry footer a {
|
||||
color:#0A539A;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -231,12 +168,8 @@ h2 {
|
||||
#comments{
|
||||
padding-bottom:1em;
|
||||
}
|
||||
.blog-entry .entry-body a:hover,
|
||||
.blog-entry .entry-body-extended a:hover,
|
||||
.blog-entry .entry-extended a:hover,
|
||||
.blog-entry footer a:hover,
|
||||
.serendipity_staticpage a:hover,
|
||||
#entry-comment a:hover{
|
||||
|
||||
.post__content--more:hover {
|
||||
background:#0A539A;
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
@ -251,28 +184,16 @@ h2 {
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
#comments .viewmode-active{
|
||||
background:#EAEAEA;
|
||||
}
|
||||
a.read_more:after{
|
||||
|
||||
.post__content--more:after {
|
||||
content:' \f30b';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
a.read_more{
|
||||
.post__content--more {
|
||||
margin-bottom: 1.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.cc-license:before{
|
||||
content:' \f25e';
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
}
|
||||
a.cc-license{
|
||||
margin-bottom: 1.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#trackbacks{
|
||||
padding:3em 0 1.5em 0;
|
||||
}
|
||||
@ -357,16 +278,6 @@ a.cc-license{
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
.serendipity_image_left{
|
||||
display:block;
|
||||
float: left;
|
||||
margin: 0 2em 1em 0
|
||||
}
|
||||
.serendipity_image_center {
|
||||
display: block;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
|
||||
.geshi{
|
||||
font-size:13px!important;
|
||||
font-family: monospace;
|
||||
@ -380,29 +291,30 @@ a.cc-license{
|
||||
/*
|
||||
Global Blog Footer
|
||||
*/
|
||||
#footer {
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
bottom: -7.6em;
|
||||
width: 100%;
|
||||
background:#2F333E;
|
||||
color:#FFFFFF;
|
||||
padding:10px 0;
|
||||
background: #2F333E;
|
||||
color: #FFFFFF;
|
||||
padding: 1em 0;
|
||||
}
|
||||
#footer div{
|
||||
.footer__block {
|
||||
line-height:30px;
|
||||
}
|
||||
#footer a{
|
||||
.footer__btn--link {
|
||||
color:#FFA31E;
|
||||
text-decoration:underline;
|
||||
}
|
||||
#footer a:hover{
|
||||
.footer__btn--link:hover{
|
||||
background:#FFA31E;
|
||||
color:#000000;
|
||||
text-decoration:none;
|
||||
}
|
||||
#footer .quickmenu-icon{
|
||||
.footer__btn {
|
||||
margin:0 10px 0 0;
|
||||
}
|
||||
|
||||
/* page navigation */
|
||||
#pagenav{
|
||||
margin-top:1em;
|
||||
@ -438,156 +350,6 @@ a.cc-license{
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
search field
|
||||
*/
|
||||
#serendipityQuickSearchTermField{
|
||||
height: 2em;
|
||||
width: 15em;
|
||||
border: 1px solid #595959;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2em;
|
||||
font-family:OpenSansLight, Arial;
|
||||
padding:0 2em 0 2em;
|
||||
margin: 1.5em 0 0 0;
|
||||
}
|
||||
.serendipity_searchQuery{
|
||||
background:#FAFF86;
|
||||
}
|
||||
i.fa-search {
|
||||
position: absolute;
|
||||
color: #A6A6A6;
|
||||
font-size: 1.2em;
|
||||
top: 2em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
header.main .wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*
|
||||
contact form
|
||||
*/
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
width:55%;
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
border-right: 0px none;
|
||||
}
|
||||
.input-group .form-control:first-child, .input-group-addon:first-child{
|
||||
border-bottom-right-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
.input-group-addon {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
background: #EEE;
|
||||
border: 1px solid #CCC;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.margin-bottom-sm {
|
||||
margin-bottom: 5px !important;
|
||||
display:table;
|
||||
}
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
.input-group .form-control {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857;
|
||||
color: #555;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
#serendipity_comment textarea{
|
||||
position:relative;
|
||||
font-family:OpenSans;
|
||||
border: 1px solid #CCC;
|
||||
padding:5px;
|
||||
width:80%;
|
||||
max-width: 100%;
|
||||
min-height:180px;
|
||||
margin:2% 0;
|
||||
}
|
||||
|
||||
form#serendipity_comment{
|
||||
margin:25px 0 0 0;
|
||||
}
|
||||
.serendipity_comment{
|
||||
position:relative;
|
||||
margin:0 0 10px 0;
|
||||
}
|
||||
.serendipity_comment.commentlevel-0 { margin-top:35px; }
|
||||
.commentlevel-1 { padding-left: 1em; }
|
||||
.commentlevel-2 { padding-left: 2em; }
|
||||
.commentlevel-3 { padding-left: 3em; }
|
||||
.commentlevel-4 { padding-left: 4em; }
|
||||
.commentlevel-5 { padding-left: 5em; }
|
||||
.commentlevel-6 { padding-left: 6em; }
|
||||
.commentlevel-7 { padding-left: 7em; }
|
||||
.commentlevel-8 { padding-left: 8em; }
|
||||
.commentlevel-9 { padding-left: 9em; }
|
||||
.serendipity_comment h4{
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
.serendipity_comment .table-cell{
|
||||
vertical-align:top;
|
||||
|
||||
}
|
||||
.serendipity_comment div.avatar{
|
||||
position:absolute;
|
||||
}
|
||||
#entry-comment .serendipity_comment div.content{
|
||||
margin-left:75px;
|
||||
}
|
||||
.manage_comments{
|
||||
margin-bottom:25px;
|
||||
}
|
||||
#serendipity_comment .form_button{
|
||||
margin:20px 0 0 0;
|
||||
}
|
||||
#serendipity_comment .form_button input{
|
||||
margin:0 10px 0 0;
|
||||
}
|
||||
#contacts{
|
||||
padding:20px 0 0 0;
|
||||
}
|
||||
#contacts div{
|
||||
padding:2px 0;
|
||||
}
|
||||
#serendipity_replyTo{
|
||||
width: 39%;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content_msg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (max-device-width: 900px),
|
||||
all and (max-width: 900px){
|
||||
.container-centered{
|
||||
@ -623,10 +385,10 @@ all and (max-width: 900px){
|
||||
header.main nav.default {
|
||||
display: none;
|
||||
}
|
||||
header.main div.mobile {
|
||||
.site-nav__mobile {
|
||||
display: block;
|
||||
}
|
||||
header.main .banner {
|
||||
.site-header__banner{
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user