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">
{% feed_meta %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<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-stroke: 2px #FFFFFF
paint-order: stroke fill
font-size: 8em
font-size: 6em
font-size: clamp(2em, 10vw, 8em)
margin-bottom: 30px
h2
@ -45,7 +46,10 @@ h3
#content
margin: 20px 0 0 11em
margin: 0 0 0 11em
@media (max-width: 800px)
margin: 5px
a
text-decoration: underline
@ -94,20 +98,29 @@ nav
float: left
width: 10em
@media (max-width: 800px)
float: none
width: auto
text-align: center
a
color: #FFFFFF
padding: 2px 5px
&.current-page
font-weight: bolder
text-decoration: none
@media (min-width: 800px)
display: block
border: 5px outset #AAAAAA;
background-color: #CCCCCC;
margin-bottom: 10px
padding: 2px 5px
text-decoration: none
color: #000000
text-align: right
&.current-page
border-style: inset
font-weight: bolder
&.current-page,
&:hover,
&:active,
&:focus