xoxys/theme-geeklab
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor css

Browse Source
This commit is contained in:
Robert Kaussow 2018-10-10 16:56:52 +02:00
parent e58c165488
commit 74f98d2e2f
5 changed files with 87 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
layouts/_default/baseof.html
View File

@ -2,30 +2,34 @@
<html lang="de"> <html lang="de">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<header class="main"> <header>
<div class="banner"> <div class="site-header">
<span class="icon"><i class="fas fa-flask"></i></span> <span class="site-header__icon test"><i class="fas fa-flask"></i></span>
<span class="title">Geeklabor</span> <span class="site-header__title">Geeklabor</span>
<span class="underline">Linux und Open Source Blog</span> <span class="site-header__description">Linux und Open Source Blog</span>
</div> </div>
<div class="mobile" onclick="toogleClass('default-menu');"><span>Menu</span></div>
<nav id="default-menu" class="default"> <div class="site-nav__mobile" onclick="toogleClass('default-menu');">
<ul id="all-tags"> <span class="site-nav__btn">Menu</span>
</div>
<nav class="site-nav">
<ul class="site-nav__list">
{{ $currentPage := .Permalink }} {{ $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 }} {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
{{ with $.Site.GetPage (printf "/categories/%s" $name) }} {{ 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 }}
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
</header> </header>
<div id="wrapper"> <div class="site-wrapper">
<div id="content" class="container-centered"> <main class="site-content">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div> </main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</div> </div>

14
layouts/_default/list.html
View File

@ -1,20 +1,19 @@
{{ define "main" }} {{ define "main" }}
<main class="content" role="main">
{{ $paginator := .Paginate (where .Pages "Type" "post") }} {{ $paginator := .Paginate (where .Pages "Type" "post") }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<article class="blog-entry"> <article class="post">
<header> <header class="post__header">
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2> <h2 class="post__title"><a class="post__header--link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
</header> </header>
<div class="entry-body"> <section class="post__content">
{{ .Summary }} {{ .Summary }}
{{ if .Truncated }} {{ if .Truncated }}
<div> <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> </div>
{{ end }} {{ end }}
</div> </section>
<footer> <footer>
<span class="break-wordwrap outline"> <span class="break-wordwrap outline">
@ -48,5 +47,4 @@
</article> </article>
{{ end }} {{ end }}
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
</main>
{{ end }} {{ end }}

8
layouts/_default/single.html
View File

@ -1,10 +1,10 @@
{{ define "main" }} {{ define "main" }}
<main class="content" role="main"> <main class="content" role="main">
<article class="post page"> <article class="post">
<header class="post-header"> <header>
<h2 class="post-title">{{ .Title }}</h2> <h2 class="title">{{ .Title }}</h2>
</header> </header>
<section class="post-content"> <section class="content">
{{ .Content }} {{ .Content }}
</section> </section>
</article> </article>

18
layouts/partials/footer.html
View File

@ -1,15 +1,15 @@
<footer id="footer"> <footer class="footer">
{{ .Site.RSSLink }} {{ .Site.RSSLink }}
<div class="container-centered"> <div class="footer__block">
{{ with .OutputFormats.Get "atom" -}} {{ 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 }} {{ end }}
<span class="quickmenu-icon"><i class="fas fa-envelope"></i> <a href="#">Kontakt</a></span> <span class="footer__btn"><i class="fas fa-envelope"></i> <a class="footer__btn--link" href="#">Kontakt</a></span>
<span class="quickmenu-icon"><i class="fas fa-user-lock"></i> <a href="#">Impressum/Datenschutz</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="cc-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> BY-NC-SA 4.0</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>
<div class="container-centered"> <div class="footer__block">
Build with <a href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/> Build with <a class="footer__btn--link" href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/>
Hosted on <a href="https://uberspace.de/">Uberspace</a> Hosted on <a class="footer__btn--link" href="https://uberspace.de/">Uberspace</a>
</div> </div>
</footer> </footer>

336
static/_css/style.css
View File

@ -28,19 +28,9 @@ html{
box-sizing: inherit; box-sizing: inherit;
} }
/* /*
Global Helper Classes Global Helper Classes
*/ */
.serendipity_edit_nugget{
display:none;
}
.container-centered{
margin:0 auto;
width:80%;
max-width:980px;
}
.table{ .table{
display:table; display:table;
} }
@ -54,77 +44,49 @@ html{
clear:both; 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 Global Blog Header
*/ */
header.main .banner { .site-header {
background: #4186C9; background: #4186C9;
padding: 2em 0; padding: 2em 0;
text-align: center; text-align: center;
color: #FFF; color: #FFF;
} }
header.main .icon { .site-header__icon {
font-size: 2.5em; font-size: 2.5em;
background: #FFF; background: #FFF;
padding: 0 0.25em; padding: 0 0.25em;
border-radius: 50%; border-radius: 50%;
color: #4186C9; color: #4186C9;
} }
header.main .title { .site-header__title {
font-size: 2.5em; font-size: 2.5em;
font-family:CreteRound; font-family:CreteRound;
font-weight: normal; font-weight: normal;
padding-left: 0.3em; padding-left: 0.3em;
} }
header.main .underline { .site-header__description {
display: block; display: block;
margin: 0.8em 0 0.5em; margin: 0.8em 0 0.5em;
} }
header.main nav, .site-nav,
header.main div.mobile { .site-nav__mobile {
background: #2F333E; background: #2F333E;
text-align: center; text-align: center;
color: #D9D9D9; color: #D9D9D9;
} }
header.main nav.default, .site-nav {
header.main nav.default.visible {
display: block; display: block;
} }
header.main div.mobile { .site-nav__mobile {
display: none; display: none;
} }
header.main a, .site-nav__mobile span {
div.mobile span{ margin: 0.8em 0;
}
.site-nav__btn{
color: #D9D9D9; color: #D9D9D9;
text-decoration: none; text-decoration: none;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
@ -132,82 +94,57 @@ div.mobile span{
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
} }
header.main a:hover, .site-nav__btn:hover,
header.main a.active, .site-nav__btn.active {
div.mobile span:hover {
background: #3D4352; background: #3D4352;
cursor: pointer; cursor: pointer;
} }
header.main nav ul{ .site-nav__list{
margin:0; margin:0;
padding: 0.8em 0; padding: 0.8em 0;
} }
header.main nav ul li { .site-nav__list li {
display:inline-block; display:inline-block;
margin: 0 0.3em; margin: 0 0.3em;
} }
div.mobile span {
margin: 0.8em 0;
}
#mobile-menu{
display:none;
}
/* /*
Content Section Content Section
*/ */
#wrapper { .site-wrapper {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
height: 100%; height: 100%;
} }
#content{ .site-content,
padding-bottom:110px; .footer__block {
margin:0 auto;
width:80%;
max-width:980px;
} }
#content .blog-entry:first-child{
border:0; .post {
}
h2 {
font-weight: normal;
}
.blog-entry,
#entry-comment{
word-wrap: break-word; word-wrap: break-word;
border-top:1px dashed #959595; border-top:1px dashed #959595;
padding:1.5em 0; margin: 1.5em 2em;
} }
.serendipity_staticpage { .post:first-child{
border: none; border:0;
} }
.blog-entry, .post__header--link {
#entry-comment,
#pagenav{
margin-left: 2em;
margin-right: 2em;
}
.blog-entry img{
max-width: 100%;
height: auto;
}
.blog-entry header a{
color:#000000; color:#000000;
text-decoration: none; text-decoration: none;
} }
.blog-entry header a:hover{ .post__header--link:hover{
text-decoration: underline; text-decoration: underline;
} }
.post__title {
font-weight: normal;
}
.blog-entry .entry-body a, .post__content--more,
.blog-entry .entry-body-extended a, .blog-entry footer a {
.blog-entry .entry-extended a,
.blog-entry footer a,
.serendipity_staticpage a,
#entry-comment a{
color:#0A539A; color:#0A539A;
text-decoration: underline; text-decoration: underline;
} }
@ -231,12 +168,8 @@ h2 {
#comments{ #comments{
padding-bottom:1em; padding-bottom:1em;
} }
.blog-entry .entry-body a:hover,
.blog-entry .entry-body-extended a:hover, .post__content--more:hover {
.blog-entry .entry-extended a:hover,
.blog-entry footer a:hover,
.serendipity_staticpage a:hover,
#entry-comment a:hover{
background:#0A539A; background:#0A539A;
color:#FFFFFF; color:#FFFFFF;
text-decoration:none; text-decoration:none;
@ -251,28 +184,16 @@ h2 {
text-decoration:none; text-decoration:none;
cursor:pointer; cursor:pointer;
} }
#comments .viewmode-active{
background:#EAEAEA; .post__content--more:after {
}
a.read_more:after{
content:' \f30b'; content:' \f30b';
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
font-weight: 900; font-weight: 900;
} }
a.read_more{ .post__content--more {
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: inline-block; 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{ #trackbacks{
padding:3em 0 1.5em 0; padding:3em 0 1.5em 0;
} }
@ -357,16 +278,6 @@ a.cc-license{
padding-right:10px; 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{ .geshi{
font-size:13px!important; font-size:13px!important;
font-family: monospace; font-family: monospace;
@ -380,29 +291,30 @@ a.cc-license{
/* /*
Global Blog Footer Global Blog Footer
*/ */
#footer { .footer {
position: absolute; position: absolute;
bottom: 0px; bottom: -7.6em;
width: 100%; width: 100%;
background: #2F333E; background: #2F333E;
color: #FFFFFF; color: #FFFFFF;
padding:10px 0; padding: 1em 0;
} }
#footer div{ .footer__block {
line-height:30px; line-height:30px;
} }
#footer a{ .footer__btn--link {
color:#FFA31E; color:#FFA31E;
text-decoration:underline; text-decoration:underline;
} }
#footer a:hover{ .footer__btn--link:hover{
background:#FFA31E; background:#FFA31E;
color:#000000; color:#000000;
text-decoration:none; text-decoration:none;
} }
#footer .quickmenu-icon{ .footer__btn {
margin:0 10px 0 0; margin:0 10px 0 0;
} }
/* page navigation */ /* page navigation */
#pagenav{ #pagenav{
margin-top:1em; 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), @media all and (max-device-width: 900px),
all and (max-width: 900px){ all and (max-width: 900px){
.container-centered{ .container-centered{
@ -623,10 +385,10 @@ all and (max-width: 900px){
header.main nav.default { header.main nav.default {
display: none; display: none;
} }
header.main div.mobile { .site-nav__mobile {
display: block; display: block;
} }
header.main .banner { .site-header__banner{
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
} }