Moved fotogrid code to its own file. Created subfolder for static css.
Markus Steinlein
4 years ago
committed by
Markus Steinlein
parent
012828c80e
commit
8bf2a86e5b
@ -0,0 +1,20 @@
|
||||
# Provide a simple responsive fotogrid using flex layout.
|
||||
# Depends on the css/fotogrid.css defined styles.
|
||||
def fotogrid(image_urls):
|
||||
result = '<div class="fotorow">'
|
||||
cols = 4
|
||||
images = divmod(len(image_urls), cols)
|
||||
images_per_col = images[0]
|
||||
if images[1] > 0:
|
||||
images_per_col += 1
|
||||
nbr = 0
|
||||
for img in image_urls:
|
||||
if (nbr % images_per_col) == 0:
|
||||
if nbr > 0:
|
||||
result += '</div>' # closing fotocolumn
|
||||
result += '<div class="fotocolumn">'
|
||||
result += '<img src="' + img + '" style="width:100%">'
|
||||
nbr += 1
|
||||
|
||||
result += "</div></div>" # closing fotocolum, fotorow
|
||||
return result
|
||||
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
.fotorow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Create four equal columns that sits next to each other */
|
||||
.fotocolumn {
|
||||
flex: 25%;
|
||||
max-width: 25%;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.fotocolumn img {
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Responsive layout - makes a two column-layout instead of four columns */
|
||||
@media (max-width: 1000px) {
|
||||
.fotocolumn {
|
||||
flex: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
||||
@media (max-width: 800px) {
|
||||
.fotocolumn {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,267 @@
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
text-size-adjust:100%
|
||||
background-attachment: fixed;
|
||||
background-color: #000000;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height:100vh
|
||||
}
|
||||
|
||||
main {
|
||||
display: block
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c11012;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
text-decoration:underline
|
||||
}
|
||||
|
||||
a strong {
|
||||
color:inherit
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .site-title {
|
||||
color: #313131;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin-bottom: .5rem;
|
||||
text-rendering:optimizeLegibility
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2rem
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-top:1rem
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 auto;
|
||||
padding:2rem
|
||||
}
|
||||
|
||||
#sidebar .site-title {
|
||||
font-family: 'Abril Fatface', serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
margin-bottom: .5rem;
|
||||
margin-top:0
|
||||
}
|
||||
|
||||
#sidebar nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar-nav-links {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #fff;
|
||||
color: #515151;
|
||||
padding:2rem
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction:column
|
||||
}
|
||||
|
||||
.container > .content {
|
||||
flex-grow: 1;
|
||||
padding-bottom:4rem
|
||||
}
|
||||
|
||||
.container > header {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
margin:-1.5rem 2rem 2rem
|
||||
}
|
||||
|
||||
.container > header h1, .container > header h2 {
|
||||
color:inherit
|
||||
}
|
||||
|
||||
.home #sidebar {
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.home #sidebar .site-title {
|
||||
font-size:3.25rem
|
||||
}
|
||||
|
||||
.home #sidebar header ~ nav {
|
||||
display:flex
|
||||
}
|
||||
|
||||
.home #sidebar > * :last-child {
|
||||
margin-bottom:0.5rem
|
||||
}
|
||||
|
||||
/*
|
||||
Styling for images meant to be embedded within blog post. Use it
|
||||
by append #illustration to image url in markdown like:
|
||||
|
||||
*/
|
||||
img[src $= "#illustration"] {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 8px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/*
|
||||
Display an external icon after each link that leads away from our site.
|
||||
*/
|
||||
.content a[href^="http://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):after,
|
||||
.content a[href^="https://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):after {
|
||||
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: "\f35d";
|
||||
display: inline-block;
|
||||
font: normal 16px/1 'Font Awesome 5 Free';
|
||||
margin-left: 4px;
|
||||
}
|
||||
/*
|
||||
Display an Youtube icon left of every youtube link.
|
||||
*/
|
||||
.content a[href^="http://youtu.be"]:before,
|
||||
.content a[href^="https://youtu.be"]:before,
|
||||
.content a[href^="http://youtube.com"]:before,
|
||||
.content a[href^="https://youtube.com"]:before {
|
||||
|
||||
font-family: "Font Awesome 5 Brands";
|
||||
content: "\f167";
|
||||
display: inline-block;
|
||||
font: normal 16px/1 'Font Awesome 5 Brands';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 49rem) {
|
||||
body {
|
||||
flex-direction: row;
|
||||
min-height: 100vh;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y:auto
|
||||
}
|
||||
|
||||
body > * {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y:auto
|
||||
}
|
||||
|
||||
#sidebar, .home #sidebar {
|
||||
text-align: left;
|
||||
width:18rem
|
||||
}
|
||||
|
||||
#sidebar > * :last-child, .home #sidebar > * :last-child {
|
||||
margin-bottom:0
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
left:0
|
||||
}
|
||||
|
||||
#sidebar .site-title {
|
||||
font-size:3.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sidebar .site-title .back-arrow {
|
||||
display:none
|
||||
}
|
||||
|
||||
#sidebar p.lead, #sidebar header ~ * {
|
||||
display:block
|
||||
}
|
||||
|
||||
#sidebar header ~ nav {
|
||||
display:flex
|
||||
}
|
||||
|
||||
.index #sidebar {
|
||||
margin-bottom:0
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
color: #515151;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 4rem 0;
|
||||
margin-left:18rem
|
||||
}
|
||||
|
||||
.container > header {
|
||||
color: #313131;
|
||||
margin:0
|
||||
}
|
||||
|
||||
.container > header h1, .container > header h2 {
|
||||
color:inherit
|
||||
}
|
||||
|
||||
.container > header h1:last-child, .container > header h2:last-child {
|
||||
margin-bottom:.5rem
|
||||
}
|
||||
|
||||
.container > * {
|
||||
max-width: 38rem;
|
||||
padding:0
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
color:#fff
|
||||
}
|
||||
|
||||
#sidebar a:hover, #sidebar a:focus {
|
||||
text-decoration:underline
|
||||
}
|
||||
|
||||
@media screen and (max-width: 783px) {
|
||||
.container > .content {
|
||||
padding:1.5rem
|
||||
}
|
||||
|
||||
#sidebar #sidebar-nav-links {
|
||||
flex-direction: row;
|
||||
justify-content:space-evenly
|
||||
}
|
||||
|
||||
#sidebar #sidebar-nav-links a {
|
||||
display: inline-block;
|
||||
margin:0 .5em
|
||||
}
|
||||
|
||||
.home.index #sidebar {
|
||||
padding: 1rem
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue