add some mobile css

This commit is contained in:
Franzi 2021-08-15 09:32:40 +02:00
parent 3005181ed4
commit 63422d44fc
Signed by: kunsi
GPG key ID: 12E3D2136B818350
2 changed files with 29 additions and 14 deletions

View file

@ -5,6 +5,8 @@
<link rel="stylesheet" href="/css/style.css" type="text/css"> <link rel="stylesheet" href="/css/style.css" type="text/css">
{% feed_meta %} {% feed_meta %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head> </head>
<body> <body>
<a href="#content" id="skip-to-content">Skip to content</a> <a href="#content" id="skip-to-content">Skip to content</a>

View file

@ -33,7 +33,8 @@ h1
-webkit-text-fill-color: transparent -webkit-text-fill-color: transparent
-webkit-text-stroke: 2px #FFFFFF -webkit-text-stroke: 2px #FFFFFF
paint-order: stroke fill paint-order: stroke fill
font-size: 8em font-size: 6em
font-size: clamp(2em, 10vw, 8em)
margin-bottom: 30px margin-bottom: 30px
h2 h2
@ -45,7 +46,10 @@ h3
#content #content
margin: 20px 0 0 11em margin: 0 0 0 11em
@media (max-width: 800px)
margin: 5px
a a
text-decoration: underline text-decoration: underline
@ -94,20 +98,29 @@ nav
float: left float: left
width: 10em width: 10em
@media (max-width: 800px)
float: none
width: auto
text-align: center
a a
color: #FFFFFF
padding: 2px 5px
&.current-page
font-weight: bolder
text-decoration: none
@media (min-width: 800px)
display: block display: block
border: 5px outset #AAAAAA; border: 5px outset #AAAAAA;
background-color: #CCCCCC; background-color: #CCCCCC;
margin-bottom: 10px margin-bottom: 10px
padding: 2px 5px
text-decoration: none text-decoration: none
color: #000000 color: #000000
text-align: right text-align: right
&.current-page &.current-page,
border-style: inset
font-weight: bolder
&:hover, &:hover,
&:active, &:active,
&:focus &:focus