diff --git a/static/css/custom.css b/static/css/custom.css index 6fe7ffd..a54d266 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -46,7 +46,10 @@ .index-wrapper { display: grid; grid-template-columns: repeat(10, 10% [col-start]); - grid-template-rows: repeat(6, 33% [row-start]); + grid-template-rows: 50% 50%; + grid-template-areas: + "content content content content content content recent recent recent recent" + "interests interests interests interests blog blog blog blog social social"; } .box { @@ -61,18 +64,15 @@ li.note-item { } .index-content { - grid-row: 1 / 2; - grid-column: 1 / span 6; + grid-area: content; } .index-social { - grid-row: 2 / 3; - grid-column: 9 / span 2; + grid-area: social; } .index-blog { - grid-row: 2 / 3; - grid-column: 5 / span 4; + grid-area: blog; } .index-banners { @@ -81,8 +81,7 @@ li.note-item { } .index-recent { - grid-row: 1 / 2; - grid-column: 7 / span 4; + grid-area: recent; } .index-bookmarks { @@ -90,30 +89,10 @@ li.note-item { grid-column: 6 / span 5; } -@media only screen and (max-width: 700px) { - .box { - grid-column: 1 / 6; - } - - .index-content { - grid-row: 1 / 2; - } - - - .index-recent { - grid-row: 2 / 3; - } - - .index-banners { - grid-row: 3 / 4; - } - - .index-social { - grid-row: 4 / 5; - } - - .index-blog { - grid-row: 5 / 6; +@media only screen and (max-width: 500px) { + .index-wrapper { + display: flex; + flex-flow: row wrap; } } diff --git a/themes/dreamcast/static/css/main.css b/themes/dreamcast/static/css/main.css index d8ea436..2f85a2c 100644 --- a/themes/dreamcast/static/css/main.css +++ b/themes/dreamcast/static/css/main.css @@ -257,7 +257,8 @@ nav li { transition: box-shadow 0.3s; } -nav li:hover { +nav li:hover, +nav li:active { animation: 0.2s ease-in 1 forwards spotlight; outline: 1px solid rgba(255, 255, 255, 0.2); background-clip: border-box;