/* Theme Name: MichelvonBoch v1 Theme URI: https://www.michaelkaser.com Description: MichelvonBoch Wordpress theme based on Starkers by David Rooney, Elliot Jay Stocks & Keir Whitaker Version: 0.1 Author: Michael Kaser Author URI: https://www.michaelkaser.com Tags: starkers, naked, clean, responsive */ /* =========================== CONTENTS: 01 Reset 02 Sensible defaults 03 Typography 04 Forms 05 Mein Part!!!! 06 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Reset ---------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* Included here rather than seperate stylesheet to reduce server calls */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight:normal; } a { color:blue; } a:focus { outline: thin dotted; } li { list-style:none; } abbr[title] { border-bottom:none; } b, strong { font-weight: 700; } i, em, dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } label { cursor: pointer; } input, select, textarea { font-size: 100%; margin: 0; } button, input { line-height: normal; *overflow: visible; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ---------------------------------------------------------------------------------------------------------- 02 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 03 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ /* overpass-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Overpass'; font-style: normal; font-weight: 400; src: url('./fonts/overpass-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* overpass-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Overpass'; font-style: normal; font-weight: 600; src: url('./fonts/overpass-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* overpass-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Overpass'; font-style: normal; font-weight: 700; src: url('./fonts/overpass-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ font-family: "Overpass", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 0.875rem; line-height: 1.5; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } /* ---------------------------------------------------------------------------------------------------------- 04 Forms ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ button, html input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; background: #e6e6e6; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); color: rgba(0,0,0,.8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 0.75rem; line-height: 1; padding: 0.4em 1.4em 0.5em; text-shadow: 0 1px 0 rgba(255,255,255,.8); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa #bbb; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); } input[type=text], input[type=email], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; resize: vertical; } input[type=text]:focus, input[type=email]:focus, textarea:focus { color: #111; } input[type=text], input[type=email] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } /* ---------------------------------------------------------------------------------------------------------- 05 Hier kommt eindlich mein Part!!!!!!!!! ------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ body, html { padding: 0; margin: 0; background: #000; font-family: 'Overpass', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1em; } .container { display: flex; flex-direction: column; min-height: 100vh; } .container-item--content {flex: 1; max-width: 1200px; margin: 0 auto;} /* Silbentrennung im Lauftext */ p { /* -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: auto; orphans: 3; widows: 3; */ color: #fff; } a { text-decoration: none; color: #000; opacity: 1; filter: alpha(opacity=100); transition: opacity 0.6s; -moz-transition: opacity 0.6s; -webkit-transition: opacity 0.6s; -o-transition: opacity 0.6s; } a:hover { opacity: .5; filter: alpha(opacity=50); transition: opacity 0.6s; -moz-transition: opacity 0.6s; -webkit-transition: opacity 0.6s; -o-transition: opacity 0.6s; } .image {padding: 2.5% 0;} img, .img {width: 100%; height: auto;} .header, .footer {background: #fff; width: 100%;} .header { padding: 2em 0 1em 0; } .header .logo, .header .sublogo { text-align: center; } .logo a { color: #fff; font-size: 2em; font-weight: 600; line-height: 1em; -webkit-text-stroke: 2px black; opacity: 1; transition: opacity 0.6s; -moz-transition: opacity 0.6s; /* Firefox 4 */ -webkit-transition: opacity 0.6s; /* Safari and Chrome */ -o-transition: opacity 0.6s; /* Opera */ } .logo a:hover { opacity: 0.7; filter:alpha(opacity=70); transition: opacity 0.6s; -moz-transition: opacity 0.6s; /* Firefox 4 */ -webkit-transition: opacity 0.6s; /* Safari and Chrome */ -o-transition: opacity 0.6s; /* Opera */ } .sublogo {font-size: 1.25em;} h2 { font-size: 2em; line-height: 1.25em; margin: 30px auto 16px; color: #fff; text-align: center; } .page h2 {margin-bottom: 32px;} .wp-block-columns {margin: 0 16px;} .wp-block-columns.is-layout-flex {gap: 4px;} .wp-block-image {margin-bottom: 16px;} figcaption a { font-size: 1.5em; text-align: center; color: #fff; text-shadow: 3px 3px 2px rgba(0,0,0,0.6); display: block; position: absolute; margin: 0 auto; width: 100%; bottom: 4%; padding: 48% 0; } figcaption a { opacity: 0; filter:alpha(opacity=0); transition: opacity 0.6s; -moz-transition: opacity 0.6s; /* Firefox 4 */ -webkit-transition: opacity 0.6s; /* Safari and Chrome */ -o-transition: opacity 0.6s; /* Opera */ } figcaption a:hover { opacity: 1; filter:alpha(opacity=1); transition: opacity 0.6s; -moz-transition: opacity 0.6s; /* Firefox 4 */ -webkit-transition: opacity 0.6s; /* Safari and Chrome */ -o-transition: opacity 0.6s; /* Opera */ } figcaption.wp-element-caption {color: #fff;} .container-item--content {padding-bottom: 2em;} blockquote {margin: 4em 0;} blockquote p {font-size: 1.5em; line-height: 1.25;} blockquote cite {color: #fff; font-size: 1.5em; line-height: 1.25; margin: 1em 4em 0;} p {font-size: 1em; line-height: 1.25; margin-left: 1em; margin-right: 1em; margin-bottom: 1em;} h3, h4 { font-size: 1.25em; line-height: 1.25em; margin: 0 1em; color: #fff; } h4 {margin-bottom: 0.5em; } .wp-block-list {color: #fff; margin-left: 1em; margin-right: 1em; margin-bottom: 1.5em;} .wp-block-list li {margin-left: 1.5em; list-style: outside "- ";} p a {color: #999;} .back-to-galleries { text-align: center; margin-top: 1em; } .back-to-galleries a svg {fill: #fff;} /* PROJECTS */ .pt-cv-title a {text-align: left; margin-top: 1.25em;} .pt-cv-title a {color: #fff; font-size: 20px !important; line-height: 1.25em; margin-left: 4%; margin-right: 4%;} .pt-cv-content {color: #fff; font-size: 16px !important; line-height: 1.25em; margin-left: 4%; margin-right: 4%;} .pt-cv-content { hyphens: auto; -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: auto; orphans: 3; widows: 3; } .pt-cv-content a {color: #999;} .footer-content { text-align: right; font-size: 1em; line-height: 1.5em; padding: 1.5em 5% 0 0; } .footer-legalstuff { text-align: right; font-size: 1em; line-height: 1.5em; padding: 1.5em 5%; } /* .footer-instagram a span {display: none;} .footer-instagram a { display: block; width: 20px; height: 20px; background: url(img/instagram-logo-black.png) 0 0 no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; border-bottom: 0 none; opacity: 1; } */ /* ---------------------------------------------------------------------------------------------------------- 06 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .logo {font-size: 1.5em;} .sublogo {font-size: 1.5em;} .image {padding: 2.5% 5%;} .wp-block-columns.is-layout-flex {gap: 16px;} } @media only screen and (min-width: 1200px) { .pt-cv-content, p {font-size: 1.25em; line-height: 1.25;} /* h3, h4 {margin-left: 4em; margin-right: 4em;} */ .wp-block-list {font-size: 1.25em; line-height: 1.25;} .wp-block-list li {margin-left: 2.5em;} .footer-content {float: right; text-align: right;} .footer-content div {float: left; text-align: right;} .footer-email::before, .footer-address-de::before, .footer-address-at::before {content: '//'; padding: 0 1em;} .footer-legalstuff {float: right; Text-align: right;} .footer-legalstuff div {float: left; text-align: right; padding-left: 1em;} } @media only screen and (min-width: 1400px) { .footer-legalstuff {float: left; Text-align: left; padding: 1.5em 0 1.5em 5%;} .footer-legalstuff div {float: left; text-align: left; padding-right: 1em; padding-left: 0;} } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } }