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,24 +98,33 @@ nav
float: left float: left
width: 10em width: 10em
@media (max-width: 800px)
float: none
width: auto
text-align: center
a a
display: block color: #FFFFFF
border: 5px outset #AAAAAA;
background-color: #CCCCCC;
margin-bottom: 10px
padding: 2px 5px padding: 2px 5px
text-decoration: none
color: #000000
text-align: right
&.current-page &.current-page
border-style: inset
font-weight: bolder font-weight: bolder
text-decoration: none
&:hover, @media (min-width: 800px)
&:active, display: block
&:focus border: 5px outset #AAAAAA;
border-style: inset background-color: #CCCCCC;
margin-bottom: 10px
text-decoration: none
color: #000000
text-align: right
&.current-page,
&:hover,
&:active,
&:focus
border-style: inset
p p