1
0
Fork 0

[CSS, SITE] migrate to bootstrap v4-beta

This commit is contained in:
Jannik Beyerstedt 2017-08-19 01:35:03 +02:00
parent f30049a8ac
commit a59227a733
31 changed files with 129 additions and 89 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

View file

@ -1,3 +1,3 @@
body{margin:0;font-family:'Alegreya Sans', "Verdana", "Arial", sans-serif;min-width:300px;overflow-x:hidden}div.site-wrap{background-color:#fff}h1,h2,h3,h4{margin-bottom:18px;margin-top:1em;font-family:'Crimson Text', serif}main h1:first-child,main div.container:first-child{margin-top:0}h5{margin-bottom:8px}h6{margin-bottom:5px}p{margin-top:0;line-height:1.5em}a{color:#2dac01}a:active,a:hover,a:focus{color:#207901}main p a{text-decoration:underline}main p a:visited{color:#999}blockquote{font-size:1.4em;border-left:4px solid #dddddd;padding:0 15px;color:#777777}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{padding:0 5px;white-space:nowrap;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px}pre{background-color:#f8f8f8;border:1px solid #cccccc;font-size:14px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}pre code{margin:0;padding:0;white-space:pre;border:none;background:transparent}main div.container{margin-top:10px}@media (min-width: 992px){main div.container{max-width:940px}}header img{width:75px;height:75px;margin:4px 0;float:left}.nav-trigger{display:none}nav{box-sizing:border-box}nav ul.nav{margin:0;padding-left:0}nav ul.nav a{text-decoration:none;color:inherit}nav ul.nav li{list-style-type:none}nav ul.nav a:hover,nav ul.nav a:focus{text-decoration:none}@media (min-width: 576px){nav{float:right}nav ul.nav a{float:left;text-align:center;font-size:18px;font-weight:300;margin:30px 7px 1px}nav ul.nav a:hover,nav ul.nav a:focus,nav ul.nav a.active{border-bottom:1px solid #2dac01}nav ul.nav a.section{font-weight:500}}@media (min-width: 768px){nav ul.nav a{margin:30px 9px 1px}}nav.mobile{width:200px;height:100%;position:fixed;right:-200px;z-index:0}.site-wrap{position:relative;left:0;z-index:1}@media (max-width: 575px){label[for="nav-trigger"]{position:absolute;right:15px;top:24px;z-index:2;padding:0.5rem 0.75rem;font-size:1.25rem;line-height:1;font-family:inherit;font-weight:300;color:#373a3c;background-color:#fff}nav.mobile{background-color:#424242}nav.mobile ul.mobileNav{color:#fff;padding:1rem 1rem;padding-top:28px}nav.mobile ul.mobileNav li{margin-bottom:0.4em}nav.mobile ul.mobileNav li a{font-size:20px;font-weight:300}nav.mobile ul.mobileNav li a.active{color:#2dac01;font-weight:700}nav.mobile ul.mobileNav ul>li{margin-bottom:0.2em}.nav-trigger:checked+label{right:215px}.nav-trigger:checked ~ .site-wrap{left:-200px;box-shadow:0 0 5px 5px rgba(0,0,0,0.5)}.nav-trigger:checked ~ nav.mobile{right:0}.nav-trigger+label,nav.mobile{transition:right 0.2s;-webkit-transition:right 0.2s;-moz-transition:right 0.2s;-o-transition:right 0.2s}.site-wrap{transition:left 0.2s;-webkit-transition:left 0.2s;-moz-transition:left 0.2s;-o-transition:left 0.2s}}footer{margin-top:25px;padding-top:15px;padding-bottom:10px;height:70px;min-width:inherit;background-color:#bebebe;color:#000}footer p{margin-bottom:0}@media (max-width: 575px){footer{text-align:center}footer p{margin-bottom:10px}}footer i.fa{color:#000;font-size:1.4rem;padding-right:0.2em}footer a>svg{height:1.4rem;width:1.4rem;position:relative;top:0.18rem}footer a>svg image{height:1.4rem;width:1.4rem}footer img{height:1.4rem;padding-right:0.2em}@media (max-width: 575px){footer{height:175px}}@media (min-width: 576px){main{min-height:calc(100vh - 83px - 70px - 25px)}}@media (max-width: 575px){main{min-height:calc(100vh - 83px - 25px)}}.right{text-align:right}.center{text-align:center}@media (max-width: 575px){.col-xxs-12.right,.col-xxs-12.center{text-align:inherit}}.visible-xxs{display:none !important}@media (max-width: 575px){.col-xxs-12{float:none;width:100%;position:relative;left:0;right:0;min-height:1px;padding-right:15px;padding-left:15px}.hidden-xxs{display:none !important}.visible-xxs{display:block !important}}.html5player{width:100%;height:auto;background-color:black}div.video-container{position:relative;width:100%;height:auto;max-width:100%;padding-bottom:53%;padding-top:30px;overflow:hidden}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.columns ul{padding-left:25px} body{margin:0;font-family:'Alegreya Sans', "Verdana", "Arial", sans-serif;min-width:300px;overflow-x:hidden}div.site-wrap{background-color:#fff}h1,h2,h3,h4{margin-bottom:18px;margin-top:1em;font-family:'Crimson Text', serif}main h1:first-child,main div.container:first-child{margin-top:0}h5{margin-bottom:8px}h6{margin-bottom:5px}p{margin-top:0;line-height:1.5em}a{color:#2dac01}a:active,a:hover,a:focus{color:#207901}main p a{text-decoration:underline}main p a:visited{color:#999}blockquote{font-size:1.4em;border-left:4px solid #dddddd;padding:0 15px;color:#777777}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{padding:0 5px;white-space:nowrap;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px}pre{background-color:#f8f8f8;border:1px solid #cccccc;font-size:14px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}pre code{margin:0;padding:0;white-space:pre;border:none;background:transparent}main div.container{margin-top:10px}@media (min-width: 992px){main div.container{max-width:940px}}header a{display:inline-block}header img{width:75px;height:75px;margin-top:4px;float:left}.nav-trigger{display:none}nav{box-sizing:border-box}nav ul.nav{margin:0;padding-left:0}nav ul.nav a{text-decoration:none;color:inherit}nav ul.nav li{list-style-type:none}nav ul.nav a:hover,nav ul.nav a:focus{text-decoration:none}@media (min-width: 576px){nav{float:right}nav ul.nav a{float:left;text-align:center;font-size:18px;font-weight:300;margin:30px 7px 1px}nav ul.nav a:hover,nav ul.nav a:focus,nav ul.nav a.active{border-bottom:1px solid #2dac01}nav ul.nav a.section{font-weight:500}}@media (min-width: 768px){nav ul.nav a{margin:30px 9px 1px}}nav.mobile{width:200px;height:100%;position:fixed;right:-200px;z-index:0}.site-wrap{position:relative;left:0;z-index:1}@media (max-width: 575px){label[for="nav-trigger"]{position:absolute;right:15px;top:24px;z-index:2;padding:.5rem .75rem;font-size:1.25rem;line-height:1;font-family:inherit;font-weight:300;color:#373a3c;background-color:#fff}nav.mobile{background-color:#424242}nav.mobile ul.mobileNav{color:#fff;padding:1rem 1rem;padding-top:28px}nav.mobile ul.mobileNav li{margin-bottom:0.4em}nav.mobile ul.mobileNav li a{font-size:20px;font-weight:300}nav.mobile ul.mobileNav li a.active{color:#2dac01;font-weight:700}nav.mobile ul.mobileNav ul>li{margin-bottom:0.2em}.nav-trigger:checked+label{right:215px}.nav-trigger:checked ~ .site-wrap{left:-200px;box-shadow:0 0 5px 5px rgba(0,0,0,0.5)}.nav-trigger:checked ~ nav.mobile{right:0}.nav-trigger+label,nav.mobile{transition:right 0.2s;-webkit-transition:right 0.2s;-moz-transition:right 0.2s;-o-transition:right 0.2s}.site-wrap{transition:left 0.2s;-webkit-transition:left 0.2s;-moz-transition:left 0.2s;-o-transition:left 0.2s}}footer{margin-top:25px;padding-top:15px;padding-bottom:10px;height:70px;min-width:inherit;background-color:#bebebe;color:#000}footer p{margin-bottom:0}@media (max-width: 575px){footer{text-align:center}footer p{margin-bottom:10px}}footer i.fa{color:#000;font-size:1.4rem;padding-right:0.2em}footer a>svg{height:1.4rem;width:1.4rem;position:relative;top:0.18rem}footer a>svg image{height:1.4rem;width:1.4rem}footer img{height:1.4rem;padding-right:0.2em}@media (max-width: 575px){footer{height:175px}}@media (min-width: 576px){main{min-height:calc(100vh - 87px - 70px - 25px)}}@media (max-width: 575px){main{min-height:calc(100vh - 87px - 25px)}}.columns{margin-right:-15px;margin-left:-15px}.columns:before{display:table;content:" "}.columns:after{clear:both;display:table;content:" "}.column{padding-right:15px;padding-left:15px;display:block;float:left;position:relative;min-height:1px}.columns-1 .column{width:100%}.columns-2 .column{width:50%}@media (max-width: 600px){.columns-2 .column{width:100%}}.columns-3 .column{width:33.33%}@media (max-width: 600px){.columns-3 .column{width:100%}}.columns-4 .column{width:25%}@media (max-width: 1200px){.columns-4 .column{width:50%}}@media (max-width: 600px){.columns-4 .column{width:100%}}.columns-5 .column{width:20%}.visible-xxs{display:none !important}@media (max-width: 575px){.col-xxs-12{float:none;width:100%;position:relative;left:0;right:0;min-height:1px;padding-right:15px;padding-left:15px}.hidden-xxs{display:none !important}.visible-xxs{display:block !important}}.html5player{width:100%;height:auto;background-color:black}div.video-container{position:relative;width:100%;height:auto;max-width:100%;padding-bottom:53%;padding-top:30px;overflow:hidden}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.columns ul{padding-left:25px}
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */

Binary file not shown.

Binary file not shown.

View file

@ -1,3 +1,3 @@
body{color:#fff}div.site-wrap{background-color:#424242}a{color:#34c501}a:active,a:hover{color:#41f801}main p a:visited{color:#ccc}@media (min-width: 576px){nav ul.nav{color:#fff}nav ul.nav a.section:hover,nav ul.nav a.section:focus{border:none}}@media (max-width: 575px){label[for="nav-trigger"]{color:#fff;background-color:#424242}}footer{background-color:#303030;color:#e6e6e6}div.carousel{max-width:1300px;margin:0 auto}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:0.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:0.5rem;line-height:1}.figure-caption{font-size:90%;color:#636c72}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;width:100%}@media (-webkit-transform-3d){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}@supports (transform: translate3d(0, 0, 0)){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}@media (-webkit-transform-3d){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}@supports (transform: translate3d(0, 0, 0)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;width:15%;color:#fff;text-align:center;opacity:0.5}.carousel-control-prev:focus,.carousel-control-prev:hover,.carousel-control-next:focus,.carousel-control-next:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{position:absolute;top:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{left:50%;margin-left:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{right:50%;margin-right:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;padding-left:0;margin-right:15%;margin-left:15%;text-align:center;list-style:none}.carousel-indicators li{position:relative;display:inline-block;width:30px;height:3px;text-indent:-999px;cursor:pointer;background-color:rgba(255,255,255,0.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.carousel-inner>.carousel-item>img{width:100%} body{color:#fff}div.site-wrap{background-color:#424242}a{color:#34c501}a:active,a:hover{color:#41f801}main p a:visited{color:#ccc}@media (min-width: 576px){nav ul.nav{color:#fff}nav ul.nav a.section:hover,nav ul.nav a.section:focus{border:none}}@media (max-width: 575px){label[for="nav-trigger"]{color:#fff;background-color:#424242}}footer{background-color:#303030;color:#e6e6e6}div.carousel{max-width:1300px;margin:0 auto}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#868e96}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;align-items:center;width:100%;transition:transform 0.6s ease;backface-visibility:hidden;perspective:1000px}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translateX(0)}@supports (transform-style: preserve-3d){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}}.carousel-item-next,.active.carousel-item-right{transform:translateX(100%)}@supports (transform-style: preserve-3d){.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}}.carousel-item-prev,.active.carousel-item-left{transform:translateX(-100%)}@supports (transform-style: preserve-3d){.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-prev:focus,.carousel-control-prev:hover,.carousel-control-next:focus,.carousel-control-next:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:rgba(255,255,255,0.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.carousel-inner>.carousel-item>img{width:100%}
/*# sourceMappingURL=photo.css.map */ /*# sourceMappingURL=photo.css.map */

Binary file not shown.

View file

@ -1,3 +1,3 @@
.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:0.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:0.5rem;line-height:1}.figure-caption{font-size:90%;color:#636c72} .img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#868e96}
/*# sourceMappingURL=project.css.map */ /*# sourceMappingURL=project.css.map */

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,3 @@
main.webdesign .container{margin-top:30px}.featurette h2{font-family:inherit;margin-top:10px}@media (max-width: 767px){.featurette img{margin-top:50px}}@media (max-width: 575px){.featurette img{margin:0 auto;max-height:200px}}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:0.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:0.5rem;line-height:1}.figure-caption{font-size:90%;color:#636c72} main.webdesign .container{margin-top:30px}.featurette h2{font-family:inherit;margin-top:10px}@media (max-width: 767px){.featurette img{margin-top:50px}}@media (max-width: 575px){.featurette img{margin:0 auto;max-height:200px}}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#868e96}
/*# sourceMappingURL=webdesign.css.map */ /*# sourceMappingURL=webdesign.css.map */

View file

@ -1,3 +1,7 @@
@import "functions";
@import "variables";
@import "mixins";
$color_font: #000; $color_font: #000;
$color_bg: #fff; $color_bg: #fff;
$color_base: #1779ff; $color_base: #1779ff;

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "mainvariables"; @import "mainvariables";
$blog_color_meta: #a6a6a6; $blog_color_meta: #a6a6a6;

View file

@ -1,18 +1,12 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* used parts of bootstrap * used parts of bootstrap
*/ */
@import "functions";
// Core variables and mixins
@import "custom";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
// Reset and dependencies
//@import "normalize";
@import "print"; @import "print";
@import "reboot";
// Core CSS
@import "reboot"; // needed for correct grid behaviour
@import "type"; @import "type";
//@import "images"; //@import "images";
//@import "code"; //@import "code";
@ -20,9 +14,7 @@
//@import "tables"; //@import "tables";
//@import "forms"; //@import "forms";
@import "buttons"; @import "buttons";
//@import "transitions";
// Components
//@import "animation";
//@import "dropdown"; //@import "dropdown";
//@import "button-group"; //@import "button-group";
//@import "input-group"; //@import "input-group";
@ -32,20 +24,31 @@
//@import "card"; //@import "card";
//@import "breadcrumb"; //@import "breadcrumb";
//@import "pagination"; //@import "pagination";
//@import "tags"; //@import "badge";
//@import "jumbotron"; //@import "jumbotron";
//@import "alert"; //@import "alert";
//@import "progress"; //@import "progress";
//@import "media"; //@import "media";
//@import "list-group"; //@import "list-group";
//@import "responsive-embed";
//@import "close"; //@import "close";
// Components w/ JavaScript
//@import "modal"; //@import "modal";
//@import "tooltip"; //@import "tooltip";
//@import "popover"; //@import "popover";
//@import "carousel"; //@import "carousel";
// Utility classes // utilities
@import "utilities"; @import "utilities";
//@import "utilities/align";
//@import "utilities/background";
//@import "utilities/borders";
//@import "utilities/clearfix";
//@import "utilities/display";
//@import "utilities/embed";
//@import "utilities/flex";
//@import "utilities/float";
//@import "utilities/position";
//@import "utilities/screenreaders";
//@import "utilities/sizing";
//@import "utilities/spacing";
//@import "utilities/text";
//@import "utilities/visibility";

View file

@ -5,10 +5,6 @@
* headings: Crimson Text * headings: Crimson Text
* Logo: Boon * Logo: Boon
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "mainvariables"; @import "mainvariables";
body { body {
@ -99,10 +95,13 @@ main div.container {
$header_logoSize: 75px; $header_logoSize: 75px;
$header_logoPadg: 4px; $header_logoPadg: 4px;
header { header {
a {
display: inline-block;
}
img { img {
width: $header_logoSize; width: $header_logoSize;
height: $header_logoSize; height: $header_logoSize;
margin: $header_logoPadg 0; margin-top: $header_logoPadg;
float: left; float: left;
} }
@ -289,7 +288,7 @@ footer {
} }
/* space footer at bottom of page */ /* space footer at bottom of page */
$header_height: 2*$header_logoPadg + $header_logoSize; $header_height: 2*$header_logoPadg + $header_logoSize + 4px; // + weird "padding" added to inline-block elements
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
main { main {
min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin}); min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin});
@ -303,20 +302,68 @@ $header_height: 2*$header_logoPadg + $header_logoSize;
/* /*
* HELPERS * PLUGINS AND OTHER MODULES
*/ */
.right {
text-align: right; /*
} * KIRBY PLUGIN columns by Bastians Allgeier
.center { */
text-align: center; $cols-breakdown-width: 600px;
} $cols-pad: 15px;
@media (max-width: $col_xxs_bp) { .columns {
.col-xxs-12.right, .col-xxs-12.center { margin-right: -$cols-pad;
text-align: inherit; margin-left: -$cols-pad;
&:before {
display: table;
content: " ";
}
&:after {
clear: both;
display: table;
content: " ";
} }
} }
.column {
padding-right: $cols-pad;
padding-left: $cols-pad;
display: block;
float: left;
position: relative;
min-height: 1px;
}
.columns-1 .column {
width: 100%;
}
.columns-2 .column {
width: 50%;
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-3 .column {
width: 33.33%;
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-4 .column {
width: 25%;
@media(max-width: $cols-breakdown-width*2) {
width: 50%;
}
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-5 .column {
width: 20%;
}
/* to break down col-xs */ /* to break down col-xs */
.visible-xxs { .visible-xxs {

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables"; @import "../mainvariables";
main { main {

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables"; @import "../mainvariables";
// change main.scss behavior - inverted color style // change main.scss behavior - inverted color style
@ -65,7 +61,7 @@ div.carousel {
// ---- from boostrap ---- // ---- from boostrap ----
@import "images"; @import "images";
// @requires animation.scss (already in main.scss) and carousel.js, util.js // @requires carousel.js, util.js
@import "carousel"; @import "carousel";
// fix responsiveness // fix responsiveness

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables"; @import "../mainvariables";
// change main.scss behavior // change main.scss behavior

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables"; @import "../mainvariables";
// change main.scss behavior // change main.scss behavior
@ -20,7 +16,10 @@ main.projects {
} }
} }
.card a { .card {
margin-bottom: 30px;
a {
color: $color_font; color: $color_font;
&:active, &:hover { &:active, &:hover {
color: $color_font; color: $color_font;
@ -32,6 +31,7 @@ main.projects {
text-decoration: underline; text-decoration: underline;
} }
} }
}
} }

View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables"; @import "../mainvariables";
// change main.scss behavior // change main.scss behavior

@ -1 +1 @@
Subproject commit 3c12d73203bad27edcaa1072e263fdab2a2c14f7 Subproject commit 41bcab6900bc23e82fb2172b4d50edf9a598c5ef

View file

@ -1,6 +1,6 @@
<?php <?php
if(!function_exists('panel')) { if(!function_exists('panel')) {
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-nRfqpuKWNuYyUAFPTr6WVNZk9' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://www.youtube-nocookie.com; script-src 'self' 'unsafe-eval' 'nonce-nRfqpuKWNuYyUAFPTr6WVNZk9' 'unsafe-inline' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' https://jannikb.aquila.uberspace.de/piwik/"); header("Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-nRfqpuKWNuYyUAFPTr6WVNZk9' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://www.youtube-nocookie.com; script-src 'self' 'unsafe-eval' 'nonce-nRfqpuKWNuYyUAFPTr6WVNZk9' 'unsafe-inline' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' data: https://jannikb.aquila.uberspace.de/piwik/");
} }
//header("X-Content-Type-Options: nosniff"); // enabled at server-side //header("X-Content-Type-Options: nosniff"); // enabled at server-side
//header("X-Frame-Options: deny"); // enabled at server-side //header("X-Frame-Options: deny"); // enabled at server-side
@ -45,8 +45,8 @@ c::set('plg_masonry.dir', 'asc'); // sortBy direction: asc, desc
c::set('plg_masonry.lightbox', 'swipebox'); c::set('plg_masonry.lightbox', 'swipebox');
// bastians columns.php plugin from https://github.com/getkirby/plugins/tree/master/columns // bastians columns.php plugin from https://github.com/getkirby/plugins/tree/master/columns
c::set('columns.container', 'row'); //c::set('columns.container', 'row');
c::set('columns.item', 'col-sm-6 columns'); //c::set('columns.item', 'col-sm-6 columns');
// enhanced sitemap by Jannik Beyerstedt: // enhanced sitemap by Jannik Beyerstedt:
c::set('smap_ignoreSite', array('sitemap', 'error', 'home', 'qr', 'secret', 'test')); c::set('smap_ignoreSite', array('sitemap', 'error', 'home', 'qr', 'secret', 'test'));

View file

@ -9,15 +9,15 @@
<footer class="section"> <footer class="section">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-4 col-xxs-12"> <div class="col-sm-4 col-12">
<?php echo $site->footer_left()->kirbytext(); ?> <?php echo $site->footer_left()->kirbytext(); ?>
</div> </div>
<div class="col-4 col-xxs-12 center"> <div class="col-sm-4 col-12 text-sm-center">
<?php echo $site->footer_center()->kirbytext(); ?> <?php echo $site->footer_center()->kirbytext(); ?>
</div> </div>
<div class="col-4 col-xxs-12 right"> <div class="col-sm-4 col-12 text-sm-right">
<a href="https://github.com/jbeyerstedt"><img src="<?php echo $site->url()?>/assets/images/githubicon.png" alt="github icon"></a> <a href="https://github.com/jbeyerstedt"><img src="<?php echo $site->url()?>/assets/images/githubicon.png" alt="github icon"></a>
<img src="<?php echo $site->url()?>/assets/images/html5icon.png" alt="html5 icon"> <img src="<?php echo $site->url()?>/assets/images/html5icon.png" alt="html5 icon">
<img src="<?php echo $site->url()?>/assets/images/css3icon.png" alt="css3 icon"> <img src="<?php echo $site->url()?>/assets/images/css3icon.png" alt="css3 icon">

View file

@ -21,7 +21,7 @@ if ($page->depth() == 1) {
?> ?>
<input type="checkbox" id="nav-trigger" class="nav-trigger" /> <input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label class="hidden-sm-up" for="nav-trigger">Menü</label> <label class="d-sm-none" for="nav-trigger">Menü</label>
<nav class="mobile"> <nav class="mobile">
<ul class="nav mobileNav"> <ul class="nav mobileNav">
@ -50,7 +50,7 @@ if ($page->depth() == 1) {
<?php endif; ?> <?php endif; ?>
<nav aria-hidden="true"> <nav aria-hidden="true">
<ul class="nav hidden-xs-down"> <ul class="nav d-none d-sm-block">
<?php if(!$subnav) : ?> <?php if(!$subnav) : ?>
<?php foreach ($site->children()->visible() as $p) : ?> <?php foreach ($site->children()->visible() as $p) : ?>
<a href="<?php echo $p->url()?>" <?php echo ($page == $p || $page->parent() == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a> <a href="<?php echo $p->url()?>" <?php echo ($page == $p || $page->parent() == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>

View file

@ -26,9 +26,9 @@ if( $page->isHomePage() ) {
<meta name="robots" content="<?php echo $page->meta_robots()->html() ?>"> <meta name="robots" content="<?php echo $page->meta_robots()->html() ?>">
<?php endif; ?> <?php endif; ?>
<?php echo css('assets/css/foundation.css') ?> <?php echo css('assets/css/foundation.css?v2') ?>
<?php echo css('assets/css/main.css') ?> <?php echo css('assets/css/main.css?v2') ?>
<?php echo css('@auto') ?> <?php echo css('@auto') ?>

View file

@ -49,8 +49,14 @@ if (!(false==$carouselFolder) && ($carouselFolder->hasImages())) : echo $preNorm
</div> </div>
<?php endforeach ?> <?php endforeach ?>
</div> </div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> </div>
<?php else : echo $preAlt ?> <?php else : echo $preAlt ?>

View file

@ -25,7 +25,7 @@ snippet('base/cont-header');
<?php if ($img = $c->images()->find($c->exrpt_img())) { <?php if ($img = $c->images()->find($c->exrpt_img())) {
echo ThumbExt($img, ['width'=>400,'quality'=>70,'class'=>"card-img-top",'inline-size'=>false]); echo ThumbExt($img, ['width'=>400,'quality'=>70,'class'=>"card-img-top",'inline-size'=>false]);
} ?> } ?>
<div class="card-block"> <div class="card-body">
<h5 class="card-title"><?php echo $c->title()->html(); ?></h5> <h5 class="card-title"><?php echo $c->title()->html(); ?></h5>
<p class="card-text"><?php echo $c->exrpt_text()->kirbytext(); ?></p> <p class="card-text"><?php echo $c->exrpt_text()->kirbytext(); ?></p>
<a href="<?php echo $c->url(); ?>" class="card-link">mehr</a> <a href="<?php echo $c->url(); ?>" class="card-link">mehr</a>
@ -33,8 +33,8 @@ snippet('base/cont-header');
</a> </a>
</div></div> </div></div>
<?php <?php
echo ($i%2 == 0)?'<div class="clearfix hidden-lg-up"></div>':''; echo ($i%2 == 0)?'<div class="clearfix d-block d-lg-none"></div>':'';
echo ($i%4 == 0)?'<div class="clearfix hidden-md-down"></div>':'' echo ($i%4 == 0)?'<div class="clearfix d-none d-lg-block"></div>':''
?> ?>
<?php endforeach; ?> <?php endforeach; ?>
</div></div> </div></div>

View file

@ -16,11 +16,11 @@ snippet('base/cont-header');
<div class="container"> <div class="container">
<div class="row featurette"> <div class="row featurette">
<div class="col-sm-9"> <div class="col-sm-9 col-12">
<h2 class="featurette-heading"><?php echo $page->featurette_headline()->html() ?></h2> <h2 class="featurette-heading"><?php echo $page->featurette_headline()->html() ?></h2>
<p class="lead"><?php echo $page->featurette_text()->kirbytextRaw() ?></p> <p class="lead"><?php echo $page->featurette_text()->kirbytextRaw() ?></p>
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3 col-12">
<?php if ($img = $page->images()->find($page->featurette_img())) { <?php if ($img = $page->images()->find($page->featurette_img())) {
echo ThumbExt($img, ['width'=>235,'quality'=>70,'class'=>"img-fluid rounded",'alt'=>"Portrait",'inline-size'=>false]); echo ThumbExt($img, ['width'=>235,'quality'=>70,'class'=>"img-fluid rounded",'alt'=>"Portrait",'inline-size'=>false]);
}?> }?>